Close Tab Icon/Button on the Left in Firefox

Thursday, September 26, 2019
Tag: browser

Update Wednesday, June 7, 2023:

Fixed again.

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-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
  display:none;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  /* OLD CODE before Fx113:
  -moz-box-ordinal-group: 0 !important;
  NEW CODE for Fx113: */
  order:-1 !important;
  display:unset !important;
}
 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  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: