Firefox Proton Theme Tweaks
Published: 2021-06-03 16:25:11

---
title: Firefox Proton Theme Tweaks
published: true
date: 2021-06-03 15:37:00 UTC
tags: 
canonical_url: https://kevincox.ca/2021/06/03/firefox-proton-tweaks/
---

<main><p><a href="https://www.mozilla.org/en-US/firefox/89.0/releasenotes/">Firefox 89 was just released with the new Proton UI</a>. 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.</p>
<p>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.</p>
<p>For reference this is how my Firefox looked with no changes.</p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmUPFnUH3dBXKmDT2eK93bCmWgWzmfjNnQfCB2qG14gvzF/stock.png" alt="Firefox with stock theme" crossorigin=""></p>
<h2 id="userchromecss"><a href="https://kevincox.ca/2021/06/03/firefox-proton-tweaks/#userchromecss">userChrome.css</a></h2>
<p>These changes will use the <code>userChrome.css</code> 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.</p>
<p>First go to <code>about:config</code> and set <code>toolkit.legacyUserProfileCustomizations.stylesheets</code> to <code>true</code>. Then create a file called <code>chrome/userChrome.css</code> in your profile folder. You can find you profile folder by going to <code>about:profiles</code>. If you need more detailed instructions <a href="https://www.userchrome.org/how-create-userchrome-css.html">userchrome.org has an in-depth guide</a>.</p>
<h2 id="full-height-tabs"><a href="https://kevincox.ca/2021/06/03/firefox-proton-tweaks/#full-height-tabs">Full-height Tabs</a></h2>
<p>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.</p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmXoWjvSSjKGm1EV5aCgbjKcRucKdHY3ffbkAgo1Jp9H5h/full-height.png" alt="Firefox with full-height tabs" crossorigin=""></p>
<p>To get this effect simply add the following to your <code>userChrome.css</code> file and restart your browser.</p>
<div><pre><code><span>.tab-background</span> <span>{</span>
	<span>--tab-border-radius</span><span>:</span> <span>0</span><span>;</span>
	<span>--proton-tab-block-margin</span><span>:</span> <span>0</span><span>;</span>
<span>}</span>
</code></pre></div>
<h2 id="pinned-tab-gap"><a href="https://kevincox.ca/2021/06/03/firefox-proton-tweaks/#pinned-tab-gap">Pinned Tab Gap</a></h2>
<p>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.</p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmTgNWx4c7M4Syj4Z9Rn1y77wyMADxmFg7a8DUQxzhGVmF/no-pin-space.png" alt="Firefox with no gap after the pinned tabs" crossorigin=""></p>
<p>Just add this to the <code>userChrome.css</code> file.</p>
<div><pre><code><span>#tabbrowser-tabs</span><span>[</span><span>haspinnedtabs</span><span>]</span><span>:not</span><span>([</span><span>positionpinnedtabs</span><span>])</span> <span>&gt;</span> <span>#tabbrowser-arrowscrollbox</span> <span>&gt;</span> <span>.tabbrowser-tab</span><span>[</span><span>first-visible-unpinned-tab</span><span>]</span> <span>{</span>
	<span>margin-inline-start</span><span>:</span> <span>0</span> <span>!important</span><span>;</span>
<span>}</span>
</code></pre></div>
<h2 id="other-changes"><a href="https://kevincox.ca/2021/06/03/firefox-proton-tweaks/#other-changes">Other Changes</a></h2>
<p>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 <code>Ctrl+Shift+Alt+I</code> (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 <code>userChrome.css</code> to make it persistent.</p>
<h2 id="comparison"><a href="https://kevincox.ca/2021/06/03/firefox-proton-tweaks/#comparison">Comparison</a></h2>
<p>Here are the images above each other for easy comparison.</p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmUPFnUH3dBXKmDT2eK93bCmWgWzmfjNnQfCB2qG14gvzF/stock.png" alt="Firefox with stock theme" crossorigin=""></p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmXoWjvSSjKGm1EV5aCgbjKcRucKdHY3ffbkAgo1Jp9H5h/full-height.png" alt="Firefox with full-height tabs" crossorigin=""></p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmTgNWx4c7M4Syj4Z9Rn1y77wyMADxmFg7a8DUQxzhGVmF/no-pin-space.png" alt="Firefox with no gap after the pinned tabs" crossorigin=""></p>
<p>And a comparison of the vertical space savings. Not explicitly a goal but a nice bonus.</p>
<p><img src="https://cloudflare-ipfs.com/ipfs/QmREMg1X4v456Vh19vvDL6N2RemrKdZi3xu59JVoNyRuYF/compare.png" alt="Comparison of vertical space usage" crossorigin=""></p>