brave-browser
brave-browser copied to clipboard
Implement basic behaviors for vertical tabs
parent issue https://github.com/brave/brave-browser/issues/464
notes https://docs.google.com/document/d/1unTh33T2NpmJOORd0LazuSpOrDO-6-_AHq3rldf7ar4/edit?usp=sharing
Action items
- [x] feature flag
- [x] vertical layout
- [x] rectangular shape
- [x] scroll view for tabs
- [x] fixed position of NTB when tabs are overflowed
- [x] expand / collpase
- [x] drag for reordering
- [x] detaching/attaching
- [x] tab card view
Not in this scope : too big, make these have their own issue.
- context menu for switching horizontal and vertical tabs
- move up toolbar next to caption buttons
- overlay style and hovering to expand
bugs on Mac : Mac has different frame implementation. Need to catch up with this later.
- [x] Crashed when right click over the empty area in the vertical tab.
- [x] Can't drag window
@sangwoo108, thanks for your work on vertical tabs! Since this is behind a feature flag, can it be rolled out as-is? For something that's opt-in, behind a feature flag, bugs are expected. Judging by the checklist, this far exceeds the "MVP" threshold for some would-be Brave users like myself. I only need this small subset of vertical tabs features:
- Some way to enable displaying a list of vertical tabs
- Each tab shows: a. Tab favicon b. Tab title c. Some visual indication on the currently opened tab
- Clicking on tab list item opens that tab
I don't need a new tab button, close tab button, tab re-ordering, context menu, etc. because those controls already exist through keyboard shortcuts and the horizontal tabs at the top. Sure, eventually I want most "Tree Style Tab" features, but I don't need them to switch browsers.
FWIW, I want this badly enough that I tried implementing it myself, but the barrier to entry for contributions was a bit too high for me. (I like that the code is largely in a single repo, and I successfully completed the 100+ GB build and verified that I could make changes to the sidebar; however, I couldn't easily grok the architecture -- I expected a more clean separation between C++ and JS domains.)
Hi, @denosaurtrain ! Yes, I'm trying to ship this as is. Now the PR in code review process but I think it's close to the endgame.
however, I couldn't easily grok the architecture
Yeah, it's kinda tough architecture and WebUI is tougher as it should be bundled into the browser. Please let me know if you wanna ask something about it.
Thanks for your interest :)
@sangwoo108 I also thank you for your work on this; I am happy to test and provide any feedback on linux if there is any need
@saywebsolutions Thank you for warm words and interest ! I didn't verify this feature on Linux, but getting ready for dev environment on Linux. Hope I can share good news before too long. :)
This is the one feature I've wanted in Brave since forever, just waiting for the flag to appear 😍
Would this be something that would end up in the beta/nightly branch, or would it be pushed to live client? Vertical tabs really the only thing keeping me on Edge.
Would this be something that would end up in the beta/nightly branch, or would it be pushed to live client?
The flag will be shipped on stable channel too. But release schedule will differ per channel.
So, I've been using the nightly build, but don't see how to enable vertical tabs. I'm on a Mac with OS 12.5.
@DavidRBailey It's not in the master branch yet
Thanks so much for your work on this!
Does this show the collapsable colored tab group names and have a line idicator infront of the actual tabs showing what they are in?
Really looking forward to this feature!
Does this show the collapsable colored tab group names and have a line idicator infront of the actual tabs showing what they are in?
Hi, @WHiZSTA ! It's not implemented from the PR above. But definitely in our task queue.
Excited for this.
Currently an edge user because of vertical tabs.
Vivaldi doesn't support webauthn on android so that doesn't work for me
Reopen issue to keep tracking remnant issues
@sangwoo108 let's keep this closed - since your main PR is merged 😄 (and congrats!)
We should create new follow up issues for any remaining work or any new issues which come up. Or we can add more to the parent issue (https://github.com/brave/brave-browser/issues/464)
Is there an ETA for the implementation of this feature in the stable channel?
Is there an ETA for the implementation of this feature in the stable channel?
Yep, this was shipped on 1.45.x and release channel will be bumped up to that on October 25. I guess you can see the flag after that.
Great to see this feature being implemented!
I didn't find it in the sub-tasks (sorry if I missed it), but it would be nice to have support for pinned tabs.
In Edge, pinned tabs appear in a dedicated sticky top row. Here's an example:
And for Groups as I noticed all my tabs in Groups did not display. Disabled this, and tabs were back. But I imagine it is still being tweaked.
@spasche Thank you for the reference.
@Danie10 Tab groups were shipped on Nightly version. If you're using another version, it'll take some time to have this.

@sangwoo108 fantastic thanks. Yes on Beta release so will look after next few updates. At least it did not break anything when switching back to horizontal layout.
I enabled vertical tabs on stable but it only shows the first pinned tab. Even if I open a new tab it won't show, it just keeps showing the pinned one. Non sure if this is caused by conflicts with pinned tabs or tab groups, but for me it makes no sense to stop using either of those just to be able to use vertical tabs... I've been waiting for this feature forever, but unfortunately I can't make use of it yet.
Hi, @illtellyoulater . Sorry to here that. The stable version is kind of behind the latest Nightly and the current stable version has sort of proof-of-concept scope.
I enabled vertical tabs on stable but it only shows the first pinned tab
I'm not sure I'm getting this right. Could you upload screenshot for this?
I'm not sure I'm getting this right.
@sangwoo108 of all the open tabs I have, the vertical tabs pane just shows the first one. The space below it is just empty.
I'm not sure I'm getting this right.
@sangwoo108 of all the open tabs I have, the vertical tabs pane just shows the first one. The space below it is just empty.
Thanks. I'll keep my eyes on that.
Hi, folks. A PR to support switching tabstrip orientation at runtime was merged. If you are using vertical tabs and one day it's gone, please check out context menus on tabs. You can find "Use vertical tabs" item on it.
I'm not sure I'm getting this right.
@sangwoo108 of all the open tabs I have, the vertical tabs pane just shows the first one. The space below it is just empty.
Like this? #26241
@Coffeeling yes exactly and as you said in that thread it's caused by tabs scrolling. Disabling it fixes vertical tabs showing just one tab!
@sangwoo108 Are there any plans to allow adjusting the width of the vertical tab bar? Also just wanna say thanks for your work on this feature.