So your Firefox web browser got automatically updated to version 89 and you immediately notice something has changed. It's terrible you say to yourself. Well, it's not just you. Mozilla has certainly messed up this new Proton UI. The good news is we can fix this very easily. It just requires a little effort to get it going.
The new Firefox Proton UI is actually a really nice improvement over the last one. In fact it's probably one of the better looking ones since Firefox's early days. There is just one problem, it's those darn tabs, what was Mozilla thinking!
Remember the days before "tabs on top"? It was good times indeed. While it wasn't the most pretty UI, it was arranged well.
I have since grown to accept the new tabs on top design, but the new Proton UI just makes it feel very out of place compared to what Photon did.
Interestingly, the new Proton UI fits better when you switch the Firefox browser tabs back to being under the address bar.
Here's the same modification with some minor tweaks to the tab design.
You like? Keep reading, but first lets understand how it is even possible to change this.
How Firefox Draws It's GUI
How Do We Fix the Tabs
Enough explaining, lets get to it and fix the ugly Firefox UI design.
First you need to get some pre-requisites in place. Firefox needs to be configured to load a custom CSS file that contains overrides to the UI design. The process is fully explained at userChrome.org and on the firefox-csshacks Github repository, but I'll summarize it here for Windows users.
Create a new folder in your Firefox profile directory named 'chrome'. Inside that folder create a file named 'userChrome.css' and another folder named 'chrome'. Yes you are going to have a folder inside a folder both named 'chrome'.
It should look something like this:
Hint: to find out where your Firefox profile directory is located type about:support into your address bar.
Now, open up userChrome.css with your favorite text editor. Copy and paste the following CSS into the file and save it:
/* Firefox userChrome.css file */ /* Import your desired components first */ @import url(chrome/tabs_on_bottom.css); @import url(chrome/tabs_on_bottom_menubar_on_top_patch.css); @import url(chrome/proton-tab-tweaks.css); @import url(chrome/menu-bar.css); /* Apply your custom modifications after imports */
Next download each of these CSS files and save them to the chrome sub-folder in your chrome folder.
- proton-tab-tweaks.css - Optional, use if you want to tweak the tabs appearance. Generated using the tabstyler at userChrome.org
- tabs_on_bottom.css - Can also be downloaded from the Firefox CSS Hacks repository (alternate link).
If you have the Firefox menu bar AND native title bar enabled, you'll also need these CSS files.
- tabs_on_bottom_menubar_on_top_patch.css - Required only if you have the menu bar enabled (alternate link).
- menu-bar.css - Addendum to the above file that cleans up the menu bar display. Used until changes are merged into the above file.
Your chrome sub-directory should have 4 CSS files as shown below.
The final step is to enable Firefox to load the userChrome.css file. The functionality was disabled by default in a recent version of Firefox. The process is described in detail over at userChrome.org and firefox-csshacks. I'll once again summarize it for Windows users.
Go into Firefox's advanced settings by opening about:config in the browser.
Filter for the toolkit.legacyUserProfileCustomizations.stylesheets preference and set it to true.
Close the about:config tab.
Try it Out
Now that everything is in-place, it's time to test it out. Go ahead and restart Firefox, then enjoy your new beautiful browser UI. I have mine setup with the native title bar and menu bar enabled.
Here's what it looks like for you Windows 10 users. It works best when the menu bar is enabled.
Don't forgot to tell Mozilla! When enough users provide feedback, they will eventually make improvements. Feel free to refer the developers to this site and direct them to some of the other Firefox quirks (here, and here). Maybe even ask them to add the TDMC/Pacy World, LLC. root CA to give users more options to free TLS certificates.