Note: do same without browser.tabs.closeButtons on Firefox 31+

Unfortunately Bug865826 remove browser.tabs.closeButtons pref ("Browser" -> "TabBrowsing" -> "Display a close button ..." in Configuration Mania). This removal would be captured in upcoming Firefox 31.

In this article, I describe how to do same without browser.tabs.closeButtons pref.

Use addons

No Close Buttons
- Only "Value=2: Display no close button" (as of version 0.1)
Classic Theme Restorer (Customize Australis)
- Only "Value=2: Display no close button" (as of version 1.1.8)

As of May 2014, there is no addon providing a close button at the end of the tab strip (Value=3).

Use `userChrome.css`

Value=0: Display a close button on the Active tab Only

@-moz-document url(chrome://browser/content/browser.xul) {
  .tab-close-button:not([selected]) {
    display: none;
  }
}

Value=1: Display close buttons on All tabs

Default. There is nothing to do.

Value=2: Display no close button

@-moz-document url(chrome://browser/content/browser.xul) {
  .tab-close-button {
    display: none;
  }
}

Value=3: Display a close button at the end of the tab strip (Firefox 1.x behavior)

The close button at the end of the tab strip has been removed in 1c2ef0d3d997. Therefore, some sorta addon would be needed.

For example, to get back the close button, add following user script using userChrome.js.

// ==UserScript==
// @name close_btn_end_tab_strip.uc.js
// @include main
// ==/UserScript==
(function () {
  var tabsCloseButton = document.createElement("toolbarbutton");
  tabsCloseButton.setAttribute("id", "tabs-closebutton");
  tabsCloseButton.setAttribute("class", "close-button tabs-closebutton close-icon");
  tabsCloseButton.setAttribute("command", "cmd_close");
  tabsCloseButton.setAttribute("label", "Close Tab");
  tabsCloseButton.setAttribute("cui-areatype", "toolbar");
  tabsCloseButton.setAttribute("tooltiptext", "Close Tab");

  var tabsToolbar = document.getElementById("TabsToolbar");
  tabsToolbar.appendChild(tabsCloseButton);
})();

(Note: To hide close buttons on tabs, the user CSS rule described in value=2 is also required.)

FYI: More customize!

Example 1. Display close button when the cursor hovers over the tab, even if tab width is smaller than browser.tabs.tabClipWidth.

@-moz-document url(chrome://browser/content/browser.xul) {
  tab:hover .tab-close-button {
    display: -moz-box ! important;
  }
  tab:not(:hover) .tab-close-button {
    display: none ! important;
  }
}

Example 2. Display close button when the cursor hovers near the tabbar, even if tab width is smaller than browser.tabs.tabClipWidth.

@-moz-document url(chrome://browser/content/browser.xul) {
  .tabbrowser-tabs[closebuttons="activetab"] .tab-close-button {
    display: -moz-box ! important;
  }
  tab:not(:hover) .tab-close-button {
    display: none ! important;
  }
}