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-10-2024 10:58 AM
Is it possilble bring this in future updates?
No bugs so far but guess there have been a few updates since yesterday 😎
08-10-2024 12:38 PM
3. Tab container on the new tab icon in the sidebar
08-10-2024 01:10 PM
Great update! I have a few suggestions to enhance the experience:
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.
08-11-2024 06:42 AM
This is a great start but a lot of things could be improved.
08-14-2024 07:51 AM
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.
08-11-2024 03:26 PM - edited 08-11-2024 03:27 PM
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.
08-11-2024 10:41 PM - edited 08-11-2024 10:41 PM
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.
08-12-2024 12:21 PM
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.
08-12-2024 01:15 PM
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!
08-12-2024 02:27 PM
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.
08-14-2024 09:38 PM
08-12-2024 07:30 PM - edited 08-14-2024 05:53 AM
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.
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)
08-13-2024 01:15 PM
Nice css code (shorter than mine) to hide the top bar. But when I try it, my bookmarks bar is broken... !?
08-14-2024 05:47 AM
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.
08-14-2024 06:09 AM
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.
08-14-2024 06:37 PM
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;
}
}
}
08-13-2024 08:45 AM
Hi Team,
The update looks solid. Thanks for this new feature. I would additionally request a close symbol / button on sidebar hover.
08-13-2024 10:01 AM
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
08-13-2024 02:24 PM
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.
08-13-2024 10:30 PM
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
09-04-2024 03:15 PM
A workaround, for now, is to click in Google logo at Google Gemini... But you wouldn't be able to resize it for now
08-13-2024 10:54 PM
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:
08-15-2024 05:26 AM
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.
08-14-2024 12:57 AM
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:
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
08-14-2024 01:25 AM
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.
08-14-2024 07:47 AM
For me, the + new tab button should be under the list of tabs, same place as settings link and history.
08-14-2024 08:28 PM
Moving new tab button below is pretty simple, with this CSS in userChrome.css:
#tabbrowser-tabs[orient="vertical"] #newtab-button-container {
grid-row: 3;
}
08-15-2024 08:12 AM
That works perfectly !! Thank you.
09-06-2024 06:32 AM
Unfortunally, with Firefox 132 this rule doesnt work now.
08-14-2024 08:24 AM
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
08-14-2024 08:06 PM
Moving new tab button below is pretty simple, with this CSS in userChrome.css:
#tabbrowser-tabs[orient="vertical"] #newtab-button-container {
grid-row: 3;
}
08-14-2024 04:27 PM
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
08-14-2024 09:53 PM
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
08-14-2024 10:32 PM
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.
08-15-2024 12:05 AM
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
08-15-2024 02:44 AM
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:
08-15-2024 11:13 AM
Right now it is possible to merge this line with 2nd line with CSS in userChrome.css, check my code above, but edit it for your linux style close buttons.
08-15-2024 06:52 AM
Having read through this thread, I realize that a lot of this is already covered but just dropping in my experience with the new functionality. First impressions, love it. It's a solid base release for a nightly that has incredible potential to grow to an amazing feature. I've been a big big fan of vertical tabs for quite some time and also count myself among the legions of users of Sidebery, Vivaldi, Arc, etc... for my comparisons.
Right out of the gate, you're doing the sizing thing better than Arc. While I still think that there's a hair too much space between the tabs themselves, it feels better than the spacing that Arc uses. I can control that with CSS if it becomes bothersome, but that could be a nice deep customization option.
With the hovering over icons to show the display of the page, I wish they would either all display the preview or none of them display and not have it be based on whether or not the tab is active at the moment.
I do like the concept of tree style indented tabs many have mentioned and I've experienced from Sidebery, but I think, given the choice, I'd prefer solid grouping of tabs as a concept over the tree style. As a user that has generally in the hundreds of open tabs, no grouping makes it a bit more of a chore to manage my day to day flow. I won't say it's necessarily a deal breaker, but it has been one of the things that prevents me from switching everything over to Firefox as a whole.
One that I don't think I've seen mentioned that would be sick is to have the ability to close a tab on another device. I'll commonly pull up 20-30 tabs on my phone throughout the day/week/whatever with the intent of pulling them up on my desktop at a later time. That flow up to that point works really well, but I'd love to be able to open the sidebar, hit my phone tabs, open the tab in the desktop browser, then right click / close tab and have that sync back down to the phone/iPad/other device.
Finally, it's been mentioned ad nauseam, but hover state to expose the full sidebar of tabs would make this an even more powerful feature. Right now I keep it set to the icons only because it maximizes the available space and only manually pop the sidebar when I need to see which Github icon I need to click on out of the sea of them.
Long story long, this is a very much welcomed feature even in its current state. Everything else will be a bonus on top of it.
08-15-2024 12:26 PM
Amazing stuff with these native vertical tabs!
The main piece of feedback I have is about tab groups. While I don't think everything in the "Tree Style Tab" extension needs implementing in this native vertical tab implementation, one of the main benefits I see with vertical tabs is simply being able to (somewhat) efficiently handle more tabs than would otherwise be doable with the horizontal tabs.
Being able to group tabs so that when I google search "topic ABC", and "open in new tab" some of the results, all the new tabs become children of the "google search for 'topic ABC'" tab. This greatly helps with managing a large number of tabs.
The unfortunate thing is that I'm not sure how the tab grouping would work in the non-vertical-tabs setup 🤷.
But I will say that after turning on the native vertical tabs, I ended up having to vertically scroll through my list of tabs since the "Tree Style Tabs" that I normally use allows for the grouping functionality, and the native vertical tabs just expands everything into one big flat list.
08-15-2024 12:31 PM
That's a feature I waited for a long time and it's good that it was realized. Actually, I want to have a tab tree, so now I still need to use TreeStyleTabs, and that's just became more convenient that there are no tabs on top, so I am not trying to use them by habit.
But the most important for me is not vertical tabs on PC, but vertical tabs on phone, on PC there are multiple extensions for vertical tabs and a big screen so I don't actually need to see icons instead of full names, but I really need some solution on phone, something like an icon view on tab group in chrome (which is the only cause why I am still using chrome except touch-to-search).