An idea for vertical tabs...
An idea for vertical tabs...
For years I've been using MrOtherGuy's multi-row_tabs_below_content.css script, ever since XUL add-ons became obsolete, and I had to give up the wonderful TabMixPlus. I have tab width set to 100px, which shows the favicon and the beginning of the tab title, from which I can identify a tab 95% of the time without hovering to see the full title. At this width, I have fifteen tabs per row, so with three rows set I can see 45 tabs at a time. I like to be able to see as many tabs at once as possible, while still being able to identify them, unlike many current users (especially Chrome refugees) who like to scrunch tabs down so narrow as to show only the favicon. :-)
But today the rave seems to be vertical tabs, in part largely, I think, to the 'cool' factor. But when every available browser has vertical tabs available, either natively or via add-on, that cool factor will soon disappear. And yes, there are serious advantages, such as making best use of the available horizontal screen space while freeing up vertical space. And so Firefox has available several vertical-tab add-ons. And now there is MrOtherGuy's vertical_tabs.css script. What I think is cool about this script is that, unlike all the add-ons that I'm aware of, this script doesn't use the sidebar, leaving the sidebar free for other uses. So one can have both the vertical tabs, and the sidebar visible at the same time, even on opposite sides of the window, which leaves the page content centred between them.
Which brings me to the idea: multi-column vertical tabs! Consider, the vertical_tabs.css script creates a vertical-tabs sidebar that is 220px wide, including a vertical scrollbar of perhaps 20px. With my preferred tab width of 100px, I could have two columns of tabs in that same space. At 20 tabs per column, that would give me a total of 40 tabs visible at one time, nearly equal to 45 tabs I now have visible.
How it works: the current multi-row horizontal tab bar shows the number of rows the user has set, and has a narrow (doesn't use much space) vertical scrollbar on the right edge. When the tab bar is scrolled vertically, the top row of tabs scrolls out of view, and the next lower row of tabs scrolls into view at the bottom. So scrolling shows 15 new tabs at a time (in my case).
In like manner, the multi-column vertical tab bar would show the number of columns the user has set, and would have a narrow (doesn't use much space) horizontal scrollbar at the bottom edge. This would free up all of that space used by the current vertical scrollbar, making the entire vertical tab bar narrower (depending on the user's choice of tab width and number of columns). When the tab bar is scrolled horizontally, the left column of tabs scrolls out of view, and the next column of tabs scrolls into view at the right, showing 20 new tabs at a time (depending on the height of the user's window). If the user prefers narrower tabs, as many seem to do, one could have more columns is the same space, or have the same number of columns use even less space.
That's it. But no browser or add-on that I am aware of, currently provides multi-column vertical tabs. If a .css script could be made to do so, that would make Firefox the only browser with such a feature. Now that's cool! :-)
You're viewing a single thread.
Sounds kinda interesting to create. I would give it a solid "might be achievable with css but I doubt it" possibility, because if I understood you right, then it would actually be more similar to how tabs normally behave in Firefofx than just a vertical list.
Yes, it is similar to multi-row horizontal tabs, just in the vertical direction. Perhaps then a vertical multi-column list, even if it has to scroll vertically rather than horizontally?
Or if not achievable via CSS, then I guess just leave the idea out there for any add-on developers who might take an interest.
It doesn't have to scroll vertically, because scrolling horizontally is already what Firefox does by default. You just need to make it lay out the tabs in vertical direction and then wrap them to add more columns after they don't fit to one any more.
The problem is that you need to use actual flexbox layout to be able to use flex-wrapping. But if you do that then the scrollbox is forced to horizontal layout and you cannot change that using userChrome.css - if you add an agent mode stylesheet that makes the scrollbox layout tabs vertically then vertical_tabs.css works for this with only small changes.
The effect seems sort of neat, although scrolling isn't quite "sane". To make the behavior feel even remotely nice one scroll wheel notch should scroll exactly one or two columns. Now the scroll distance just doesn't match this custom layout so it feels pretty bad.
That sounds cool, thanks for investigating this. I don't know what an agent mode stylesheet is, but if you show how to do that, I'll play around with it. Or maybe you'll come up with the solution before that. :-)
Agent stylesheet is one of the three kinds of stylesheets that defines how elements get drawn. Agent stylesheets are provided by browser engine to define the baseline rules for different element types. Author stylesheets are specific to each document. And lastly, user stylesheets are user provided styling rules that get applied on top of agent and author styles.
If you think of websites, and you create a plain html document but don't add any styling to it then your markup is rendered only according to the agent styles that the browser has. It's like the default state of things. Then if you add `
Hi. Just noticed that you had replied, but that reply only shows up in lemmy world, and even there I can only see the first part of your reply, and the rest seems to be missing. But here I don't see it at all. I wonder if anyone is working on correcting the problems with this site, and mentioned here https://fedia.io/m/FirefoxCSS/t/431668/Can-t-see-any-comments-older-than-1-month-on-fedia-io?