Matthias Schoettle

Software Engineer

Category: Firefox

Digging into the Firefox UI for the tab close button

July 25, 2018 / / 0 Comments

Oops … last year a new Firefox version broke the “close button on tab hover” tweak and I mentioned I will write a separate blog post on how I found out why and how to fix it. Life happened, but fortunately I wrote down bullet points about what I did.

It seems that with Firefox 54 something in the UI changed which broke the functionality. Fortunately, it wasn’t the removal of the ability to customize the UI using userChrome.css. In order to find out why the CSS selector didn’t work anymore, it was necessary to see how a tab was structured in XUL.

A while ago I used DOM Inspector. The current Firefox version then was 57, but it didn’t allow legacy extensions anymore. So I went back to the last 54.x version, which allowed the installation of this “legacy” extension. Unfortunately, I could not open its UI. I did however find the extension InspectorWidget. It has a nifty shortcut to open the inspector for the desired element right away. Hold Ctrl+Shift while clicking on the desired UI element.

Using the inspector I found out that there was a new CSS rule that set display: none for certain elements, one of them being the close button for tabs. To find out the initial/default value I used the computed rules, which showed -moz-box. This allowed to add display: -moz-box !important to the rule for hovered tabs to make it work again.

While it doesn’t seem possible to inspect the UI anymore with Firefox Quantum due to the introduction of WebExtensions, the CSS rules still work. However, it is unsure whether these kind of UI customizations will stay. There seemed to be plans to remove it., but perhaps they realized how many users are using this to tweak their UI since extensions are not allowed to do it anymore. This bug report to collect usage of userChrome.css supports this theory.

Update (2023): In the last few years there has been a much easier (built-in) way to inspect the Firefox UI using the Browser Toolbox. See this post on Super User.

Firefox close tab button on hover

January 4, 2016 / / 24 Comments

There are probably extensions that allow to do that, however, this is not necessary as I will show in this post. Maybe you’ve seen the functionality in Safari or just wondered why the close button for tabs in Firefox can’t just always be there. In Safari, the close button appears when hovering over the tab itself.

The following modification adds this functionality to Firefox. You need to create a file called userChrome.css with the following content:

Firefox v113 and later

.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
    display: flex !important;
}

Firefox up to v112

.tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button {
        visibility: hidden !important;
        margin-left: -16px !important;
}

.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
        visibility: visible !important; 
        margin-left: 0px !important;
        display: -moz-box !important;
}

Instructions

Place this file into the chrome folder inside your profile’s directory. Follow the directions from Mozilla to find out where to find the profile’s directory location. If the chrome folder does not exist, you need to create it first.

In the address bar, open about:config and change the following preferences:

  • browser.tabs.tabClipWidth to 99 (only needed for older versions of Firefox before v113)
  • New versions of Firefox (69+) don’t load the userChrome.css on startup by default. Make sure that toolkit.legacyUserProfileCustomizations.stylesheets is set to true.

Then just restart Firefox and you are done.

Update 1: It just tried this again myself due to a fresh installation and you also need to change the browser.tabs.tabClipWidth preference from it’s default value (140) to 99.

Update 2 (August 2017): As pointed out by Veto in the comments below, this functionality is broken since version 55.0.3. The above CSS has been updated to stay compatible with the new Firefox UI.

Update 3 (December 2017): As pointed out in the comments, pinned tabs were affected too. Thanks to Mike for the solution on how this can be avoided. The above CSS has been adjusted.

Update 4 (October 2019): As pointed out in the comments below, Firefox 69 by default doesn’t load the userChrome.css anymore for new installations.

Update 5 (May 2023): I noticed recently that the close button on hover was not working anymore. I first noticed it on Firefox v113 and on another machine with Firefox v112 it is still working. The CSS rules in Firefox slightly changed. Added a new CSS rule for Firefox v113+. Also the clip width change is not necessary anymore.

Original Source: Post on Neowin Forums

© 2024 Matthias Schoettle

Theme by Anders Noren — Up ↑