Polish vertical tab UI for the initial version

[sangwoo108]

• Vertical tabs' collapse state should be a pref which is used in other windows and persisted across browser restarts. #25893
• Tab animations should be aligned to vertical coordinates #25853
• Put the Tab Search button somewhere #25894
• Show window title when vertical tabs are enabled #26021
• Align layout constants of vertical tabs to sidebar #26463
• On windows, floating state doesn't remain #26540
• On windows, floating state doesn't remain #26540
• On mac, omnibox popup is mispositioned when window is maximized #26573
• Dragging a tab downwards should not detach until it reaches the bottom of the tab strip container #29205
• The vertical tab strip should (almost certainly) be to the side of the infobar and bookmarks bar. This is to avoid the "flash" of it's top moving up and down when switching between tabs which have those top bars and tabs which do not. - also reported by our users. Vertical tabs reorder themselves when selected, occasionally pop out into a new window #25910
• Make option for "Floating" mode for vertical tabs #26680
• Browser window is sometimes too tall and unresizable #26577
• window control are not laid out properly on Mac when switching orientation or title visibility #26736
• When detaching a tab into a new window, the detached tab isn't not under mouse cursor #26770
• "Show title bar" 's default value should be false #26801
• Move sidebar to the right when vertical tab strip is enabled #26855
• Make pinned tabs laid out in a grid when it's vertical tab strip #27066
• Adjust scroll position when active tab changes on vertical tabs #26762
• On fullscreen, the vertical tab area is still visible. #27462
• When tabs are overflowed and try resizing window, the window becomes huge. #27442
• Keep vertical layout for pinned tabs when it's floating mode
• Apply design guide for vertical tabs #27597

---

Future candidates

• Test if we can move vertical tabs next to the entire contents area #26688
• Vertical Tabs: Prevent tabs from shifting in the opposite direction when closing tabs #26304
• Freeze the pane/separator for pinned tab section above vertical tab view panel #29935
• Resize handle for vertical tab strip #30322

[Coffeeling]

Are there plans to make vertical tabs' collapse state window specific? Right now it's global for a profile, which is awkward if you eg. want to put a site on the side to monitor and work in a bigger window.

Vertical tabs also seem to mess up tabbed PWAs/site shortcuts.

[emkay5771]

Are there plans to make a unified title bar, as Edge has when vertical tabs are turned on? It would allow users to reclaim vertical space.

[sangwoo108]

@Coffeeling Thank you for your feedback. There's nothing fixed and we're exploring many options.

Are there plans to make vertical tabs' collapse state window specific?

Currently, this behavior is intended for now, but if users find it inconvenient, we're willing to change it. cc @rebron @petemill

Vertical tabs also seem to mess up tabbed PWAs/site shortcuts.

Thank you for letting me know that. Need to check out.

[sangwoo108]

Hi, @emkay5771 .

Are there plans to make a unified title bar, as Edge has when vertical tabs are turned on? It would allow users to reclaim vertical space.

It's merged yesterday on Nightly.

brave/brave-core#15523

Hope you can find it useful.

[emkay5771]

Hi, @emkay5771 .

Are there plans to make a unified title bar, as Edge has when vertical tabs are turned on? It would allow users to reclaim vertical space.

It's merged yesterday on Nightly.

brave/brave-core#15523

Hope you can find it useful.

Thanks! Looking forward.

[bsclifton]

Hi folks - I used this for a few hours today and wanted to share some feedback 😄

1. It's impossible to tell which tabs are pinned. I have 8 or 9 pinned tabs and in the regular view, they're just an icon. With vertical tabs, it shows the whole tab (icon AND the title). When you hover over it, there is no X- that's the only way you know
2. Dragging a tab out of the tabs area (detach) to make a new window made a VERY small window (width-wise). It didn't use the width of the original window
3. To the right of the container where the tabs are... it would be great to get a grab handle so that you can resize the tabs area (to make it skinnier or wider). Many of my tab titles are long and it would be nice to read them - but I can't resize to make it wider

And then reported a bug here:
#26347
Backtrace link is https://brave.sp.backtrace.io/p/brave/debug?filters=(_deleted%3D0%2C_rxid%3De1b80100-c482-0f09-0000-000000000000)&fingerprint=446085d490b03797aeda282273bfe938dd6b6b7062329c938338f064a9997116&debug=(%223cc26d9%22,0,0)

[Coffeeling]

Testing a non-tabbed PWA on Nightly, it completely removes the title bar. Alt+F still gets me to the app menu, but not having any window controls is kind of nasty.

As a small bit of polish, the color line that indicates that a tab is part of a tab group should be noticeably thicker - it's not very visible on a fullscreen browser window.

