Firefox 89 was just released with the new Proton UI. While a new UI was extremely low on my list of desired Firefox improvements I have to admit that for the large part it looks nice. I am especially a fan of the new menu, which I find much easier to navigate on the rare chance that I need to use it.
However I did find that there was a lot of unnecessary space around the tabs so I was wondering if I could cut that down. I think I have manged to cut down the space in a way that actually makes the browser look cleaner overall, so I figured I would share.
For reference this is how my Firefox looked with no changes.
userChrome.css
These changes will use the userChrome.css
file to add custom styles to the browser. While this voids your warranty it is very easy to revert (just delete the file) so it doesn’t hurt to try it out.
First go to about:config
and set toolkit.legacyUserProfileCustomizations.stylesheets
to true
. Then create a file called chrome/userChrome.css
in your profile folder. You can find you profile folder by going to about:profiles
. If you need more detailed instructions userchrome.org has an in-depth guide.
Full-height Tabs
I think this looks really nice. Instead of tabs being “buttons” they just stretch the full height from the URL bar to the top of the window.
To get this effect simply add the following to your userChrome.css
file and restart your browser.
.tab-background {
--tab-border-radius: 0;
--proton-tab-block-margin: 0;
}
Pinned Tab Gap
By default there is a noticeable gap between the last pinned tab and the first regular tab. I thought this looked awkward so I just removed it. I think the result looks quite nice.
Just add this to the userChrome.css
file.
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}
Other Changes
These are the small tweaks that I chose but you can easily change anything else in the UI thanks to Firefox’s use of HTML and CSS. The easiest way to do this is open the “Browser Toolbox” with “Application Menu → More Tools → Browser Toolbox” or the shortcut of Ctrl+Shift+Alt+I
(at least on Linux). Then you can use the “Inspector” tab to identify elements that you want to change and edit the CSS. Once you find something that you like you can add it to your userChrome.css
to make it persistent.
Comparison
Here are the images above each other for easy comparison.
And a comparison of the vertical space savings. Not explicitly a goal but a nice bonus.
Top comments (0)