Add vertical tabs mode
Categories
(Firefox :: Tabbed Browser, enhancement)
Tracking
()
People
(Reporter: sdk, Unassigned)
References
()
Details
(Keywords: blocked-ux, parity-edge)
Attachments
(5 files)
Expanded view
Add a vertical tabs mode like Edge. This feature has 2 main advantages over the top tabs mode:
- It's easier to manage tabs:
- Reordering
- Scrolling through a large list
- On hover, you can see the full default width of tabs at all time. With top tabs, the more tabs you have, the more they'll be shrinked.
- Better use of the vertical space on a 16:9 screen especially on small screen (<= 1366x768)
|
Reporter | |
Comment 1•3 years ago
|
||
|
|
Reporter | |
Comment 2•3 years ago
|
||
|
|
Reporter | |
Updated•3 years ago
|
Adding to this also some features and advantages:
- Ability to hide the title bar (similar to Edge) to make more use of vertical screen space, since the tabs would be moved to be vertical on the side.
- Better use of vertical space in window tiling modes.
|
||
Comment 4•3 years ago
|
||
(In reply to Danny Colin [:sdk] from comment #0)
Add a vertical tabs mode like Edge.
Whilst I have not seen Microsoft's implementation, generally (based on my use of a variety of vertical tabs extensions):
+1
See also: bug 262826 – Support for vertical tabs
Edge has a pretty nice UI, it makes it easy to switch from horizontal to vertical, and in vertical mode from full tabs to icon tabs (in Firefox, it needs userChrome hacks and a restart each time right now).
Also, the obvious other benefit of this approach is that every native feature is available. With Firefox WebExtensions, some features:
- can’t be implemented properly: when dropping a tab outside the sidebar, it’s not possible to know if it was on the bookmark tab, or somewhere else and we should open the tab in a new window; bookmarking a tab with the WebExtensions API doesn’t make the bookmark editor popup appears; etc.
- are simply not possible to implement: sending a tab to a device has no WebExtensions API, opening
about:preferences#containersis not possible, etc.
|
|
||
Comment 6•3 years ago
|
||
(In reply to ariasuni from comment #5)
… WebExtensions, … not possible to implement: sending a tab to a device …
Apparently this is possible with (at least) Tree Style Tab.
|
|
||
Comment 7•3 years ago
|
||
(In reply to comment #6)
Sorry! Ignore my previous comment.
(I was certain that the feature worked for me in the past, sending from Tree Style Tab with desktop Firefox, to Firefox on Android (without Tree Style Tab). Maybe I'm mistaken. Bug 1417183 is perplexing.)
Yes, this can't be implemented well with an extension. In addition to the issues mentioned in comment 5
- Tree Style Tabs can't hide the horizontal tabs, the user is required to edit userChrome, this is extremely bad UX. (Though this could also be treated as an argument for allowing extensions to simply hide the tab bar, as a compromise)
I know this is still at early stages but I have a request (assuming vertical tabs does get the go ahead): please make sure Firefox's vertical tabs UI is designed to follow Fitts' Law when the window is maximized! Vertical tabs in Edge does not adhere to Fitts' Law when the window is maximized and this pretty much ruins the feature (for me, at least). Vivaldi's vertical tabs mode does follow Fitts' Law and it's a much nicer experience than Edge's vertical tabs mode (though strangely, there's no hover feedback for Vivaldi's tabs...)
|
||
Comment 10•3 years ago
|
||
Sorry I was just wondering, did vertical tabs gets approved or is it still in the decision phase?
|
||
Comment 11•3 years ago
|
||
Yes, this is a very handy and cool feature, We all want to get hands on this feature. Anyone from the team who can confirm that this enhancement can get approval and being worked on.
|
||
Comment 13•2 years ago
|
||
I made a vertical tab pane like Edge's in an autoconfig script a few months ago. There's a preview in here. I think a built-in pane is definitely preferrable to an extension. Just overall snappier and more consistent with the UI, but also it lets me keep the sidebar. So you kinda end up with 2 sidebars on opposite sides of the browser content. I still haven't added customizable widget support to the pane itself yet, it's a lot harder to do in an autoconfig script than in Firefox. But I think when finished, users can add or remove toolbar buttons from the pane. So it would be just another "customizable area."
If we want this in Firefox I can commit to working on it.
(In reply to Will from comment #9)
Vertical tabs in Edge does not adhere to Fitts' Law when the window is maximized and this pretty much ruins the feature (for me, at least).
When you say it doesn't adhere to Fitts' Law, are you concerned that the pane's size is not proportional to the window's size? The pane's width is set by the user, of course. So are you thinking instead of the user resizing the pane to a fixed width in pixels, it resizes to a percent of the container such that the ratio remains constant rather than the pixel width?
|
||
Comment 14•2 years ago
|
||
When you say it doesn't adhere to Fitts' Law, are you concerned that the pane's size is not proportional to the window's size? The pane's width is set by the user, of course. So are you thinking instead of the user resizing the pane to a fixed width in pixels, it resizes to a percent of the container such that the ratio remains constant rather than the pixel width?
I'm guessing they mean "if I ram the mouse cursor to the very left of the screen, the tabs should be clickable from that pixel row, as this allows me to select and click tabs faster" (this is a specific corollary of fitt's law, it's also the only reason people ever invoke fitt's law and the only place it regularly matters very much. Notably, this corollary is inapplicable to a touch context, which is possibly why so many designers are fumbling on it nowadays) It may sound like an odd thing to be worried about, but it's surprisingly common for apps put useless padding in that pixel row and fuck it up.
I also hope that you get this right. Tree Style Tabs doesn't even quite get this right. (A tab could have been selectable by clicking the empty indent space to the left of it, but instead, if you click there nothing happens.)
|
|
||
Comment 15•2 years ago
|
||
Oh, I agree with that completely. Thanks for alerting me, I hadn't considered whether that affects my vertical tabs pane since I have it on the opposite side. Everyone using my script must be so pissed lol. So I think there should be some visual padding but it's ideal if it's on the tabs themselves, like the 2px horizontal padding on toolbarbuttons.
|
|
||
Comment 16•2 years ago
|
||
(In reply to Shane Hughes [:aminomancer] from comment #13)
I made a vertical tab pane like Edge's in an autoconfig script a few months ago. There's a preview in here. I think a built-in pane is definitely preferrable to an extension. Just overall snappier and more consistent with the UI, but also it lets me keep the sidebar. So you kinda end up with 2 sidebars on opposite sides of the browser content. I still haven't added customizable widget support to the pane itself yet, it's a lot harder to do in an autoconfig script than in Firefox. But I think when finished, users can add or remove toolbar buttons from the pane. So it would be just another "customizable area."
If we want this in Firefox I can commit to working on it.
(In reply to Will from comment #9)
Vertical tabs in Edge does not adhere to Fitts' Law when the window is maximized and this pretty much ruins the feature (for me, at least).
When you say it doesn't adhere to Fitts' Law, are you concerned that the pane's size is not proportional to the window's size? The pane's width is set by the user, of course. So are you thinking instead of the user resizing the pane to a fixed width in pixels, it resizes to a percent of the container such that the ratio remains constant rather than the pixel width?
Sorry for not being more specific. The wikipedia page for Fitts' law says this is called “Rule of the infinite edges”. (when the window is maximized, when you put the cursor all the way over to the left side of the screen, it's not hovering on top of the tab). Many browsers (including Firefox) 'respect' this for horizontal tabs so it makes sense to do the same for vertical tabs too. If UX is concerned about the active tab looking ugly if it was touching the edge of the screen, just do a "virtual click target". Firefox already does that virtual click target thing for horizontal tabs and it's great, there's no issues with that approach.
|
|
||
Comment 17•2 years ago
|
||
No problem, yeah that makes perfect sense to me and it's definitely a major usability issue so thanks for raising it. We can extend the width of the tab element all the way to the edge while still making it visually appear further from the edge by just wrapping it in another element and adding padding on the outer element but background/border/etc. on the inner element. I assume that's what you mean by a virtual click target?
Actually the tab elements in the "all tabs" menu already have an outer wrapper, and that's what I based my vertical tabs pane demo on, so that's just a matter of CSS. Firefox's toolbar buttons are like that too, they have 2px of "invisible" inline padding which I imagine is to prevent them from "touching" each other in the event that one is hovered and another is open or checked. Since it would be best if this vertical tabs pane served as an additional customizable area, it makes sense for the tab items to have that same padding as any toolbar buttons on the pane.
Setting it up as a customizable area and making it possible to drag a tab from the pane to the regular tab strip is a bit of a project, so I'll wait for some confirmation.
|
|
||
Comment 18•2 years ago
|
||
Thank you for doing this! Has this been actually given the green light? I really hope so because although Proton was a nice coat of paint and I do like the "look & feel" of it, it didn't actually really improve anything... Vertical tabs would be an actual improvement to the UI/UX, especially if you can do Edge's "Hide title bar" option
|
|
||
Comment 19•2 years ago
|
||
Yeah my script doesn't hide the titlebar since it's mainly intended for userChrome.css users, who have a lot of different preferred methods of hiding the titlebar. But insofar as we can ship this in Firefox, it's very easy to hide the titlebar. Proton is just a visual refresh after all, so it doesn't include altogether new UI components like this. As for green light, it can't be accepted until the actual patch has been submitted and reviewed. But since this is a pretty big enhancement I would prefer to hear from a Mozilla employee first to make sure they're interested in the general idea
|
|
||
Comment 20•2 years ago
|
||
Possibly some good news: Mozilla is FINALLY thinking about vertical tabs https://mozilla.crowdicity.com/post/721353
Jon Siddoway wrote
"Hey all,
Here with some exciting news…
This idea has emerged as a top idea in the community and has been reviewed by the product team at Mozilla. And we will continue to explore this possibility as we take a closer look at tab management. This means we are going to invest in research before making that final decision, but we invite you to continue the conversation and stay tuned for announcements.
Thanks!"
|
|
Reporter | |
Updated•2 years ago
|
|
|
||
Comment 21•2 years ago
|
||
I know I'm probably getting a bit ahead of myself but assuming vertical tabs does get the green light, another nice little thing Firefox could do is make sure the top bar is more compact than Edge's. Even when you enable "Hide title bar", Edge is quite wasteful when it comes to vertical space. It's got touchscreen levels of padding. Attached is a little comparison of Edge's vertical tabs top bar vs Firefox's current compact (I just removed the top portion in Paint haha). Looking at that comparison, you can see Edge is a bloated, wasteful Fischer-Price UI. It looks silly compared to Firefox compact.
|
|
Reporter | |
Updated•2 years ago
|
|
||
Comment 22•7 months ago
|
||
How is this one going? Do we have a green flag?
|
||
Comment 23•4 months ago
|
||
Interested in this feature, too.
While it can take a little while to become used to it, vertical tabs that automatically hide and reappear on mouseover quickly become part of a more efficient workflow.
|
||
Comment 24•4 months ago
|
||
has anyone attempted to implement this?
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
| Comment hidden (spam) |
|
||
Comment 30•2 months ago
|
||
If this is ever implemented, I would strongly suggest Mozilla devs take a look on Sidebery implementation of vertical tabs, which is probably the best as far as extensions go. Especially the concept of you having multiple panels tab spaces/panels on the vertical tab, which is something Arc Browser have as well.
Also, another thing, not sure if this could be useful, but apparently Waterfox partner with Treestyletab to implement vertical tabs natively.
https://www.waterfox.net/blog/waterfox-x-treestyletab/
Description
•