WIP: Vertical tabs

[thenhnn]

DISCUSSION BELONGS TO #239

Feature requests will be marked as off topic. People subscribe to this PR to follow development, not to get a lot of spam in their inbox.

TODO

• Fix macOS traffic lights positioning
• Make split view tabs layout properly (there's padding between them)
• Make new tab shortcut open new tab to the right/bottom by default
• Add vertical tabs flag into helium://flags
• Fix flaky Drag and Drop in tab strip
• fix perceived horizontal padding in vertical mode
• return the new tab button and make it look like a tab (with label and everything)
• distinguish pinned tabs from regular tabs somehow, cuz rn it's impossible to tell that a tab is pinned
• fix transparent bg on linux
• test that the toolbar is not stretched on linux/windows and that the tab strip doesn't slip under it
• reconsider new tab button's position
• polish the new tab button
• maybe add tab search button next to the new tab button, in the same row?
• open new tabs at the start of the tab strip
• fix weird tab opening animation
• figure out why chromium's toolbar clashes with the system one and becomes unclickable
• fix tab group label visual size (or its sizing box), it's currently smaller than a tab, so margin between a tab and a tab group feels uneven
• make the tab group label take up the full width or make the parent holder have a background that shows up on hover, so that the press area is easy to distinguish
• fix tabs overlap when dragging
• fix tab group dragging state
• refresh on top of Chromium 142
• fix width of infobar & bookmarks bar in vertical tabs mode
• write hit test logic for toolbar to allow window dragging by empty spots around buttons
• figure out why scroll feels weird
• fix omnibox slipping down in filled screen & fullscreen modes on macos
• add a pref for enabling vertical tabs from user ui, not flags
• prevent tab search toolbar action button from popping up along with the main bubble when in vertical mode
• fix toast's location (it's currently outside the window, bottom right). toast is a notification that shows up when you copy a link via cmd/ctrl+shift+c and try to close pinned tab with a keybind
• maybe update opening/closing animation to not animate width?
• fix tab group expand animation
• fix link dropping orientation (rn it acts as if it's in horizontal mode)

[thenhnn]

@wukko PR should be mostly working, except for tab groups (their underline layout will be off) :3

[thenhnn]

Also DnD doesn't work for last tab in a strip, probably something to do with padding logic.

[Rebix]

this would be great
if i may suggest something the url bar in sidebar would be great🔥

[DragonSenseiGuy]

Attempt to implement vertical tabs in Helium. I reuse existing TabStrip and add a bunch of logical branches for horizontal/vertical mode for now, hopefully Chromium team will implement vertical tabs in proper way.

If this works and some other features like spaces, tab groups, pinned tabs and other features from Zen come here, I might just make the switch.

[DragonSenseiGuy]

but, maybe you actually need to modify source then, instead of just using patch files.

[wukko]

but, maybe you actually need to modify source then, instead of just using patch files.

… what do you think patch files are?

[DragonSenseiGuy]

but, maybe you actually need to modify source then, instead of just using patch files.

… what do you think patch files are?

Oh, so patch files are modification of source, but in a way that makes your codebase less messy?

I really don't know much about browsers in general.

[DragonSenseiGuy]

and btw is vertical tabs a consideration at this point in time?

[thenhnn]

Attempt to implement vertical tabs in Helium. I reuse existing TabStrip and add a bunch of logical branches for horizontal/vertical mode for now, hopefully Chromium team will implement vertical tabs in proper way.

If this works and some other features like spaces, tab groups, pinned tabs and other features from Zen come here, I might just make the switch.

Vanilla Chromium already has tab groups, pinned tabs and profiles (instead of spaces).

[thenhnn]

@Rebix: this would be great if i may suggest something the url bar in sidebar would be great🔥

I agree, but that would require even more changes to core Chromium layout and those changes will break on every new Chromium release.

[thenhnn]

@wukko I have a few questions:

• Should I split vertical-tabs.patch into separate patches? (vertical-tabs-flag.patch, disable-compound-tab-container-experiment.patch, vertical-tabs-ui.patch)
• Should I use toolbar background color for tab strip background or should it be visually different (like in this screenshot)?

[hassidan]

@thenhnn
Well done on the work!
I would like to mention that edge browser implemented the option to switch between horizontal to vertical.
I think they nailed it in the ui design aspect.
Maybe you can take insperation from there.
Hope it will get merged soon!

[thenhnn]

@hassidan, do you mean microsoft edge or something else?

[hassidan]

Yeah
https://www.microsoft.com/en-us/edge/features/vertical-tabs?ch=1&form=MA13FJ

[hassidan]

BTW, just saw that:
https://chromeunboxed.com/google-chrome-is-finally-getting-native-vertical-tabs/
Maybe will just need to wait 😅

[dumbmoron]

BTW, just saw that: https://chromeunboxed.com/google-chrome-is-finally-getting-native-vertical-tabs/ Maybe will just need to wait 😅

fwiw this is completely broken rn and months out before release

[dumbmoron]

• Should I split vertical-tabs.patch into separate patches? (vertical-tabs-flag.patch, disable-compound-tab-container-experiment.patch, vertical-tabs-ui.patch)

@thenhnn yes please

[DragonSenseiGuy]

BTW, just saw that: https://chromeunboxed.com/google-chrome-is-finally-getting-native-vertical-tabs/ Maybe will just need to wait 😅

fwiw this is completely broken rn and months out before release

We should make our own implementation and then switching to vanilla vertical tabs will be an easy switch(assuming that we don't add a lot of features to the vertical tabs that vanilla wont have).

[samuellembke]

I need this! if you get this working in a stable state I will paypal you 100€ hahaha

(And uninstall arc lol)

[samuellembke]

Thy work, though yet raw and unpolished, is fire.

Press on; it shall, like Gutenberg’s press, free the common man from Atlassian’s shackles and liberate their screen‑real estate.

[DragonSenseiGuy]

Thy work, though yet raw and unpolished, is fire.

Press on; it shall, like Gutenberg’s press, free the common man from Atlassian’s shackles and liberate their screen‑real estate.

lol, i agree, though I would not switch to it yet and quit arc. Zen is a solid option until this gets vertical tabs

[thenhnn]

lol, i agree, though I would not switch to it yet and quit arc. Zen is a solid option until this gets vertical tabs

Chromium provides much more stable and mature platform than Firefox imo. This PR is still draft and I'm still not sure how to fix some things. It's NOT final product.

[DragonSenseiGuy]

Chromium provides much more stable and mature platform than Firefox imo.

exactly why I want to switch to Helium after the features I want are here.

[wukko]

lol, i agree, though I would not switch to it yet and quit arc. Zen is a solid option until this gets vertical tabs

Chromium provides much more stable and mature platform than Firefox imo. This PR is still a draft and I'm still not sure how to fix some things. It's NOT final product.

you're doing an amazing job, please don't let these people get to you. both me and @dumbmoron are incredibly grateful that you're doing this for everyone in the first place, it takes a lot of talent and dedication. i'm very used to people just "consuming" instead of contributing literally anything at all, so this PR was honestly a shock to me. i'll help you fix things asap, right after the initial public release.

for everyone else: keep in mind that this is clearly WIP and also free labor done out of someone's kindness, don't be a dick and don't compare this to work of multi-trillion-dollar companies.

[DragonSenseiGuy]

lol, i agree, though I would not switch to it yet and quit arc. Zen is a solid option until this gets vertical tabs

Chromium provides much more stable and mature platform than Firefox imo. This PR is still a draft and I'm still not sure how to fix some things. It's NOT final product.

you're doing an amazing job, please don't let these people get to you. both me and @dumbmoron are incredibly grateful that you're doing this for everyone in the first place, it takes a lot of talent and dedication. i'm very used to people just "consuming" instead of contributing literally anything at all, so this PR was honestly a shock to me. i'll help you fix things asap, right after the initial public release.

It was not supposed to sound mean or anything, all I said was Zen is good until this properly gets vertical tabs. @thenhnn Is doing a great job with this PR.

[DragonSenseiGuy]

I appreciate this PR as I want to switch to Helium too. But, I cant without vertical tabs.

[wukko]

I want to switch to Helium too. But, I cant without vertical tabs.

skill issue honestly

[DragonSenseiGuy]

I want to switch to Helium too. But, I cant without vertical tabs.

skill issue honestly

I use helium for stuff that is much better on Chromium or things I want away from my Work stuff. Vertical tabs are too good to switch to horizontal for.

[wukko]

I use helium for stuff that is much better on Chromium

...everything?

zen is great, it's just that mozilla has lost the plot a while ago

[DragonSenseiGuy]

zen is great, it's just that mozilla has lost the plot a while ago

I know I wish they started off with chromium, but that's why I Like this project. Its Chromium

[wukko]

Are we sure that problem isn't somewhere deeper? It's still broken on Linux in the same way.

i'm fairly certain that the issue is indeed deeper, since Linux is affected too

[ctorney]

@joshuafhiggins @ctorney i can push this fix directly to this pr after testing it , should both of you be commit's authors? or should it only be @ctorney?

either way is totally fine with me but agree that this is a deeper issue and a better fix may resolve for macos 15.7 without needing this change.

[wukko]

figured it out and pushed a proper cross-platform fix. gonna have to write hit test logic like in views/frame/tab_strip_region_view.cc to make it work the way i personally expect it to (allow window frame dragging by grabbing empty spots in the toolbar), but at least it's usable now!

[wukko]

revamped tab group ui today:

also fixed dragging, multiple tabs no longer overlap each other and tab group dragging looks fine:

drag.mp4

[joshuafhiggins]

On macOS, with "Show scroll bars" set to "Always", the bar is still hidden but is now active as opposed to being completely disabled with "Automatically based on mouse or trackpad". This behavior also existed before this change but with the horizontal scrollbar showing.

[wukko]

for the love of god, don’t comment anything here if it’s not related to development of this feature. this isn’t a chat, this is a pull request with a shitton of people following its development. you are spamming a bunch of people for no reason. have some common decency.

[thenhnn]

I've refreshed patches on top of Chromium 142, but haven't tested if they work (I updated system toolchain so I need to recompile entire Chromium, so this will take some time...)

Curiously browser_frame_mac.mm was removed, not sure where logic for traffic lights should be located.

I didn't initially pull the changes as I thought I was already on latest remote HEAD, so I decided to just merge them. Sorry for that..

[joshuafhiggins]

Also this file doesn't exist anywhere in my sourcetree? I have browser_non_client_frame_view_mac.mm and browser_frame_mac.mm, I checked with the link you had put before and followed that path but it's still missing but found these other files. All the other files correlate except for browser_frame_view_mac.mm and .h

It was probably better idea to ripgrep on local checkout than to use codesearch.chromium.org. They refactored macOS frame code in main :D

I guess this rewrite finally landed lol! I have the fix for it, but I'm not sure where to put the patch after wukko split them up so I'll just leave it here:

In chrome/browser/ui/views/frame/browser_native_widget_mac.mm

#import "chrome/browser/ui/cocoa/touchbar/browser_window_touch_bar_controller.h"
#include "chrome/browser/ui/lens/lens_overlay_entry_point_controller.h"
+  #include "chrome/browser/ui/tabs/features.h"
#include "chrome/browser/ui/views/frame/browser_frame_view.h"
#include "chrome/browser/ui/views/frame/browser_view.h"
#include "chrome/browser/ui/views/frame/browser_widget.h"

...

void BrowserNativeWidgetMac::GetWindowFrameTitlebarHeight(
    bool* override_titlebar_height,
    float* titlebar_height) {
  if (browser_view_ && browser_view_->browser_widget() &&
      browser_view_->browser_widget()->GetFrameView()) {
    *override_titlebar_height = true;
-     *titlebar_height =
-         browser_view_->GetTabStripHeight() +
-         browser_view_->browser_widget()->GetFrameView()->GetTopInset(true);
+     *titlebar_height =
+         tabs::AreHeliumVerticalTabsEnabled() ? GetLayoutConstant(TAB_STRIP_HEIGHT) : browser_view_->GetTabStripHeight() +
+         browser_view_->browser_widget()->GetFrameView()->GetTopInset(true);
    if (!browser_view_->ShouldDrawTabStrip()) {
      *titlebar_height +=
          browser_view_->GetWebAppFrameToolbarPreferredSize().height() +
          kWebAppMenuMargin * 2;
    }
  } else {
    *override_titlebar_height = false;
    *titlebar_height = 0;
  }
}

[joshuafhiggins]

Sorry, it also needs #include "chrome/browser/ui/layout_constants.h", I thought it was already in the file.

[OlshaMB]

I compiled it on macos today, the branch right now has a bug where it doesn't set correct main content width and cuts it off, so i fixed using this patch to patch a patch:

diff --git a/patches/helium/ui/vertical-tabs/frame-layout.patch b/patches/helium/ui/vertical-tabs/frame-layout.patch
index 4d22a942..ecbee0ff 100644
--- a/patches/helium/ui/vertical-tabs/frame-layout.patch
+++ b/patches/helium/ui/vertical-tabs/frame-layout.patch
@@ -109,9 +109,8 @@
    gfx::Rect contents_container_bounds = available_bounds;
    int vertical_tab_offset = 0;
 -  if (tabs::IsVerticalTabsFeatureEnabled() && ShouldDisplayVerticalTabs()) {
-+  if ((tabs::IsVerticalTabsFeatureEnabled() && ShouldDisplayVerticalTabs()) && tabs::AreHeliumVerticalTabsEnabled()) {
++  if ((tabs::IsVerticalTabsFeatureEnabled() && ShouldDisplayVerticalTabs()) || tabs::AreHeliumVerticalTabsEnabled()) {
      vertical_tab_offset = BrowserView::kVerticalTabStripWidth;
-+    contents_container_bounds.set_x(vertical_tab_offset);
      contents_container_bounds.set_width(available_bounds.width() -
                                          vertical_tab_offset);
    }

also i would suggest making the tabs in vertical sidebar consistent with the size of the rest of the ui, also the tab search popup itself goes into infinity if i have to many tabs, i would limit the height