Mozilla released a Firefox Nightly test build with vertical tabs - gHacks Tech News

Karna@lemmy.ml to Linux@lemmy.ml – 443 points –
Mozilla released a Firefox Nightly test build with vertical tabs - gHacks Tech News
ghacks.net
129

L
o
o
k
s

c
o
o
l
.

More like: Looks Cool

Versus how it is now: Looks cool

or if you have a shit ton of tabs open: lo... co...

What you are doing does not at all, besides not having to do anything with the topic at hand.

Bad news is that it is not clear at this point whether Mozilla is going to go forward with the implementation. A post on Reddit by one of the project members suggests that the build is a "rough proof-of-concept". Some features tested in the build "did not survive". It is unclear which did not, as they are not mentioned. Mozilla is, however, implementing those that survived the cut into Firefox. Again, the poster does not mention which those are. It is also not verified that the poster is actually a member of the project team, so take this with a grain of salt as well.

Isn't Firefox open source? So isn't it possible that anyone could see the changes being made even in the nightly versions? I'm not a programmer so forgive my ignorance.

I use Edge on my work computer since I can log into it with enterprise SSO and store my passwords and bookmarks to my work account. Not ideal, but I don't do anything personal on my work computer because I already have zero expectation of privacy on it anyway.

Vertical Tabs are an absolute game-changer, especially combined with tab groups. I can actually juggle hundreds of tabs in a single browser window without issue. It's the only thing I can say that Edge got right.

I've been waiting for this development for a long time. I can't wait to have this functionality on my personal computer, on a privacy-respecting FOSS browser no less. The extensions currently available for this are just not that great, it has to be a native feature.

Ff with sidebery is pretty amazing. Although, it's annoying you need to add a CSS file to disable regular tabs.

I have a CSS file anyways to make look the giant buttons like actual tabs.

Hundreds? Why? I never have more than like ten, and each time I open my browser I start with none

Not the person you replied to, but I can help with an example:

  1. I have the browser reopen the tabs I had open last time, but keeps unloaded until I click on them.
  2. The tabs are in a tree hierarchy, meaning I can collapse an entire group while keeping them all open.
  3. My work involves juggling up to 50 different accounts each for a hand full of websites, so containers allow me to quickly swap between accounts signed into the same page.

Fair points, though what advantage does keeping unloaded tabs serve over using bookmarks?

When you're keeping things in a tree structure for visual grouping and using containers to manage different logins, bookmarks will lose the tree structure, and you'll have to specify which container to open it in. If your workflow involves a dozen tabs per context, locating the bookmarks and reopening them every time you switch contexts is a significant time and productivity loss.

Consider the classic Evidence Board (also known as string wall, crazy wall, conspiracy board, etc.). Saving everything to bookmarks is the equivalent of putting your board's contents into a drawer, then pinning everything back up whenever you need to look at or update that particular conspiracy. It works, but it's cumbersome, error-prone, and wastes a lot of time; you'd only do this if you only have one board but multiple things to inspect. Leaving tabs open and simply unloading the inactive tab trees is like having multiple separate boards where you just roll them into a closet when you aren't using them.

What are these tab trees? Is that an addon?

There are several addons that organize the tabs in the sidebar with a vertical, tree-style layout, with nested tabs that can be collapsed, just like a classic folder structure. This is what GreyBeard was referring to earlier in the thread when he said "The tabs are in a tree hierarchy".

Tree Style Tab has been around since 2007; Sidebery is much newer, and IMO looks and performs better.

You are correct, TreestyleTabs was my jam for years, but I have moved over to Sidebery because it performs better and has better support for containers, as well as being considerably more customizable.

Personally, I can't use bookmarks because if they're out of sight, they get forgotten. Keeping things in an open tab is like having the browser constantly bugging me to remind me that I have to do this thing. It doesn't guarantee that it gets addressed in a timely manner, but with the alternative it's guaranteed to not be done at all.

It also helps to keep my place in my work. There's things that I'll always have open because I need quick access to them and don't want the friction of trying to find the page to lead to procrastination. Same with anything that's relevant to work in progress.

My work involves juggling up to 50 different accounts each for a hand full of websites, so containers allow me to quickly swap between accounts signed into the same page.

So like astroturfing?

Not at all. Just managing clients stuff on portals that don't allow for delegated access to a single account.

i wish they'd include vertical tabs and oneline navbar in settings rather than making the users edit userchrome. userchrome is really fun but it'd be much more accessible if it was on settings.

userchrome is really fun

It is not fun for me when the most beautiful themes are meant to be used on Linux or Windows and the Window buttons are all messed up for macOS (or won't even show up), you can't literally be without those window buttons on macOS because you can't maximize FF from the dock as any sane dock or taskbar.

Yeah, this was annoying for me in kde. I just make my own themes now so this isn't much of an issue though

I'd like to understand and have the patience of learning about CSS theming :D

Never saw the appeal in vertical tabs, but maybe Edge or FF extensions just don't do them well enough... Good for Mozilla though, I guess

For 16:9 (ish) displays you have more pixels left to right than up and down, it makes sense to use up your horizontal space first when placing permanent UI elements on your screen. Still up to preference though.

Agree... Too much screen real estate horizontally, not enough vertically

Especially with the gigantic tab buttons the browser uses by default even in "compact" mode.

To think that I have lived years without knowing about those little features like combining title and menu bar to save space

Yeah, but combining those doesn't make the buttons smaller and tab-like. Enabling userchrome.css support and tweaking it yourself does, though. Still dumb that Firefox uses giant buttons instead of tabs.

The real crime here is the death of full screen monitors. Full screen just works so well for Internet browsing and programming. The switch to widescreen became common because games and movies were becoming more widescreen and that caused them to look smaller on full screen monitors. These days, the problem can be solved by getting extra large full screen monitors. Back then, that was not financially feasible.

God damn, what I wouldn't give to have a 4k 4:3 CRT.

A lot of websites are optimized for reading at around 1024 pixel which means many sites just give you the void to look at on both sides of a centered site (worse in naïvely scaling up all UI to the max so widscreen monitors get billboard-sized text)—so you may as well have more vertical reading space. The other part has to deal with keeping the titles readable with several open as the Latin script is horizontal. Either the titles disappear & you are left with tolerate logo favicons like Chromium or like Fx where the tabs move to vertical scrolling which is difficult to parse quickly—there’s a reason why you write your grocery list with a newline as a separator than trying to cram it all on a single line. Given the current Fx implementations using the sidebar are kind of a hack, I for one am happy to see this finally being worked on.

Those screenshots look really nice, ngl, hoping this goes through. Edge and Vivaldi have had their own vertical tab implementations for a while now, and there are Firefox forks that show it can be done. No reason for base Firefox not to have it at this point.

While I'm here, Mozilla bring back compact spacing, plz k thx.

Edit: Just tried it, it's got that nightly jank but it's promising. I hope Mozilla continues with this. It looks and feels great.

My dream would for this to at least have an option for collapsable tree-style tabs. That's what I'm missing the most from the Edge implementation. Even "normal" vertical tabs struggle when you have over a hundred open tabs.

I completely hid my tabs with custom css and I'll never go back. With something like vimium-c you can switch tabs with vim-like bindings and an fzf-like menu. If you have lots of tabs, the fzf way is way faster to pick out a specific tab than it is to look for it in a tab row (or column). If you have few tabs, you don't even need to see them to know where they are. I'm being very serious. Tabs are bloat. I recommend trying it out if it is something for you.

(edit) On top of that, it looks so clean. You get a bit more space for the actual content (I also hide my url bar, it pops up when you use it). It fits right in with a keyboard focus workflow, you get consistent keybindings across vim and your browser (I use the same keybinds for switching buffers in vim so it feels the same).

Downvotes with no replies explaining why? This is happening a lot.

I use qutebrowser and still show tabs, but this is a very interesting approach. Thanks for the rec.

Pretty sure it was just emacs users instinctively swatting the vim enthusiast.

Qutebrowser is very cool! Personally I want to use firefox's engine (or at least not something chromium based). Otherwise I would have jumped ship to qute or surf already. Currently my only gripe is that the plugin doesn't work on pdf's and other special pages, which is not an issue on qute.

Crazy that you are getting hate for this perfectly reasonable and well-expressed opinion. No counter-arguments, just "muh i no like muh go away".

Apparently this place is not so different from the R-site at all.

congratulats to the people liking them i guess. i personally dont get it, since most languages are written horizontally and i like ux to reflect this structure. such things are subjective though

The counterpoint is since 16:9 became the de facto standard for monitors, vertical resolution is at much more of a premium than horizontal resolution is.

Not to mention that most sites will put their main content into a container with a limited width anyway, since overly long lines are awful to read. So unless you're using the browser side-by-side with other content on a low-res monitor it's a net benefit. And even if it's not I usually find the extra vertical space to be worth more, as you said.

i get where youre coming from, but imho the eye tends to parse information more effectively if delivered vertically, since it knows it that way from other media. just my personal opinion though.

Then why I struggle a lot to navigate through Discord compared with any other messaging app, such as Telegram, don't answer, probably because Discord UI is trash.

since most languages are written horizontally and i like ux to reflect this structure. such things are subjective though

You might be misunderstanding what we mean by vertical tabs - we aren't literally turning the tabs sideways and putting them on the side of the browser. We're placing the tabs, still horizontal, into a stacked, scrollable list on the side of the browser. The superiority of this display method for tabs on widescreen displays is not subjective, and here's why:

  1. Tab titles are not typically very long, but there tend to be a lot of them. This data is far more readable and accessible as a bulleted list than a long paragraph.
  2. Beyond about ten to fifteen tabs, tabs displayed at the top, side by side, must either shrink and obscure the title, go off-screen and be invisible without scrolling, or stack in multiple rows across the top. A vertical tab setup can easily display 30-40 of them in a vertical list, all with the maximum visible amount of their titles which helps distinguish them from one another.
  3. Modern desktop screens are wider than they are high, but webpage content scrolls vertically, often leaving a lot of empty space on the sides.
  4. Eyestrain is reduced and readability improves when the width of the reading area is reduced. This is why text on the web almost never fills the full width of a widescreen display, why most books are taller than they are wide, and why newsprint articles have many narrow columns rather than filling the entire page.
  5. Given points 3 and 4, tabs at the top of the browser window on a widescreen display leave slightly less room for the actual page contents, while tabs displayed in a vertical list on one side only cut into the white space that exists on the sides of the content, while keeping the titles readable and causing less eyestrain.
  6. With one change, a list can become an outline with sections and headers, following your own train of thought as you branch out and expand on each idea. In the same way, tabs displayed as a list can be very easily displayed with a tree structure, allowing tabs to be grouped, collapsed, and generally organized in ways that are impossible for traditional-style top-tabs.

This is why Tree Style Tabs exists, though I prefer Sidebery these days, being more customizable and performant than TST. There's no way I can ever go back to top-tabs.

In a real life scenario that I can ad hoc reproduce here on my PC, only point 6 makes sense. With the others I can not agree when looking at my open tabs here.

Try out Tree Style Tabs for an hour. I'm curious how you'll feel about it.

I've been using TST for years and while it can be a bit buggy at times I couldn't imagine going back to the default tab system.

This is my main, but I struggle to find a good CSS theme that integrates with this instead of Sidebery.

I think you're missing what's going on. The text is still written left-to-right. You don't need to read the tabs vertically. The tabs are stacked on top of each other in the sidebar instead of lined up along the top of the window.

I believe their point is that their language is left to right, so it just makes sense to them to have the tabs structure left to right as well.

I happen to share this sentiment, but can understand why some people may like it different.

anyone else feel like a lot of these firefox updates recently are just them implementing the most popular extensions from firefox 3.6?

It's always been like this. Aside from Gecko and/or security updates that's how all browser development has functioned since add-ons became a thing.

I migrated from Edge for the last time to avoid Manifest v4, I’ve been missing vertical tabs a lot. Sidebery just didn’t work for me. I really like how this is looking.

I would love the option of keeping containers in vertical tabs with "page tabs" horizontal. For example; Facebook, Personal, Banking, Work, Incognito, etc containers along the left as vertical tabs, and each one has all the pages in tabs across the top. Vertical tabs only appear after you open more than one type of container.

that'd be really nice for me too, currently I have a bunch of loosely categorized free-floating windows (extremely wide screen problems), would be great to collect all that into one (I miss that function they used to have where you could have tab groups organized physically with a special shortcut)

Workspaces. Vivaldi has this and it's the only reason I use them.

Is each Workspace isolated like Firefox's container tabs?

Not sure what that means. But you have workspaces that contain various tabs and you can't access a workspace's tabs from another workspace. I have workspaces for recipes, videos, programming, and gaming.

Firefox Containers are walled off from each other. No settings, cookies, trackers, etc. are shared between one container group and another.

I tried so hard to get used to vertical tabs, and failed miserably. I just can't like them. Lol

I was just today trying FF again and discovered vertical tabs was via extension only and holy shit disabling the tabs up top looked like a bit of work. Native vertical tabs and grouping and I'm back. It should just copy the layout that Edge does.

It's not too bad, you change legacy style sheets to true in about:config then put a userChrome.css file in a .mozilla/randomprofilename-default/chrome folder. A lot nicer hiding normal tabs though, I constantly F1 my tab bar anyways:

I can second that I need to F1 regularly in Fx to fore that sidebar to rerender. I’ll get weird bugs with the pinned tab row.

Aah I'm using sidebery after using tree style tabs for a long time -- I meant I F1 to hide it constantly for more screen space, no bugs here :P

Yesss come on! I moved to Edge at my place of work because I can no longer see what I'm doing with horizontal tabs. And we can't use addons in Firefox.

This will land in ESR in three years time and then we'll be rolling...

And to round out this story, here’s a photo that we think evokes the concept of “vertical”.

Which, ironically, is probably a better representation of horizontal. No one talks about finding a shelf in a bookshelf. They talk about finding a book, which are laid out horizontally.

I just spent 3 days learning a basic level of css and messing around in my userchrome and NOW they decide to add it...

Your CSS knowledge is still useful to customise other areas of Firefox UI.

Waterfox beating it to the punch lol

V E R T I C A L S U P R E M A C Y

Why does everyone like vertical tabs? Today my tab icons are so small because I have so many. Monitors are wider than they are taller. What am I missing?

What you're missing is that "vertical tabs" in this context isn't talking about tabs literally turned on their side. We're talking about tabs that are still horizontal, but instead of arranging the tabs along the top of the screen, and shrinking their width when there's no room left, they're given a fixed width and arranged in a vertical list on one side of the screen. The best implementations of this (such as Sidebery, which the previous screenshot is from) also allow tabs to be nested in a collapsible tree structure.

You sound like you'd really like the tree-style tabs offered by Sidebery on Firefox, or that's built into Edge. Give it a try!

Just occurred to me, now I get it. That makes a lot of sense. I think I used to use some tree tab extension ages ago.

I won't touch edge with a 10 foot pole. Data collecting, nagging, pos browser.

I've never heard of Sidebery before! I've been using Tree-Syle Tabs for ages now though. Why did you choose Sidebery for it?

It has better customization, better performance, and tab groups. I used TST for many years, switched to Sidebery only a few months ago. You can do stuff like set it to where tabs only activate on releasing the mouse, so you can rearrange unloaded tabs without activating them, or make it so middle clicking the tab close button unloads it instead. You can also rename tabs!

Finally got around to trying it, and yeah - this is much better! Thanks for the recommendation!

Monitors are wider than they are taller.

Personally, exactly for this reason.

Exactly. The monitors are wide, but websites usually are not. They are made with smartphones in mind which are of course vertical. So you either have dead space on websites or on sites that do scale (like this one right here), I'd actually prefer it to be more compact, since I find it more comfortable to read comments that are less wide.

They are awesome. To me at least, but only if you save space by hiding the regular tab bar and it is easier to manage tabs since they are now closer together. Also, if you make the right --or left, it is up to you, I pick right-- sidebar auto hide and letting just the icons show. You do gain a lot of extra space. Mind you, you need to enable CSS via About:Config. On too of, before, using say, Sideberry. I like you thought I did not like it but now that I have tried it. I simply will not go back. I have a userChrome.css file that place on all my machines on a fresh install, now.

Firefox has "minimum tab width" which takes care of exactly that and works perfectly. Unlike an "experimental" feature in some surveillance Browser by Google

If you want vertical tabs with the ability to organize them in trees I suggest the Sideberry extension. It legitimately makes me nervous that the functionality would ever go away, it improves my productivity so much.

You can bookmark trees, collapse them, search them, load/unload them manually, I could go on. It makes it easy to organize dozens or hundreds of tabs. I have some trees for emails, news, forums, projects, etc. When I'm done just fold it up: the top tab bar can hide tabs that aren't in the active tree you're using, so you can still navigate the tabs normally.

Sideberry is pathetically ugly. They couldn't even be arsed to use the same font as the rest of the UX. The hierarchy is poorly shown too.

The masterclass in side tabs and tab grouping is with Vivaldi, and, sad to say it but Safari too.

When you combine Vivaldi with the TabRetitle extension, it is unbeatable.

Have you used it recently? Previous versions I would've agreed, but 5.0 was a huge improvement. If I didn't know, I'd likely have assumed it to be a native feature.

I'll take a look at Vivaldi's approach though, I've heard good things about those features previously.

It's also very customizable.

I'm using vertical tabs since 4 years ago and to do so installed Tree Style Tab (https://tinyurl.com/y5gr4dyn)

Also has to disable horizontal tabs create or update the file chrome/userChrome.css located at your profile with

#TabsToolbar {
  visibility: collapse;
}

and add the setting toolkit.legacyUserProfileCustomizations.stylesheets with value true (use about:config)

You mean the thing that Opera had in the 90s, and Vivaldi since inception?

This feels like something that should be a extension

I don't think extensions as they are now will be able to do everything this can do. Specifically modifying the userChrome.css. Yes, there are existing vertical tab extensions, but they just reuse the existing sidebar used for the bookmarks and history. Nothing quite up to the quality that Edge or Vivaldi have.

I agree that userChrome.css must be modified, but once it is, Firefox is way better for vertical tabs. When you mix in the tree style that is common in the extensions and containers, there is nothing that competes, especially if you work involves managing a large number of accounts for the same few websites, as mine does. It is not uncommon for me to have 10-20 active tabs, and 80+ inactive tabs at any given time. Horizontal tabs can't compete, and the flat nature of the tabs in Edge certainly turn into a mess quickly.

So what you're saying is vertical tabs and tab groups are the perfect combination.

I used to use Chrome at work. When Edge added vertical tabs I jumped to that immediately.

Now that IT is allowing FireFox I switched to that with Tree Style Tabs. I am missing the tab groups from Edge, but the tree is worth it.

Yes tree tabs with groups would indeed be perfect.

Sidebery has tab groups and natively supports containers, which is perfect for your use-case. Might as well be TST 2.0.

Do you use vertical tabs? If so, why?

I'm not the parent commenter, and I don't use it, but if you have a lot of tabs, it's easier to navigate between them in a vertical list if you are used to looking at the tab titles to decide which one you need.
This is partly because the tab items get very narrow when there is a lot, but also because in a vertical list there's just a lot more room for them. The top bar is ok when you know the tab you need by it's shortened title or position, but a vertical list is better when you don't and you need to search for it by it's full title or when it's further away.

Maybe I should use it too.

Hard disagree. "Tab Center Reborn" has a ton you can do with CSS.

Top right of my tab bar in firefox, there is a little down pointing arrow. I click that: BOOM vertical tabs. Now make it an optional fixed thingie and let me stack them. I may be missing something here, but that sounds like something an experience Firefox dev can implement in half an hour.

It's better to integrate Tree Style Tab addon instead. It's not a good idea to re-implement a function which already has a great implementation...

If we're talking about a great implementation of the feature, it would be 'Sidebery'.

I don't think Sidebery is a great implementation unless the developers fix this bug. It can be reproduced stably and is important for users who opened many tabs and keep them between session.

https://github.com/mbnuqw/sidebery/issues/1368

Ooh, that's a fair claim! I don't use Sidebery like that, so I have never run into that issue!

I've never trusted browsers to reliably remember history and restart where I left off, so I make heavy use of Sidebery's snapshot feature.

Wake me up when we have Chrome-style tab groups in FF.

I don't get their allure. Why not Tree Style Tabs? You can create "groups" and endless subgroups. Also, no need to scroll horizontally, which takes way longer to find stuff, just scroll vertically or collapse trees.

Tab groups seem inferior to tree style tabs.

CC BY-NC-SA 4.0

Tab groups for the friendly name at the top of a set. Edge implemented vertical tabs. Not as good as tree, but better than across the top.

You mean this or this? It's been around for a couple years and has more functionality than Chrome's.

No, I mean Chrome-style tab groups. Existing FF add-ons are okay, but nowhere near as nice as in Chrome.

I'm not sure if it's the same, but floorp has Workspaces which I find very useful

As usual, Mozilla doesn't come up with new things. Only when Floorp and Waterfox start doing stuff do they think "Oh wait, people actually like that? Well, let's kill an extension or fork!".

Tree Style Tabs have existed for years. I guess it took them a while to wake up.

CC BY-NC-SA 4.0

Christ. If they don't do vertical tabs people act like it's the end of the world and Firefox is a piece of shit browser that deserves to die, and when they do they aren't being original enough!

They can't win. What do you actually want? Diagonal tabs??

The very first version of Tree Style Tabs was published in... hmm...

2007

The shameful part is the fact that Edge-Chromium added a native tree style tabs feature over three years ago, and has been eating Firefox's lunch. Vivaldi has had native vertical tabs for eight years! Mozilla's leadership is asleep at the wheel.