cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Firefox Sidebar and Vertical tabs: try them out in Nightly Firefox Labs 131

asafko
Employee
Employee

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.

322 REPLIES 322

blu
Making moves

It's finally here, nice.

It's a great start still needs a bit of work.

Issues:

  • Unable to remove tab search button when using sidebar and vertical tabs.
  • Wasted space with windows controls not being forced into a single line with url bar etc.

Nice to haves:

  • Panel width sizing control would be a big plus
  • Ability to move new tab button below tabs in sidebar.
  • Bookmark favicons front and center at the top of the side bar (Arc like) for easier access.

A bunch of that can be do using css, but normal users won't even consider that approach.

Overall nice job.

Hi @blu

Thank you so much for taking a look and for your feedback!

1. We will land the patch that forces existing navigation bar and its contents into the toolbar, reducing the empty space in the nearest future, please bear with us in the meantime🙏

2. Sidebar width size control (the History, Tabs from other devices and other panels are already resizable) is a high priority on our backlog, but we likely won't get to it quickly.

3. Can you please tell me more about the bookmarks use case? Do you mean you would prefer to be able to add bookmarks to the top of the sidebar/pinned tab areas instead of where they currently are at the bottom of the sidebar? Please note that bookmarks are not one of the default tools, so you'd need to add them via the Customize sidebar menu.

These are minuscule, but spacing could be improved a bit as well.

The first would be the menubar - when pressing alt, it seems to leave 20-25 pixels of unused space beneath it, as apposed to when toggling it as always visible.

2024-08-23_14-40.png

The second would be the horizontal (inline) padding between an individual tab and the vertical tabs container, removing 2-4 pixels from both sides.

spacing demo:
https://imgur.com/a/4yy8cq8

Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users.

I've just tried this one out and it looks promising. Most things work great. Personally I care about more minimal, compact UI, though.  One thing which I do miss right now is that, when I set tabs as vertical ones,

I cannot move "List all tabs" button anywhere.

"List all tabs" is the only button which stops me from removing the top-most bar. I would love to see only one bar - with the address field plus some icons.

Hello

Maybe?
https://www.userchrome.org
https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

If you wish to stop seeing List all tabs button

#alltabs-button {display: none!important;}

1a.png

If you wish to move List all tabs button1.png

By way of illustration left -> 1141px

#alltabs-button {
  left: 1141px !important;
  position: fixed !important;
}

2.pngOf course, this is just an example, and you should also see the result in the maximized Firefox window

About


@kwiatek wrote:

Personally I care about more minimal, compact UI


Take a look at
https://connect.mozilla.org/t5/discussions/fully-support-web-usb-and-web-serial/m-p/48852/highlight/...

Off topic.

But do you know how to move the window controls to the left side and reverse the order?

rahaaatul_2-1727961776075.png

and maybe replace them with traffic light style red, yellow & green circles?

lol theres been multiple posts on reddit where reversing the order of the controls happened to people and it was not something they had attempted to do so... hmm. interesting

anyway, checkout reddit.com/r/FirefoxCSS

its possible, probably, but its complicated(ish)

D0m1n1c
Familiar face

Totally agree with the idea to moving the window controls to the same space as the address bar (and delete the extra space at the top that was occupied by the horizontal tabs bar). I had created a userChrome.css file previously to do that, using with it the Tree Style Tabs extension.

But glad to see this vertical tabs feature coming really soon and that the team have planned to move the window controls to the toolbar. I test the vertical tabs right now in the latest v130 beta by changing two values in the about:config. Looks already well !

Hello

 


@D0m1n1c wrote:

I test the vertical tabs right now in the latest v130 beta by changing two values in the about:config. Looks already well !


Additional information for those who are interested
Configuration Editor for Firefox https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Search sidebar.revamp double-click to set true
Search sidebar.verticalTabs double-click to set true

wutongtaiwan
Familiar face

