Home > Tips and Tricks

Disable Proton UI and Decrease Tab Spacing in Firefox

In this guide, we will show you the steps to disable the Proton UI and decrease the tab and bookmark spacing/padding in the Firefox browser. So recently I was going through an article as to how Firefox is continuously losing its userbase to the likes of Edge and other Chromium browsers. At first, I was taken a little aback because there didn’t seem to be much of an issue with this offering from Mozilla.

But the company took it upon themselves and tried their best to bust this notion of mine. Unfortunately, they seemed to have passed with flying colors, with the release of version 91. Even if it had a few loyal fans remaining, they would have surely jumped ships over to other Chromium-based browsers by now. Granted, whenever a new UI update is released, users tend to have mixed feelings about that.

But this time, they all are on the same and there isn’t an iota of doubt that the latest UI tweak is a complete failure. The latest Proton UI has completely ruined the interface with unnecessary spacing and padding across the tabs, bookmark bar, context and pull-down menus, among others. And the icing on the cake? They have even removed the tab separator icons. As a result, all the opened tabs look like they are now merged into one another!

decrease tab spacing firefox v91

At the very least, they should have first rolled out these changes to the beta testers or the developer preview builds, but no, they straightaway decided to let the stable users adapt to this UI change, whether the users like it or not. There are a couple of Reddit forums where a plethora of complaints are already lined up since the past couple of months. So if you want to know what all is wrong with this new update, just have a sneak peek over to both these forums.

Anyways, all the users are having the same query in mind- how to roll back this change? Well, there’s some good news and some bad ones. The bad news is that there’s no official fix for this as such, and it doesn’t look like Mozilla is in any mood to release one either. The good news is that there are a couple of workarounds that have been known to spell out success for many users.

But again, the bad news is that these workarounds are a little bit technical (though I have simplified this procedure with all the necessary screenshots) and might not be everyone’s cup of tea and that is completely understandable. So it completely boils down to an individual’s preference and if you are ready to try it out, then let’s get going. Follow along for the steps to disable the Proton UI and decrease the tab and bookmark spacing/padding in the Firefox browser.

How to Decrease Tab Spacing/Padding in Firefox

decrease tab spacing and disable proton ui in firefox

  1. To begin with, launch Firefox and head over to the below location (and click on Accept the Risk and Continue.)
    about:config

    Decrease Tab Spacing in Firefox

  2. Now type in the below value in the Search Preference Name section (this will enable userChrome.css which will allow us to add a custom CSS code file):
    toolkit.legacyUserProfileCustomizations.stylesheets
  3. Change its value from False to True by clicking on the toggle situated at the extreme right.
    Decrease Tab Spacing in Firefox
  4. Once that is done, type in the below value and verify that the value is True (if not then do it via the toggle)
    browser.proton.enabled

    Decrease Tab Spacing in Firefox Decrease Tab Spacing in Firefox

  5. Now open a new tab and type in the below address:
    about:support
  6. Scroll to the Profile Folder section and click on the Open Folder button.
    Decrease Tab Spacing in Firefox
  7. Now create a new folder in that directory and name it chrome.
    Decrease Tab Spacing in Firefox
  8. Go to that chrome folder, and create a new text document. Name it userChrome and change its extension from txt to css.
  9. You will now get a confirmation regarding the change in extension, click Yes. So the complete file name should now be userChrome.css.
    Decrease Tab Spacing in Firefox
  10. Open this file via Notepad and copy-paste the entire script from here into your CSS file.
  11. Once all the contents have been copied, use Ctrl+S to save the file.
  12. Now again go to Firefox’s Support page via the below address:
    about:support
  13. Click on the Clear Startup Cache button present on the right and then hit the Restart button in the pop-up dialog box.
    Decrease Tab Spacing in Firefox
  14. Once the browser restarts, you shall get back the older UI, with less tab spacing/padding and tab separators will be back as well.

So this was the first method to disable the Proton UI and decrease the tab and bookmark spacing/padding in the Firefox browser. Let’s now make you aware of the second approach to carry out the same task.

How to Go Back from Proton UI to Photon UI in Firefox v91

Many are calling Proton one of the biggest UI failures in a long time. If you also echo this thought and wish to revert to the older Photon UI, then there’s a script for that as well. However, if the above CSS file worked well and good, then there’s no need as such to try out this CSS tweak. However, if you still wish to give it a try, then please delete the chrome folder from the above tweak first, otherwise, it will conflict with the new one. Once that is done, you may proceed with the below steps:

  1. First off, go to the below location and click on Accept the Risk and Continue.
    about:config

    Disable Proton UI in Firefox

  2. Now type in the below value in the Search Preference Name section (this will enable userChrome.css which will allow us to add a custom CSS code file):
    toolkit.legacyUserProfileCustomizations.stylesheets

    Disable Proton UI in Firefox

  3. Change its value from False to True by clicking on the toggle situated at the extreme right.
  4. Now go to the CSS Code’s GitHub page, click on the Code button and select Download ZIP.
    Disable Proton UI in Firefox
  5. Once the file has been downloaded, extract it to any convenient location on your PC.
    Disable Proton UI in Firefox
  6. Now go to that extracted folder and you should find the chrome folder. Copy it.
  7. After this, open Firefox and go to the following address:
    about:support
  8. Scroll to the Profile Folder section and click on the Open Folder button.
    Disable Proton UI in Firefox
  9. Now paste the copied chrome folder in that directory.
    Disable Proton UI in Firefox
  10. Then go to the about:config page and type in the following value in the Search Preference Name section
    browser.tabs.tabMinWidth
  11. Change its value to 76 (the default value in Photon UI) and hit the tickmark icon to save the changes.
    Disable Proton UI in Firefox
  12. Finally, go to the Firefox Support page via the below address:
    about:support
  13. Click on the Clear Startup Cache button present on the right and then hit the Restart button in the pop-up dialog box.
  14. Once the browser restarts, it would have reverted to the Photon UI.

Concluding Remarks

That’s it. These were the steps to disable the Proton UI and decrease the tab and bookmark spacing/padding in the Firefox browser. Many of you would echo this thought that why would a user have to make such technical tweaks to a browser for something that they didn’t ask for in the first place.

Well, around four months have passed since this fiasco and there have been no hints of a UI rollback from Mozilla. So as of now, these tweaks of adding a new userChrome.css scripts seem to be the best bet forward. In this regard, we have shared two different methods. Do let us know in the comments section if you have any queries concerning any of these two approaches.


Share:
  • Open this file via Notepad and copy-paste the entire script from here into your
    !!! Nothing is at the from here page!!!