07-24-2024 01:14 PM - edited 08-08-2024 07:55 AM
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:
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.
08-07-2024 07:27 AM
It's finally here, nice.
It's a great start still needs a bit of work.
Issues:
Nice to haves:
A bunch of that can be do using css, but normal users won't even consider that approach.
Overall nice job.
08-07-2024 10:14 AM
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.
08-23-2024 11:48 AM
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.
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
08-09-2024 11:03 AM - edited 08-09-2024 11:05 AM
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.
08-15-2024 11:53 PM
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;}
If you wish to move List all tabs button
By way of illustration left -> 1141px
#alltabs-button {
left: 1141px !important;
position: fixed !important;
}
Of 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/...
10-03-2024 06:25 AM
Off topic.
But do you know how to move the window controls to the left side and reverse the order?
and maybe replace them with traffic light style red, yellow & green circles?
10-08-2024 04:45 AM
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)
08-13-2024 12:48 PM
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 !
08-13-2024 11:28 PM
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
08-07-2024 12:15 PM
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?
08-07-2024 01:02 PM
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.
08-07-2024 12:56 PM
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).
08-07-2024 01:06 PM
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.
08-07-2024 01:16 PM
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 😅.
09-03-2024 09:53 AM - edited 09-03-2024 09:55 AM
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?
09-12-2024 08:23 PM
Looking good! Would be nice if the navigation bar would display in a single row as with the Gnome header bar on Linux.
11-16-2024 07:56 AM
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.
11-20-2024 01:37 PM
For the close button, I think there is potential for a hover effect interaction.
11-20-2024 01:39 PM
Please check out developer settings. You can activate double click to close tabs.
08-07-2024 06:57 PM
Will rounded corners be added? It will look better this way, thanks for your work!
08-07-2024 07:34 PM - edited 08-07-2024 08:09 PM
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.
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?
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.
Anyway, thanks to the Firefox devs for making native vertical tabs a reality, good job!
08-07-2024 09:39 PM - edited 08-07-2024 09:40 PM
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.
08-07-2024 10:22 PM
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.
08-08-2024 11:58 AM
This would be essential for me! Only icons won't cut it, not recognizable enough.
08-11-2024 04:41 PM
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.
08-11-2024 04:44 PM
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
09-10-2024 11:49 AM
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.
09-10-2024 11:51 AM
Press this button!!!!
09-16-2024 11:43 AM - edited 09-16-2024 11:46 AM
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.
08-07-2024 11:16 PM
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.
08-07-2024 11:18 PM
Mine is this way by default, I would very much like to know how to expand the sidebar like you have it 😄
08-08-2024 12:57 AM
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.
08-09-2024 05:46 PM
It would be nice to toggle between the expanded and collapsed (favicons only) states.
08-07-2024 11:30 PM
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
08-08-2024 08:20 AM
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
08-07-2024 11:44 PM
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
08-08-2024 12:30 AM
Hi!
I just have two request:
#TabsToolbar {
visibility: collapse;
}
Nice work in any case!
08-08-2024 12:38 AM
08-08-2024 01:16 AM
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!