The nightly version I'm using is already up to date. But I don't know how to turn it on. Do you want to enable this feature in about:config?

You can now enable it in a more user-friendly way:

1. Go to Firefox Settings > Firefox Labs (or just type about:preferences#experimental in your awesome bar and hit enter).

2. Put checks in the checkboxes of Vertical tabs and Sidebar experiments.

3. You should be able to see both after that.

lyqst
Making moves

Thanks for this, looking forward to future development! I'd say the most pressing issue is the wasted space on the toolbar. Also, it would be nice to have a close button for the tabs, although getting the sizing right might be difficult.

Other than that the only issue I see is that favicon alignment seems off (see attached).

Thank you for trying it out @lyqst!

The navigation bar "slimming down" will land in Nightly some time in August, hopefully. And that pesky alignment should be fixed shortly, too.

Regarding the close button - do you see it when you hover on tabs in the expanded sidebar? Or do you mean adding in the collapsed sidebar? The latter one is a little tough indeed because of the space available in the collapsed sidebar.


The navigation bar "slimming down" will land in Nightly some time in August, hopefully. And that pesky alignment should be fixed shortly, too.


Awesome!

Regarding the close button - do you see it when you hover on tabs in the expanded sidebar? Or do you mean adding in the collapsed sidebar? The latter one is a little tough indeed because of the space available in the collapsed sidebar.


Oh, yes I meant on the collapsed sidebar, but it's not that big of a deal. Actually I think it's more of a me problem, since my middle mouse button is not working, the only options left are to either right click > close tab, or ctrl+w which I'm not used to. Might be a good time to start using that, or to get a new mouse 😅.

Awesome to hear that the navigation bar will be slimming down.

atm I am unable to see the close button when i hover on tabs in the expanded sidebar so far.

tho i'm currently on firefox 129

could we also get a shortcut to expand the sidebar?

Looking good! Would be nice if the navigation bar would display in a single row as with the Gnome header bar on Linux.

What about having a close button somewhere on the top bar, maybe something like have it appear in a different location when the sidebar is shrunk, maybe in the URL bar could be a good place, or somewhere on the top bar? since that's likely to be the area with the least amount of crowding with the tabs being vertical. Besides the close being a bit hard to find, i really like the vertical tabs.

For the close button, I think there is potential for a hover effect interaction.

Please check out developer settings. You can activate double click to close tabs.

 

Elsie_Albert
Making moves

Will rounded corners be added? It will look better this way, thanks for your work!

witherzuo
Making moves

Thanks to the Firefox dev team for working on, some ideas about these:

1. The icons for Tabs from other devices and History in the new sidebar are smaller than the icons for Bookmarks and Customize sidebar, which doesn't look very coordinated. 

sidebar-smaller-icon.png

2. The search box in the sidebar panel does not match the style of other search boxes in the Firefox UI design, maybe it would be better to change it to a rounded rectangle like the other elements?

sidebar-search.png

3. Vertical tabs can be designed to expand and collapse automatically - just like Microsoft Edge, vertical tabs expand automatically when the mouse is moved into the vertical tabs, and collapse automatically when the mouse is moved out, and then provide a setting: Maximize, Minimum, and Auto-Expanding (there may be a better design).

4. When the mouse is placed on the vertical tab, the popup tab preview should be displayed on the left or right side of the vertical tab.

  • For example, when the sidebar and vertical tabs are fixed on the left side, the tab preview should be shown on the right side instead of below; if the sidebar and vertical tabs are fixed on the right side, the tab preview should be shown on the left side.

Anyway, thanks to the Firefox devs for making native vertical tabs a reality, good job!

Deok
Making moves

Greetings!

Integration of sidebar is pretty handy thanks for adding team mozilla!

Although there is one issue that i found - even if you keep the sidebar position to right it still goes to left somehow after i reopen my nightly browser and then if i click on nightly settings in sidebar it fixes itself to right again.

kindly look through this!   

overall its pretty well designed.

panda_madness
Making moves

Nice! Thank you for your work!

One addition that I think would be cool is a shortcut to expand the tabs, such that you would see the page title beside the favicon (yes, like in Arc 😅). This could probably also focus the tabs so that we could navigate between them/select them with the keyboard.

This would be essential for me! Only icons won't cut it, not recognizable enough.

 

Yeah, I kinda expected for it to be some button to expand the sidebar in the same way you can do for "tabs from other devices". Something along those lines would be great.

Oh, actually looking at another comment thread below I realized this already exists when clicking the sidebar button at the top. It looks great, it's just not very obvious how to get there, and being able to resize the bar would be nice as well

I too really need to read the title of the page, not just a favicon. Please address this issue and I will be happy with this feature.

Press this button!!!!

thedaemon_0-1725994260003.png

 

It shouldn't require an extra click. The tab bar should expand automatically whenever you move your mouse over it (and retract when you move your mouse away), just like in Edge or Brave. Needing to move your cursor to click a button just to be able to browse your tabs (and then click it again when you're done) is an unnecessary productivity/workflow killer.

