I love vertical tabs. Given the -- frankly concerning -- amount of tabs I tend to open, they're a must for me.
Thing is, none of the native, non-Chromium options quite fit me. Between Zen & Firefox lacking tree-style tabs, and Waterfox lacking container-synced workspaces, all of the options are a little too lackluster for my needs... So I did the only thing a linux user could -- I kitbashed together a solution. :)
I started with Firefox (because Chromium is for traitors), onto which I installed Sidebery -- a feature-rich, highly configurable extension for tree-style sidebar tabs. In there, I set up a workspace for each of my containers, and some rules to auto-organize tabs based on the container they belong to. And, voila:
...yeah okay, that does look a little rough. The native tabs at the top are a little redundant now, and the massive sidebar header is a little... unnecessary.
Thankfully, Firefox lets users inspect the browser's UI[1], and tweak it by adding rules to the userChrome.css file[2], which allowed me to tidy it up like this:
It's not a huge change, but... well, I didn't want it to be. With Firefox planning a design refresh, I didn't want to write something I'd have to fix within a few months. This does the job, and that's all I need.
It might just be because my Firefox still has that new browser smell, but I feel like I have a lot more control over the mess in my tab bar now. The automatic rabbit hole grouping that tree-style tabs provide, along with the ability to group tabs manually into folders, has made it a lot easier to see which tabs I no longer need! That, and the workspace rules have allowed me to set up an environment that automatically prevents some of the mess!
...and I didn't even have to pay a $70-per-year subscription for it. ;)
If you're curious about my userChrome, here it is; feel free to steal it, and use it as a jumping-off point for your own dream workspace:
/* hides horizontal tabs and forces url bar-level window controls */
#navigator-toolbox:not([tabs-hidden]) > #TabsToolbar {
visibility: collapse;
}
#navigator-toolbox:not([tabs-hidden]) > #nav-bar > .titlebar-buttonbox-container {
display: revert !important;
}
/* adjusts look of addon sidebar */
#sidebar-box {
padding-block-end: 0 !important;
}
#sidebar {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#sidebar-panel-header {
display: none !important;
}
---
[1] Browser Toolbox — Firefox Source Docs documentation
[2] userChrome.css for Customizing Firefox
⊹˚ * ⊹ ˚ ⊹
thanks for reading!! :3