helium/ui: add tab tree functionality to vertical tabs

[riomadeit]

For your pull request to not get closed without review, please confirm that:

• An issue exists where the maintainers agreed that this should be implemented
  (an approved feature request, or confirmed bug).
• I tested that my contribution works locally, and does not break anything,
  otherwise I have marked my PR as draft.
• If my contribution is non-trivial, I did not use AI to write most of it.
• I understand that I will be permanently banned from interacting with this
  organization if I lied by checking any of these checkboxes.

Tested on (check one or more):

• Windows
• macOS
• Linux

---

Summary

Adds tree-style tab behavior to the vertical tab strip, including parent/child hierarchy, indentation, collapse/expand, drag/drop reparenting, and basic session restore for tree state.

Demo

tabtrees-helium-demo-compressed.mp4

Known areas for review

• Horizontal layout shift can feel abrupt at deep tree sizes (a subtle tween animation might make it less jarring?)
• How pinned, grouped, and split tabs should interact with tab trees
• Drag/drop indicators need polish - can feel inconsistent sometimes
• 'Reopen closed tab' shortcut does not remember tree position

I used Firefox's TreeStyleTab extension as my primary reference for this (specifically the Proton theme). I think their implementation is a useful benchmark for how this could feel once polished.

Note: I was asked by wukko to submit this on my X post.

[Vortriz]

This is so neat!

Having used Sidebery for over a year, I have a little design suggestion: overlap the tab's dropdown arrow (the branch expansion icon) with the tab's favicon; have it be visible only when hovering over the tab/over the favicon. That way, you can create extra horizontal space and the title itself will have more room to it. Here is what it looks like in Sidebery:

• without hover

• on hover

Also, since this was not visible in the demo: does closing a tab also close all its children tabs or does it it de-indent them by one-level? I think both are useful behaviors to have. Perhaps left click on the close button for the latter behavior and right click for the former.

[cabaucom376]

Another thing I’d like to see is whether hibernating a tab propagates to all child tabs or just the parent tab. Similar to the previous comment, I believe it would be beneficial to customize this behavior. Perhaps there could be granular control over various of these behaviors, or I think rolling them all into one “nested state propagation” setting with “individual” or “recursive” options would be ideal.

[riomadeit]

Does closing a tab also close all its children tabs?

Currently no, it automatically reparents them to the next level in the tree.

Perhaps left click on the close button for the latter behavior and right click for the former.

Not sure about right-clicking the close button - is there precedent for that kind of interaction already?

An explicit menu item like 'Close Tree' might be better for this.

Does hibernating a tab propagate to all child tabs or just the parent tab

Hibernation only applies to the selected tab, not its children.

I tried to avoid touching anything beyond the core nesting functionality to keep this easily maintainable alongside normal tab behavior.

[Data-Wan]

Hello! Thank you for your great work! Could you add directories and panels like in sidebery (perhaps in future PRs)?

But even without them, it is awesome. Tree-style in chromium, what a legend)

[Data-Wan]

https://github.com/7rah/sidebery - perhaps this one could be helpful.

[dnlzro]

#1468 (comment)

overlap the tab's dropdown arrow (the branch expansion icon) with the tab's favicon; have it be visible only when hovering over the tab/over the favicon

This really only saves you the horizontal space of one dropdown arrow, because all child tabs have to be indented anyway to distinguish themselves from a root tab.

(Even in the screenshot you shared, it doesn't seem to be giving any extra room, because the root is also indented... I guess that's a Sideberry issue though.)

[Vortriz]

This really only saves you the horizontal space of one dropdown arrow, because all child tabs have to be indented anyway to distinguish themselves from a root tab.

this saves horizontal space on all child tabs as well because each of them also have arrows that occupy space. the space occupied by indentation is independent of this and will exist regardless.