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 07:43 AM
Thanks for mentioning the issues that are still being worked on, because the gaps on top took me by surprise until I read that this part was still work-in-progress.
I'm watching with interest whether this work can replace my own custom adaptations of Firefox:
08-10-2024 08:35 AM
Hi, thank you for adding this feature to the "vanilla" nightly 🙂
Two minor UI suggestions re. vertical tabs bar:
- I'd like to see the "new tab" icon on the bottom of all current open tabs. This way I won't have a "gap" between my current open tabs, and my current pinned tabs.
- I'd also like to see a minor "x" to close a tab when I hover my mouse pointer on it, so I can close it quickly when I no longer need it (and make it more accessible to those who don't have a middle mouse button / not tech savvy persons).
One major nice to have would be to squeeze the whole adressbar into the title bar, i.e. same top-row that has minimize, maximize and close buttons. I understand that it would be a headache though, considering each desktop would require a different implementation for it.
Keep up the awesome work 🔥
/K
08-14-2024 10:19 PM
Hello
@KRASH wrote:I'd also like to see a minor "x" to close a tab when I hover my mouse pointer on it
Unless i've misunderstood
For information purposes https://www.userchrome.org
https://connect.mozilla.org/t5/discussions/improvements-to-the-firefox-sidebar-are-on-the-way/m-p/61...
userChrome.css and by way of illustration
.tab-close-button:hover{background-color:red !important;}
https://www.youtube.com/embed/y9j3Z1-X0GE
Other https://www.w3schools.com/colors/default.asp
Restart Firefox if you modify the code
08-10-2024 08:40 AM
This is a useful feature which I have been hoping to see in Firefox. I would suggest making the sidebar resizeable when it opens up, so you can see the entire label of each sidebar tab.
To give you some insight into my use case and why that would be useful to people like me:
I often have a large number of tabs to remote desktop sessions open for my job, where the title of each tab starts with a (relatively long) username, followed by the server name, which is the part of the title I would like to see. Of course, the tabs can only be so long in horizontal tabs, so the server names are not visible in the tab labels without hovering over them. Vertical tabs more or less solve this problem for me by allowing more of the tab label to be shown, and so revealing the full name of the server and allowing me to quickly jump between them without hovering on each tab to check which RDP connection each tab leads to.
However, despite the fact that these new vertical tabs now show more of the server names, some of it is still cut off -- and I can't seem to resize the sidebar to an appropriate length to show the whole length of the tab labels.
I am very happy that this feature has been added, in any case!
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: