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:
I mostly like the new design though, but I strongly dislike some elements, especially the tabs:
- 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. - The inactive tabs blend into the background. I want to see distinct tabs.
- 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:
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;
}
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;
}
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.
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!).
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. :-)
@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.
Thanks for the browser.proton.enabled hint!
Your version looks so much better. Mozilla should have hired you to do the UI redesign.
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?
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.
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
@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.
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
@Russ D: you might look at the "Tabs are hidden" option on https://github.com/furycd001/dots/tree/master/Firefox
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
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?
@Liam: I don't know how to make the tabs on the bottom, but you might ask on https://old.reddit.com/r/FirefoxCSS/
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
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!
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.
Post a Comment