Does vertical_tabs.css still work?

[YousufSSyed]

I tried it on Firefox 119 and 120 and it didn't work on either.

[MrOtherGuy]

Yeah, seems to me that it does work - this is a screenshot from 120:

How does it appear on your system?

[YousufSSyed]

It's on macOS which is probably why it doesn't work. I followed the instructions to download and use the git repo on a blank profile, and this is what it looks like. userChrome.css:

@import url(chrome/vertical_tabs.css);

Firefox:

[MrOtherGuy]

Wow. That's so messed up I don't even know where to begin. Also, I don't have any mac system to test with so debugging mac issues is pretty hard for me to do.

Nonetheless, an extension could do vertical tabs much better than this style.

[YousufSSyed]

I’ll try this on a windows VM Later (which I already have).

But im looking for a pure CSS implantation of vertical tabs, without 3rd adding because they all have limitations, like having to load the list of all tabs every time you open them.

[YousufSSyed]

Anything I should try?

[MrOtherGuy]

Only thing I can immediately think of is to see what heppnes if you remove the Firefox-view-button from the toolbar. It's that one button that appears in your vertical tabs "sidebar" area.

I still wonder what on earth has happened to you main toolbar because it's nowhere to be seen.

[YousufSSyed]

It sort of works in the Windows VM, but I noticed all the tabs get a transform: translateX() inline property when I try dragging a tab elsewhere. I compared this to horizontal tabs without the CSS, and this looks like built-in Firefox functionality for dragging tabs horizontally.

Does dragging tabs work for you?

[MrOtherGuy]

No. There is no way to make tab dragging work with this style. That would require changing Firefox' internal logic that handles tab re-ordering which you cannot do with CSS. Tab re-ordering will not work with multi-row tabs for the exact same reason.

[YousufSSyed]

Then I'm curious, why even maintain the CSS file for any OS, including Windows?

[MrOtherGuy]

For demonstration purposes mostly. It's certainly not great, but it's there in case it still fulfills someones requirements, like maybe someone really cannot use extensions or doesn't need tab reordering etc.

I feel like most styles in this repository are like that - not a good way to do feature X because we're only limited to css, but might work for someone with very specific requirements.

[YousufSSyed]

Interesting.

[MrOtherGuy]

Actually, I think I just figured out why the layout is so messed up on mac. It's probably because on mac there is this rule in Firefox internal styles. To override it you would need to add !important tag to the position:absolute rule at line 29 in vertical_tabs.css

I believe then the layout should look at least somewhat okay.

[YousufSSyed]

@MrOtherGuy That fixes the issue of my browser not appearing at all but now it looks weird, I don't feel like trying it any further now. Thanks for the suggestion though.

[diego-velez]

I have the same issue on Linux in Firefox 122. I tried adding the !important tag in line 29, and it works, but it's still messed up.

[YousufSSyed]

You might want to consider opening a new issue.

[MrOtherGuy]

I'm testing vertical_tabs.css on linux (Fedora 39) and adding !important on line 29 seems to work. There apparently was another issue with window controls not showing up on linux - this was the same cause as in #331

But yes please, open a new issue with images about how the window actually looks like on your system in case the latest changes didn't happen to fix the issues you are seeing.