aervnu
Making moves

aervnu_0-1723097616654.png

Is there any way to collapse the sidebar into only favicons? I tried going through every page in Nightly settings but couldn't find anything, and since this was a fairly recent feature Google didn't return any relevant result other than this thread so figured this is where I'd ask.

Screenshot 2024-08-08 at 11.17.33.png
Mine is this way by default, I would very much like to know how to expand the sidebar like you have it 😄

After a bit of stuggling, I found out that clicking the sidebar button in the top toolbar toggles the sidebar state (collapsed or expanded). If you don't have the button in the toolbar, you can add it from the "customize toolbar" in the right click menu.

It would be nice to toggle between the expanded and collapsed (favicons only) states.

wutongtaiwan
Familiar face

The sidebar icon is too small and incongruous. And after I chose to hide the sidebar, it didn't hide. My idea is that when I choose to hide the sidebar, the sidebar disappears, and when I mouse over the left sidebar area, the sidebar shows up again, which is my idea for hiding the sidebar. And there seems to be a bug when I choose to hide the sidebar, the sidebar becomes what it looks like in the image below. You can only revert to the original state by closing and reopening the sidebar in Firefox Experiments

wutongtaiwan_0-1723098638282.png

 

it seems the sidebar and customize sidebar page are separate. if you close the setting page, you'll notice the sidebar is hidden, unless it is always shown

wutongtaiwan
Familiar face

I want the vertical tabs feature to be turned on, and the tabs will only show one icon, and when I move the mouse to the sidebar, the tabs will be fully expanded, just like the Floorp browser. This saves as much space as possible, and I want to save space by moving the zoom out, maximum, and close buttons down to the address bar

PatriceGr
Making moves

Hi!
I just have two request:

  • I want to slide the last button of List all tabs button to the modules tabs. The icon is grey, so I can not slide it and take to many space. So I can apply in about:config

#TabsToolbar {
visibility: collapse;
}

  • I want to have a shortcut to display and mask the lateral panel, not only the button that still exist.

Nice work in any case!

 

2024-08-08_09-05-52.jpg

Kvin
Making moves

Is it possible to allow simultaneous use of horizontal and vertical tabs?
Vertical Tabs + Horizontal Tabs?

Will tab grouping be available for vertical tabs, and when will tab grouping be available in the Nearly version?

Have you considered the auto-hide and auto-open sidebar feature?

When opening a story in the sidebar, how can I automatically focus the search, as it is implemented in the sidebar tabs?

Also, the button to close the tab should be displayed when you hover over the tab, even when it is of a narrow size where only icons are visible.

I hope that somewhere in the future it will be possible to implement 2 sidebars, either one next to the other, or one on the left and the other on the right.
Thank you for your work and for your answers!

23.png