Positioning Firefox’ Tab Close Buttons on the left

“I can’t stand how the close button for tabs is on the right. On the Mac, close goes on the left.”
— John Gruber (#)

Last night I whipped up a tad of CSS to position the tab close buttons in Firefox 4 (currently in Beta) on the left hand side of the tab. The CSS needs to be placed into your userChrome.css to make it work (the code was tested with Firefox 4.0b7).

/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* move favicon, throbber and text to the right so that the close button appears on the left */
.tabbrowser-tab .tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
}

.tabbrowser-tab .tab-throbber {
  -moz-box-ordinal-group: 2 !important;
}

.tabbrowser-tab .tab-label {
  -moz-box-ordinal-group: 3 !important;
}

/* hide close button initially */
.tabbrowser-tab .tab-close-button {
  display: none !important;
}

/* show close + hide throbber & favicon on hover */
.tabbrowser-tab:hover .tab-close-button {
  display: block !important;
}

.tabbrowser-tab:hover .tab-icon-image {
  display: none !important;
}

.tabbrowser-tab:hover .tab-throbber {
  display: none !important;
}

/* app tabs should not behave like regular tabs, so let them stay normal (viz. don't show close on hover) */
.tabbrowser-tab[pinned]:hover .tab-close-button {
  display: none !important;
}

.tabbrowser-tab[pinned]:hover .tab-icon-image {
  display: block !important;
}

The CSS initially hides the close button of all tabs. When hovering over a tab, the favicon is replaced by the close tab button. The code also plays nice with Firefox’ App Tabs.

Normal Tab

Hovered Tab

Hovered App Tab

As the code is placed on GitHub, feel free to fork off! 😉