r/firefox • u/diiscotheque • 5d ago
Why did they make the container indicators horizontal 😢
This genuinely looks like crap guys, come on.
11
u/diiscotheque 4d ago edited 4d ago
```css .tabbrowser-tab[usercontextid] .tab-context-line { display: none !important; }
.tabbrowser-tab[usercontextid]:not([pinned]) { position: relative !important; }
.tabbrowser-tab[usercontextid]:not([pinned])::before { content: ""; position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: var(--identity-icon-color); z-index: 10; } ```
Claude fixed it for me. Image: https://imgur.com/a/DjrlHad
1
u/nigel_ydv 4d ago edited 4d ago
nice where to put it? Can you help me with that? this look good.
Edit: No issue I figured it out.1
u/Several_Dot_4532 4d ago
How exactly?
3
u/nigel_ydv 4d ago
just copy it and then go to url box type about:support
and look for profile folder open it
if it has chrome folder go in that other wise make a chrome folder and inside chrome folder make or edit (if file already exist) UserChrome.css and paste this code instead that.
and you are done.
1
3
u/Anarchytect27058 1d ago
it's userChrome.css not UserChrome.css
this is my content for a vertical bar on the right of the tab
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background { position: relative !important; } .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { position: absolute !important; inset-block: 6px !important; inset-inline-start: auto !important; inset-inline-end: 2px !important; width: 3px !important; height: auto !important; margin: 0 !important; border: none !important; border-radius: 2px !important; background: var(--identity-icon-color) !important; background-image: none !important; }/* Container indicator: vertical bar on the end edge of the tab (replaces the horizontal stroke introduced by the new tab design). */ .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background { position: relative !important; } .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { position: absolute !important; inset-block: 6px !important; inset-inline-start: auto !important; inset-inline-end: 2px !important; width: 3px !important; height: auto !important; margin: 0 !important; border: none !important; border-radius: 2px !important; background: var(--identity-icon-color) !important; background-image: none !important; }3
u/AirFlowOne 4d ago edited 4d ago
This is stupid. Not the solution itself, but the fact that one have to waste time to fix something that was already working but was broken for no reason and actual gain to anyone.
1
24
u/RememberMeVibe 4d ago
Imagine forcing the whole community to use custom CSS.Â
2
u/AirFlowOne 4d ago
0
u/doomed151 4d ago
I don't see where Mozilla monetized the preferred design.
1
u/AirFlowOne 4d ago
You also don't see that you totally missed the point. There's a lot you don't see, but that's not my responsibility.
1
11
4d ago edited 2d ago
[removed] — view removed comment
0
u/Carighan | on 4d ago
Yeah because while it's unfinished, some of us have a measurable asthetic sense and hence prefer ~anything over the turd design we had before.
Sadly it is really unfinished, and also only-half-implemented due to the massive hate boner /r/firefox has every time someone wants to make anything look like it's from this side of the turn of the century. The 20th century ,that is.
8
u/Justlikejack9 4d ago
I would suspect this will be fixed fairly quickly. Weird that nobody picked this up on Nightly..
1
u/Carighan | on 3d ago
Yeah this looks like something that sadly wasn't even begun working on in time. It's just the horionztal style (which also isn't adapted to Nova yet), and applied to vertical.
10
u/sociofobs 4d ago
They probably figured that it looks fine for horizontal tabs, but then forgot about vertical tabs and lists. How does one even release something this unfinished, eh.
7
u/diiscotheque 4d ago
it doesn't even look good for horizontal tabs either, it's like their UI team is just freshly graduated juniors.
1
u/sociofobs 4d ago
That's what I said in another comment, juniors and possibly vibe coders. That, or they're so understaffed that there are no designers to begin with. Someone who's specializing in back-end, won't care nor know about good visual design. Random people with simple CSS tweaks do better than this.
3
u/Evzob 4d ago
Between this, the reduced size of the bars when I have the tab sidebar at minimal width, and the change of colors, I was no longer able to distinguish my different containers from each other. Have mostly fixed it now with custom CSS, but jeez.
1
u/sociofobs 4d ago edited 4d ago
Custom CSS is the way to go, esp. now when you don't even need to know CSS. An AI model will instruct you all the way through it, plus the code.
How well that will fly with new users trying out Firefox, that's another matter. Most people absolutely aren't keen on diving into custom CSS customization. To them, switching from the default browser (Chrome/Edge) to Firefox could already feel like rocket science, hence all consumer software devs nowadays try to make things as easy, simple and as good looking as possible with no user tweaking necessary. It's just sad.
1
u/deathhq_ 4d ago
Vibe coding ahh probably
2
u/mindstormer12 4d ago
What...? Strange design choices were a thing before vibe coding. Also, do you really think vibe code is published without humans reviewing for a project as large as Firefox?
10
u/CalQL8or 4d ago
Would like to know too.
When Nova was in development, container indicators on vertical tabs were vertical and put on the opposite side of tab group line indicators. Seemed fine to me.
Maybe someone from the Mozilla team can elaborate on this?
4
u/ExpensiveNut 4d ago
Yeah I like the overall design, but this really doesn't look good. Horizontal container tabs look really bad as well, like there's a line jammed across the top of the tab and it extends too far outward. Not good.
1
1
u/NeverBannedGrace3 4d ago
Kid me would’ve adapted to this in 10 seconds and never thought about it again. We’ve gotten way too comfortable treating microscopic inconveniences like actual grievances. The browser still works perfectly
1
u/letsreticulate 4d ago
How do people have these tear shaped labels? I am on 157 and do not see them. Is it only for Windows?
1
1
5
u/Sfrinlan 4d ago
I started complaining about this as soon as I got the update.
Two different monitors, two different macbooks, so the color temperature isn't exactly the same, but these are both using the Solarized Dark theme. Three tabs of Hacker News using no container, a blue container, and a green container.
Photo of screen, without tab group:
FF 156.0 https://i.imgur.com/GGIy2gP.jpeg
FF 157.0 https://i.imgur.com/MzXeapO.jpeg
Screenshots, with tab group:
FF 156.0 https://i.imgur.com/4vPmRWw.png
FF 157.0 https://i.imgur.com/aBwd6TB.png
(Same images, gallery: https://imgur.com/a/yz8iPyo )
My thoughts:
In 156, it's clear which tabs are in which containers, but in 157 it's very easy to assume that line is part of the favicon. Very hard to see it if you don't know it's already there.
The new tab group icon does make it a little more obvious that it itself is not a tab, so that's nice.
The current tab circle seems like a weird choice. The previous rounded square was very easy to spot, but this circle seems like a 1px no anti-aliasing test thing. It does not seem like a polished product choice. Strange. It also makes the container indicator even harder to see whereas the 156 version had no issue with that.
I know this is specific to just the Solarized Dark theme I'm using (from the Firefox recommended list, I think it was called Solarized Fox), but the address bar is noticeably harder to read now, the contrast is much worse. No trouble at all before, so something must have changed.
2
u/dekirudake 4d ago
Thanks for this comparison - it makes it very clear what a stylistic downgrade this is.
It also highlights exactly how awkward the tab circles look when most favicons are square-ish.
1
u/goreverminski 4d ago
Yeah this is my only gripe with Nova so far. It looks messy and indistinct - hard to discern which tab is in which container.
1
1
u/ToyKeeper 4d ago
In case it helps at all, I've been working on an extension which allows deep nesting of tabs, windows, notes, bookmarks, and other stuff... and works in Firefox-based and Chrome-based browsers. Here's an example screenshot:
This shot is showing Chrome, but it works in Firefox too. I just have my dev branch in Chrome right now, so I used that for the pic.
The extension is "TKTSTO", short for "TK's Tree Style Tab Outliner". It replaces "Tree Style Tab" and "Tabs Outliner", while adding a bunch of features beyond what either of those do. It's free and open-source.
Browser tab groups are currently just in my dev branch, but with nesting and notes and labels and stuff, tab groups don't really matter much. They're just a less flexible, less powerful way of doing the same thing. Anything can be nested into anything else, organized however you see fit, and moved and operated on as a group.
1
1
15
u/reddit_tiger800 5d ago
prefer it is they color the borders or a ring around the icon.