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.

[PatriceGr]

Sure, the extra module should find another name ^^

[ngdangtu]

I like the idea of sidebar, however there is room to improve imho:

1. sidebar seems too big to me. The current size only good for tablet or touch devices, but I spend most of my time on keyboard and touchpad (mouse) (this should be option to choose the size like toolbar)
2. add more buttons on sidebar, maybe it's a bug, maybe not but when I enter "Customize Toolbar" mode, I expect I could do the drag & drop like I did on toolbar

[Chlam1]

Please consider adding automatic expand/collapse functionality to the tab bar, like in Edge and Brave (if it isn't already on the roadmap).

Needing to click a separate button every time you want to expand/collapse the bar (rather than just mousing over the bar) is unintuitive and hampers productivity.

[asheriif]

Hi. There's currently something major (critical user journey) broken with the implementation (I think it was introduced recently): if the sidebar is expanded, closing tabs doesn't actually close them and just leaves an empty space there.

Steps to reproduce:

1. Open 3 tabs with the sidebar expanded (in vertical tabs mode, of course).
2. Close the middle one.

Expected result:

1. Tab is actually closed.
2. UI is updated (the space in the middle is collapsed).

Actual result:

1. Space in the middle remains there.
2. Tab is not actually closed (you can confirm this by clicking on tab list in the toolbar and you'll see the tab is still there and is still open).

Here are two screenshots side by side of what happens:

I filed a bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1919228

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

[rlabrecque]

I'd like to be able to remove the New Tab button

[rlabrecque]

I wish the page image hover was shifted off the edge so I could see all the tabs under it

[rlabrecque]

If you have enough tabs to get a scroll bar, if you're on the bottommost tab and middle click a link it feels like it should still be scrolled to the bottom to see the new tab that opened.

(note I use the setting to not auto select the new tab via "open link in new tab")

[BelFox]

Hi there! Thank you for the hard work on vertical tabs and the sidebar 💪. It looks really promising!

I would like to provide some feedback on the new History sidebar specifically:

1. The clustering of websites in collapsible panels is nice, as is the "delete" button.
2. There are two options at this moment: "sort by date" and "sort by website". However, today we also have the option to "sort by date AND website". This is a really useful sorting option if you've build up a lot of history. I use it all the time.
   
   • Let's say you browse github.com on a daily basis.
     • In Firefox 130, I can go to "Yesterday" and go to the folder "github.com" to search for pages that I know I visited on Github yesterday. Quick and easy!
     • In the new History sidebar, I can see all the history for "github.com", but I won't know which pages I visited yesterday. Alternatively, I can see all the history for "yesterday", but I won't have the github pages grouped, making it more difficult to find them between the other history.
     • "Sort by date and website" offers the best of both worlds! Please bring it back! (I've added a mock-up in attachment)
3. I miss an option to erase a complete website (all visited pages) from history? I can't find it in the context menu and there is no erase button on the group level?

Keep up the good work!

[cabeto]

To close a tab you need to open the panel or right-click and hover till close option, which is somewhat annoying.

I don't see any problem if you follow the UI of MS Edge. It's already more mature.

[3_pocket]

Vertical tabs looks good but def needs and option the Auto Collapses when not being hovered over such as the video I took from Edge Vertical tabs

[Tokken7749]

i like vertical tabs a lot but please integrate an hover option to open an close the sidebar by hovering. Add an shortcut to open/close the sidebar And also add an option to group open tabs like the arc browser.

[Erwan]

After testing, for the moment, the "Tree Style Tab" extension is more efficient and advanced than the Firefox version. Maybe you should take inspiration from it?

We still cannot:

• adjust the width of the window manually.
• group the tabs with their "child" tabs.
• the parameters and customization are very limited.

[rahaaatul]

Search results are hidden behind the window in vertical tabs mode. See horizontal mode:

Really love the UI though.

[D0m1n1c]

Just came back here to report exactly the same bug ! 👍

[D0m1n1c]

Nightly build 133.0a1 october 4 2024, search results was fixed, but still have an issue. The bookmarks in the Bookmarks bar (only the text) still sit over it...

[Stryder]

I'm coming from Wavebox which has a lot of features in regards to the sidebar and I've been looking for a replacement that's more security focused.

If we could get the ability to create groups and or folders on the vertical sidebar to sort our tabs into, and then the ability to rename tabs in the vertical sidebar I'd be set!

Some not needed extras of being able to change the folder or group icon and maybe add some color, so Tab Group 1 could be red, and tab group 2 be in blue. For quicker finding of what you need that'd be sick!

As well as resizing the sidebar on the fly which a few others have mentioned as well ❤️

[D0m1n1c]

Groups and folders... Like as I already said in this topic : why not bring the Collections on mobile app to the desktop ? And sync them like opened tabs. I did a reset of my phone last week and lost my collections on Android (they are not sync).

[Pfize183]

Since todays update 133.0a1 (2024-10-03) there is to much wasted space.

[D0m1n1c]

Agree. I reported exactly the same thing some hours ago... 👍