Firefox 89+ – Styling the New Proton UI

Updated July 18, 2021; Originally posted by jscher2000 on May 30, 2021.

Before the "Photon" user interface design reached its fourth anniversary, Firefox 89 has brought us the "Proton" user interface. The design of the tab bar has been particularly controversial due to its greater height, and the way tabs float. The feeling of spaciousness also extends to the menus. Here are some ideas for modifying these changes if they bother you, and of course you can find additional suggestions on the usual sites (especially r/FirefoxCSS).

Enabling "Compact" Toolbar Density

Do you miss having "compact" toolbars? The developers have reduced support for Compact mode so if you would like to select it from the Density popup on the Customize screen, you need to change a preference so it appears there:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box in the page, type or paste compact and pause while the list is filtered.
  3. Double-click the browser.compactmode.show preference to switch the value from false to true.

Alternately, if you don't plan to use the Density selector frequently, you can modify the density preference directly:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box in the page, type or paste browser.uidensity and pause while the list is filtered.
  3. Double-click the preference to display an editing field, change the value as desired, then press Enter or click the blue check mark button to save the change. These are the available values:
     
    0 => Normal density (default)
    1 => Compact density
    2 => Touch density

This screenshot illustrates the difference in heights:

 

Most of the menus in Firefox 89 have fewer items, but you still may prefer smaller gaps between the items, especially with long lists like Bookmarks. The main reason items are more widely spaced is the padding along the top and bottom of each item. You can use custom style rules in a userChrome.css file to customize the spacing. For Firefox 89-90, there is a preference to roll back the changes to some menus (next section below).

To take direct control of the padding, you can use CSS code such as the following. If 4 pixels of padding is too high, you could try 3px; if it's too low, try 5px:

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

This makes the spacing similar to Firefox 88:

 

{Firefox 89-90 only} Here are the steps to switch the temporary preference between the older menu appearance and the Firefox 89 ("Proton") appearance:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box in the page, type or paste browser.proton.contextmenus.enabled and pause while the list is filtered.
  3. Double-click the preference to switch the value between true (Proton style) and false (Photon style).

 

Restyling tab buttons

One of the more controversial changes in Firefox 89 was the new appearance of tabs as floating buttons rather than connected tabs. Numerous users have posted solutions to "reconnect" the buttons, to modify their shape and size, and to create more distinct tabs for background/inactive tabs. (For example, Lepton.) To adjust the color scheme, I suggest using Themes. For Firefox 89-90, there is a preference to roll back the changed tab design (next section below).

You can use the following controls to generate a personalized rules file to restyle the Firefox 89+ tab bar. The rules can be incorporated directly into a userChrome.css file, or you could include them by reference as described in Adding Style Recipes to userChrome.css. The buttons to grab the CSS you tweak using the following form controls follow after the form.

What is userChrome.css? What can it do?
How to Create a userChrome.css File
Firefox 89 – Styling the New Proton UI

Tab corner rounding:

Tabs floating or connected:

Tab height:

Show inactive tab boundaries:

Tab font size:

Tab font weight:

CSS based on above options:

CSS to be shown here, assuming JavaScript is not disabled.

 

{Firefox 89-90 only} If you are not ready for a userChrome.css approach, here are the steps to switch the temporary preference between the Firefox 57-88 ("Photon") appearance and the Firefox 89-90 ("Proton") appearance:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
  2. In the search box in the page, type or paste browser.proton.enabled and pause while the list is filtered.
  3. Double-click the preference to switch the value between true (Proton style) and false (Photon style).