How to fix the Firefox 89 user interface

[harlan4096]

A new interface design, called Proton, will launch in Firefox 89, scheduled for a release on June 1, 2021. Mozilla wants to modernize the user interface of the Firefox web browser with Proton.

Firefox 89 ships with address bar, toolbar, tab and menu changes. One common denominator is that everything will be a big larger in the new interface.

Proton will remove some options from Firefox, or hide them. The Compact density option won't be displayed anymore on the "customize" page of the browser if it has not been used in the past. While it is possible to restore it, most users won't because it requires editing a configuration preference that cannot be discovered accidentally.

Firefox users who want a design that is more compact may use the linked guide above to enable the compact density option in the browser to start using it. Another option is to modify user interface elements with CSS.

Firefox UI Fix includes CSS fixes that modify the Firefox 89+ user interface to make the interface more compact. It reduces padding and other design elements to improve the usability for users who prefer light interfaces over large ones.

Here are two screenshots of the Firefox 89 interface after the fixes have been made. The first screenshot shows the normal density design, the second the compact density design.

Installing Firefox UI FixInstallation is not as straightforward as installing a Firefox add-on, but it is not complicated either.

First, you have to prepare Firefox to allow CSS files to modify the user interface:

1. Load about:config in the Firefox address bar.
   
2. Confirm that you will be careful.
   
3. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
   
   1. Use the toggle button to set its value to TRUE.
      
4. Search for svg.context-properties.content.enabled.
   
   1. Use the toggle button to set the value of the preference to TRUE.
      

Once done, download the two CSS files from the project's Github repository. Select userChrome.css first to display it on GitHub, then the RAW button to display it, and right-click on the page and use Save As to download it. The filename should be userChrome.css on your computer. Repeat the steps for the userContent.css file.

In Firefox, load aboutupport and activate the "show folder" button next to Profile Folder; this opens the profile folder in the file browser on the system. You may close Firefox now.

Create a "chrome" folder in the profile root if it does not exist. Place the two files, userChrome.css and userContent.css, inside the chrome folder, and start Firefox again.

Firefox uses the CSS instructions and the interface is changed noticeably.

Note that you may need to check the GitHub repository occasionally for updates. If the files have been updated, download them and replace the older files in the chrome directory.

If you do know CSS, you may modify the information to customize the interface further.

Now You: what is your user interface preference, compact, normal or even larger?
...

Continue Reading