Making Firefox tabs behave more like Chrome

Mike

Apr 20, 2018 • 1 min read

One of the only things holding me back from using Firefox over Chrome was the behavior of the tabs. I absolutly hated having to scroll back and forth to find a tab, and I frequently have tons of tabs opened.

The solution, posted in this thread by /u/robotkoer has one of the simplest solutions. There are certainly more customizations that can be made, but this is the only one I was looking for.

The tl;dr is to create a folder and file under <firefox-profile>\Chrome\userChrome.css with the following line.
.tabbrowser-tab {min-width: 1em !important; clip-width: 1em !important;}

The full path under Windows should be:
C:\Users\<USER>\AppData\Roaming\Mozilla\Firefox\Profiles\<PROFILE>.default\Chrome\userChrome.css

And under macOS:
~/Library/Application Support/Firefox/Profiles/<PROFILE>.default/Chrome/userChrome.css

No more scrolling tabs, and tabs now shrink in size like Chrome.

Update:
I've also begun adding the following line, in order to better differentiate between private browser windows:

#main-window[privatebrowsingmode="temporary"] #navigator-toolbox {
   background-color: #C40944 !important;
}

This will set the top bar (dark blue/purple) color to a redish something for private browser windows.

Update 2 - 30 Sep 2024:
Since sometime around Firefox 108 you'll need to go into about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.

Sign up for more like this.