Software Engineer

Firefox close tab button on hover

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

22 Comments

  1. P

    Thanks, still working đŸ™‚

  2. Veto

    Nope, as of Firefox version 55.0.2 this has been broken. Most likely due to the new changes introduced to the plugin/appearance machinery. The new way of operation will be enforced as of November’s version 57, but why this beautiful gimmick has fallen victim so early in the game, while all the other “old” plugins seem ok, remains a mystery to me. An updated version, if possible, would be highly appreciated.

    • Veto

      Well it kind of works, but only up to 12 tabs open. By the 13th tab it becomes unreliable, and 14 and up is simply put a solid broken.

      • Matthias Schoettle

        Thanks for letting me know. You’re referring to the new Photon UI which is currently enabled in 55.0.2 nightly, right?

        I’ll have to look into it, maybe the structure changed. Out of curiosity, if you disable browser.photon.structure.enabled (i.e., set to false) in about:config, does it work properly again?

        • Veto

          Actually it is set to “false” by default. I think they are not activating it as of yet. Also I am on 64bit firefox and the mod keeps being broken even if updated to 55.0.3. It must be something else they have changed.

    • Matthias Schoettle

      Hi Veto, the post has been updated with a new version that works again (tested with 55.0.3 and 57.0.a1). I’ll write a separate post about the details.

  3. Veto

    Yes, indeed I can confirm it works as good as before. Thanks

  4. e-motiv.net

    Thanks. Still working without Update 1

  5. P

    now the close butoon shows on pinned tabs too, i liked the old behaviour.

    • Mike

      I’ve applied this solution and noticed the same behaviour, too. The “close” button on pinned tabs not just looks ugly, but also leads to often occasionally closing pinned tabs, which is very annoying.

      But luckily it’s easy to work around this: just add new selector to “not([selected])” of the original css. The selectors should be
      not([selected]):not([pinned])
      not([selected]):not([pinned]):hover

      Otherwise a great solution, many thanks to Matthias for this.

      • Matthias Schoettle

        Thanks, Mike! Have never used pinned tabs so I hadn’t noticed it. I updated the CSS above with your solution.

  6. Andrasch

    Great, works fine (Firefox 57), thanks a lot!

  7. Ricardo Martins

    Works like a charm.
    I just needed to create the “chrome” folder, that didn’t exist in my Firefox 57 profile folder.
    Thanks for sharing.

  8. Name

    Just tried it. Not working anymore.

    • Matthias Schoettle

      Which Firefox version are you using?

      It’s still working for me with Firefox 69.0.

      • Name

        Oh, I think I was using that version too or maybe 68. But since I was adding more stuff to my userChrome.css and realized that none of it worked, googled about that and learnt that version 69 disables by default the load of user CSS files. I enabled it in about:config and now your code is working! Thanks!

        • Matthias Schoettle

          Thanks for pointing that out. Updated the steps to ensure the preference is enabled.

  9. John

    Thank you so much for this. The lack of a close button was driving me nuts.

    I can confirm it is working as of 2019-11-22 in Firefox 70.0.1 on macOS 10.14.6.

    Thank you!

  10. R

    Confirmed working in Firefox 87.0 (64-bit) on macOS 11.2.3.

    On the inactive tabs, the X appears on hover. On the active tab, the X is always present.

    Is it possible to make the X appear on hover on an active tab?

    • Matthias Schoettle

      Thanks for confirming it still works.

      The CSS selector filters out active tabs (:not([selected])). I haven’t tried this but removing this from both rules should probably get you the desired result. Let me know either way please.

  11. Felix

    Just what I was looking for, thank you very much!

  12. ind

    Hello!
    Thank you for the code, very helpful.
    It was working until v. 113.0.1 (64-bit) (the actual stable one), unfortunately.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2024 Matthias Schoettle

Theme by Anders NorenUp ↑