Firefox 89 Tab Appearance

Firefox, despite its questionable UI design choices, is heavily customizable with the userChrome.css file. The author mentions having to figure out the correct ID/class names, but you can do it yourself just by inspecting the whole browser chrome as if it was part of an HTML DOM.

Browser Tool Box (open fly out menu -> More Tools, or Ctrl+Alt+Shift+I). This opens a remote debugging session, and you can freely select and customize any part of the chrome.

Despite all this criticism (because negative 'insightful' comments are what drive clicks nowadays), I just switched back to Firefox from Edge BECAUSE I love the new tabs' appearance.

    /*
     * remove dead space in browser tabs bar
     *
     * Source: https://www.reddit.com/r/firefox/comments/nq6kto/if_you_dont_like_the_new_design_you_can_disable_it/
     */
    :root { --tab-min-height: 30px !important; }
    :root #tabbrowser-tabs { --tab-min-height: 30px !important; }

I hate the new tabs. I am struggling with my eyesight, so not having any border between the tabs makes it very difficult to recognize them. The only indication left is the icon. But everytime I try to selectd a tab I have to squint to see where I have to click. Very unpleaseant and inconsiderate. I wished they had run some testing program before imposing such a technically unneeded modification. I am all for progress, but for heavens sake, please check with users before making their life miserable!

I have a neighbor living above me, an about 80-year-old man, who needs help with his PC on a regular basis. One of the most regular cries for help is when Firefox changes its UI yet again, which seems to happen about every three months. This is deeply confusing for "normal" people just using their PC and also deeply infuriating for people like me who need to answer the whys of those changes. Looking at Chrome's main UI, it hasn't radically changed since the first version and we are currently on version 91. In Firefox' case, even running a LTS version does help in the long run, since you just postpone the pain.

I just hope this endless tinkering with things that aren't broken ends someday -- users don't need an A/B-calculated productivity increase of 2%, come back when you can increase it by 200%. But in that case, just make another product and leave existing working ones alone.

I'm using ESR, so this hasn't impacted me yet, but there's a large userChrome.css file that reverts the worst of the changes at:

https://github.com/black7375/Firefox-UI-Fix/

It's well commented enough that you should be able to cherry-pick individual fixes.

Looks like this might only be an issue with dark-mode. In regular mode the active tab is very visually distinct.

I think this is a more general problem with dark-mode interfaces. Contrast of content is usually easy to achieve (e.g. light text on dark background) but getting contrast between UI elements like tabs is quite difficult.

Apple had a great talk about the design challenges at WWDC 2019. One of the ways they do this is by integrating ambient colours from things like the desktop wallpaper which Firefox doesn't do.

I quite like the new design. I think the need for them to look like actual "tabs" like in a folder is overblown. Let's drop the skeuomorphism.

The customizability in Firefox is great, but the example in the link is... well, to each their own.

It's a bit ridiculous. I chose a system theme for a reason, ... because I like it. I don't want unique widgets. Certainly don't want tabs that look like buttons. Or color tinges or stripes added to things to distract from the content. Reminds me of the bad old skinz craze of the late 90s.

They also removed the icons in the menu that helped me navigate. Now I have to read the menu more carefully to see what I'm doing. Definitely slower than a few days ago.

Final insult, they hard coded the highlight colors in about:* to cyan! I hate cyan. Dark mode panels have a blue tinge to them. Is this amateur hour or what? I use warm colors with my dark mode, on purpose. Not anymore.

I had to disable the also ridiculous animated expanding url bar in the previous release with userChrome. I'm done with that. Designers, please go experiment on some other app, not the one I rely on every day.

Can anyone explain why companies like to make unnecessary design changes? It seems to be that there’s no benefit to this tab change. Other products like Discord and Google Meet have also been making slight UI changes recently and I find it nothing but a nuisance.

I didn't think I would like the new tab layout but after using it for a few days, it doesn't bug me one bit and I think I may actually prefer it.

I don't know what theme the OP is using, but the default dark theme's active tab color is noticeably lighter than any other element in the chrome without any changes. EDIT: I see now. They're using one of the custom Firefox Color themes. I haven't really dug into those; usually the default dark theme is good enough for me.

It's easy to navigate, provides more information in some cases (I really like the second line of smaller text indicating things like a video playing or autoplay being blocked), and I don't feel like anything of value was lost, just reorganized a bit.

I also prefer the Container color bars at the top than at the bottom where they used to be as it gives them more prominence. The only thing I would probably change is I prefer the "+" button to be static on the right hand side. But that's minor and if I truly cared enough, probably super easy to fix in the userChrome.css.

Note: This is mostly on macOS, which is what I spend most of the day running at work. My experience on my Windows PC at home has been mostly the same, though.

When are we just going to admit that "flat design," while looking great in UX designer portfolio screenshots, is really a usability/accessibility nightmare?

Remember, when software UI was customizable? Developers somehow managed to build amazing customization options while adhering to OS design and QA had it all tested without any fancy "automated testing tools" we have today.

Firefox needs to figure out how to expose UI customization to all users, not only those who are comfortable enabling user styles and hacking CSS. Most UI styles probably are using CSS variables, so how about starting to expose them in some easy to use interface, with simple textbox or spinner? Of course, they should plop a huge banner, that customizations are not supported, but in the end this should help users to quickly fix their personal annoyances. It is impossible to make single UI that will satisfy all users, but such customization tool surely will turn more grumpy users to happy users. Imagine, how disabled person must feel, when they need to go through 10 steps of browser customization just to adjust a single color.

Revert to the older, compact tab style using:

1. Visit about:config

2. Set browser.proton.enabled to: false

3. Set browser.uidensity to: 1

4. Optionally, set browser.proton.toolbar.version to: 3

No userChrome.css edits necessary.

As long as tree style tabs still works , it's all good.

This hasn't affected me at all; thankfully I use tree style tabs[0] with some CSS a friend shared:

    /*Collapse in default state and add transition*/
    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
        overflow: hidden;
        min-width: 40px;
        max-width: 40px;
        transition: all 0.2s ease;
        border-right: 1px solid #0c0c0d;
        position: absolute;
        left: 0px;
        z-index: 20;
    }

    /*Expand to 260px on hover*/
    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
        min-width: 260px !important;
        max-width: 260px !important;
        margin-right: -220px;
    }

    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
        display: none;
    }

    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] > #sidebar-header {
    visibility: collapse;
    }

    /* hides the native tabs */
    #TabsToolbar {
        visibility: collapse;
    }
    #titlebar {
        visibility: collapse;
    }

This provides the benefits of tree-style tabs without constantly taking up horizontal space.

[0]: https://addons.mozilla.org/en-US/firefox/addon/tree-style-ta...

Anyone know how to get my title bar and window border colors back? The "system" theme doesn't seem to honor my system's setting, despite the name. I had a nice bright red title bar and window border on my focused window before yesterday. Now everything's a drab gray, with no way to know which window has focus. Small rant: I try to make FF my daily driver each time a new update is released, but each update brings some new boneheaded thing to make me more and more hopeless that will ever happen.

Thanks, just adding

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

Already makes the active tab visibility so much clearer.

I just did a check, they use #FFFFFF for active tab and #F0F0F0 for non active tab.

Using https://webaim.org/resources/contrastchecker/

Gives a contrast ratio of 1.13:1

A big fat fail

I'm loving the UI refresh!

I was waiting for some days of use to make my opinion. My _personal_ experience was great! All feels more cohesive and friendly.

And seeing all the styles and components making sense together, I think that this is the start of a good direction. Is a measured refresh, not a change of paradigm or something like that, a good decision of the design team.

I understand the backlash that UI changes has on users, sometimes is justified, sometimes is Old Man Yells at Cloud.

This new look and experience is also good to compete with Chrome and Edge, a design that works well but _also_ looks attractive for the times, is a way to get new users.

Good work Firefox team!

I like some of it but really wish they would just add a connection graphic to the page so they are actually tabs again.

Also I know some people are mad the menus are too tall.

ProTip don't try to disable the new "proton" menus its all whacky.

My only big issue with the redesign is that it no longer shows you at a glance when a background tab is playing audio. You have to mouseover each tab to show the audio icon.

Could someone please make a just-change-GUI win2000-styled fork of a Firefox, to stay?

These constant changes are preposterous. And not just Firefox, everything.

While we're at it, could one get a classic-ish Windows control panel and dialogs back, in the manner of the Classic Shell/Start menu?

Please? Pretty please? With a cherry on top?

This is how I imagine it should look like: https://i.imgur.com/fXIWUDM.png

  /\* Make the tabs not blend into the background \*/
 .tabbrowser-tab:not([selected]) .tab-content {
     background: #58506040;
     border-radius: 4px 4px 4px 4px !important;
     margin-bottom: 4px !important;
     margin-top: 4px !important;
 }

Setting transparency on the background element doesn't cover up the container color.

Every time they release changes to the UI, one of the most basic things I'm desperate to get back is tabs moved to the bottom, I.e. in order of the menu bar, address bar, quick links, then tabs.

As I frequently mouse between the browser content window and tabs it just seems to be more efficient IMHO.

Perhaps they've added back the option for tabs on the bottom, but it inexplicably vanished many versions ago.

I also made my own tweaks https://kevincox.ca/2021/06/03/firefox-proton-tweaks/

- I changed the "button" to be a simple rectangle the entire height of the tab-bar.

- I removed extra space between the pinned tabs and the regular tabs.

Slightly off-topic, but does anyone here know how to make the fonts better on Firefox? Here's an example of what I mean: https://i.imgur.com/QY7NyMm.png

I think the old Chromium's fonts are so much nicer, I get a lot less eye strain reading long documents with it. Regular up-to-date Google Chrome looks the same as Firefox to me, both fonts are too thick. I've messed around with font settings but haven't been able to find anything that makes them look as crisp as Chromium does.

I really loved the new colorful theme, IMO it looks just so modern and fresh.

Lepton - Firefox-UI-Fix is available here:

https://github.com/black7375/Firefox-UI-Fix

Alternatively, if you want to flip back to the old UI in Firefox 89, you can go to about:config, search for browser.proton.enabled, set it to false, and then restart. That should do it too.

Funny enough, just a few posts above this one on the front page is another blog post entitled "Want a killer product? Become more opinionated". Found that to be a nice coincidence.

I think allowing customization of the UI is a great feature set to provide, and it aligns quite well with the imagine Mozilla has set up for itself as an organization. Though, I can see how the teams behind these decisions would want to stray away from having their 'product identity' be something you can easily turn off.

Until now about:config browser.proton.enabled false works fine.

Just use TreeStyleTab and have all your tabs on the left, and style them any way you want if needed (my main reason for using Firefox has always been TST).

I mostly liked the new UI, except for the changes in the tab bar, the major one being reducing the tab width to mirror Chrome's. When you have more than a few dozen tabs open in Chrome or the new Firefox, it becomes near impossible to know which is which. Fortunately, I found an about:config property to change it:

Visit about:config and update browser.tabs.tabMinWidth to 100 or 110, whichever looks better to you.

I basically just replicated the old look through userChrome.css. It was pretty easy to ballpark it like 90% way there although it's gonna take a bit more finesse to get it looking pretty throughout.

https://twitter.com/Mailia/status/1399776195345006593

I'm not a fan of the new tab appearance, but I think the thought was perhaps that it looks more like a taskbar?

Any power user using Firefox without TreeStyle Tabs¹ is simply wasting their time.

[^1]: https://addons.mozilla.org/en-GB/firefox/addon/tree-style-ta...

I have found myself to like this new style of tabs, despite not liking it in previews in the announcements.

Only thing is inactive tabs are blending back into the background. Sometimes it’s hard when you are in dark system theme in Mac.

Also I would also like to know the reason behind on this new tab design. What was it trying to solve that was a problem before ? More of a curious question

I never knew that Firefox chrome was customizable thru CSS. Know that I do know I’m super excited but what I can do with it. And I’m also beginning to think that window desktop and start menu should be written in CSS and HTML.