Theoretically it should be possible to make child elements flow vertically instead of horizontally, by setting these properties on the parent: display: flex; flex-direction: column;. I tried that with a bunch of the tab elements and it didn’t work. The problem with addons like TST is that they glitch out sometimes, and you have to wait for the tabs to load, it takes much longer on my M1 Mac once I have 100s of tabs open (don’t judge me).
It’s not super tricky to just make tabs flow vertically. This can bee done pretty easily
But behavior is where things start to fall apart. For starters, tabs can’t be dragged to reorder them (well they can, it just doesn’t work). And you can’t do any kind of tree like layout so it’s just a flat vertical list.
If Vertical tabs is your thing, extensions just do it much better.
Oh shit, where did u find that photo? Could I see the CSS so I could try to figure it out?
Sure, I’ll link it to you later when I get home. It’s really just a handful of lines of CSS.
But I suppose the main issue why you haven’t got flex-direction to work is because the scrollbox has
orient="horizontal"attribute and elements matching that are styled to have flex-direction horizontal in agent stylesheet with important tag. You cannot override that with userChrome. Practically this means that you cannot use standard flexbox display model for that scrollbox. Instead, I useddisplay: -webkit-boxwith its equivalent properties to make it verticalSo, like here is a bit more useful version. It’s no more “just a handful of lines” because I needed to add a few workarounds for some obvious issues. And it surely is still not great - probably the most annoying issue is that if it ever happens that Firefox thinks that the tabs would overflow then you will irrecoverably lose the ability to scroll the those vertical tabs using mouse wheel - until you restart Firefox. And also as I already mentioned you can’t reorder tabs. And probably a whole bunch of other issues as well.