Firefox Proton Theme Tweaks

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.