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.

[Encrypter]

I noticed when I close tabs in expanded sidebar from the top, the tabs below it doesn't slide upwards and leave a blank space. Also, clicking on this blank space will open a new tab.

Also, can we get a close current tab button like the "New Tab" button:

Thank you!

[eXhumer]

Seems like the issue with empty spaces being left behind for closed tabs in expanded mode has been fixed with today's nightly. Recommended anyone having similar issues to upgrade to latest nightly.

[jrobcervantes]

Thank you so much! I've been dying for this feature to finally make it to firefox.

My takes:

• It would be great to get rid of the title bar entirely. I would like more window than browser borders. I know you could just hit F11 but the transition where the toolbar pops up again is jarring.
• I'm sure you're aware, sidebar doesn't hide/minimize when you toggle the option.
• It would be great to group tabs into one parent tab that can collapse.

[asheriif]

#1 is easy to do with userChrome.css (look up how to use that). You just need to add this:

#TabsToolbar .toolbar-items {
    display: none;
}

#titlebar {
    position: absolute;
    top: 12px;
}

#nav-bar {
    padding-top: 1px !important;
    padding-left: 66px !important;
}

And if afterwards the window control buttons (close, minimize, etc) overlap with your toolbar, just add a flexible space at the beginning of the toolbar.

[D0m1n1c]

Someone in this topic also gave this code for the same purpose :

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;
		}
	}
}

[gguio]

I love this feature so far! But I encountered an issue with toggling sidebar. I made it always hidden by default so it doesn't take space on the page when it is not necessary but now I cannot figure out what is the keyboard shortcut for toggling it. There is a button to open and close sidebar but it is a nightmare to always click on it to open and close sidebar. I couldn't find info about hot keys in settings or online, please help

[asheriif]

There's currently no keyboard shortcut and you have to click the button. I'm sure the devs are aware this is something the community wants and it's on their list. Let's give it time.

[D0m1n1c]

So... the team really read our suggestions !!

First, the tab preview popup now show at the side of the sidebar and no more under the tab !!

Then, there was a bug since few days where tabs in a container (Multi-containers) were no longer differentiated with a colored border. Fixed in the last nightly (september 18).

Now, please... move the « New tab » button at the bottom of tabs list !!

Thanks to the team for getting Firefox back on track!

[D0m1n1c]

Wow, Nightly september 21, the new tab button is now at the bottom !! 👌🙏

[jjb2024]

Yes to the expand width and glad to see it is a priority.

Being able to have a tree structure (like I have with Tree Style Tab) would be a big plus.

[NormalUser]

Hello,
In addition to other comments calling for an auto expand on hover, I would also love if the ui can be tweaked to eliminate much of the white space when the ui density flag is set to 1 (previously compact mode).

As someone who uses firefox on my laptop (small display) in compact mode and likes keeping windows side by side, I would appreciate if the white space can be trimmed much more (eliminating the red boxes in the screenshot above).

It is also weird that that enabling vertical tabs creates another level at the very top (where the close, minimise and full screen buttons are). Normally, they should be on the same level with the refresh button and address bar.

[JoeySav]

Any way we can get a double click to close on tabs? I keep trying to do it all the time, and notice there isn't an option to turn it on. Would be a great addition......pweeeease.

[Pfize183]

This woul be nice. In the meantime I can recommend the add on gesturefy. With this add on you can draw gesture trough holden the right mouse button. For example close taps, go back and forward, reload...

[Me2222]

i think the vertical tabs column should be sizable/slideable like edge and the treestyle tabs extension. that was you can see some basic page info if you have multiple tabs open from the same website.

[MrObvious]

If this is a default can we have tree style tabs? I make heavy use of the extension yet no one seems to implement it.

[PatriceGr]

Please, implement the F11 tab to switch in full screen.

Another shortcut that miss is to switch the vertical tab in expanse/full deploy.

Thanks.

[fuseteam]

pretty sure f11 already full screens firefox

[PatriceGr]

With horizontal tabs, pressing the F11 key displays the entire screen, without the tabs. They appear as a slide when you move the cursor to the top of the browser. With vertical tabs, the same behavior would be required, but with Firefox's left margin. Or right, if you put the tab bar on the right.

[securitypanda]

Hey! Thank you all for your hard work on the project! I was wondering if containerized websites are on the roadmap for the sidebar? 90% of what i would use a sidebar for is containerized websites. I have been using Firefox Nightly because of the new sidebar and love all of the progress you all have made. Some examples of what I am looking for can be seen in browsers like Vivaldi and Floorp. I love Vivaldi's implementation and I think that would be the best way to go about it. Vivaldi has things like toggling between mobile/desktop for a container and allowing you to configure if you want to have the sidebar be floating or taking up part of the scaling. Thank you all again for your hard work and I can't wait to see how this turns out!

Summary of requests:

• Containerized Webpages
  • Option to toggle Desktop/Mobile
  • Option to have sidebar either Floating or Scaled (ideally on a per containerized app basis)

[bjherbison]

When the new sidebar is enabled the right-click menu on history has fewer entries than before. In particular, it was noticed on Matrix that the Forget About This Site option is gone.

[Agashi]

After some time using it, I think it's a very neat feature to have, and so useful to me: I migrated from Opera GX to Firefox recently, and one of the features I require the most in a web browser is a fully customizable sidebar.

From this early point in development, I'd say that, the two main features I miss the most are the ability to add any website or webapp I want without the need of an extension, being able to minimize said app without it closing (in other words; keep them running on the background) and finally being able to zoom in and out the content of the apps.

This is a very promising feature, and I'm sure it will get better and better from this point forward.