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.

[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

[warner_mark]

Interesting! I'm a bit hesitant to switch from the standard layout, but the sidebar for extensions and bookmarks sounds useful. Might give Nightly a spin this weekend to see how it feels.

[GJ]

Thank you for the recent feature update! I appreciate the new functionality. I would like to suggest a couple of enhancements to improve the user experience with vertical tabs:

1. Auto-hide Side Bar: It would be great if the sidebar could auto-hide and then auto-display when the cursor moves into that area. This would help in maximizing screen space.

2. Optimize Search Bar Space: There’s some extra space above the search bar that could be better utilized. Perhaps the buttons in that area could be moved adjacent to the search bar, freeing up more screen space.

[Agentvirtuel]

Hello

1. of course, this is not the expected answer
Nevertheless, https://www.userchrome.org
If you'd like to try, userChrome.css
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_sidebar.css

Clarification, into userChrome.css, --uc-sidebar-width: 40px, i set --uc-sidebar-width: 1px

--uc-sidebar-width: 1px;

https://www.youtube.com/embed/b7gdgNT9HkA

[fuseteam]

i wholly agree with #1

#2 is apparently already in the works 😄