Firefox Sidebar and Vertical tabs: try them out in Nightly Firefox Labs 131

[asafko]

Hi folks,

Vertical tabs and a new sidebar experience that make multitasking and context-switching easier are now available in Nightly 131. To try them, update to the latest Nightly and go to Settings > Firefox Labs, and activate the Sidebar and Vertical tabs experiments.

After you do this, you will be able to see the new sidebar, but you will still need to add the sidebar icon to the toolbar to be able to expand vertical tabs. Click Customize toolbar in the toolbar right-click menu, and drag the sidebar icon to your toolbar. This is a temporary situation, and in the future the icon will be added to the toolbar automatically. 

A few things to keep in mind:

• This work is still very much in progress and has some rough edges, functionally and visually. You’ll see us improve and polish things over the coming months.
• We will be sharing our informal backlog of improvements in this post today, so you can get a sense for where we ultimately want these features to be.
• To design this first version, we conducted extensive research, talked to many Firefox users to understand their multitasking and context-switching needs, and prototyped extensively to find the best solutions to address them.

What we’re putting out there is something that we believe will help the majority of people using Firefox achieve their day-to-day tasks. We know there is no perfect solution for everyone and welcome your feedback to shape the direction we move forward in.

[ikpjr]

Just another opinion on tree tabs, which I disagree being made native:

2. Tree tabs aren't strictly necessary, one could just organize things ( tabs and their possible combination sets ) with features like Arc's folders ( for tab grouping of tabs into meaningful tasks ) and spaces ( for tasks of a particular kind/nature/theme ). Which are similar features to that of Vivaldi with its collapsible stacks and workspaces. Its stacks can group links opened from a parent page or its children into the same tab stack automatically and/or manually with its stack tabs by host or by selection, for example, if those options are enabled in Vivaldi's settings.

Disclaimer: I'm not a nightly build user, so I haven't a full view of what's being referred to, particularly images of still in development features.

[key1]

Im very happy with this change and think it looks really nice, specially with the default skin on linux. Very clean and elegant. It has some bugs still but its nightly, so it will get sorted out.

[llimllib]

I like it! my main ask that hasn't been addressed yet is: I'd like a keyboard shortcut to toggle expand/collapse sidebar.

I figured out how to do that via the "show sidebars" button, but if there's a keyboard shortcut I don't know about it

[rodox]

YES! the keyboard shortcut to expand/collapse the vertical tabs siderbar is the only thing Firefox needs to start the mass exodus from Arc to Firefox!!

[yoasif]

The new history sidebar is worse in nearly every way compared to the old one.

Issues:

• Doing Control-h and typing a query no longer works
• Only one type of sorting/grouping is available
• Opening history forces an interaction instead of showing the latest visited pages
• The input box looks like no other input box anywhere in Firefox
• Worse information density
• Hover colors seem darker than previous version

  

[JBrickelt963]

I'd like to thank Mozilla for this initiative, I've been trying for a long time to eliminate tabs from my field of vision when I'm concentrating.

However, I agree with yoasif: I have a lot of trouble with the new design of the history sidebar,

I still much prefer the classic version:

I find it far too imposing (more suited to mobile than PC), not ergonomic for me and we lose legibility; less character possible too. And what could be a bit more interesting is being able to fold or unfold “child” tabs around a “parent” tab. If I could go back to the classic version (image 2), I'd be grateful.

[D0m1n1c]

I prefer the new design for its UI, more modern. But I agree there is a lot of spacing that is not ergonomic. Could be a mix of both, new design, elements collapsed by default with less padding inside each of them.

[Speff]

I love the implementation so far as a proof of concept. Would like to 2nd strxpdew's suggestion of having different shelves for containers. Maybe also an option to auto-hide/reveal the sidebars on mouseover? Also maybe a right-click option on New Tab to select which container the tab should be for

[Seddu]

Individual Panel width sizing like Vivaldi. Ability to add web pages to the panel. Setting to expand sidepanel and vertical tabs on hover.

[hjasond]

Agreed, adding expandable side panel like has been integrated in to Firefox forks like Floorp and Zen would be amazing.

[xolve]

A couple of things:

1. One is obviously tabs nesting, and able to resize the sidebar.

2. The blue line marker to know the current active tab is not all intuitive. The highlight can be on the whole tab.

3. The tooltip and tab-preview are one the sidebar which is can be on the right side of the sidebar.

[D0m1n1c]

I agree with point 3. I would like to see the tab preview on the side of the sidebar, not under the tab itself.

[Zeed]

It's great. Things I'd like to see improved:

• Spacing between tabs (less)
• Middle click to start new tab
• Bookmarkbar (icons only) added vertically

[Hugo_R]

I really like what I see! Thank you for the great implementation.

Here is what I would like to see:

1. Option to hide the titlebar

2. auto-expand and auto-collapse of the sidebar with the vertical tabs

[barbatus]

Hi there!

Thank you so much for this feature, its fantastic and I really like the innovative idea to link extensions and chatbots into the tab bar, great stuff!!

One feature I notice I miss moving from a javascript/css extension Tab Center Reborn is the ability to widen the tab bar temporarily on hover. This helps me keep track of the tabs with text like I usually can on horizontal tabs. I have (hopefully) attached a video.

Thanks again!!

[glenkim]

1. It would be nice if a new private window did not default to having the sidebar tabs collapsed. When I open a private window, I expect the sidebar tabs to be expanded if my regular browser window has them expanded.

2. Is there a hotkey for expanding/collapsing vertical tabs?

[D0m1n1c]

I agree with the point 1 !

[myspace]

Thanks really enjoying it so far!

[yoasif]

It is possible to move to tabs that are not visible in the tab strip using the keyboard - unlike the horizontal implementation, the "tabs" remain offscreen.

In the screencast above, I have moved from tabs visible on the strip to those that are not, and back to tabs that are visible.

[som]

Hi there, great to see this out in the wild! Long-time user of tree-style tabs (and Firefox) that's been looking forward to a native implementation. For context, I tend to have 10-50 tabs open in each window, often leaning on the windows themselves for master grouping.

I'm not a TST / vertical tabs power user, but the two main features I rely on day-to-day are:

• Tab grouping / hierarchy:  clicking a link in one tab (optionally) opens it as a child tab; tabs can be dragged / grouped under parent tabs (I guess this is in the name!); groups can be re-ordered
• Unloading tabs: I think this may be enabled by extension, but having the ability to selectively unload a group of tabs is great for manual memory management

In addition to those built-in features, I've also built a very simple TST hack / extension that - IMO - provides a bit more of a holistic approach to tab organisation. Instead of using vertical OR horizontal tabs, it uses both: reserving the horizontal tab space as a "workspace" for recently active and pinned tabs and then including the full laundry list in the sidebar. It's not perfect, but combined with tab grouping and unloading I've found it to be a pretty solid / flexible approach to prioritising your current area of browsing focus. I've been using it as a daily driver for a number of years. In brief:

• Pinned tabs: appear in the horizontal tab space, per the browser default
• Active tab: the currently focused tab (if not pinned) appears wide in the horizontal tab space ... page titles are easily read at a glance without opening the vertical tab sidebar. The active tab remains in the horizontal space indefinitely.
• Recently active tabs: tabs that have recently been in focus appear narrow in the horizontal tab space. After a set time they disappear (mine is set to 3 minutes). This allows you to flick between recent tabs without losing track.
• Pinned active tab: stays pinned, except the most recently active non-pinned tab stays visible in the horizontal tab space for an extended period (mine is set to 1hr)
• All tabs, except pinned: appear in the vertical tab space. This is where you organise, search, unload, etc.

To be clear, this is just one angle at solving a general tab organisation challenge. I'd be equally interested in an alternative approach that tackles the same. See below for an old screen grab:

Some additional features I'd love to see:

• Tab search: appreciate this is already available via the URL bar, but having a search / filter for the current window in the vertical tabs sidebar would be next level
• Bookmarks toolbar to right / left of sidebar: when the bookmarks horizontal toolbar is set to show only on new tabs it causes the tabs sidebar to drop down every time you open a new tab. UI shift is generally bad. Be great to see sidebar stay aligned to top and the bookmarks toolbar only take up the available width where this is the case.
• Sidebar expand on hover: this is included in my hack, but it's barebones and one of the more annoying aspects (I often accidentally open the sidebar, which can be sluggish). Would be great to see a performant native version that uses more smarts to work out when to open.

Thanks again for all the hard work. Cheers!

[haingdc]

Hi, When use vertical sidebar. I notice the width is narrow with some tools. We have drag to adjust the width. It would be nice to have assignable shortcuts for increasing/decreasing sidebar width as it will be faster anytime

[kubrick]

Hello!

Thank you for landing this long-awaited feature!

For me the main reason for wanting the vertical side-bar is because of the stupid aspect ratio of most modern displays, wasting a lot of horizontal space.

So horizontal space I have, and I don't need the vertical bar to be this compact, and having a list of icons for me is just not usable, I can find my tabs, I need to be able to see the labels/page titles. So for now I think I won't be using it, but when that's solved, I'll be all over it!

Thanks again.

Kind regards,

François

[dimas_sc]

Finally! Thx! I like the first approach and the feeling, and I hope you will be implementing one of the big avantages to use vertical tabs: tab grouping / tree style tabs.

[Marckov]

The sidebar's AI chatbot isn't working for me. 😥

[GoleMMan]

Great start! A few notes specifically about using this on a touch device:

• This works well for touch, enables fullscreen tabbing as a replacement for not being able to use fullscreen with always-on tabs at the top. It's also much easier to navigate tabs while on a Surface Pro device now.
• However, I'm struggling to use hold-to-right-click on the small tab strip. This is ultimately a Windows issue, but it'd be useful to have some way to reliably and quickly close tabs without having to right click or have the wide tab ribbon deployed, the way you can with pinned tabs on the horizontal ribbon.
• I was confused about the "always on" versus "hide" option. UX-wise I was expecting auto-hide, kinda like the Windows taskbar, and it took me a while to figure out the option referred to what happens when the sidebar button is set to off. This needs some UX polish, I think.
• In general, an easier way to expand/hide the bar in fullscreen would be good. I'm not sure if there's a keyboard shortcut for this, but that may be the answer, now that the tabs can live here.
• No tab name display pop-up on hover at the moment. I'm assuming that will come in at some point.
• No dynamic width by dragging the tab edge on the wide vertical tab display at the moment. Also hoping that gets added.
• Horizontal display for pinned tabs in the wide sidebar is a familiar design from some of the plugins previously available, but that seems like something I'd like to be able to toggle on/off at some point.

Overall, a very good start, well integrated and functional. I'm defaulting to it on Nightly for now for my touch devices.

[kennylevinsen]

When vertical tabs are in use, the titlebar is largely empty, containing only three redundant tab navigation buttons.

It would be preferable if the titlebar could be hidden entirely in this mode, saving some vertical space.

[xpil]

"Close multiple tabs" => "Close tabs to left" makes no sense in vertical layout. Should read "Close tabs above".

Same goes for the opposite direction: "Close tabs to right" shoud now say "Close tabs below".

[alba4k]

I mainly have three issues with the new sidebar (testing on 129 instead of nightly, sorry, lmk if any of this has been adressedalready)

• After switching to the sidebar, the + button that used to be below the tabs was there. After removing it from the top bar (and then removing the bar itself via userChrome.css), the + is gone in the sidebar. It doesn't come back if I add the + back.
•  It is currently not possible to open new tabs with a double click / middle click on an empty part of the sidebar.
• It would be nice to be able to reorder the items in the lower part of the sidebar, e.g. putting bitwarden on top of the other elements.

[yoasif]

The toolbar "Show sidebars" button now seems to work on the vertical tab strip instead of the sidebar like it used to previously. You can see this easily by installing Open in Sidebar, opening something in the sidebar, then clicking the "Show sidebars" button in the toolbar with the new sidebar enabled.

In release, the button shows and hides the extension sidebar. In Nightly, it acts on the tab strip.

This seems broken to me.

[yoasif]

Long-pressing the vertical new tab button doesn't offer me a way to open a new container tab.

[nano]

I think the vertical tabs look great, I was using the Tree Style Tabs extension previously, and I miss the following features:

- Being able to nest tabs and collapse them from a common parent tab

- Having a hotkey / shortcut to collapse or expand the whole sidebar (the same behavior that you get when pressing the "Show sidebar" button). I don't think this currently exists, or if it does I don't know where to find it.

Great job by the way! I was waiting for this for a long time.

[geck]

This is nice but it still has a few bugs to iron out. One feature I would like to see is tab labels to the left/right of the vertical tabs as icons sometimes are not enough to distinguish at a glance what the tab is.
Also on a default toolbar with no customizations, the "Open a new tab (Ctrl+T)" button and "View recent browsing across windows" button stays on the horizontal tab list when you turn on vertical tabs, which makes the horizontal tab list look empty, it would be nice if they were moved to the vertical tab bar.

But still, this is a great start!

[hiyer]

This is fantastic! My only request would be to add tree-style visualization like with this extension - https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/

[Oafish]

Hi, it'd be nice if the Vertical tabs are kept seperate from the sidebar, similar to how its done in MSEdge.

Heres a similar implementation in firefox with sideberry and the bookmarks bar moved to the right to create a makeshift sidebar using custom CSS.

Heres how something similar looks im MSEdge

Cheers

[Intergalactic]

Thank you for bringing this long awaited feature to Firefox - it feels great to finally have my tabs on the left!

Albeit the feature is great, switching tabs using ⌘ + ⌥ + <left-arrow> and ⌘ + ⌥ + <right-arrow> in vertical mode does not feel logical to me. It would be great if it could be swapped to use <up-arrow> and <down-arrow> instead.

[franzschneider]

So happy to see this–finally!

Initial feedback:

• Please add ability to drag and adjust width of sidebar.
• Please add ability to have pinned tabs as favicons like with the addon, Tab Center Redux. I have quite a few pinned tabs and they take up a lot of space if not collapsed to favicons.
  >>Edit: I just updated to the latest beta and see that this has been done. Awesome! Looks nice! Ability to adjust the padding might be useful to condense the space taken up by pins further, but it's great, other than that.
• Please add the ability to search tabs like with the addon, Tab Center Redux.
• The scrollbar for the sidebar and tabs could stand to be a bit wider for the purposed of clicking and dragging the scrollbar indicator. It's a bit thin.

Thanks for the work on this!

[alirezaimi]

Hi
Thanks for your hard working ,
I use brave currently because vertical tabs in this browser is simple and useful enough for me, feature like (all in vertical tabs) :
1- tab grouping
2- group sync between devices with sync account
3- resizable panle size
4- custom keyboard shortcut for create new tab(next to current tab or after last child , ...

[soc]

Thanks for mentioning the issues that are still being worked on, because the gaps on top took me by surprise until I read that this part was still work-in-progress.

I'm watching with interest whether this work can replace my own custom adaptations of Firefox:

[KRASH]

Hi, thank you for adding this feature to the "vanilla" nightly 🙂

Two minor UI suggestions re. vertical tabs bar:
- I'd like to see the "new tab" icon on the bottom of all current open tabs. This way I won't have a "gap" between my current open tabs, and my current pinned tabs.

- I'd also like to see a minor "x" to close a tab when I hover my mouse pointer on it, so I can close it quickly when I no longer need it (and make it more accessible to those who don't have a middle mouse button / not tech savvy persons).

One major nice to have would be to squeeze the whole adressbar into the title bar, i.e. same top-row that has minimize, maximize and close buttons. I understand that it would be a headache though, considering each desktop would require a different implementation for it.

Keep up the awesome work 🔥

/K

[Agentvirtuel]

Hello

---

@KRASH wrote:

 I'd also like to see a minor "x" to close a tab when I hover my mouse pointer on it

---

Unless i've misunderstood
For information purposes https://www.userchrome.org
https://connect.mozilla.org/t5/discussions/improvements-to-the-firefox-sidebar-are-on-the-way/m-p/61...
userChrome.css and by way of illustration

.tab-close-button:hover{background-color:red !important;}

https://www.youtube.com/embed/y9j3Z1-X0GE

Other https://www.w3schools.com/colors/default.asp

Restart Firefox if you modify the code