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:
.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;
}
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.
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.
Then just restart Firefox and you are done.
Original Source: Post on Neowin Forums
July 9, 2017 at 13:32
Thanks, still working 🙂
August 21, 2017 at 16:51
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.
August 21, 2017 at 21:14
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.
August 24, 2017 at 13:07
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 tofalse) in about:config, does it work properly again?August 28, 2017 at 01:02
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.
August 29, 2017 at 18:02
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.
September 1, 2017 at 03:29
Yes, indeed I can confirm it works as good as before. Thanks
September 27, 2017 at 14:00
Thanks. Still working without Update 1
November 3, 2017 at 10:59
now the close butoon shows on pinned tabs too, i liked the old behaviour.
December 1, 2017 at 18:36
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.
December 6, 2017 at 02:36
Thanks, Mike! Have never used pinned tabs so I hadn’t noticed it. I updated the CSS above with your solution.
November 16, 2017 at 18:38
Great, works fine (Firefox 57), thanks a lot!
January 4, 2018 at 01:14
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.