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.

[D0m1n1c]

Agree with many of your suggestions. For the second (gap between tabs), I customized it with userChrome.css :

/* ROOT - VARS */
*|*:root {
--tab-min-height: 28px !important;
}

With that, the spacing looks like the one used for the links at the bottom of the sidebar (history, sidebar settings, etc). The height can be adjusted and a little more to mark a difference with the bottom links.

[Speff]

One more thing I realized - the sidebar currently shifts the page when expanded. If an expand-over-hover feature is added, then this behavior would likely need to be changed to float so it's not constantly changing the page layout when the user browses their tabs.

[ffffff]

I think grouping history can be a useful UI decision to aid navigation, but having to click twice to see my history (first to open the history panel, second to open one of the groups) feels like a silly step back regarding ease of use.

At the very least, please consider remembering which group I last opened and keep it open. I don't think that's the ideal solution, but it would make using the panel a bit less frustrating.

It's rough right now, but I'm interested in seeing what this new sidebar will look like in the future.

[usertobefound]

I've been trying it out and I've been having a great time with it. My only thing is wishing to be able to have an option where we can expand the tabs from hovering on the left side of the screen instead of clicking the 'show sidebars' button. It would also really help when we have a lot of tabs open and scrolling through when doing massive amounts of research. Otherwise, really great work so far.

[dwiggle]

Just wanted to say I heard Firefox was adding this & immediately switched back to Firefox from Edge. Looks like I'm a bit early as the version of Nightly I installed on my machine doesn't have the sidebar tabs functionality yet (130.xyz, not 131) but I'll happily wait a few weeks hoping it lands soon. Thanks so much for adding this feature!

[fnarenji]

It's not currently easy to see which tab is playing audio. The website's favicon is displayed by default, and only after you hover over the tab's icon does it turn into a speaker revealing you can mute the tab.

[Agentvirtuel]

Hello

For information purposes
https://connect.mozilla.org/t5/ideas/quot-goto-first-sound-playing-tab-quot-context-menu-of-a-tab-an...
https://www.youtube.com/embed/Z5wNV5Vu4vU

[XCanG]

First of all thanks for the feature. I'm still however looking for full Tree Style replacement of an addon from Chrome: Tabs Outliner and the closest one is Tree Style Tabs in Firefox, but it incomplete and laggy with a lot of tabs. One of the reasons I wanted to remove tabs from the top is because I'm using TST addon.

There are few things that bothering me right now, they can be added as options to enable/disable.

1. + button for creating new tab in top nav bar, we already have one in side bar. I hide it (in CSS posted below)
2. Empty top nav bar that can easily be integrated with search bar and addons (again CSS below)
3. There is no way to hide custom side bars from addons, if there are a lot of them they take a lot of space. I want to have three dots button that collapse all this addon tabs (example addons that add buttons: TST, Bitwarden, etc.)
4. There a few modes that sidebar can be viewed: hidden, compact, full. However I want to have a bit special case, at least for tabs. I want tabs sidebar stays always in compact mode (so that it wont affect content on page), but when I hovering over it, it will expand to full size and wont change actual page content (like it is overlayed over web page, or position: absolute/fixed; with higher z-index). I also provide CSS for that below.
5. Option for scrolling on the selected tab in vertical list. There is legit cases where this may not be wanted, so keeping current behaviour as an option is good too.

Now, my CSS for general UI (userChrome.css). Take a note that I currently also use addon Tab Counter, that's why I have this hack with extra space for button at right. (Removed, but I keep --custom-buuttons-width if anyone needed that) Also this CSS is for Windows 10 buttons, so it may not work well on Linux/Mac.

html:not([sizemode="fullscreen"]) > body:has(> #navigator-toolbox) {
	--nav-height: 34px;
	--nav-button-width: 35px;
	--nav-buttons-width: calc(2 * var(--nav-button-width));
	--custom-buttons-width: calc(0 * var(--nav-button-width));
	--close-buttons-width: 140px;
	--bookmarks-height: 28px;

	> #navigator-toolbox {
		display: grid !important;
		grid-template-columns: [title-start bookmarks-start] var(--nav-buttons-width) [nav-start] 1fr [nav-end custom-start] var(--custom-buttons-width) [custom-end] var(--close-buttons-width) [title-end bookmarks-end];
		grid-template-rows: var(--nav-height);

		&:has(> #PersonalToolbar[collapsed="false"]) {
			grid-template-rows: var(--nav-height) var(--bookmarks-height);
		}

		> #titlebar {
			grid-column: title-start / title-end;
			grid-row: 1;

			& #new-tab-button {
				display: none;
			}

			/* custom button from addon that fit to the right position */
			& #TabsToolbar > .toolbar-items > .customization-target > .toolbaritem-combined-buttons {
				position: absolute;
				right: var(--close-buttons-width);
			}
		}

		> #nav-bar {
			grid-column: nav-start / nav-end;
			grid-row: 1;
			z-index: 2;
		}

		> #PersonalToolbar {
			grid-column: bookmarks-start / bookmarks-end;
			grid-row: 2;
		}
	}
}

/* make compact sidebar until hover over it */
sidebar-main[expanded]:has(> #vertical-tabs) {
	--sidebar-width: 38px;
	width: var(--sidebar-width);
	overflow: hidden;
	position: relative;

	&:hover, &:focus-within {
		overflow: unset;
		z-index: 2;
	}

	&::before {
		content: "";
		display: block;
		inset: 0;
		background-color: var(--toolbar-bgcolor);
		pointer-events: none;
	}
}

EDIT: added styles for #PersonalToolbar on 2nd row

Here is video showcase of CSS above:
 https://files.catbox.moe/tbxx9p.mp4 (it was too large to add as an attachment here)

[D0m1n1c]

Nice css code (shorter than mine) to hide the top bar. But when I try it, my bookmarks bar is broken... !?

[XCanG]

You're right, I edit my post, added 2 sections with &:has(> #PersonalToolbar[collapsed="false"]) and #PersonalToolbar to fix that. Works with toolbar that only appeared on New Page as well (collapse check). I also reset my button positions and find out that I don't need extra space for button at right, so I removed that too, because Tab Counter addon can be in first row without hacks as used before.

[D0m1n1c]

Wow ! You rocks ! Looks so much better than my own code with less lines. Now it works great with the bookmarks bar. Many thanks for your modification.

[XCanG]

Also, this alternative change will make icons smaller. It a bit hacky because "sidebar-main" have shadow root with ".wrapper" that add this margins and set width for the sidebar and I just couldn't change it's styles, so I move it to the left, cutting left padding.

If merge from code above, then replace an entire last section.

sidebar-main:has(> #vertical-tabs) {
	--sidebar-width: 42px; /* 38px w/o left, 30px with compact, 42px with left */
	position: relative;
	left: -8px;

	&:not([expanded]) {
		width: var(--sidebar-width);
	}

	> #vertical-tabs {
		/* --collapsed-tab-width: 24px; */
		--tab-min-height: 22px;
		--border-radius-medium: 4px;
		--tab-block-margin: 1px;
	}
}

sidebar-main[expanded]:has(> #vertical-tabs) {
	width: calc(var(--sidebar-width) - 6px);
	overflow: hidden;

	&:hover, &:focus-within {
		overflow: unset;
		z-index: 2;
	}

	&::before {
		content: "";
		display: block;
		inset: 0;
		background-color: var(--toolbar-bgcolor);
		pointer-events: none;
	}

	> #vertical-tabs .tabbrowser-tab {
		max-width: 265px !important;

		& .tab-label-container {
			height: var(--tab-min-height) !important;
		}

		& .tab-close-button {
			scale: .8;
			position: relative;
			right: -5px;
		}
	}
}

[oberon]

Hi Team,

The update looks solid. Thanks for this new feature. I would additionally request a close symbol / button on sidebar hover.

[Damglador]

For a sidebar, I would like to see an ability to add custom links there, like in Vivaldi and a customization like for the top bar.
For vertical tabs:
- custom size (drag to resize)
- custom amount of pinned tabs in a row
- tree view might be too much to ask

Also, would be cool to have a sidebar on the right and vertical tabs on the left

[asafko]

Hi folks,

I want to thank you all who tried this first version so very much for your willingness to poke at it and for your kind and generous feedback. It means a lot for the team, as we are committed to improving this work over time, and it's been really encouraging to see your support and that things many of you have asked for are already on our nearest and medium-term backlog.

The nearest-term big change you will see is the "collapsing" of the tab bar when vertical tabs are turned on, so that there's no empty space at the top. It's a non-trivial patch (hence it did not make it into the very first Labs appearance), but we're making good progress on it. 

I also want to apologize for being MIA until early next week. I'll be back shortly and will respond to every comment.

[RyugaSunny]

I use opera only and only because it have that sidebar which lets me have whatsapp and other apps running in sidebar from which i can work and respond if something important. I want to switch to firefox but i dont think it have a sidebar in which we can add social or other websites that open in container except the chatbot in firefox nightly i would be happy to switch if can tell me how to add things in sidebar

[BiORNADE]

A workaround, for now, is to click in Google logo at Google Gemini... But you wouldn't be able to resize it for now

[Eramdam]

Promising stuff! I already have a custom vertical tabs setup that utilises Sidebery and a userChrome.css hack link. That said, I'd love to see, from most to least important:

• A way to see tab titles, ideally configurable. I personally don't mind the horizontal space taken by a ~180px wide sidebar that would show the tab titles at all time.
• a keyboard shortcut to switch between vertical and horizontal tabs. I 90% of the time use horizontal tabs but when I open _a lot_ of tabs, having them laid out in a vertical list feels easier to manage.
• a way to have the window controls move into the address bar. Worst case scenario I'll hack it myself with a userChrome.css stylesheet, assuming the "has vertical tabs" state is easy to detect in CSS 🙂

[manicmoose]

THIS.
Perhaps the FF team could have just integrated the 'Sidebery' extension into their base code.
It's a well designed and polished implementation that has an abundance of features.

[edhelas]

Hi !

First I'd like to thank you for this awesome feature, I think most of my feedback are already listed in the other replies (save some space, merge some content ...) however there is two small features that I didn't saw in them:

• Double click in the empty space (if available) bellow the tab to open a new one
• Be able to right click on the "New tab" button to choose to open a new tab in a Firefox Container, for now there is now way to do it easily.

Basically I'd suggest you to check how the Tab Center Reborn extension is handling those things, it is managing those vertical tabs perfectly to me.

Regards,

Tim

[gu-stav]

Thank you for adding this to Firefox 🙏🏻

I have two things I'd like to see:

1. When performing a double-click into the sidebar, I'd like to open a new tab. The "+ New Tab" action at the top feels a bit mis-placed.

2. I'd like to resize the sidebar per window. I think I would like it if at some very small width the view would snap into displaying the favicons only. It took me a couple of days to find and understand the "Show sidebar" control next to the search bar.

[D0m1n1c]

For me, the + new tab button should be under the list of tabs, same place as settings link and history.

[XCanG]

Moving new tab button below is pretty simple, with this CSS in userChrome.css:

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

[D0m1n1c]

That works perfectly !! Thank you.

[D0m1n1c]

Unfortunally, with Firefox 132 this rule doesnt work now.

[CompetitiveBana]

Hello i like the Implementation but i would like the ability to
- turn off/on side bar extension

- remove the sidebar settings icon and have it somewhere else in the settings

- Ability to move new tab button below tabs in sidebar.

also it would be nice if the space between tabs were less
and please please add tab grouping natively

[XCanG]

Moving new tab button below is pretty simple, with this CSS in userChrome.css:

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

[ssynxx]

being able to scroll through sidebar tabs should be pretty high priority, as well as potentially expanding the sidebar after a short hover i.e. vivaldi's implementation

[piradata]

would be nice to remove this add button from here and also move the list all tabs button to the vertical tab

also, would be great if possible to customize the items on the vertical tab here

[haingdc]

yes, it must be ongoing for the team. I tried the larch build, It has a "strip" button to hide that horizontal new tab. It looks more concise then.

[wutongtaiwan]

My suggestion is that when I hover over a tab, the tab expands automatically and has a close button. Vertical tabs can only be closed with the middle mouse button at the moment, which is not in my habit

[mykiwi]

Hi,

Thanks for this feature! I really like it 😀 But I think it could be better.

Issue:
- List all tabs button can't be moved or removed from the top bar... so I have a big empty bar at the top which is kind of useless for me.

Here is what it look like on my linux:

When I click on the button:

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