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.

[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

[0x779]

This is a useful feature which I have been hoping to see in Firefox.  I would suggest making the sidebar resizeable when it opens up, so you can see the entire label of each sidebar tab.

To give you some insight into my use case and why that would be useful to people like me:

I often have a large number of tabs to remote desktop sessions open for my job, where the title of each tab starts with a (relatively long) username, followed by the server name, which is the part of the title I would like to see.  Of course, the tabs can only be so long in horizontal tabs, so the server names are not visible in the tab labels without hovering over them.  Vertical tabs more or less solve this problem for me by allowing more of the tab label to be shown, and so revealing the full name of the server and allowing me to quickly jump between them without hovering on each tab to check which RDP connection each tab leads to. 

However, despite the fact that these new vertical tabs now show more of the server names, some of it is still cut off -- and I can't seem to resize the sidebar to an appropriate length to show the whole length of the tab labels. 

I am very happy that this feature has been added, in any case!

[Pfize]

Is it possilble bring this in future updates?

1. Hide the sidebar in fullscreen (F11). To show the sidebar again we can do this via cursor. Same as the top bar.
2. The abillity to resize the toolbar would be nice

No bugs so far but guess there have been a few updates since yesterday 😎

[Pfize]

          3. Tab container on the new tab icon in the sidebar

[tilwiti]

Great update! I have a few suggestions to enhance the experience:

• Automatically hide vertical tabs when extensions like Sideberry are enabled.
• Center the plus sign more precisely, aligning it with the tabs for a cleaner look.
• Add the option to create custom web panels—essentially mobile versions of websites attached to the sidebar.
• Address the issue where large prompts make the ChatGPT page appear empty.
• Allow users to edit the vertical panel directly in the UI editor (where the dragon pic is located).

I really appreciate the direction you're taking with this feature. I’d even support adding more telemetry to help you explore different usage scenarios.

[Ivi104]

This is a great start but a lot of things could be improved.

• Allow us to choose the position of the New Tab (+) button. I'd prefer it after all the tabs instead of at the top. Add a visible dividing line between the last tab and the button.
• Reduce the gab between tabs.
• Add a visible purple border to the right of each tab in incognito, to make it immediately recognized.
• If bookmarks are shown only on new tabs, when scrolling through multiple open tabs, and among them a New Tab page (about:newtab), all the tabs shift down to make place for the bookmarks bar. When selecting the new tab, the mouse is no longer on the new tab, but on the tab above it, so I have to move the mouse two tabs down to move to the next tab (after newtab), then one tab up to move to the next tab.
• If the sidebar is collapsed, it stays collapsed on hover, so there's no intuitive way to close a tab. The sidebar should expand on hover (preferably after a small delay - .25 s, make it modifiable), allowing us to close a tab via X when hovering over it, and collapse when the mouse moves away.

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