Close Tab Icon/Button on the Left in Firefox

Thursday, September 26, 2019
Tag: browser

Update Friday, December 31, 2021:

Ok, maybe this solution is pretty alright (via). I’ve updated the code in this post with that.

Update Thursday, June 3, 2021:

With the new version of Firefox, it’s probably no longer worth fighting the non-Mac right-side close buttons. Oh well.

As a good and loyal Mac user, I know that the little button to close a tab (or window or modal dialog, etc.) should be on the left, not the right. Here’s how you can make Firefox a little less ugly.

Safari tab
Safari. So pretty.
Firefox tab with close button animating in place of the favicon when you hover over the tab.
Firefox. Now a little prettier.
  1. Go to about:support.
  2. Click on “Show in Finder” next to “Profile Folder.”
  3. Create a folder inside that folder called chrome.
  4. Create a file called userChrome.css in that new folder.
  5. Paste the following code into that new file:
.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-icon-image,
.tabbrowser-tab .tab-sharing-icon-overlay,
.tabbrowser-tab .tab-icon-overlay,
.tabbrowser-tab .tab-label-container,
.tabbrowser-tab .tab-icon-sound {
  -moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab .tab-close-button {
  margin-left: -5.5px !important;
  margin-right: 3px !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  display: -moz-box !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-image,
.tabbrowser-tab:not([pinned="true"]):hover .tab-throbber {
  display: none;
}
.tab-close-button {
  display: none;
}
  1. Go to about:config
  2. Search for userprof
  3. Double-click that entry to change it from false to true.
  4. Restart Firefox

Sources: