Skip to content

Instantly share code, notes, and snippets.

@henrik242

henrik242/Tab close button on the left in Firefox Quantum.md

Last active May 22, 2025 01:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save henrik242/3abf4c52ebf81add5cfe38acf97c2053 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save henrik242/3abf4c52ebf81add5cfe38acf97c2053 to your computer and use it in GitHub Desktop.
Download ZIP
Tab close button on the left in Firefox Quantum
Raw
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;
}
@Dr8pus
Copy link
Copy Markdown

Dr8pus commented Oct 10, 2021

Whenever I point to the tab, the text inside moves，how to change this?

@frommie
Copy link
Copy Markdown

frommie commented Jan 23, 2022 •
edited by henrik242
Loading

Following works using Firefox 96.0.2:

@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: -2px !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-image,
.tabbrowser-tab:not([pinned="true"]):hover .tab-throbber,
.tab-close-button {
  display: none;
}

@Dr8pus
Copy link
Copy Markdown

Dr8pus commented Mar 12, 2022

Hello! This seems not working on Firefox 98? What's the reason?

@henrik242
Copy link
Copy Markdown
Author

henrik242 commented Mar 15, 2022

Hello! This seems not working on Firefox 98? What's the reason?

Have you tried the latest version in this Gist? I just updated it for v98. It works for me, at least.

@Dr8pus
Copy link
Copy Markdown

Dr8pus commented Mar 15, 2022

Yeah, I've tried. It solve my problem. Thank you!
But I still don't know what happened before.

@henrik242
Copy link
Copy Markdown
Author

henrik242 commented Mar 15, 2022 •
edited
Loading

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.

@maclunar
Copy link
Copy Markdown

maclunar commented Apr 27, 2022

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.

Copy link
Copy Markdown

ghost commented Jun 28, 2022

Thanks

@int-369
Copy link
Copy Markdown

int-369 commented Apr 26, 2023

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

@fossilet
Copy link
Copy Markdown

fossilet commented May 10, 2023 •
edited
Loading

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?

@valrus
Copy link
Copy Markdown

valrus commented Oct 13, 2023

@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)

@fossilet
Copy link
Copy Markdown

fossilet commented Nov 5, 2024 •
edited
Loading

@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
Copy link
Copy Markdown

valrus commented Nov 6, 2024

@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!

@cotchon
Copy link
Copy Markdown

cotchon commented May 16, 2025

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment