Firefox 89 Tab Appearance | Hacker News Reader

Firefox 89 Tab Appearance

amitp.blogspot.com

258 pointsibobev188 comments

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.

You’ve got to enable that first: dev tools → Settings → Enable browser chrome and add-on debugging toolboxes.

And Enable remote debugging.

That’s pretty neat, but it doesn’t justify their UX decisions. Why change something that seemed to work well? Do they have constant feedback on their previous design?

I’m still confused why the tabs look like this. The active tab is so different than the inactive that it’s hard to make a connection between them. Most people already have an association with typical tab UIs. Why change this fundamental perception into something more generic and ambiguous?

> but it doesn’t justify their UX decisions

It doesn't justify shitty UX decisions, no. But it does alleviate the pain you experience when companies (inevitably) do fuck up something you depend on.

If the same happened in Chrome or Safari you would have the same chance of adjusting the browser UI as you have adjusting the UX of your toaster (none [or with a lot of work]).

Instead, Firefox lets power users be power users, installing extensions that completely changes the UI or adding your own stylesheets for customizations like the ones mentioned in this submission.

So booo to the team doing the UX change, yay to Firefox for letting me fix their own mistakes without having to wait for it to be deployed.

> Most people already have an association with typical tab UIs. Why change this fundamental perception into something more generic and ambiguous?

This was probably said about tabs vs windows when tabs first appeared in browsers as well. Why introduce a different concept when you can already have many windows?! People seem to prefer tabs today, so sometimes going against the wind is a good thing. Problem is that you don't know what will be good until you throw that thing at people and they tell/show you their reaction.

> This was probably said about tabs vs windows when tabs first appeared in browsers as well. Why introduce a different concept when you can already have many windows?!

You can justify any bad changes this way and "probably" means you don't know but you just made it up to justify. Tabs made things better we all new when that happend. What good thing the designers thought to introduce this change like in the tabs?

These designers have nothing to do at office if they don't. Basically we all are lab rats with every new shiny device or app version that hits now a days. Anyone having fun re-learning new gestures on mobile devices every 2 years?

I like the new tabs. They don't confuse me. And they look less noisy/calmer/less crowded. The Windows task bar also works nicely without a tab design.

I applaud the Firefox team to make it possible to customize the UI at such level and I hope that it spawns a lot of beautiful plugins.

My biggest gripe is that the default UI doesn’t look like a typical default UI. It looks like a third party plugin that’ll most likely confuse more people than with a plain boring UI.

You can still have many windows, nobody stops you from doing that.

> This was probably said about tabs vs windows when tabs first appeared in browsers as well

Tabs is a way to group related so windows which useful if you have many of them. And AFIR tabs in browsers was very welcomed by users, unlike today’s nonstop UI churn.

> Do they have constant feedback on their previous design?

Why listen to feedback when you have telemetry. (edit: /s for clarity. My point is that telemetry is probably a net negative for many projects.)

There's probably a telemetry -> spreadsheet -> powerpoint -> jira workflow that people are doing full time at most companies.

Taking your comment at face value: because telemetry can lie even more easily than users, pointing the finger at entirely the wrong thing in the worst possible way: with cold, hard numbers to convince most people who don't want to deal with the issue.

Telemetry complements feedback, it should never replace it entirely.

A reasoning given for the change in tabs was a lot of user feedback that people didn't know you could drag and drop to rearrange tabs, but also kept requesting that ability (despite it already being supported). I can almost see the reasoning behind "the attached tab looks far too attached and 'fixed' to the rest of the window so floatable buttons would appear less so and 'easier' to move" and I don't entirely fault it for bad logic, though I also think they could have found a better alternative that didn't feel so drastic a departure from decades of tab UIs (in Firefox previously and elsewhere).

Says a lot about the users, when they request an existing feature without trying to do it. I mean it's a simple drag and drop. How do you not try that before? :D

Partly because due to a decade (or maybe decades?) of constant UI/UX churn in software, operating systems, etc. people are scared to try things for fear of breakage and inability and/or ignorance of how to undo unwanted changes. Speaks to the overall terrible and continuously worsening state of software UI/UX

one caveat is that you need to both enable remote debugging and enable browser chrome debugging toolboxes in the settings. fairly easy to do cmd-option-i then f1 or click the three dots and settings. then under advanced settings there are two checkboxes to check one for remote debugging and the other for browser chrome

I have a pretty customized userChrome.css as the main feature I use in Firefox is multi-row tabs. This used to be provided by a XUL extension but now it possible in a somewhat less fantastic way with userChrome.css.

The problem is that every major UI change breaks the userChrome.css and I have to spend a while tweaking it or waiting for someone else to design it up. It's frustrating.

Since I knew this update was coming I disabled automatic updates for the first time ever. It might be a while before I decide to upgrade.

It sounds like you should be using the ESR releases?

Especially since there are some potential RCEs in Firefox 88 as far as I can remember.

ESR is definitely a safer option.

You know "Simple Tab Groups"? It's far better that having multiple rows of tabs.

It doesn't fit my workflow. I open almost every link in a new tab and if I'm doing research that can be a lot of tabs. I don't want to spend any time organizing these temporary tabs; I just want a way to quickly see and move between them.

If you use a lot of tabs in most browsers, the tabs end up being just tiny icon-sized. That's no good. I also don't want to go through another layer to find them.

Before switching to Tree Style Tab extension I was quite happy with customizations from https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Them... - they use Firefox beta to adjust css so once new Firefox version is released everything is ready from the get-go.

I do the same thing (and by default each new tab opens in a new temporary container). I use Tree Style Tabs to be able to organize them. It's particularly nice with a wide-screen monitor, since vertical space is at a premium but there's extra horizontal space. It just makes more sense to use that for the tab bar. I do have userChrome.css to hide the main tab bar though.

Didn't they say that userChrome.css customization is going away soonish?

If it does, they'd better provide another way to hide the tab bar.

I don't remember Mozilla saying that. There were voices of suspicion, though, following the decision to disable loading of userChrome.css by default, allegedly for performance reasons. https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-...

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.

That is good to know, because what I am most afraid of is this new look driving away people, or making people not switch to Firefox.

I mostly like it, especially along with container tabs.

I think it's a bit of a nice improvement, or just different in a way I don't mind. Which is a sentiment that doesn't provoke me to make forceful statements about the change being good or bad.

I'm in the middle ground. When I first heard the complaints, I thought I was going to hate it.

After using it, I simply don't care. It's fine either way to me.

I don't care that much about the tab change, but the contrast against the background for the URL and search boxes has gone waaaay down, to the point where I'm finding it noticeably slower to acquire them. (I have to look for the text in the box now, rather than the box itself, because the latter is nearly invisible.)

I used to use Safari, until Big Sur came out and ruined its UI by making the contrast way too low -- I was having trouble even distinguishing where the page content ended and the browser chrome began at a glance.

So I switched to Firefox a few months back... It's disappointing that they've now made exactly the same mistake, but at least there's Firefox Color [1] that allows me to easily restore some contrast without spending time writing my own CSS.

[1] https://color.firefox.com/

Exactly. First impression is meh, but I'll get used to it. Whatever.

I like to bash Mozillas new direction, and I was fully prepared to jump on the UI refresh hate bandwagon.

But I don't know why I hardly noticed a difference. I mean sure it does look like a button, and I don't really get the point of it, but the thing I was worried about was the increased screen estate. Maybe it's because of my gtk theme, maybe it's related to fixes in hidpi UI scaling, but it actually seems to use less screen estate to me.

Am I crazy? Or are there other people that feel like its using less screen estate?

They fixed some things partway through the process with the compact theme - the address bar is now shorter while the tabs + their padding is taller than the tabs in old compact mode. I haven't done a side by side but I think compact -> compact ends up being a wash in vertical real estate. There were some older images where new compact was taller than old normal and new normal was taller than old touch when it was in firefox beta however.

I also like the new design, but I switched back to Safari after a day because Firefox kept taking 150% CPU. It was actually really snappy at first. I'm not sure what happened. But yea it wasn't just a one time thing.

I use firefox all day long on apple with zero issues. Sure it wasn't something on your system? like an errant plugin? (yeah I have a memory/cpu graph running 24/7)

Hm, I didn't try disabling plugins. Good call, let me try that.

When I see that, it’s usually because one of my tabs has a site with something in it like an endless scroll list or something else inefficient that allocates tons of elements in the DOM and never releases it.

Hm maybe. But I only tried sites that I already had open in safari with zero problems. Someone else suggested maybe a plugin was screwy; that seems plausible to me.

I actually love the tab design, which is odd, because I hate anything new. What I did NOT like is the vertical spacing, which stank of the superfluous header bars from the late 90s/early 2000s.

I applied a browser CSS change to fix it, and now I think it's great.

    /*
     * 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 also am in this camp, and used the "compact" UI theme previously. With editing the-

about:config

I have the new tab theme, and the compact UI once again.

And if anyone is also trying this route - change `browser.uidensity` to 1 will restore the compact theme.

This indeed looks much better. Unfortunately this will be removed starting FF90, according to the reddit link above.

Oh, well looks like I'll need to delve into editing the browser's .css now to adjust it to my liking.

I'm in agreement with you here. I do like the design, just loathe the excessive useless margins. It's a web browser, not a web site. I don't know why everything needs massive margins/padding nowadays. I like condensed.

Anyway looked a lot worse in screenshots, with my system theme and tweaks I am actually liking how it looks. What I don't like very much is the new shield icon inside the address bar, looks more like a weird hexagon than a shield, but that's rather minor.

thanks I hate that the browser is taking that much space. browser purpose is to serve content, not to be in the way of content.

It is a bit hard for me to form an opinion on the UI design as yet. But this release has been forced on me by their auto-update feature (no choice to wait with updating), and since then after opening FF it freezes my entire Ubuntu 18 to the point where I have to restart. In app reviews I saw I wasn't the only one with this issue.

i've been seeing FF freezes on arch too, though thankfully just the browser (which i need to xkill) rather than the entire desktop

Are you on macOS? It seems most of the people liking them are on this OS (despite the article's author). I wouldn't be shocked to learn that all these Mozilla designers are using macs :)

Personally it's unusable on my Windows 7 computer. I know it's a dead OS but still.

I'm in Linux and I like it, although some userChrome tweaks applied to it already, and it's respecting my system theme/colorscheme, so it looks actually kind of good.

Windows 10 here.

I'm using LMDE4 and it's working well for me.

As someone who uses Firefox as their daily driver consistently for the past several years, when I first heard that compact tabs were going away I was pretty disappointed and a little annoyed. However, I installed Firefox 89 just to give it a try and I actually rather like the new interface.

I used to browse with FF and Google Chrome. But now FF is so similar to Chrome that I hate to Alt + Tab and be unable to tell them apart.

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!

Have you tried using a different theme? Or does that not help with making the tabs more obvious?

I have tried, not much change - they don't add a separator between the tabs. What I noticed now, I thinka major problem for me is that the tab title fades away to the right, that causes me constantly to try to focus on it. The "button" style for the active tab is ok, but the display of the other tabs is really irritating.

On a different note, is there a way to have "send tab to another device" as a dedicated button again? They moved it as a sub-item unter the "firefox account" button, this is much less conventient as it was. The send tab feature is one of my most used features.

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.

Just install Firefox ESR for the old man , he won’t get the UI changes shipped but will still get the security fixes

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.

Thank you. With just the fix to connect the "button" to the tab below, it feels good again. The other interface with the floating buttons is a bit too unspatial for me (I always had a thing for spatial interfaces).

It would be pretty cool if someone could create a package management-like tool where I could easily browse and install these little customizations…

Perhaps an extension or plugin of some sort... maybe call them add ons? ;-)

Yeah, except the "new"-style Firefox addons can't do half the things ye Olde ones could.

Would userChrome.css get overwritten with each update?

No, but your changes may break in a future update

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.

The problem that tabs no longer look like tabs (and that the active one has this weird button look) is not exclusive to dark mode.

In one word: Why?

>In one word: Why?

In two words: Why not?

Tabs are so 2010s

(Joking, it is a textbook example of ergonomic regression for the sake of change).

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.

Linking two related UI elements isn't a "skeuomorph". It is an element of design. A skeuomorph is when you try to make a UI look like a physical object: adding paper grain to the background of a word processor, or making a time app look like a stopwatch.

More generally, a skeuomorph is when a derivative uses design elements for decoration that were functionally necessary in the original. Paper grain in the background of a word processor is one example of a skeuomorph — but so are spokes on hubcaps, electric lights shaped like candles and the shutter sound your phone plays when it takes a picture.

> A skeuomorph is when you try to make a UI look like a physical object

Agreed, and the linked article specifically themes their tabs to look like a file folder, with a reminiscent color and rounded corners.

The very concept of a tab that contains related information in it is a replication of the physical tabbed file folder.

It's pretty much this: https://imgur.com/a/u2WgESW

And that is largely a hold over from the concept of a physical desktop in an office. See: https://onezero.medium.com/the-document-metaphor-desktop-gui...

It'd be nice for some new concepts to be introduced and refined.

IMO this is more about affordance than about skeuomorphism. The traditional tab strip UI is already an abstraction, because it has only two levels of depth (instead of each tab having a different depth like physical tabs) and you don’t see the stack of individual edges of each tab page. (There were skeuomorphic versions that actually did this.) The new Firefox design is lacking any clear affordance that would connect the tab button to the respective tab contents.

Tab-look isn't skeuomorphism, the way it's used most places in computer UI—it indicates to the user which parts of the UI are associated with the tab, and so may be expected to change when the tab is switched.

Which is not the case of the UI element right under the tab bar ... because it's the toolbar / address bar. In earlier versions of Firefox, tabs used to be located under the toolbars hence they made sense as tabs.

Only Safari kept this UX. I never understood why everybody copied this Chrome thing.

The address bar does change. The status of tool bar items can change.

That’s right, I’ve never thought about it.

You’ve changed my mind on this.

It is a different location bar for every tab. Try typing some text into it and then switching tab and then back again.

Yup. I’ve been wrong for years.

I can see reasons why a lot of things would go under the tab, like the address bar. FF's biggest UI-sensibility sin I know of (at least on the last design—I've not used the new one yet) is the damn hamburger menu. On desktop! That's a real WTF.

Pie menus are better than hamburger menus!

https://www.youtube.com/watch?v=tMcmQk-q0k4

If you're on Windows, press the [Alt] key to get the ordinary Windows menu bar. Can't recall, might work on other OSes too.

I don't consider Photon a skeuomorphic design really. It was a grid based flat functional design with razor sharp edges. Australis on the other hand was absolutely skeuomorphic, color gradients to give pop-out with curved tabs to mimic real folder tabs and so on.

If "the element is connected to the content it represents" is enough to make a design skeuomorphic then so be it but either way I don't think it's desired "because that's how real folders work" vs "I want to know which UI elements are related".

A tab bar should look like a tab bar. Even if that look historically is skeuomorphic. In the same way that a save button isn't labelled with a floppy disk icon anymore, but with the save icon.

I'm with you.

It looks and feels FAST!

I don't like how skeuomorphism turned into a dirty word.

A skeuomorph is just an unessential design cue a derivative takes from the original. They can be entirely ornamental (like the dumb faux leather of some of the latter day Jobs-era iOS apps), but they're quite useful as affordances.

There's no particular technical reason why you'd prefer any one particular graphic design for tabs over another, but the separator-style tabs make the association between tab headers and contents much clearer than the new design.

Likewise, there's a lot of value in the Numi/Soulver style of calculator apps for power users, but common users are better served by the skeuomorphic physical calculator design, which is perfectly functional and much more familiar to most (though this may change as younger generations are less and less exposed to traditional calculators).

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.

There is a certain amount of allowable "thumb twiddling" time.

My educated guess is that someone working in a private company has to justify their salary, even when there is nothing to do. So they come up with "absolutely necessary work to do" by inventing themselves solutions and "improvements" for problems nobody has.

Now we have a team of +10 people doing meetings, colorful charts, analysis, etc. Including writing blog posts like "changing the world and fighting a pandemic by changing the size of the tabs". Bosses raise the head and see all the cubicles busy. Everybody is happy.

Now that it's released it's time to think about the changes for the next version.

PS: I'm a happy Firefox user since it was just "mozilla".

1) actually-necessary design work on a product is very boom-and-bust.

2) for years now, tech companies have hired enough designers for the boom periods, rather than contracting or just dealing with longer design cycles—I suspect this is Apple's influence leading to much larger design budgets and resultant empire-building.

3) bust-period design work doesn't get one promotions or look as impressive in a portfolio as boom-period design work, so design departments or individuals are heavily incentivized to create artificial "booms" both so they have enough work to do and so that the work is helping everyone advance their career. These align well with product manager career advancement incentives (everyone loves screen shots) so they get green-lit. These are the unnecessary and often ill-advised redesigns that we see so often.

Because they retain oversized permanent UX teams with insufficient work to go around. The result is endless user punishment. Mozilla could improve their browser and save money in one simple step

First they'd need to revert all the oddities of the last few years, like the growing url bar, now weird tabs, and hardcoded colors in about.

I don't know if I'll ever forgive Google for killing blob emojis

you can get them as a sticker pack. "the blobs live on"

https://9to5google.com/2018/07/17/google-blob-emoji-gboard-s...

UI visual design has a propensity for bike shedding.

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.

Firefox Color offers the ability to remap most (all?) colors used in the UI. It's hardly "10 steps just to adjust a single color", and I'm not aware of any browser that makes it easier.

More advanced customization is obviously harder to put in to a UI, but exposing the underlying CSS means that anyone can just copy from a blog post like this fairly easily. That seems like a decent compromise to me. I certainly don't recall being able to edit any pre-CSS application with that level of refinement.

> Remember, when software UI was customizable?

I liked the old philosophy that a desktop should have "consistent look & feel". If all your apps use the same UI toolkit, that toolkit can be made to work well and with things like accessibility in mind, and can be themed/customized to the user's preference.

My old-hat way of thinking goes so far to say that "tabs" should be done by the window-manager, not the browser.

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.

This pref will not work in future versions.

Sure, but my hope is that if every discussion of Firefox talks about how we all prefer it, Mozilla might realize it's in their best interests to review their decisions, before they annoy the last vestiges of their userbase away.

We can only hope, anyways.

The first day 89 was out, I got a call from a user wondering what the heck happened to Firefox, and if I did something.

There about 10 issues logged with Bugzilla regarding this. All closed as "wontfix"

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

This is the feature firefox needs to be in the default browser. All these tweaks to the top tab thingy is just a band-aid on the fire.

Works but looks differently with less emphasis on the current tab.

I haven’t gotten used to it yet, but oh well.

Isn't that a user preference? I remember after some upgrade a few months (maybe a year?) ago that the current tab was also de-emphasized and I changed the highlight color as it didn't seem to be changing itself back in the next release (i.e. not just a bug) although it never manifested on my private laptop which runs the same setup.

Edit: Apparently you need to set custom CSS for this. You might need to enable Expert Options at the top of the preferences screen. I've got:

    .tab.active {
      background-color: #371737;
    }
    .tab:hover {
      background-color: #600;
    }

These colors are I think slightly more obvious than the default was; just toy with the values a little (lower is less color / darker and vice versa). Not sure if this part of my CSS is also relevant / needed to work well with these colors:

    #tabbar {
      background-color: #000;
    }
    .tab {
      background-color: #171717;
    }

Do you use it along with the regular tabs ?

I liked the tree style tabs but didn't want to have two components basically doing the same thing taking up my screen space. I don't know if there was a way to hide the regular tabs.

I can hide the whole tab bar when using TST, but doing so will also hide the window buttons (minimize/maximize/close), which is annoying.

It's been a while since I used a Mac so I can't speak to that, but this is categorically NOT the case on my Linux (Kubuntu) and Windows machines.

I have TST enabled with the "regular" tab bar disabled, and can very much still see/use the window buttons.

Can you share your style? This is what I use on Windows

    #TabsToolbar {
       visibility: collapse;
    }

    #titlebar {
        visibility: collapse;
    }

and the result:

https://i.imgur.com/0DxPCvE.png

Sure, this is what I use on both machines:

    #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
      opacity: 0;
      pointer-events: none;
    }

    #main-window:not([tabsintitlebar="true"]) #TabsToolbar {
        visibility: collapse !important;
    }

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

It's probably worth noting that I've also set "browser.tabs.drawInTitlebar" option to "false" in about:config.

I think there's a standard Firefox preference to un-merge the tab bar and window bar. Maybe that would help?

I can't find that option, do you know where it is?

Menu → More Tools → Customize toolbar

Then click the "title bar" checkbox at the bottom left.

A checkbox labeled "Title Bar" at the bottom of the customize window

A while ago I did this when on Mac - keeps it compact on a single line.

https://gist.github.com/drcharris/0830ff4da063c68b0ceed415d8...

I used to use tree-style tabs with the normal tab bar hidden. I've moved off Firefox so no guarantee the new big update hasn't broken this, but I used the following userChrome.css (if you're unfamiliar with that then check out https://www.userchrome.org)

    /* Hide tab bar in FF Quantum */
    @-moz-document url("chrome://browser/content/browser.xhtml") {
      #TabsToolbar {
        visibility: collapse !important;
        margin-bottom: 21px !important;
      }

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

I think I probably got it from here: https://www.reddit.com/r/FirefoxCSS/comments/d4hx49/ff69/

Edit: More authoritative source shared in the comments which is probably a better starting point (and has loads of other configuration too): https://github.com/piroor/treestyletab/wiki/Code-snippets-fo...

I just tested this on the newest release and it works! I was looking for something like this. Thank you :)

(It does seem to hide the min/max buttons on the left, but I don't use those anyways)

A great deal of customization can be done. The TST GitHub wiki has a nice page dedicated to these tweaks, you may be able to find what you need there:

https://github.com/piroor/treestyletab/wiki/Code-snippets-fo...

Nice! I edited that link into my comment higher up the thread too, definitely a better starting point for someone than the random reddit thread I linked!

If only tabs were the only design problem with the last two releases.

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.

Firefox Color should let you customize those: https://color.firefox.com/

> Anyone know how to get my title bar and window border colors back?

Set browser.proton.enabled to false in about:config. That makes Firefox 89 use the Windows 10 accent color in the titlebar again on my system.

Only helps until the next release. Then all customization options where you can turn off Proton will be removed.

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

Note that these numbers are intended for text readability. They don't directly relate to the visibility of a rectangle.

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!

What is "cohesive" about a custom theme and unique widgets? That don't match anything else?

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.

It displays for me, in place of the favicon (but I'm on nightly, so this might be a more recent change). Here's what it looks like for me: https://imgur.com/a/EwaKsNt

Interesting, here's what I see now on 89.0: https://imgur.com/a/bItmejF

I swear the "PLAYING" text wasn't there when I first updated. Seems like maybe they're still ironing out how to handle it.

FWIW, the playing text is longer in the localization I use, and when cut off (many tabs) it's not really readable. :)

The difference is compact mode. In compact mode it replaces the favicon, in normal/touch mode it adds an extra line with the "PLAYING" text.

> an extra line with the "PLAYING" text.

If anyone knows how to turn this off, or prevent it moving the tab title up and down please let me know.

Pausing a video in one window then a second later having my attention drawn back to it by the movement is very annoying. I'm on xubuntu.

Do you not have "playing" in small caps under the title? https://i.imgur.com/9qUz5zT.png It's also shown in various articles about the redesign: https://www.theverge.com/2021/6/1/22463321/firefox-design-re...

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.

Improvement:

  .tab-content {
    background: #ffffff20 !important;
    border-radius: 4px 4px 4px 4px !important;
    margin-bottom: 4px !important;
    margin-top: 4px !important;
  }

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.

Why restrict yourself to one side, especially the top or bottom, or even the same side for all windows?

You should be able to independently drag tabs around to any edge of the window you prefer: top, bottom, left or right.

So, for example, you can lay out your many source code tabs along the right, so they stack vertically and you can read all their titles, and lay out your several shell tabs along the bottom, where they're easy to find. Or whatever you want!

Tabbed windows:

https://en.wikipedia.org/wiki/Tab_(interface)

>Large numbers of tabbed windows scale better with the tabs along the left or right edges of the window, instead of the top or bottom edges. That is because tab labels are usually much wider than they are tall, and because it is now common to use displays which are considerably wider than needed for displaying documents and web pages. The NeWS version of the UniPress Emacs text editor placed tabs along the right window edge, and laid windows out in a vertical column, so each tab was initially visible, and the user could use them to raise and lower the windows, drag them around in the column, or pull them out to anywhere on the screen.

>Tabbed window interfaces can give the user the freedom to position the tabs along any edge, so all four edges are available to organize different groups of tabs as the user or application sees fit. The PSIBER visual PostScript programming environment for NeWS had tabbed views that the user could stick onto the stack (represented as a "spike"), and the user could move the tabs to any edge.[3] The NeWS pie menu and tab window manager enabled users to position the tabs anywhere along any edge, and the tabs popped up pie menus with window management functions, to uncover and bury windows, etc.

Emacs with tabbed windows and the HyperTies hypermedia browser:

https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy...

PSIBER Space Deck visual PostScript debugging environment with tabbed object windows that you can impale on the PostScript stack "spike":

https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Ps...

The Shape of PSIBER Space, Tabbed Windows:

https://donhopkins.medium.com/the-shape-of-psiber-space-octo...

>Tab Windows: The objects on the deck are displayed in windows with labeled tabs sticking out of them, showing the data type of the object. You can move an object around by grabbing its tab with the mouse and dragging it. You can perform direct stack manipulation, pushing it onto stack by dragging its tab onto the spike, and changing its place on the stack by dragging it up and down the spike. It implements a mutant form of “Snap-dragging”, that constrains non-vertical movement when an object is snapped onto the stack, but allows you to pop it off by pulling it far enough away or lifting it off the top. [Bier, Snap-dragging] The menu that pops up over the tab lets you do things to the whole window, like changing view characteristics, moving the tab around, repainting or recomputing the layout, and printing the view.

Tabbed windows for The NeWS Toolkit 3.0 / OpenWindows 3:

https://www.donhopkins.com/home/archive/NeWS/tab-3.0.2.ps.tx...

NeWS Tab Window Demo:

https://www.youtube.com/watch?v=tMcmQk-q0k4

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.

For how long, until they remove it? Honestly, I hate Firefox now. It's going backwards.

Hopefully after the next esr comes out so I don't have to deal with this for another year

I think you can safely assume they won't throw it away instantly. Unless they introduce some new feature that is only possible with the new UI, Mozilla will probably just keep it around to appease fans until they redesign it again.

No, they are confirmed throwing it away in the next release.

Huh, on Arch GNOME it does not go back to the old interface, but it does make the new one more compact for me. That is far more workable for me.

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.

I remember there was a point in time where you could use HTML and such to customize some parts of Windows, but I recall it was considered a security nightmare.

I thought I'd hate the new tabs but it turns out, I really like them!

I've also been sticking with ESR for a while, and wondering how much time I have until the apparent trainwreck that is current Firefox development catches up with me. Android browsers have already gone to unusability hell ever since the firefox redesign, to the point that I've given up on browsing from mobile entirely. I can't even imagine dealing with the same levels of brain damage on desktop. What's the next step, giving up and switching out to Chromium?

Every time I have to use either Chrome or a recent version of Firefox(or any version with default settings, really) it's a terribly frustrating experience.

It's funny... Firefox was the first software to popularize browser tabs (though it didn't invent them)... and now it's the first to "destroy" them.

Though I must admit, I am utterly baffled at their decision to turn tabs into buttons visually, though the behavior is the same.

Tabs are now a universally understood UI element, as common as checkboxes or menus or folders. This is like... deciding to make checkboxes round instead of square, so now they're confused with radio buttons.

What possible reason did the Mozilla UI team have for deciding to make tabs... look like buttons?

The solution at this point is Microsoft Edge. RIP Firefox, 2004-2021. The new UI on desktop AND Android is a total disaster. You won't be missed

Dramatic much?

They changed the style of the tabs. That's it. People really can act like spoiled children sometimes, it's ridiculous.

It's not a disaster, lots of less vocal people love how it looks now. I love it.

This is some of the disastrous Android rewrite leaking out into desktop, it's no small issue. Check out the Play Store reviews for evidence by now Mozilla's primary mission appears to be self-destruction

I think the purple theme is pretty so I enabled it.

I switched back to Firefox specifically because of the new tab bar design. I hope Mozilla don’t walk it back because of HN outrage.

Has anyone compared the battery performance of Firefox vs Edge (chromium) vs Chrome on windows in the past month or two?

I quite like the new look. They also changed the style of select menus which look much better now in dark mode.

I wish we could customize tabs like we did with favicon. Imagine each site having its own styled tab.

Anybody knows how to enable multiple rows for tabs? May be this can be set in userChrome.css?

https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Them...

It's a little more work, but it's doable. It's been stable and surviving updates without needing maintenance for many months now.

Thanks, will try this out! Looks promising!

So is there a bug-free userChrome.css rule for auto-hiding the navbar in Firefox 89?

I can't deal with 89's appearance right now. Downgraded to 88.0.1

Is there a way to separate UI/UX from functionality/security?

Changing designs is what made me realize the need to push for free software and appreciate people like Stallman. I don't want to use the modern, awful designs for Firefox or Android. I prefer firefox as it was before this update, the original skeumorphism of iOS, and Android around the galaxy S3 era. It's incredibly frustrating that my user experience has to continuously degrade over the years just so managers and UI designers at these companies can justify their promotions. I immediately disabled the firefox proton changes and will continue to use the old UI or switch browsers when it's no longer possible.

What is the link between free software and changing designs?

Reply on news.ycombinator.com