Firefox 91-94 & Additional visual and ergonomic tweaks

Updated: November 5, 2021

Every morning, I wake up, look in the mirror, and ask myself: Am I a hipster? And since the answer is always categorically no, I know that my choices in life will be superior, aesthetically and functionally. Which meant that when I saw my Firefox 78 ESR transform into Firefox 91 ESR with its pointless Proton interface, I knew it was going to be a bad day.

Now, Firefox is my default browser of choice on any platform, has always been and hopefully will always be, but I refuse to succumb to hipsterology trends. I'm neither a child nor do I live near the Pacific Ocean coast. Hence, clarity, contrast, good clear colors. I've already shown you how to undo most of Proton nonsense in a dedicated tutorial, now I'd like to give you a few more tips. Follow me.

Teaser

Container tabs

As it turns out, with this upgrade, the Windows version of Firefox needs extra special care. In this regard, I wasn't happy with the accent line on the container tabs; it renders shorter than the tab width, and thus looks stupid. And so, my first order of the day was to remove the accent line and use full tab color.

.tabbrowser-tab[usercontextid] .tab-context-line {
  display: none !important;

The above CSS code, which you need to add into userChrome.css, as explained in the first tutorial, will only remove the accent line for container tabs. To make the the container tabs more distinct, I use their contextual color for background plus a bright red top border instead of the accent line:

.tabbrowser-tab[usercontextid] .tab-background {
  background: var(--identity-tab-color) !important;
  border-top: 3px solid red !important;
  opacity: 0.6 !important;
}

And once again, if you do want accent color, but in a nice way, you can combine the tab context line functionality with the top border element, and not use the contextual container color for the background. Thus, the second block of code (above) becomes:

.tabbrowser-tab[usercontextid] .tab-background {
  border-top: 3px solid var(--identity-tab-color) !important;
}

Regular tabs

The opacity of borders I used in the Linux example felt a bit harsh, so a tiny tweak:

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.tabbrowser-tab[selected="true"] .tab-background {
  border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-top: 3px solid white !important;
}

Separation of tabs (nav bar) from the urlbar segment

There is no line by default, which is annoying. You can add one.

#nav-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}

Tab row margins from top left row

You may have noticed that the left and top margins of the tab row aren't equidistant. You can fix this by adding a tiny left margin to this element. The frame that holds the tabs plus the urlbar is called navigator-toolbox.

#navigator-toolbox {
  margin-left: 2px !important;
}

Urlbar tweaks

Many changes are needed here. First, I made sure all of the elements of the URL show in the exact same color. Like I said, I'm not a child, and I don't need three colors to tell me what domain I'm visiting. Open about:config, and then toggle the following setting to false:

browser.urlbar.formatting.enabled

Next, I made sure the urlbar background is white, and that it has a border. None of that low-contrast nonsense.

#urlbar-background {
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

I also changed the padding and margins a bit, so it looks nicer - entirely cosmetic:

#urlbar {
  padding-top: 2px !important;
  margin-top: 2px !important;
  margin-bottom: 3px !important;
}

Search box

You can do the same trick for the search box to the right of the address bar.

#searchbar {
  margin-top: 1px !important;
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

Extra color

If you like my blue color accent, and you want to use it for the urlbar, searchbar and nav bar borders, then you can replace the instances of rgba(0, 0, 0, 0.1) to rgba(10, 132, 255, 0.3), for instance. You can use any opacity you like (the last number of the four). For instance, the searchbar declaration:

#searchbar {
  margin-top: 1px !important;
  background-color: white !important; 
  border: 1px solid rgba(10, 132, 255, 0.3) !important;
}

Results, screenshots, peace of mind!

Here we go, good and tidy stuff:

Container tabs

Container tabs with no accent line, top red margin.

Urlbar color

Urlbar and search box with white background, uniformly colored text.

Padding

Urlbar extra padding, top and bottom.

Nav bar line

Nav bar line in place, matching the tab border color.

Navigator margin

Nicer top-left tab row alignment, plus accent color (top border) on active tab.

Different accent color method for container tabs

Back to container tabs, with top border instead of accent line set to contextual color.

Colors

And some happy colors, all over the place!

Finally, just to remind you, this is the default you get:

Default

Conclusion

Here we go. The OCD demons can rest once more. The result still isn't perfect, because the whole browser interface coloring and contrast are (still) wrong, however I've always tried to keep the number of changes as small as possible, and absolutely without any use of third-party tools. This doesn't make Firefox great, but it makes it reasonably usable. The really sad part? I was able, in under an hour, to fix 10+ ergonomic problems that seemingly an entire development team simply ignores. And for the sake of what? Gray on gray nonsense?

With the information outlined in the first tutorial, plus the new stuff here, you should have enough CSS tweaks for a decent cross-platform Firefox experience. You can thus have good tab separation, good color, and a urlbar with white background. Hopefully, I've managed to make your life easier. The sad thing is, Firefox is the only browser I really want to use, so I dread the day once it decides to become totally useless or ugly. But hey, that's the so-called modern life. But we eked out another little fight. Sane browser users 1, hipsterology 0.

Cheers.

You may also like: