Firefox 89+ – Styling the New Proton UI

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).

• Restoring Compact mode to the density selector
• Tightening up the menu spacing
• Modifying menu and toolbar drop-down colors
• Re-styling tab buttons as connected tabs, dividers, height, font size/boldness, audio icon, etc.

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. Now "Compact (not supported)" should appear on the Density popup in the Customize screen.

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

 

Reducing vertical spacing in menus

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).

Firefox 93 Change: Users who select Compact Mode will have tighter spacing automatically in the menus that drop from the toolbars. However, this change does not change the spacing for right-click context menus, or the menus that drop from the classic top menu bar, so you may still want to use the following CSS workaround.

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 2px to try to match Firefox 57-88 (at least on Windows). If it's too low, try 5px. (Comparison screenshots below the code)

/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 4px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

Why did I add :not(.in-menulist) to the rule on Sept. 3, 2021? Users mentioned that the original rule had the side effect of increasing the spacing between items in <select> control drop-downs on websites. Using menupopup:not(.in-menulist) excludes those drop-downs from the rule.

 

{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).

 

Modifying Menu Colors

Proton-style drop-down menus generally follow your theme, either light (dark text on a bright background) or dark (bright text on a dark background). Some users find these high contrast menus unappealing. While it's not possible for me to suggest colors to suit all tastes, the following example substitutes colors similar to the Photon design of Firefox 57-88, which had a universal black-on-off-white appearance. You can edit the colors to suit your tastes.

/*** Photon-like Menu Colors (14 Jan 2022) ***/

/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu (2021-10-25) */
#urlbar-input-container menupopup,
/* Various toolbar drop-down panels (Fx96) */
#back-button menupopup, #forward-button menupopup,
#identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup {
  /* Text color */
  --menu-color: #000 !important;
  --arrowpanel-color: #000 !important;
  --panel-color: #000 !important;
  /* Background color */
  --menu-background-color:  #f0f0f0 !important;
  --arrowpanel-background: #f0f0f0 !important;
  --panel-background: #f0f0f0 !important;
  /* Border color (if any) */
  --menu-border-color: threedshadow !important;
  --arrowpanel-border-color: threedshadow !important;
  --panel-border-color: threedshadow !important;
  /* Hovered/expanded item background color */
  --menuitem-hover-background-color: #e0e0e6 !important;
  --button-hover-bgcolor: #e0e0e6 !important;
  /* Disabled items text color and hovered background */
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
}

 

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.

CSS based on above options: Select CSS Save below as .css File

 

{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. This causes display problems in Firefox 91, so please reset this to true for Firefox 91.

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).