Firefox 97 & small anti-Proton CSS fixes

Updated: February 23, 2022

I use Firefox as my primary browser. Fact. I intend to do so until one of us is gone. Fact. But I do find the new UI style pointless. That one is called Proton, and it landed in Firefox several months ago. For a while, you could disable it with a toggle, but now, there ain't no toggle no more.

To gain back a sane, productive UI layout, I resorted to making manual changes to Firefox through a series of CSS file changes. This lovely adventure is detailed in my guides on how to disable Proton. I made the tabs more visible, added color to the container tabs, sorted out the URL bar, and then some. So far so good, but then, in version 97, just recently released, I noticed that my container tabs are a bit messed up. The CSS rules no longer work quite as well as they did. This article shows a small set of tiny fixes needs to make my modified interface look cool again. If you're already using my anti-Proton tweaks, then this should be useful.

Problem in more detail

So this is what happens in Firefox 97. Two issues. For an active container tab, the top-border highlight is partially obscured, making it hard to see the active tab. The tab background color area also sticks out a little above the tab bar. The second issue is, for inactive tabs, the background area sticks out quite some, and this looks crude.

CSS problem

I am fully aware that this is a self-inflicted problem, as in I tried to solve something in Firefox, which I did, but now there are artifacts as a result. But that's fine, because that's the price I am willing to pay to have a normal UI, with good, clear contrast and easy separation of tabs. I won't go into my Proton rant again.

Solution

At the moment, my CSS for container tabs is as follows:

.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;
  border-top: 3px solid red !important;
  opacity: 0.8 !important;
}

Now, the fixes are as follows:

.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;
}

.tabbrowser-tab[usercontextid] .tab-background {
  border-top: 3px solid red !important;
  padding-top: 3px !important;
}

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

First, I broke the code into several blocks, because we need a different tweak for the top border for active and inactive container tabs. To get rid of the ugly padding for active tabs, we just need to add 3px padding.

For the inactive tabs, identified by:

.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {

We need to change the top border to be exactly like the ordinary tabs (see my two guides earlier) but also add the padding declaration. This will make the tab background "shorter", i.e. not stick out above the tab bar, and the border will match all the other tabs, giving a nice uniform look.

CSS fixed

And that would be all!

Conclusion

I do realize that there's a consistency problem and maintenance cost to my tweaks. After all, I cannot possibly account for every little change in the Firefox UI ever, and there might be tiny glitches occurring now and then. But then, these will be minor, and I will have quick fixes for them, whereas using a browser with sub-optimal looks all the time is a no-go. It's not a fun situation, but even so, Firefox is still the best browser around, and you should be using it, for practical and philosophical reasons, hipsterology notwithstanding.

Anyway, if you are a nerd, because let's face it, otherwise you wouldn't be here, and you like your things to be neat, clean, legible, ergonomic, and efficient, then you will have changed the Firefox UI looks in versions 91 and beyond. You might even be possibly using some of my tweaks. If so, you have a fresh round of polish, in case you encounter some small niggles with Firefox 97. There you go. Take care, and see you soon.

Cheers.

You may also like: