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.

[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 😄

[Erwan]

30/08/24
First test for me.
It looks promising, but there's still a lot of customization work to be done:
- only 2 choices: large or small tab, but I'd like an intermediate-sized tab, not too large so as not to reduce the window too much, but big enough to have the little cross to close quickly.
- strongly related, if I set my slidebars to wide, it should stay that way and not shrink at the first opportunity.
- History, Bookmarks should be tabs at the top of the sidebars and replace the sidebars when you click on them, instead of being a new window that's far too intrusive in our window.

Translated with DeepL.com (free version)

[Kenkrik]

Thank you for this amazing update.
Now something I would love to see added would be the ability to add a second bookmarks toolbar to the sidebar so that you could click on favicons and bookmarks folders directly.
Another great feature would the the possibility to permanently pin apps to the sidebar even if you are using horizontal tabs (and it would also be nice to have the ability to share the pinned apps between all windows so that you could treat the sidebar as a quick access menu for your most important tabs).
Again, thank you so much for your hard work.

[piradata]

there is a little bug if the sidebar is on the right, its impossible to resize the panel horizontally. if it is on the left, it can be resized normally

[JoeySav]

Is there anyway we can get an auto hide and auto extend feature, like when you hover your mouse on the sidebar it will stretch out (as a toggle of course 🙂 ) If this is something that is already in the works, disregard this message , i am an imbecile

[PedroSaldanha]

I'm not liking this, to be honest. The purpose of vertical tabs is often to free up horizontal space, given modern widescreen displays. However, what is happening in the implementation of Firefox—though it's not just Firefox—is that extra space is being used. The top bar still takes up a considerable amount of space and occupies lateral space as well. In the end, the number of occupied pixels on the screen is greater.

The experience I want to see in Firefox with vertical tabs is one that uses little or no space in the top bar, maximizing information and tools that should be on the side control, as if the entire browser were lying down. Nothing above.