How to undo Proton UI in Firefox 91 and onwards

Updated: August 16, 2021

Firefox 91 has been released. Do you know what this means? It means you can no longer disable the Proton interface through about:config anymore. Why does this matter, you ask? Because Proton sucks. For those confused about the vehemence of my message so early on in the review, let's recap. A while back, Mozilla announced it would change - yet again - the Firefox UI. This time around, it's called Proton.

I showed you what this thing looks like - and it doesn't look good. But then, back in Firefox 89, Proton became official, you could simply toggle it off and move on with your dear life, enjoying productivity and efficiency. Now, though, this is no longer an option. So if you don't want to put up with useless, low-contrast hipsterology, I will show you the set of changes you can use to minimize or remove the useless aspects of Proton, and go back to sane browsing. After me.

Teaser

Problem at hand

We talked about this, but we need to talk some more. Look at that useless, gray on gray nonsense. Where does a tab start? Where does it end? Is it even a tab? Remember those color tabs people used in them old big folders in the 80s and 90s, to mark pages and whatnot? Now imagine invisible tabs! Duh! ErGoNoMiCs!

Proton tabs

Ingredients

There are quite a few things you can do. But let's start slowly. First, you need to understand the nature of today's work. Since the built-in configuration tweaks are no longer possible, we need to go deep. You can alter the look of Firefox using a custom set of CSS rules, much as one would go about editing a Web page - indeed, most modern browsers style themselves just like Web pages. I've already shown you how to do this in my Plasma & HD tutorial, pinned tabs guide and the tutorial on how to make the URL bar look sane - that's the baseline for our work today.

First, enable the options to use custom user-made CSS overrides. Open a new tab, type about:config, and then search for the following preference:

toolkit.legacyUserProfileCustomizations.stylesheets

Toggle this setting to true. Then, go your Firefox profile folder. In Windows, typically:

C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"

And in Linux, typically:

/home/"user"/.mozilla/firefox/"profile"

In this folder, create (if it doesn't already exist) a folder called chrome (lowercase). Inside the chrome folder, create (if it's doesn't exist) an empty text file called userChrome.css (mind the lower/uppercase). We will add a bunch of text into this file.

Proton rules

Now, we need to add a number of rules that will alter the Firefox behavior. The most offending element is the new tab behavior, with over-large tabs, pale contrast, and almost no separation between active and inactive tabs and the background tab bar strip. This is where things become tricky, because there isn't a single definitive set of CSS rules you can just use. Some of the options:

Let's start with the AskVG guide. In userChrome.css, add the following code:

.titlebar-color {
  color: -moz-accent-color-foreground;
  background-color: -moz-accent-color;
}

.tab-background {
  border-radius: 0px 0px !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
}

menupopup > menu, menupopup > menuitem {
  padding-block: 2px !important;
}

:root {
  --arrowpanel-menuitem-padding: 2px !important;
}

This will give you pretty decent looks - the active tab will have a border, the background ones will not. However, you will have better contrast than standard Proton. I found this adequate, but then decided to do a few more modifications.

AskVG fix

Background tab borders

If you want the background tabs to also have borders, then you can add the following:

.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
  border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

This will set the background tabs with a light gray 1px solid border set at 50% transparency. You can use any color or transparency values you like. Also, please note that this clause is very similar to the one defined in the AskVG snippet of code, and you can actually combine the rules to make for a smaller, more compact section of code in the CSS file. However, if you are not quite sure what to do, just add the extra lines separately. There is no conflict, as the rules are layered.

AskVG fix in place plus borders

Foreground tab border

Similarly, you can tweak the active tab as well, for OCD sake:

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}

Tab accent color

You can make sure the active tab is highlighted and visible, to distinguish it from the other tabs:

.tabbrowser-tab[selected="true"] .tab-background {
  border-top: 3px solid #3daee9 !important;

You can just add the extra line to the definition above, if you like. In my example, I set the accent color to match the desktop color scheme. The color code #3daee9 is the accent color used by the Plasma desktop in this particular example. You can use the system accent color - as defined in the titlebar CSS rule:

border-top: 3px solid -moz-accent-color-foreground !important;

Accent color

Tab bar height

If you want to make the tabs smaller - similar to the old compact mode, then you can add the following rules:

.toolbar-items, .tabbrowser-tab {
  max-height: 38px;
}

:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  max-height: 45px;
}

You can modify the values to anything you like, for example max-height: 28px; or similar. The touch clause is optional. Go with any density (height) that works for you.

Container tab color

Firefox 91 also makes container tabs look bland and difficult to distinguish from ordinary tabs. So I decided to introduce a bit of color [sic]. There are many options, and by now, you should feel a bit more comfortable with making the necessary changes. I went for fully colored tabs that match the container color, plus nice borders, so my OCD demons need not awaken:

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
  border-bottom: var(--identity-tab-color) !important;
  opacity: 0.8 !important;
}

Each tab uses its own identity color (defined by the var clause), the bottom border matches the identity color so the tab blends nicely into the tab bar, and the side borders are just like the ordinary tabs. I tried various options. For instance, I tried both 20% and 80% opacity options. To wit:

Containers

Containers, colors

And now, your Firefox looks sooooo much better! Another crazy little example:

Ubuntu example

Extra cosmetics

There's ton more you can do. I even tweaked the zoom button in the address bar, because the padding was off ever so slightly, and we can't have any rogue pixels, now can we. But we should end here, on a high note.

#urlbar-zoom-button {
padding-top: 0px !important;
}

Zoom button

Conclusion

There we go. Today, I was able to show you how to undo some of the useless "modern" UI changes introduced into Firefox 91. For as long as Firefox has the CSS overrides, there is hope. It's not fun having to fight your software, but at least you have the option to get rid of the low-IQ stuff and maintain your productivity and efficiency. With the CSS rules outlined above, Firefox 91, and more importantly, Firefox 91 ESR, can look relatively decent and usable for a foreseeable future.

What will happen a year or two from now? Who knows. I still believe that Firefox should be your default browser, despite all the utter nonsense being piled into it by the Mozilla team, but I'm not sure for how much longer I'll be able to maintain that position. At some point, Firefox may reach the level of visual ugliness and uselessness of its rivals. I don't know what I'm going to do then, because I don't want to use the Internet when a Chromium-based browser is my only option. Quit the Web? That might be a solution. Well, we don't need to face that hard choice today. CSS tweaks done. Intelligence 1, hipsterology 0. The end.

Cheers.

You may also like: