Firefox 89 has a new appearance, removing features (ugh) and annoying some people while delighting others. It can be disabled by setting browser.proton.enabled to false:

Firefox 89 with Proton disabled
Firefox 89 with Proton disabled

I mostly like the new design though, but I strongly dislike some elements, especially the tabs:

Firefox 89 tab appearance
Firefox 89 tab appearance
  1. I want the active tab to be much brighter. I couldn't see a way to set the color in Firefox Color. In Firefox Color, use the Advanced Colors / Tab Selected setting. Thanks to an anonymous commenter for this tip.
  2. The inactive tabs blend into the background. I want to see distinct tabs.
  3. The tabs no longer look like tabs! They are just buttons and feel disconnected from the rest of the browser.

Fortunately there are some userChrome.css rules that can change some of this:

tab {
    font-size: 17px !important;
    font-family: Maven Pro !important;
}

.tabbrowser-tab[selected] .tab-label {
    color: black !important;
    font-weight: bold !important;
}

.tabbrowser-tab[selected] .tab-content {
    background: #fcb731 ! important;
}

.tabbrowser-tab:not([selected]) .tab-content {
    background: #585060;
}

I wish the Firefox settings page let you edit this file but you can still edit the file in your profiles folder. Here's what it looks like with these CSS rules:

Firefox 89 modified
Firefox 89 modified

I was still looking for a way to make the tabs look more like tabs. This guide looks useful, as does this one. They give CSS rules for .tab-background. Looking through the Firefox source code for browser.xhtml and also for tabbrowser-tab.js gives me all the xhtml elements I can attach styles to, so I experimented with that. Update 2021-06-04: Here's the CSS I ended up with:

tab {
    font-size: 17px !important;
    font-family: Maven Pro !important;
}

/* Use color and shape to make the tabs look more like tabs */
.tab-background {
    background: #585060;
    border-radius: 9px 9px 0 0 !important;
    margin-bottom: 0px !important;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(0,0,0,.5) !important;
    border-bottom-width: 0px !important;
}

/* Selected tabs I want a bright background with a dark foreground */
.tabbrowser-tab[selected] .tab-background {
    background: #fcb731 !important;
}
.tabbrowser-tab[selected] .tab-label {
    color: black !important;
    font-weight: bold !important;
}
/* Draw a solid line underneath to make the selected tab look *connected* to the rest of the browser */
#TabsToolbar {
    border-bottom: 2px solid #fcb731 !important;
}

/* Hover over tabs */
.tabbrowser-tab:hover .tab-background:not([selected]) {
    background: #686070 !important;
}
Firefox 89 modified even more
Firefox 89 modified even more

Update 2021-06-27: I switched to more of a "silver" theme, making the tabs feel more connected to the toolbar, and using gradients on the tabs:

tab {
    font-size: 17px !important;
    font-family: Maven Pro !important;
}

/* Use color and shape to make the tabs look more like tabs */
.tab-background {
    background: linear-gradient(hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 40%, 1.0));
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: 0px !important;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(0,0,0,.5) !important;
    border-bottom-width: 0px !important;
}

/* Selected tabs I want a bright background with a dark foreground -- set Firefox Color's "Toolbar Color" to #ccc */
.tabbrowser-tab[selected] .tab-background {
    background: linear-gradient(#eee, #ccc) !important;
}
.tabbrowser-tab[selected] .tab-label {
    color: black !important;
    font-weight: bold !important;
}

/* Draw a solid line underneath to make the selected tab look *connected* to the rest of the browser */
#TabsToolbar {
    border-bottom: 2px solid #ccc !important;
}

/* Hover over tabs */
.tabbrowser-tab:hover .tab-background:not([selected]) {
    background: #999 !important;
}
Firefox 89 lighter theme
Firefox 89 lighter theme

So far I like it! There are some issues I haven't worked out yet. I'll keep tweaking it as I learn more. Update 2021-06-04: HackerNews comments point to "Browser chrome and add-on debugging toolboxes" and "Remote debugging" in dev tools. This lets you directly inspect the dom of the browser so that you can figure out what you want to style. Amazing! Love Firefox even more now.

Labels: ,

18 comments:

rektide wrote at Friday, June 4, 2021 at 8:28:00 AM PDT

I'd love it so much if you would include a "before" photo, of firefox 88. I would use/cite this as the reference post to talk about the new tabs (which generally I am enjoying, but thanks to you, know how to tweak now!).

Anonymous wrote at Friday, June 4, 2021 at 8:44:00 AM PDT

Just FYI, you can change the active tab background in Firefox Color with "Advanced Colors" -> "Tab Selected". But I realize that you made more customizations than that. Have a nice day. :-)

Amit wrote at Friday, June 4, 2021 at 9:31:00 AM PDT

@rektide I don't have a Firefox 88 screenshot but I'll add one of Firefox 89 with Proton disabled.

@Anonymous: thanks! I should probably configure the colors there, as it's easier than editing userChrome.

Anonymous wrote at Saturday, June 5, 2021 at 4:01:00 AM PDT

Thanks for the browser.proton.enabled hint!

tuaris wrote at Saturday, June 5, 2021 at 8:51:00 AM PDT

Your version looks so much better. Mozilla should have hired you to do the UI redesign.

Russ D wrote at Sunday, June 6, 2021 at 7:03:00 PM PDT

I absolutely hate the tab bar in Firefox 89.0. Really? What good is it? If I am in Bing - I can already search. This thing hogs space at the top of my monitor - can we disable it?

Anonymous wrote at Monday, June 7, 2021 at 2:05:00 AM PDT

Not only are the Firefox 89 tabs low contrast and missing separators, but the whole title bar has had the colors overridden on Windows. Firefox no longer obeys the user's choice for the themes on Windows for the active window vs. inactive window. Is there a way to restore that control to Windows?

To see what I mean, open two Firefox windows side by side. With the new style both windows have the same title bar colors. The prior appearance can be viewed with proton disabled. Disable proton and open the same two windows and you can see it obeys the Windows themes for active vs. inactive title bars as expected.

Edward wrote at Wednesday, June 9, 2021 at 7:50:00 AM PDT
This comment has been removed by the author.
Reed wrote at Wednesday, June 9, 2021 at 8:54:00 AM PDT


I tried to post a screen shot but have to describe the odd tab behavior that I can't duplicate or undo.

On the far left of the tab bar is a tab that I was using quite a bit.
It is not near where it was placed while I was using it.
I don't know how it landed where it is. (I blame this laptop's touch pad. #humor )
It's not a full tab, just a "half tab" with just the favicon and no title.
It works fine when I'm in it, just like any other tab when it's selected.
I can't pull it away (un-dock?) from the left side.
In other FFX-89 browsers on this box I can't force another tab to do the same.
It is not another "move tab to start/end/another window" context menu choice

Amit wrote at Sunday, June 13, 2021 at 1:41:00 PM PDT

@Reed: Try right clicking and selecting "Unpin tab". I haven't yet done much with pinned tabs, but they seem like they're for things you want to always keep open but not use much space in the tab bar.

Anonymous wrote at Monday, June 14, 2021 at 4:21:00 AM PDT

Thanks a lot for browser.proton.enabled tip!

The new non-intuitive tabs just drove me crazy.
The current label must looks pushed nor the push invitation

Amit wrote at Monday, June 14, 2021 at 8:26:00 AM PDT

@Russ D: you might look at the "Tabs are hidden" option on https://github.com/furycd001/dots/tree/master/Firefox

Anonymous wrote at Tuesday, June 22, 2021 at 2:35:00 PM PDT

I have been a loyal firefox user for as long as i can remember, i recommended it to all my acquaintances (when the subject came up, I’m not that kind of weirdo telling people i just met “USE FIREFOX!!!” :)), but that time has passed.
The good times when i had everything just the way i liked it has gone, my setup was perfect for me and i was so happy that there was a system that permitted customizing, alas no more.
Why, this is so unnecessary!
why force people into a box, why force people into your way of thinking, variety is the spice of life.
I guess all good thing do come to an end.
Such a shame

Liam wrote at Tuesday, June 22, 2021 at 11:29:00 PM PDT

Nice to see we can still do some customization within the .css file. thanks for the tips.
I still prefer my tabs on the bottom, my current .css file for "tabs on bottom" no longer works. Any ideas?

Amit wrote at Friday, June 25, 2021 at 10:53:00 AM PDT

@Liam: I don't know how to make the tabs on the bottom, but you might ask on https://old.reddit.com/r/FirefoxCSS/

Unknown wrote at Wednesday, July 7, 2021 at 9:33:00 PM PDT

Yes, tabs should always be closest to the page content, for ergonomics. Shame on Mozilla for removing this option years ago. And hooray for the dedicated users who devise work-arounds to get things how they should be, again. Here's how to get FF v89 tabs below the Bookmarks bar, where they should be:
https://support.mozilla.org/en-US/questions/1339095?page=3

DanielF

John Dohe wrote at Friday, August 13, 2021 at 8:17:00 AM PDT

FF just updated to v91 and wiped out all the reversals
I'd done to restore the beloved look when v89 came out.

Its FF version 91 is now worse than ever.

I use FF containers.

When opening a tab in its container, under pre-version-89
tabs, the tab would be a dark color, but there would
be an underline in the tab according to the color I set
for that container.

That's all gone now: I cannot see the colored underline
in the tab. In the URL field the container name and its
color is seen, but this is only visible when that tab
is the active tab.

This is a problem because I like seeing that underline;
it orients me and keeps me organized (I routinely keep
dozens of tabs and windows open.)

So . . . how to restore FF containers putting a visible,
colored, underline in the tabs?

And . . . how to control the colors of FF tabs?

Thanks!

Amit wrote at Monday, August 16, 2021 at 10:24:00 AM PDT

John Dohe: you might try the CSS at https://github.com/xarantolus/userchrome.css/blob/main/userChrome.css#L1-L16 — it puts colors on the tabs but they're on the sides instead of the bottom, and it seems to still work in Firefox 91.