Tab close button on the left in Firefox Quantum

Tab close button on the left in Firefox Quantum.md

Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true

Add userChrome.css to ~/Library/Application Support/Firefox/Profiles/<PROFILE_ID>/chrome/userChrome.css

Ref:

• https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
• https://support.mozilla.org/en-US/questions/1157451
• https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
• https://superuser.com/questions/1495834/is-a-left-side-tab-close-button-in-firefox-possible

History:

• 2022-03-01: Updated for Firefox v98

userChrome.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.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-label-container {
  margin-left: 2px;
}
.tabbrowser-tab .tab-icon-image {
  margin-left: 3px;
}
.tabbrowser-tab .tab-close-button {
  margin-left: -5px !important;
  margin-right: 2.5px !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  display: -moz-box !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack,
.tabbrowser-tab:not([pinned="true"]):hover .tab-throbber,
.tab-close-button {
  display: none;
}

But I still don't know what happened before.

The CSS for the layout in Firefox has changed slightly and this recipe had to adapt to that.

For Linux 🐧 users - you can find the profile directory by following this mozilla's guide (usually ~/.mozilla/firefox/PROFILE_ID/)
cd there and then just mkdir chrome && touch chrome/userChrome.css to create the userChrome file.

Thanks

After completing steps in description my tabs close buttons gone. Anyone know how to solve it? (version 113.0b8 (64-bit))
Thanks in advance!

It is supposed to replace the favicon at the left end of the tabbar with the close button when hovering, but today I upgraded firefox to 113, when I hover, the favicon disappears, the tabbar shrinks, but the close button is not revealed. How to fix this?

@int-369 @fossilet Here's a fixed version (for me) that replaces favicons with close buttons on hover on Firefox >113:

.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 {
  order: 2 !important;
}

.tabbrowser-tab .tab-label-container {
  margin-left: 2px;
}

.tabbrowser-tab .tab-icon-image {
  margin-left: 3px;
}

.tabbrowser-tab .tab-close-button {
  margin-left: -5px !important;
  margin-right: 2.5px !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  /* display: -moz-box !important; */
  display: inline-flex !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-icon-stack,
.tabbrowser-tab:not([pinned]):hover .tab-throbber,
.tab-close-button {
  display: none;
}

This explanation in a Reddit thread helped me figure out what to change (tl;dr -moz-box-ordinal-group and -moz-box have been replaced with standard flexbox css)

@valrus I tested your solution before, but the tab title wiggles a little to left when i hover over the tab icon. I do not understand all these css's. Yesterday i finally fix it. I adjusted the left margin of tab close button to -2px, and the text no longer wiggles. Thank you.

This is now my file content:

/* Disable pinned tab glow.
   https://apple.stackexchange.com/a/85761/70272
 */
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"])>.tab-stack>.tab-content {
  background-image: none !important;
}

/* 
  Close button left.
  v1: https://gist.github.com/biosmanager/93544485fb0da3ad0577856186b9b3e8
  v2: https://gist.github.com/henrik242/3abf4c52ebf81add5cfe38acf97c2053?permalink_comment_id=4724608#gistcomment-4724608
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.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 {
  order: 2 !important;
}

.tabbrowser-tab .tab-label-container {
  margin-left: 2px;
}

.tabbrowser-tab .tab-icon-image {
  margin-left: 3px;
}

.tabbrowser-tab .tab-close-button {
  margin-left: -2px !important;
  margin-right: 2.5px !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  /* display: -moz-box !important; */
  display: inline-flex !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-icon-stack,
.tabbrowser-tab:not([pinned]):hover .tab-throbber,
.tab-close-button {
  display: none;
}

@valrus I tested your solution before, but the tab title wiggles a little to left when i hover over the tab icon. I do not understand all these css's. Yesterday i finally fix it. I adjusted the left margin of tab close button to -2px, and the text no longer wiggles. Thank you.

Nice fix @fossilet! I have been using a side-tabs extension so didn't notice the breaking change. Thanks for the update!

To avoid swap with icon-sound and close-button during playback, add order:-1

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
/* display: -moz-box !important; */
order:-1 !important;
display: inline-flex !important;
}