Hi folks - I used this for a few hours today and wanted to share some feedback 😄

1. It's impossible to tell which tabs are pinned. I have 8 or 9 pinned tabs and in the regular view, they're just an icon. With vertical tabs, it shows the whole tab (icon AND the title). When you hover over it, there is no X- that's the only way you know
2. Dragging a tab out of the tabs area (detach) to make a new window made a VERY small window (width-wise). It didn't use the width of the original window
3. To the right of the container where the tabs are... it would be great to get a grab handle so that you can resize the tabs area (to make it skinnier or wider). Many of my tab titles are long and it would be nice to read them - but I can't resize to make it wider

On 1. I think I'll be the broken record and suggest aping Microsoft. The Edge team have really thought their vertical tab design through. Pity about the rest of the product.

Now that I got vert tabs working on my main profile, they've been really awesome to work with, even in this WIP state they are in. They're fast becoming my favourite thing in Brave.

[emkay5771]

Not sure if this was intentional, but today's update seems to have broken vertical tabs, as well as merged the top and tab bars.

[sangwoo108]

Hi, @emkay5771. Please check out the context menu on tabs. There should be "Use vertical tabs" item.

[emkay5771]

One other thing that I noticed... When using vertical tabs in minimized view, upon hovering over the tab bar, it essentially becomes impossible to close the tab, as the "X" moves. In edge, the panel remains expanded until the mouse moves beyond the border of the expanded view, bypassing this issue. Is there a different solution for this in the pipeline? Thanks again for all of your work on what I'd assume is a relatively niche feature.
Brave Behavior:
https://user-images.githubusercontent.com/52011243/199297235-5138ec8b-4b46-4f63-95ec-a01eec66d9e4.mp4

Edge Behavior:
https://user-images.githubusercontent.com/52011243/199297582-63ae1873-b5b0-4ffe-ac32-857bef48db4a.mp4

[colorprint]

#brave-vertical-tabs stopped to work in the latest nightly build...

[sangwoo108]

#brave-vertical-tabs stopped to work in the latest nightly build...

Hi, @colorprint . Could you checkout thw context menu on tabs? there should be an item "Use vertical tabs"

[colorprint]

#brave-vertical-tabs stopped to work in the latest nightly build...

Hi, @colorprint . Could you checkout thw context menu on tabs? there should be an item "Use vertical tabs"

Yes, it works now, thanks!

[friedITguy]

One other thing that I noticed... When using vertical tabs in minimized view, upon hovering over the tab bar, it essentially becomes impossible to close the tab, as the "X" moves. In edge, the panel remains expanded until the mouse moves beyond the border of the expanded view, bypassing this issue. Is there a different solution for this in the pipeline? Thanks again for all of your work on what I'd assume is a relatively niche feature. Brave Behavior: https://user-images.githubusercontent.com/52011243/199297235-5138ec8b-4b46-4f63-95ec-a01eec66d9e4.mp4

Edge Behavior: https://user-images.githubusercontent.com/52011243/199297582-63ae1873-b5b0-4ffe-ac32-857bef48db4a.mp4

Just bumping this because I am having the same experience, and would also like the behavior demonstrated in Edge. As always, thanks for all your work on this!

[sangwoo108]

One other thing that I noticed... When using vertical tabs in minimized view, upon hovering over the tab bar, it essentially becomes impossible to close the tab, as the "X" moves. In edge, the panel remains expanded until the mouse moves beyond the border of the expanded view, bypassing this issue. Is there a different solution for this in the pipeline? Thanks again for all of your work on what I'd assume is a relatively niche feature. Brave Behavior: https://user-images.githubusercontent.com/52011243/199297235-5138ec8b-4b46-4f63-95ec-a01eec66d9e4.mp4

Edge Behavior: https://user-images.githubusercontent.com/52011243/199297582-63ae1873-b5b0-4ffe-ac32-857bef48db4a.mp4

@emkay5771 @friedITguy
Thank you for very detailed explanation. Actually, this is not intended behavior and it's Windows specific bug. Let me fix this soon.

[RedCard1nal]

Is it the case that the tab heights are now connected to the height of the sidebar tab heights? I noticed recently that the tab heights increase and was wondering if it's possible to add an option to make the tab heights smaller. After all most of us use this feature to save vertical space.

[sangwoo108]

Is it the case that the tab heights are now connected to the height of the sidebar tab heights? I noticed recently that the tab heights increase and was wondering if it's possible to add an option to make the tab heights smaller. After all most of us use this feature to save vertical space.

yes, that's correct. #26463

