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. Here's the CSS I ended up with: (updated 2021-06-04)

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

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: HN 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: ,

12 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