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.

[XCanG]

Right now it is possible to merge this line with 2nd line with CSS in userChrome.css, check my code above, but edit it for your linux style close buttons.

[therealahall]

Having read through this thread, I realize that a lot of this is already covered but just dropping in my experience with the new functionality. First impressions, love it. It's a solid base release for a nightly that has incredible potential to grow to an amazing feature. I've been a big big fan of vertical tabs for quite some time and also count myself among the legions of users of Sidebery, Vivaldi, Arc, etc... for my comparisons.

Right out of the gate, you're doing the sizing thing better than Arc. While I still think that there's a hair too much space between the tabs themselves, it feels better than the spacing that Arc uses. I can control that with CSS if it becomes bothersome, but that could be a nice deep customization option.

With the hovering over icons to show the display of the page, I wish they would either all display the preview or none of them display and not have it be based on whether or not the tab is active at the moment.

I do like the concept of tree style indented tabs many have mentioned and I've experienced from Sidebery, but I think, given the choice, I'd prefer solid grouping of tabs as a concept over the tree style. As a user that has generally in the hundreds of open tabs, no grouping makes it a bit more of a chore to manage my day to day flow. I won't say it's necessarily a deal breaker, but it has been one of the things that prevents me from switching everything over to Firefox as a whole.

One that I don't think I've seen mentioned that would be sick is to have the ability to close a tab on another device. I'll commonly pull up 20-30 tabs on my phone throughout the day/week/whatever with the intent of pulling them up on my desktop at a later time. That flow up to that point works really well, but I'd love to be able to open the sidebar, hit my phone tabs, open the tab in the desktop browser, then right click / close tab and have that sync back down to the phone/iPad/other device.

Finally, it's been mentioned ad nauseam, but hover state to expose the full sidebar of tabs would make this an even more powerful feature. Right now I keep it set to the icons only because it maximizes the available space and only manually pop the sidebar when I need to see which Github icon I need to click on out of the sea of them.

Long story long, this is a very much welcomed feature even in its current state. Everything else will be a bonus on top of it.

[hundred17]

Amazing stuff with these native vertical tabs!

The main piece of feedback I have is about tab groups. While I don't think everything in the "Tree Style Tab" extension needs implementing in this native vertical tab implementation, one of the main benefits I see with vertical tabs is simply being able to (somewhat) efficiently handle more tabs than would otherwise be doable with the horizontal tabs.

Being able to group tabs so that when I google search "topic ABC", and "open in new tab" some of the results, all the new tabs become children of the "google search for 'topic ABC'" tab. This greatly helps with managing a large number of tabs.

The unfortunate thing is that I'm not sure how the tab grouping would work in the non-vertical-tabs setup 🤷.

But I will say that after turning on the native vertical tabs, I ended up having to vertically scroll through my list of tabs since the "Tree Style Tabs" that I normally use allows for the grouping functionality, and the native vertical tabs just expands everything into one big flat list.

[DilunAV]

That's a feature I waited for a long time and it's good that it was realized. Actually, I want to have a tab tree, so now I still need to use TreeStyleTabs, and that's just became more convenient that there are no tabs on top, so I am not trying to use them by habit.

But the most important for me is not vertical tabs on PC, but vertical tabs on phone, on PC there are multiple extensions for vertical tabs and a big screen so I don't actually need to see icons instead of full names, but I really need some solution on phone, something like an icon view on tab group in chrome (which is the only cause why I am still using chrome except touch-to-search).

[bseic]

Downloaded Nightly an hour or so ago to have a play with vertical tabs. First of all, it's exciting to see this be released, it's a good start. Thank you.

Feedback and suggestions below:

Vertical Tabs and Sidebar

• The integration of sidebar and vertical tabs feels a bit haphazard. I would greatly prefer the option to have vertical tabs and the sidebar as distinct elements (with the ability to choose the side of the screen each is on)
• Having the tooltip and tab preview appear over the top of the sidebar obscures nagivation. The tooltip and tab preview should appear to the side of sidebar (e.g. rightside of sidebar where the sidebar is left of screen, leftside of where the sidebar is right of screen) (Edge implementation is good)
• Having to click to expand/hide the sidebar is a nuisance. It would be useful to have an option to auto-expand and auto-hide the sidebar on mouse hover (Edge implementation is good)
• Inability to resize the sidebar is frustrating. Ability to resize the sidebar has significant utility (e.g. ability to temporarily resize to better read tab names) (Edge implementation is good)
• Opening a tool from the sidebar (e.g. history, bookmarks) causes the vertical tabs to collapse to the favicon-only view. The vertical tabs can be re-expanded while the sidebar tool is open but clicking the sidebar button, however this requires additional inputs
• The bookmarks sidebar can only be closed by re-clicking the bookmarks button within the sidebar (or selecting 'view bookmarks sidebar' from the toolbar bookmarks menu). There should be an option to close it in the same way the history sidebar can be closed (i.e. by clicking the x button)
• Inconsistent UI between vertical tabs and sidebar tools is visually unappealing and somewhat disorientating (font spacing, font emphasis, font size)

Vetical Tabs

• Tab grouping and group rearranging is extremely useful and is a fairly glaring omission
• Spacing between tabs is too large. The ability to customise vertical tab spacing would be useful (alternatively, just closer spacing, similar to Edge or perhaps a bit closer)
• 'New Tab' button feels misplaced above tabs. Would prefer it was located below (or even better, have the ability to select above or below) (Edge implementation is good)

[XCanG]

So, to some of your points there is possibility to do that manually by changing your CSS in userChrome.css and I actually changed some of those like in your suggestion, but I will comment first on other points.

1. Could be good in general, but I still may want to have a double sidebar like now with other sidebars on left side. Considering your other point with hover over to expand when do that with sidebar at left it take less space.
2. Probably could be done, didn't tried to change that because I like it the way it is. But it's tricky to debug, because I can't pause and freeze UI unlike regular web page and it also not work when window not in focus or modifier keys like Alt was pressed.
3. This one I actually implemented, check my CSS code above.
4. This one is not, because there was only one gutter on the right side of addon or other page opened with vertical tabs and vertical tabs right now is fixed size. That's being said, with my styles I just unset width on hover, but you could change that to some fixed, but wider size if you need. like width: 500px;
5. I think there should be an option. But I want to say that not only default tools do that. Addons like Tree Style Tabs or Bitwarden have sidebars and when opening them, vertical tabs also collapse.
6. This is may be up to extensions as well, because their page styled their way and there is no way to control them unless ask developer to match the style of browser.
7. Personally I would want it to be more like Tree Style Tabs with nesting, but I doubt they will go this route, because it's a complicated matter, need a lot of development, but the most problem part that every user want it to be their way, so it involve a lot of customization requirement and it further slow down development process.
8. This one I also fixed, but not in my main post, but in reply to that post. I make them about 25% smaller by reducing padding around icon.
9. And this one too, I replyed it to some users who asked that, it also a single rule that can easily change position.

#tabbrowser-tabs[orient="vertical"] #newtab-button-container {
    grid-row: 3;
}

[D0m1n1c]

The rule doesnt work now with nightly 132 🙄 The new tab button is at the top.

[tilwiti]

I've noticed the progress the Floorp team is making on features that are a bit further down your roadmap. It would be great to see them as part of your team as well.

[Callumk7]

This is a really welcome feature. For me though the clear missing functionality is a single click for closing a tab. A simple solution would be a close tab button that can be added to the toolbar. Ideally a default close tab would be added near the refresh icon, or the new tab icon on the title bar.

[ddnn]

Hiiiii

I noticed that tab previews in vertical tabs mode appear on the bottom of the tab, not on the side. This can obstruct the other tab buttons, making this an inconvenience. Also, I would like an option to expand and compact vertical tabs automatically. Also work on spacing, rounded corners and general UI improvements. Great work!

[lesstzero]

My suggestions

• Add a key binding to toggle the sidebar
• The sidebar should have smooth transition when toggled.
• The searchbar like arc browser would be a good addition too.
• Settings to alter the keybidings for sidebar as per user preferences.

[XCanG]

I did try to animate transition, but it's very slow, create lags on the page because unlike horizontal row, when you change width - whole page would reflow and because of that it looks janky (even for slow .5s animation), because whole page trying to recalculate sizes every frame. Even for 60Hz monitor it looks liks 5-10fps. For 144Hz monitor it would be even more disruptive. And you will have to hover over tab bar a lot. If you still wanting to try it by yourself, here is style for userChrome.css

#sidebar-main {
	display: grid;
	grid-template-columns: 0fr;
	grid-template-rows: calc(100vh - var(--nav-height, 34px) - var(--bookmarks-height, 28px)); /* for 2-rows header */
	grid-template-rows: calc(100vh - var(--nav-height, 34px)); /* for 1-row header */
	overflow: hidden;
	transition: grid-template-columns .5s ease;

	&:hover {
		grid-template-columns: 1fr;
	}

	> sidebar-main:not([expanded]) {
		min-width: 50px;
	}

	> sidebar-main[expanded] {
		min-width: 38px;
	}
}

But I wouldn't advice.
P.S. I wish Firefox would support calc-size(auto) to remove grid hack for this, but it's not added into browser yet, not even in Nightly.

[PatOr]

Perhaps in addition to AI assistants, add the ability to add your pages to the sidebar, such as messenger, spotify or discord?

[PatOr]

I would like to be able to see the tab titles in the sidebar at all times, I often use this in Microsoft Edge when I have more tabs. If this functionality was also in Firefox I would probably go back to it after using Edge for a few years.

[haingdc]

Please allow vertical tabbar for resizing again 😭

[tilwiti]

Yes 😞

[Herteby]

Switched to Firefox from Edge because of this update - vertical tabs was mainly why I used Edge.

I don't see the reason for putting History in the sidebar though, when it's not really something you need open all the time. Having it in the sidebar just feels cramped.

[hjasond]

Click the customize sidebar icon, you can remove history and bookmarks if you want.

[Herteby]

Aha, now I found that although you can't resize the tabs you can resize the history to make it not cramped, odd! With that knowledge the new sidebar history view seems like an improvement actually 👍

Btw as a suggestion maybe increase the default width of the history a bit.

[haingdc]

haha. It seems for experimental

[Evales1853]

SideBar Rightside and LeftSide pls

[Pfize]

Do you mean left and right side at the same time?

[zedisnotdead]

I'd love an option to expand the sidebar on hover, similar to Arc, and the amount of pinned tabs per line being configurable.

[firefoxonubuntu]

Closing tabs require that I first press the sidebar button to expand it. It would be nice if hovering over a tab alone presented an option to close it.

[Pfize]

You're right, but you can also press ctrl + w 😉

[Daiti]

I downloaded the nightly version specifically to use vertical tabs, as I already use plugins in the vanilla version to have them. Here are some issues I've encountered:

1. Pinned tabs should appear on all open windows (personal preference).
2. The section reserved for pinned tabs shouldn't be limited, in my opinion. All pinned tabs should be visible without having to use the scrollbar.
3. The button to add new tabs, as already pointed out, would be better positioned at the bottom, near bookmarks, history, etc.
4. Also as mentioned, the icons for tabs open on other devices and history are smaller compared to the others.
5. I've noticed that some plugins, once enabled, appear on the sidebar (like Tabgroup, Bitwarden, for example) while others don't (like Firefox Multi-Account, for instance). Is there a reason for this?
6. Once vertical tabs are enabled, a bar with window controls remains above the URL bar, which becomes a waste of usable space. It would be better to merge the window controls into the URL bar.
7. Personally, it would be convenient if, once the sidebar size is adjusted, for example, when opening bookmarks, this size is remembered without having to resize it every time.
8. I'd like to have the possibility to hide the scrollbar for vertical tabs
9. I personally believe it would be convenient to also add some indication when using incognito mode, as once vertical tabs are enabled, there is no distinction between an incognito window and a regular one. A possible solution could be to add a colored bar just like the multiaccount one but on the other side of the tab icon, like this
   
   I achieved this in Firefox Vanilla through the use of a plugin to have vertical tabs.
10. Inactive tabs should be grayed out

[ekana]

Please make it so that we can have the side bar completely hid off screen and show up only when we hover the mouse in the side of the screen its hidden. I don't mean making the browser fullscreen to do it either. I mean it should be an option for regular windowed mode. Sorry to bring up other browsers, but this is how Arc does it and it is incredibly helpful on laptops allowing for applike use without needing to go fullscreen or making a PWA.

[ekana]

I also believe that we must be able to rename the tabs. This is a huge feature that helps in organization. Having folders on the sidebar would be super helpful too (again like Arc). Which is different than favorite tabs that sit at the top pinned. I'm basically asking y'all to do it almost exactly like arc, which is honestly the best implementation I've used by far.

[Agentvirtuel]

Hello

---

@ekana wrote:

I also believe that we must be able to rename the tabs.

---

If you'd like to test Tab Mix Plus
https://github.com/onemen/TabMixPlus

https://onemen.github.io/tabmixplus-docs/help/menu-tab-context-menu

[XCanG]

I've posted my comment with similar suggestion at 08-12-2024 07:30 PM you can get basic styles for that here. What you only need to change is 1 value from it:
For a full size tabs it's

sidebar-main[expanded]:has(> #vertical-tabs) {
	--sidebar-width: 1px;
}

for a compact size styles (from nested comment) it's 16px (because -8px were cut off)

[Hevel]

I understand that updates to extensions and official version updates are somewhat unrelated, but I'd like to point out potential issues that may arise due to the current update.

1. It appears that the sidebar can only be used in a single mode (left or right) at present. Therefore, it seems impossible to use both left and right sidebars simultaneously. (It also appears impossible to use a multi sidebar in one direction.)
2. As a result, conflicts occur when using extensions like Sideview that utilize the sidebar.

I hope these points will be considered before the official release.

[tilwiti]

Although it's not Vivaldi, it is still Firefox-based. I hope this can serve as some design inspiration. It would be great to allow multiple tabs in Split View, not just two, and in any combination.

[ecky-l]

Great Feature! I am using it on FF Nightly, which I installed solely to use the vertical tabs. In addition to the other comments above, I'd like to make two suggestions:

• be able to (optionally) disable the preview when hovering over the tabs in the vertical tab bar (currently the preview is always shown, which distracts focus)
• set the minimum width of the vertical tab bar to just as wide, that a close button can be displayed for each tab icon. Then display the close button when hovering over a tab, so that the user can close a tab straight away with one click (I know you can use <Super>-w, but most users do likely prefer the visual way)

[Agentvirtuel]

Hello

---

@ecky-l wrote:

• be able to (optionally) disable the preview when hovering over the tabs

---

Try

Configuration Editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Search browser.tabs.hoverPreview.enabled and set to false
Restart Firefox

To restore Firefox setting, Show an image preview when you hover on a tab, in about:preferences#general

Configuration Editor for Firefox
Search browser.tabs.hoverPreview.enabled and set to true
Restart Firefox

[YPAP2205]

Will it be possible to remove extensions that are on the sidebar? A couple extensions I have are on the sidebar, and I can't have them removed. There can be users who wouldn't want their extensions to be on the sidebar. But other than that everything is good, I like the improved sidebar and the new vertical tabs.

*Edited to fix grammar mistakes

[Pfize]

When can we expect an update with improvements to the sidebar and vertical tabs based on our suggestion?

[tilwiti]

@asafko 🙏

[Encrypter]

I just had a chance to try it out, and it looks fantastic! In addition to the great points @blu mentioned, I think it might be helpful to add a close button on the sidebar tab when hovering over it. Currently, hovering over the tab doesn’t trigger any action.

[Jonathing]

Good stuff. Firefox has been in desperate need of native vertical tabs for a while now, especially since all other Firefox-derived browsers suffer as a result from attempting their own implementation non-natively.

A few things I'd like to see in future Nightly releases:

• Removal of the title/window label bar. Right now the only things on it are the new tab button (removable, thankfully), the tab overflow button, and the standard close, maximize, and minimize buttons. These can all easily be condensed into the same space as the address bar.
• The UI elements on the vertical tabs bar does not seem to be aligned very well. It's especially noticeable when the active tab in the collapsed tabs bar looks like it's about to clip off the right side of it (image attached)
• Auto-expanding and collapsing on mouse hover.

Obviously I don't want to name drop here, but my best experience comes from a certain nondescript Chromium-based browser on a popular operating system 😅

[haingdc]

With a lots of tabs in the current session, I like a tweak configuration in tabbar, click on tab A to switch to the previous tab.

Currently, we have several options:

- First, click on Firefox View button, on the Open tabs panel, The tabs are shown sort by time. Choose the top newly opening tabs

- In the Settings - General section, enable the options labeled "Ctrl+Tab cycles through tabs in recently used order"

They are good choices. However, flip previous tab can be an quicker option. Even we can have a shortcut for it

#referance to

https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab

https://addons.mozilla.org/en-US/firefox/addon/tab-flip-for-tree-style-tab