[Coffeeling]

The tabs-hidden vertical tabs window doesn't have a draggable window border along the top.

[RedCard1nal]

The tabs-hidden vertical tabs window doesn't have a draggable window border along the top.

Do you mean that it's not resizable at the top? For me on nightly I can drag the window using the very top area of window but I can't resize it from the top of the window. I actually like being able to drag the window.

[Coffeeling]

The tabs-hidden vertical tabs window doesn't have a draggable window border along the top.

Do you mean that it's not resizable at the top? For me on nightly I can drag the window using the very top area of window but I can't resize it from the top of the window. I actually like being able to drag the window.

Yes.

Top: Edge
Under: Brave Nightly

[emkay5771]

Noticed that in nightly with tab scolling disabled, there seems to be a chunk taken out of the vertical tab bar (see attatched image)... Is that intended behavior?

Hi, @emkay5771 That's not intended one and I haven't seen it before even with the same flag. Could you file a bug and tell us more about your env, such as OS and etc?

Hi @sangwoo108. I can confirm that I am also experiencing this bug. Would you like me to file a bug report as well? Or would you prefer me to comment with my env info on the issue @emkay5771 creates?

Personally, I'd prefer if you could issue the bug report. Not sure of the exact process, to be honest. Thanks!

[friedITguy]

Noticed that in nightly with tab scolling disabled, there seems to be a chunk taken out of the vertical tab bar (see attatched image)... Is that intended behavior?

Hi, @emkay5771 That's not intended one and I haven't seen it before even with the same flag. Could you file a bug and tell us more about your env, such as OS and etc?

Hi @sangwoo108. I can confirm that I am also experiencing this bug. Would you like me to file a bug report as well? Or would you prefer me to comment with my env info on the issue @emkay5771 creates?

Personally, I'd prefer if you could issue the bug report. Not sure of the exact process, to be honest. Thanks!

Sure thing! I have created the new issue. You can find it here: #27218

[Coffeeling]

The new look that landed on Nightly looks nice, but needs to go on diet. The New Tab button is absolutely giant, and we're at 6 Edge tabs to 5 Brave Nightly tabs, and Edge tabs are larger than the original vert tabs on Brave to begin with.

New look for tab groups is a large improvement, but colored text against themed background can be tricky:

That's still readable, of course, but becomes essentially unreadable with f.lux on for example.

[ghost]

@sangwoo108
In Windows - 1.52.5 Chromium: 112.0.5615.49 (Official Build) nightly (64-bit).

This is what happens when you attach/re-attach tabs from another window. The issue happens on both collapsed (which I usually use) and float mode.

As you can see, it displays some of the title of the tab, which doesn't look fine, and the only way to 'fix it' is by expanding and collapsing the VT, if Brave is in window mode and you maximize the window, it goes back to normal, or just moving a tab around:

I am comparing this behavior to the video you showed in this PR using it on MacOS brave/brave-core#17690 where it looks fine when you re-attach the tabs.

[sangwoo108]

@sangwoo108 In Windows - 1.52.5 Chromium: 112.0.5615.49 (Official Build) nightly (64-bit).

This is what happens when you attach/re-attach tabs from another window. The issue happens on both collapsed (which I usually use) and float mode.

Really appreciate your report. Let me check out that.

[Coffeeling]

There's also some (mostly visually) odd behavior when selecting multiple tabs. If I select a tab and shift-click on a tab above it, everything behaves normally. If I shift-click on a tab below, it feels like it replaces all the tabs or something, like they jump out, and back in again. They do fall into the same place they used to be in, but it feels like there'll be some odd behavior that might happen as a consequence.

[sangwoo108]

There's also some (mostly visually) odd behavior when selecting multiple tabs. [...]

Yeah, I remember that report. I wasn't able to find a clear way to reproduce it on Mac but it looks like it happens on Windows easily. Let me try to fix it.

[ghost]

Well, I found another issue.
Don't know if it is Windows specific as well, I am using win11 and Brave 1.52.8 Chromium: 112.0.5615.49 (Official Build) nightly (64-bit) .

But it has to do when selecting tabs from top to bottom, first problem only happens on window mode where the window just snaps to the left side of the screen, the second problem happens on both, maximize and window mode, and it is worst because the browser just vanishes, and the only way to fix it is by Show Desktop button (button right corner) or alt+f4, because Windows arrow keys (windows snapping features) don't work.

Brave.-.Vertical.Tabs.weird.problem.mp4

Alt+Tab shows the window is still there, and doing the Show Desktop, when you click to restore all windows, brave appears normal, in the same maximized state like if it never vanished.

So, hope someone can reproduce it as well.

[pjolt]

I see the same behaviour.
[Version 1.52.8 Chromium: 112.0.5615.49]
Win 11, 22H2, 22621.1413.

Since i´m using dual monitor with my secondary monitor being on my left i noticed when it disappears it actually gets transitioned far left outside of the actual view. So everything moving left is the theme here afaik.

For me with 2 tabs open the process of selecting tabs sometimes require me to use CTRL+left mouse to get the Brave UI to shift left and then having exited and reopened Brave it can switch to require me to use SHIFT+left mouse to get it to shift left.

Regardless of number of tabs open selection always has to be in order, 1>2>3 etc to get this shifting behaviour.

Another observation is that when going maximized, closing all tabs one by one and then quit + restart of brave resulted in it always requiring 4 tabs at minimum before it starts to shift left, tested with both CTRL and SHIFT and both starts happening at 4 tabs. Also still requires to select tabs in order, i.e 1>2>3>4.

Not able to reproduce on Linux (Fedora 37/Gnome/Wayland and oS TW/KDE/x11).

[sangwoo108]

@Emi-TheDhamphirInLoveUnderTheFrozenStar @pjolt Thanks for letting me know those. Unfortunately, I'm not able to reproduce those on my device but they strongly feel like they're related to the jumping problems.

---

Update: I'm experiencing the same issue. Hopefully, I can debug it.

[sangwoo108]

@Coffeeling @Emi-TheDhamphirInLoveUnderTheFrozenStar @pjolt , A patch to fix the jumping problem was merged on Nightly. Hopefully, that should work.

[ghost]

On Windows, when Ctrl+Shift+A is done, the search tabs panel appears next to the Vertical tab strip, but the button itself is located far away from there, between Brave's menu ☰ and the minimize button. , shouldn't the Search tabs button match what the shortcut is doing? or what I have seen in MacOS in many PRs screenshots/videos, where the button is on the same VT tab strip, right on the same place as the expand/collapse button?

There is even a little flash when the Vertical tab strip is expanded, when you do the shortcut, it can be seen the first time after Brave Browser is opened, like, re-enforcing where the Search Tabs button should be on Windows, instead of the other side of the screen 300 miles from the Vertical tab strip

So, it is a small little tiny detail on Windows I noticed it since last year, but thought it was okay until I noticed recently how the panel popups up right next to the tab strip as well, even if the button is still far away from there.
Of course, I like having the button always displaying on Windows and not hiding, but for consistency and looks, having it on Vertical Tab strip seems better, even if it has to be tab strip has to be expanded for the button to be used.

[sangwoo108]

he search tabs panel appears next to the Vertical tab strip, but the button itself is located far away from there,

Ah, yeah. IIRC, only on Windows 10 the tab search button is on the frame. I forgot that. Let me move the search bubble to below the original button, as it was. I really appreciate that.

[sangwoo108]

Hi, @Emi-TheDhamphirInLoveUnderTheFrozenStar . As per #24717 (comment) , this behavior is rather flaky so it's taking some time to find solution. Sorry for the dealy.

[sangwoo108]

Hi, folks. We're moving context menu related to vertical tab strip to brave://settings/appearnce page. Please don't be surprised when you lose the menu.

brave/brave-core#18146

[ghost]

@sangwoo108 great improvements and bugfixes 👍🎉

however, I installed Brave 1.52.65, which has Chromium 113.0.5672.53, and you fixed with the unpinned tab issue and you moved the settings to appearance, and well, something broke creating groups in InPrivate mode when brave://flags/#tab-groups-save is on. Normal windows works fine, as far as I can see.

I report it because I was testing the unpinned tab fix and then I had to track down what made the browser crash, but I don't even use that feature, so I can disable it and move on, to save groups and improve tabs experience with auto grouping features and all that, I use the extension Tab Groups Extension, so just reporting because I noticed it, not because it will affect my experience.

[sangwoo108]

something broke creating groups in InPrivate mode when brave://flags/#tab-groups-save is on. Normal windows works fine, as far as I can see.

Thanks @Emi-TheDhamphirInLoveUnderTheFrozenStar for reporting. Let me look into that.

[ghost]

@sangwoo108 The icon stays the same regardless of mode, it never changes between Expand/Minimize/hover.
Mentioning that here because I don't know if it is has to do with the whole Leo icons PRs and you might be aware of it.

[sangwoo108]

@sangwoo108 The icon stays the same regardless of mode, ...

Thanks, The design guide says it should have ink drop effect when it's expanded, but I missed that.

[sangwoo108]

Let me close this ticekt. Rest of items are scheduled for the next iteration.