7 ms·

Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get diff

Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get difficult to manage or track. With vertical, nested tabs; links that open in a new tab are automatically made a child tab. From that you can infer structure and context more easily than horizontal tabs. Then you add colours to indicate different sites and now you see tab groups more easily. On top of that you can bookmark tab trees, thus saving progress of your research, documentation, etc etc. My CSS file and a couple of screenshots are here: https://gist.github.com/aclarknexient/88673880d373864eee19279218c04e6a https://gist.github.com/aclarknexient/88673880d373864eee1927... (I need to add a screenshot with nested and coloured tabs, will add that once I submit this comment)

ExecSushy 3y ago
Not only for browsers. Once monitors got wider I moved everything left and vertical. It's also kind of a hierarchy that flows from left to right: OS -> App -> content Some content follows the same pattern (or can be configured close enough) Eg: discord servers -> channels -> discussion Eg: IntelliJ -> project files -> vertical tab for open editors -> editor Most content nowadays is mobile-first anyway, which is a nice way of saying it wastes most of the space on desktop (most webpages fit a title and subtitle OR 3 bullet points on a 24" screen) I've got around one hundred firefox tabs open currently, distributed in multiple windows on 8 workspaces and dual monitor. Horizontal tabs where always a design fail unless their number and title is fixed AND small. Made sense in physical cabinets because gravity wins and the space in a single drawer was limited.
dmix 3y ago
Plus looking at the screenshots of the "controversial" FF89 one of the biggest changes seems to be redesigning the tabs w/ more padding. I didn't even notice that change because I have the top tab bar hidden and use Tree Style Tab that has a design which blends nicely with FF. I don't like FF in particular but the tab tree is 100% enough of a UX gain vs all the small details chrome/safari does slightly better that I don't think twice (besides dev panel, I use chrome for frontend work).
- stevage 3y ago
  I use FF primarily, but sometimes Chrome for debugging, on macOS. I literally cannot tell them apart.
FeepingCreature 3y ago
> Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get difficult to manage or track. TabMixPlus! Dynamic width vertically scrollable fully customizable multirow tab bar. I have 50 tabs open, 22 on screen, and perfect overview. It still technically runs on current Firefox, but you have to engage in some very vigorous modding. See the README https://github.com/onemen/TabMixPlus https://github.com/onemen/TabMixPlus but be aware that this will completely disable extension signature validation. (I blame Mozilla.)
- SSLy 3y ago
  I think Sideberry is nowadays more comfortable than TMP.
015a 3y ago
To each their own, but: I strongly believe the opposite. Of course having more than 6 or 8 tabs open in a horizontal tab bar makes tabs difficult to manage and track. I've used Arc for the past 6 months. Having 6 or 8 tabs open in a vertical tab bar is also difficult to manage or track. I end up just spam-closing all of them and starting fresh pretty much every 4 hours anyway. Here's the two arguments I've heard that I resonate more with, one in either direction. (1) Count the number of pixels dedicated to the tab bar space when it is horizontal versus vertical. I've never seen a functional vertical tab bar that used the same or fewer pixels than a horizontal one. (2) But: Monitors almost always have more horizontal pixels than vertical pixels. So, actually, a vertical tab bar better-leverages the aspect ratio your monitor is built at. This feels true at 16:9 and greater aspect ratios; it feels untrue, to me, at the 16:10 aspect ratio; and unfortunately, this is an extremely common aspect ratio as its ~the aspect ratio Macbooks are made at.
- J_Shelby_J 3y ago
  When chrome first started getting popular many Firefox users were on vertical tabs, and it was not lost on me that chrome was made for small screen laptop users. A smart design decision even if it feels gimped for vertical tab users.
  - jwells89 3y ago
    > chrome was made for small screen laptop users Makes sense if one considers how many 13” Macbooks and original MacBook Airs were likely being toted around the Google campus in the late 2000s, with Macs being the predominant development platform there at the time. Further down the road in 2011, Chromebooks appeared, most of which are on the smaller side which also acts as incentive to keep Chrome usable on smaller screens. Desktop Safari and MS Edge are also decent in this regard, likely a result of their parent companies being makers of popular small-screen computers.
- DonHopkins 3y ago
  It bewilders me that any rational UI designer would be so arrogant as to make the unilateral unchangeable decision for all their users that they should only have tabs on one side, be it the top, bottom, left or right of the window. Why restrict users to using tabs on only one side and one side only? What's so special about that side, and bad about the other sides? What if the user is left handed, or has a tall monitor, or a wide monitor, or lots of windows, or only a few? While you're at it, why not just remove all the arrow keys from the keyboard except one? Then users can argue over whether the left-arrow key is better than the up-arrow key, and users who don't like having only an up-arrow key can buy a keyboard with only a left-arrow key. But all keyboards have all four arrow keys, so there are no arguments about which arrow is better: you just use whichever arrow you want, whenever you want. Most people prefer to use all four arrows at different times for different purposes, and put their tabs along all four edges, too!
jwells89 3y ago
Fan of vertical tabs here, it’s a major boon for how I browse, which tends to involve a number of long-running tasks. Tabs work better than this than bookmarks, because cleaning out bookmarks sucks with how undeveloped all browser bookmark managers somehow still are in 2024. I’m not too partial to nested tabs, but I think “panes” (Firefox extension Sidebery nomenclature) or “spaces” (what Arc calls them) where you can swap what group of tabs (including pinned tabs) is represented by the tab sidebar with a click is powerful, particularly combined with association of a pane/space with a browser profile. So for example, a single browser window can switch between being dedicated to general browsing, shopping, online university courses, or software development, and if I want to split a pane/space into a new window temporarily, this is possible too.
- a_subsystem 3y ago
  I've been using Arc and I've become a fan of folders + vertical tabs also. But I also want bookmarks with tags. I don't want to keep 'pinouts for xyz motherboard' open somewhere all the time. I want to tag it with 'dell', 'motherboard', and 'pinout' and then search when I need it instead of having to remember what 'Space' I put it in. I prefer bookmarks to web search when possible because often enough I spend stupid amounts of time searching for a little tidbit and may want to come back to it later. Rather than cleaning out bookmarks, I would keep a few main bookmarks and folders on the toolbar, and file away everything else under one few big folders with tags. I use Firefox for tagging and it seems to be a fantastic way to keep track of thousands of sites with small cognitive load. Am I missing some workflow that's 'better'?
  - jwells89 3y ago
    Yeah, not having bookmarks is probably Arc’s biggest weakness. I find bookmarks useful too, but only add them when I know I’m going to keep them around for a while. Tags might work well but the friction involved is likely too high for me to consistently use them. It’s easier to just keep anything remotely short term in tab form.
bloopernova 3y ago
Replying to my own comment: HN faux pas, or good information organization? :) In the Tree Style Tab options page, there's an Advanced section that has a live-reloading user style sheet section. Very cool for testing out font choices without restarting the browser. I've changed mine to use Apple's really nice SF Pro font, condensed. Somehow the Iosevka Mono that I use everywhere didn't look quite right on the tab titles. The CSS: :root.sidebar tab-item.unread .label-content { font-style: italic !important; } :root.sidebar tab-item { font-family: "SF Pro" !important; font-stretch: condensed !important; font-weight: 300 !important; } :root.sidebar tab-item.active .label-content { font-weight: 500 !important; } Same link as my previous comment now has a screenshot of the result of that CSS: https://gist.github.com/aclarknexient/88673880d373864eee19279218c04e6a https://gist.github.com/aclarknexient/88673880d373864eee1927...
DonHopkins 3y ago
Vertical tabs are better in some situations and for some users, horizontal tabs are better in other situations and for other users. So all users should be able to choose to place tabs along any side of any window, and change which side and what position any tab is at any time. Not just tabs for emacs frames or web browser windows, but for ALL windows including top level and internal application windows. And you should also be able to mix tabs from different apps in the same frame, of course. Why not? I implemented tabbed window with pie menus for UniPress Emacs in 1988, and still miss them! Later in 1990 I developed several other versions of tabbed windows with pie menus for NeWS that let you manage any NeWS and X11 windows, and drag the tabs around to any edge. https://news.ycombinator.com/item?id=38338008 https://news.ycombinator.com/item?id=38338008 DonHopkins 3 months ago | root | parent | next [–] UniPress Emacs for NeWS, with tabbed windows and pie menus: 1988. https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:HyperTIESAuthoring.jpg https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy... https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU https://news.ycombinator.com/item?id=38337808 https://news.ycombinator.com/item?id=38337808 DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code This is why you should be able to choose which side and position any tab is positioned along any window at any time, and change them at any time by dragging them to where you want. Then you can assign meanings to each side, depending on your workflow, for example (this should be under user control, not set in stone, of course): Tabs on the top for important stuff. Tabs on the bottom for administrative stuff. Tabs on left for things you haven't read yet. Tabs on right for things you've already read. Then drag the tab from the left to the right after you read something (like moving it from your "in box" to your "out box"), or pin its tab on the top or bottom of it's important and you want to keep it around and easy to find. And if you really want, you should be able to hide the tab to save space. And not only tabs for apps like browser and IDEs, but also the desktop window manager should support tabs on top level windows in a consistent manner, so you can drag tabbed windows in and out of other window frames, as well as arranging them in hierarchical outlines along the edges. All this is super obvious, and saves a lot of time and effort, so it bewilders me why tabs like I described and implemented in the 1980's aren't universally supported on all desktops and applications by now. It's not because they're patented. Adobe tried, and sued Macromedia over it, but that patent (illegitimate in my view, since it ignored the prior art, and was extremely obvious and not patentable) has long since expired. https://www.metafilter.com/2805/Adobe-sues-Macromedia-over-infringement-of-their-patented-tabbed-palettes https://www.metafilter.com/2805/Adobe-sues-Macromedia-over-i... https://news.ycombinator.com/item?id=38337876 https://news.ycombinator.com/item?id=38337876 DonHopkins 3 months ago | root | parent | next [–] Also, not everything is a file. Tabs should apply to all edges of all windows, including top level windows, not just one edge of only windows with files in them. And you should be able to drag any window out to top level and it still has its tab attached, then move it around to any position along any edge, or hide it, and of course snap windows together along their tabbed edges, either tiling or overlapping. How do you control all of that? That's where the pie menus on the tabs come in, of course. Thanks to the tabs, you can even pop up pie menus on windows that are completely covered up, and perform commands on them even though they're not visible, like bringing them to the top (stroke up) or down (stroke down), or closing them (diagonal stroke for confirmation submenu, then stroke up to confirm), or whatever (paste into terminal emulator, evaluate code in editor, etc). https://news.ycombinator.com/item?id=38347429 https://news.ycombinator.com/item?id=38347429 DonHopkins 3 months ago | prev | next [–] And as long as you can have tabs on any side of a window, how about multiple tabs on the same window? Like child tabs as well as label tabs, that are links to other windows. Another cool use of vertical tabs is for the tabs on the left to select between windows, and the tabs on the right select between children of the current window (not sub-windows, but related windows or sub-directories). And you can use the tabs along the top as breadcrumbs to navigate back up the tree. Some IDEs kind of do that with a directory browser on the left and a function browser on the right, but with outlines and scrolling lists instead of actual tabs. You could navigate the tab tree by clicking or gesturing left or right with a pie menu on a tab, sliding the right column of tabs over to the left to descend into the tree. Like a Finder window that shows directories as tabs on the right instead of icons inside. You could also have top and bottom edge tabs for different kinds of children (i.e. xml attributes vs elements, object methods vs properties, different views or editors, etc). The original NeXT file browser had breadcrumbs along the top (but not tabs): https://www.youtube.com/watch?v=rrTag7nSHlw&t=701s https://www.youtube.com/watch?v=rrTag7nSHlw&t=701s https://news.ycombinator.com/item?id=38341279 https://news.ycombinator.com/item?id=38341279 donatj 3 months ago | prev | next [–] VScode started with vertical tabs only back in the day. It was a very interesting design choice. They switched to horizontal tabs from pressure. DonHopkins 3 months ago | parent | next [–] I just can't get my head around the mentality of making that decision for all of the users, hard coding it, and forcing it on them, not allowing you to choose for every window, or change your mind at any time, and simply drag any tab to any edge you want, whenever you want. What makes user interface designers so arrogant and sure of themselves and lazy that they think one particular side is the only side, and the best for everyone, no matter what your screen size, resolution, aspect ratio, layout, number of tabs, icon or label size, workflow, direction of text flow, handedness, visual acuity, physical dexterity, task, and preference? And then when you inevitably run out of space for tabs along the one edge, instead of simply allowing you to put more tabs along the other edges, you either add more horizontal rows along the top, so you get this abomination [1], or you have tiny little hard to use scrolling arrows at each edge so you can't see all the tabs at once, so you get that abomination [2]: Is it ever okay to have multiple rows of tabs? [1] https://ux.stackexchange.com/questions/15558/is-it-ever-okay-to-have-multiple-rows-of-tabs https://ux.stackexchange.com/questions/15558/is-it-ever-okay... Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs: [2] https://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wide-Tab-Interface-Applications-ScrollTabs.html https://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wi... It's like only putting only one arrow key on the keyboard. https://news.ycombinator.com/item?id=38337425 https://news.ycombinator.com/item?id=38337425 DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code I've been implementing and using vertical tabs since around 1988, with I released a commercial product with tabbed windows, the NeWS version of UniPress Emacs, and used it to develop a hypermedia authoring environment for HyperTIES at the UMD Human Computer Interaction Lab. https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:HyperTIESAuthoring.jpg https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy... Vertically tabbed windows combine synergistically well with pie menus, and are great for window management, especially when you have many windows. They are purposefully NOT patented, since the idea is so fucking obvious, but it's disappointing they took so many decades to catch on finally. Still there aren't any decent desktop window managers I know of that implement tabs the right way. (tvtwm is not the right way!) The later NeWS Toolkit versions from the early 1990's let you drag the tabs around to any side of the window you like: left, right, top or bottom, to any position along any edge. The user should be able to decide which edge and where the tabs are attached to for each window, it should not be hard wired like the tabs in VSCode and web browsers typically are. Being able to choose which edge the tab is on and where the tab is gives users better more flexible ways to organize and manipulate their windows. https://en.wikipedia.org/wiki/Tab_(interface) https://en.wikipedia.org/wiki/Tab_(interface) HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS, tabbed windows, pie menus: https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU I had a video of the NeWS tabbed windows, demonstrating dragging the tabs to different window edges, but youtube took it down because it contained copyrighted music (Herbie Hancock's Rockit). Oh, here's the original video you can download from my server: https://donhopkins.com/home/movies/TabWindowDemo.mov https://donhopkins.com/home/movies/TabWindowDemo.mov Here are some different version from 1988-1991 for different versions of NeWS: https://donhopkins.com/home/archive/NeWS/tabwin.ps https://donhopkins.com/home/archive/NeWS/tabwin.ps https://donhopkins.com/home/archive/NeWS/tab-1.ps https://donhopkins.com/home/archive/NeWS/tab-1.ps https://donhopkins.com/home/archive/NeWS/tabframe-1.ps https://donhopkins.com/home/archive/NeWS/tabframe-1.ps https://donhopkins.com/home/archive/NeWS/tab-3.0.2.ps https://donhopkins.com/home/archive/NeWS/tab-3.0.2.ps Here's another NeWS program that uses vertical (by default, but any edge if you want) tabs on windows around PostScript objects that you can push and pop on the stack with "direct stack manipulation": The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines — October 1989 https://donhopkins.medium.com/the-shape-of-psiber-space-october-1989-19e2dfa4d91e https://donhopkins.medium.com/the-shape-of-psiber-space-octo... PSIBER Space Deck Demo: https://www.youtube.com/watch?v=iuC_DDgQmsM https://www.youtube.com/watch?v=iuC_DDgQmsM
Dwedit 3y ago
Vertical tabs would be unusable on a window that's resized to be half the width of a 16:9 display.
- WorldMaker 3y ago
  I do it all the time and I don't think it is "unusable". About the only "issue" with it is often that it shrinks the viewport just enough to trigger "mobile" breakpoints in CSS, but for some websites (YouTube, especially) that can be a feature as much as a "bug".
- michaelmrose 3y ago
  This is a good point especially on laptops. It might be nice to display side tabs until a breakpoint and thereafter autohide
kjkjadksj 3y ago
Vertical tabs start to suck on a laptop. For one my auto hide sidebar hack for firefox broke and I am too lazy to fix it, so now I have basically a whole inch by several inches of dead gray space because I don’t have a full column of 100 tabs ever open, maybe 5 or 10. This wouldn’t be so annoying except many modern websites use browser viewer size instead of the user agent to make the call you are a mobile or desktop user. So I basically have to use fullscreen browser windows because considering I already lose an inch to the tree style tabs, I really don’t have much width to lose before the site assumes I am an iPad and gives me a ton of hamburger menues that also suck to navigate because of how they tend to wrap text on constrained width browser viewers. Most of the time I just have to disable the sidebar entirely which of course adds a few clicks everytime I change tabs now.

ExecSushy 3y ago

Not only for browsers. Once monitors got wider I moved everything left and vertical. It's also kind of a hierarchy that flows from left to right: OS -> App -> content Some content follows the same pattern (or can be configured close enough) Eg: discord servers -> channels -> discussion Eg: IntelliJ -> project files -> vertical tab for open editors -> editor Most content nowadays is mobile-first anyway, which is a nice way of saying it wastes most of the space on desktop (most webpages fit a title and subtitle OR 3 bullet points on a 24" screen) I've got around one hundred firefox tabs open currently, distributed in multiple windows on 8 workspaces and dual monitor. Horizontal tabs where always a design fail unless their number and title is fixed AND small. Made sense in physical cabinets because gravity wins and the space in a single drawer was limited.

dmix 3y ago

Plus looking at the screenshots of the "controversial" FF89 one of the biggest changes seems to be redesigning the tabs w/ more padding. I didn't even notice that change because I have the top tab bar hidden and use Tree Style Tab that has a design which blends nicely with FF. I don't like FF in particular but the tab tree is 100% enough of a UX gain vs all the small details chrome/safari does slightly better that I don't think twice (besides dev panel, I use chrome for frontend work).

stevage 3y ago
I use FF primarily, but sometimes Chrome for debugging, on macOS. I literally cannot tell them apart.

FeepingCreature 3y ago

> Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get difficult to manage or track. TabMixPlus! Dynamic width vertically scrollable fully customizable multirow tab bar. I have 50 tabs open, 22 on screen, and perfect overview. It still technically runs on current Firefox, but you have to engage in some very vigorous modding. See the README https://github.com/onemen/TabMixPlus https://github.com/onemen/TabMixPlus but be aware that this will completely disable extension signature validation. (I blame Mozilla.)

SSLy 3y ago
I think Sideberry is nowadays more comfortable than TMP.

015a 3y ago

To each their own, but: I strongly believe the opposite. Of course having more than 6 or 8 tabs open in a horizontal tab bar makes tabs difficult to manage and track. I've used Arc for the past 6 months. Having 6 or 8 tabs open in a vertical tab bar is also difficult to manage or track. I end up just spam-closing all of them and starting fresh pretty much every 4 hours anyway. Here's the two arguments I've heard that I resonate more with, one in either direction. (1) Count the number of pixels dedicated to the tab bar space when it is horizontal versus vertical. I've never seen a functional vertical tab bar that used the same or fewer pixels than a horizontal one. (2) But: Monitors almost always have more horizontal pixels than vertical pixels. So, actually, a vertical tab bar better-leverages the aspect ratio your monitor is built at. This feels true at 16:9 and greater aspect ratios; it feels untrue, to me, at the 16:10 aspect ratio; and unfortunately, this is an extremely common aspect ratio as its ~the aspect ratio Macbooks are made at.

J_Shelby_J 3y ago
When chrome first started getting popular many Firefox users were on vertical tabs, and it was not lost on me that chrome was made for small screen laptop users. A smart design decision even if it feels gimped for vertical tab users.
- jwells89 3y ago
  > chrome was made for small screen laptop users Makes sense if one considers how many 13” Macbooks and original MacBook Airs were likely being toted around the Google campus in the late 2000s, with Macs being the predominant development platform there at the time. Further down the road in 2011, Chromebooks appeared, most of which are on the smaller side which also acts as incentive to keep Chrome usable on smaller screens. Desktop Safari and MS Edge are also decent in this regard, likely a result of their parent companies being makers of popular small-screen computers.
DonHopkins 3y ago
It bewilders me that any rational UI designer would be so arrogant as to make the unilateral unchangeable decision for all their users that they should only have tabs on one side, be it the top, bottom, left or right of the window. Why restrict users to using tabs on only one side and one side only? What's so special about that side, and bad about the other sides? What if the user is left handed, or has a tall monitor, or a wide monitor, or lots of windows, or only a few? While you're at it, why not just remove all the arrow keys from the keyboard except one? Then users can argue over whether the left-arrow key is better than the up-arrow key, and users who don't like having only an up-arrow key can buy a keyboard with only a left-arrow key. But all keyboards have all four arrow keys, so there are no arguments about which arrow is better: you just use whichever arrow you want, whenever you want. Most people prefer to use all four arrows at different times for different purposes, and put their tabs along all four edges, too!

jwells89 3y ago

Fan of vertical tabs here, it’s a major boon for how I browse, which tends to involve a number of long-running tasks. Tabs work better than this than bookmarks, because cleaning out bookmarks sucks with how undeveloped all browser bookmark managers somehow still are in 2024. I’m not too partial to nested tabs, but I think “panes” (Firefox extension Sidebery nomenclature) or “spaces” (what Arc calls them) where you can swap what group of tabs (including pinned tabs) is represented by the tab sidebar with a click is powerful, particularly combined with association of a pane/space with a browser profile. So for example, a single browser window can switch between being dedicated to general browsing, shopping, online university courses, or software development, and if I want to split a pane/space into a new window temporarily, this is possible too.

a_subsystem 3y ago
I've been using Arc and I've become a fan of folders + vertical tabs also. But I also want bookmarks with tags. I don't want to keep 'pinouts for xyz motherboard' open somewhere all the time. I want to tag it with 'dell', 'motherboard', and 'pinout' and then search when I need it instead of having to remember what 'Space' I put it in. I prefer bookmarks to web search when possible because often enough I spend stupid amounts of time searching for a little tidbit and may want to come back to it later. Rather than cleaning out bookmarks, I would keep a few main bookmarks and folders on the toolbar, and file away everything else under one few big folders with tags. I use Firefox for tagging and it seems to be a fantastic way to keep track of thousands of sites with small cognitive load. Am I missing some workflow that's 'better'?
- jwells89 3y ago
  Yeah, not having bookmarks is probably Arc’s biggest weakness. I find bookmarks useful too, but only add them when I know I’m going to keep them around for a while. Tags might work well but the friction involved is likely too high for me to consistently use them. It’s easier to just keep anything remotely short term in tab form.

bloopernova 3y ago

Replying to my own comment: HN faux pas, or good information organization? :) In the Tree Style Tab options page, there's an Advanced section that has a live-reloading user style sheet section. Very cool for testing out font choices without restarting the browser. I've changed mine to use Apple's really nice SF Pro font, condensed. Somehow the Iosevka Mono that I use everywhere didn't look quite right on the tab titles. The CSS: :root.sidebar tab-item.unread .label-content { font-style: italic !important; } :root.sidebar tab-item { font-family: "SF Pro" !important; font-stretch: condensed !important; font-weight: 300 !important; } :root.sidebar tab-item.active .label-content { font-weight: 500 !important; } Same link as my previous comment now has a screenshot of the result of that CSS: https://gist.github.com/aclarknexient/88673880d373864eee19279218c04e6a https://gist.github.com/aclarknexient/88673880d373864eee1927...

DonHopkins 3y ago

Vertical tabs are better in some situations and for some users, horizontal tabs are better in other situations and for other users. So all users should be able to choose to place tabs along any side of any window, and change which side and what position any tab is at any time. Not just tabs for emacs frames or web browser windows, but for ALL windows including top level and internal application windows. And you should also be able to mix tabs from different apps in the same frame, of course. Why not? I implemented tabbed window with pie menus for UniPress Emacs in 1988, and still miss them! Later in 1990 I developed several other versions of tabbed windows with pie menus for NeWS that let you manage any NeWS and X11 windows, and drag the tabs around to any edge. https://news.ycombinator.com/item?id=38338008 https://news.ycombinator.com/item?id=38338008 DonHopkins 3 months ago | root | parent | next [–] UniPress Emacs for NeWS, with tabbed windows and pie menus: 1988. https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:HyperTIESAuthoring.jpg https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy... https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU https://news.ycombinator.com/item?id=38337808 https://news.ycombinator.com/item?id=38337808 DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code This is why you should be able to choose which side and position any tab is positioned along any window at any time, and change them at any time by dragging them to where you want. Then you can assign meanings to each side, depending on your workflow, for example (this should be under user control, not set in stone, of course): Tabs on the top for important stuff. Tabs on the bottom for administrative stuff. Tabs on left for things you haven't read yet. Tabs on right for things you've already read. Then drag the tab from the left to the right after you read something (like moving it from your "in box" to your "out box"), or pin its tab on the top or bottom of it's important and you want to keep it around and easy to find. And if you really want, you should be able to hide the tab to save space. And not only tabs for apps like browser and IDEs, but also the desktop window manager should support tabs on top level windows in a consistent manner, so you can drag tabbed windows in and out of other window frames, as well as arranging them in hierarchical outlines along the edges. All this is super obvious, and saves a lot of time and effort, so it bewilders me why tabs like I described and implemented in the 1980's aren't universally supported on all desktops and applications by now. It's not because they're patented. Adobe tried, and sued Macromedia over it, but that patent (illegitimate in my view, since it ignored the prior art, and was extremely obvious and not patentable) has long since expired. https://www.metafilter.com/2805/Adobe-sues-Macromedia-over-infringement-of-their-patented-tabbed-palettes https://www.metafilter.com/2805/Adobe-sues-Macromedia-over-i... https://news.ycombinator.com/item?id=38337876 https://news.ycombinator.com/item?id=38337876 DonHopkins 3 months ago | root | parent | next [–] Also, not everything is a file. Tabs should apply to all edges of all windows, including top level windows, not just one edge of only windows with files in them. And you should be able to drag any window out to top level and it still has its tab attached, then move it around to any position along any edge, or hide it, and of course snap windows together along their tabbed edges, either tiling or overlapping. How do you control all of that? That's where the pie menus on the tabs come in, of course. Thanks to the tabs, you can even pop up pie menus on windows that are completely covered up, and perform commands on them even though they're not visible, like bringing them to the top (stroke up) or down (stroke down), or closing them (diagonal stroke for confirmation submenu, then stroke up to confirm), or whatever (paste into terminal emulator, evaluate code in editor, etc). https://news.ycombinator.com/item?id=38347429 https://news.ycombinator.com/item?id=38347429 DonHopkins 3 months ago | prev | next [–] And as long as you can have tabs on any side of a window, how about multiple tabs on the same window? Like child tabs as well as label tabs, that are links to other windows. Another cool use of vertical tabs is for the tabs on the left to select between windows, and the tabs on the right select between children of the current window (not sub-windows, but related windows or sub-directories). And you can use the tabs along the top as breadcrumbs to navigate back up the tree. Some IDEs kind of do that with a directory browser on the left and a function browser on the right, but with outlines and scrolling lists instead of actual tabs. You could navigate the tab tree by clicking or gesturing left or right with a pie menu on a tab, sliding the right column of tabs over to the left to descend into the tree. Like a Finder window that shows directories as tabs on the right instead of icons inside. You could also have top and bottom edge tabs for different kinds of children (i.e. xml attributes vs elements, object methods vs properties, different views or editors, etc). The original NeXT file browser had breadcrumbs along the top (but not tabs): https://www.youtube.com/watch?v=rrTag7nSHlw&t=701s https://www.youtube.com/watch?v=rrTag7nSHlw&t=701s https://news.ycombinator.com/item?id=38341279 https://news.ycombinator.com/item?id=38341279 donatj 3 months ago | prev | next [–] VScode started with vertical tabs only back in the day. It was a very interesting design choice. They switched to horizontal tabs from pressure. DonHopkins 3 months ago | parent | next [–] I just can't get my head around the mentality of making that decision for all of the users, hard coding it, and forcing it on them, not allowing you to choose for every window, or change your mind at any time, and simply drag any tab to any edge you want, whenever you want. What makes user interface designers so arrogant and sure of themselves and lazy that they think one particular side is the only side, and the best for everyone, no matter what your screen size, resolution, aspect ratio, layout, number of tabs, icon or label size, workflow, direction of text flow, handedness, visual acuity, physical dexterity, task, and preference? And then when you inevitably run out of space for tabs along the one edge, instead of simply allowing you to put more tabs along the other edges, you either add more horizontal rows along the top, so you get this abomination [1], or you have tiny little hard to use scrolling arrows at each edge so you can't see all the tabs at once, so you get that abomination [2]: Is it ever okay to have multiple rows of tabs? [1] https://ux.stackexchange.com/questions/15558/is-it-ever-okay-to-have-multiple-rows-of-tabs https://ux.stackexchange.com/questions/15558/is-it-ever-okay... Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs: [2] https://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wide-Tab-Interface-Applications-ScrollTabs.html https://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wi... It's like only putting only one arrow key on the keyboard. https://news.ycombinator.com/item?id=38337425 https://news.ycombinator.com/item?id=38337425 DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code I've been implementing and using vertical tabs since around 1988, with I released a commercial product with tabbed windows, the NeWS version of UniPress Emacs, and used it to develop a hypermedia authoring environment for HyperTIES at the UMD Human Computer Interaction Lab. https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:HyperTIESAuthoring.jpg https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy... Vertically tabbed windows combine synergistically well with pie menus, and are great for window management, especially when you have many windows. They are purposefully NOT patented, since the idea is so fucking obvious, but it's disappointing they took so many decades to catch on finally. Still there aren't any decent desktop window managers I know of that implement tabs the right way. (tvtwm is not the right way!) The later NeWS Toolkit versions from the early 1990's let you drag the tabs around to any side of the window you like: left, right, top or bottom, to any position along any edge. The user should be able to decide which edge and where the tabs are attached to for each window, it should not be hard wired like the tabs in VSCode and web browsers typically are. Being able to choose which edge the tab is on and where the tab is gives users better more flexible ways to organize and manipulate their windows. https://en.wikipedia.org/wiki/Tab_(interface) https://en.wikipedia.org/wiki/Tab_(interface) HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS, tabbed windows, pie menus: https://www.youtube.com/watch?v=hhmU2B79EDU https://www.youtube.com/watch?v=hhmU2B79EDU I had a video of the NeWS tabbed windows, demonstrating dragging the tabs to different window edges, but youtube took it down because it contained copyrighted music (Herbie Hancock's Rockit). Oh, here's the original video you can download from my server: https://donhopkins.com/home/movies/TabWindowDemo.mov https://donhopkins.com/home/movies/TabWindowDemo.mov Here are some different version from 1988-1991 for different versions of NeWS: https://donhopkins.com/home/archive/NeWS/tabwin.ps https://donhopkins.com/home/archive/NeWS/tabwin.ps https://donhopkins.com/home/archive/NeWS/tab-1.ps https://donhopkins.com/home/archive/NeWS/tab-1.ps https://donhopkins.com/home/archive/NeWS/tabframe-1.ps https://donhopkins.com/home/archive/NeWS/tabframe-1.ps https://donhopkins.com/home/archive/NeWS/tab-3.0.2.ps https://donhopkins.com/home/archive/NeWS/tab-3.0.2.ps Here's another NeWS program that uses vertical (by default, but any edge if you want) tabs on windows around PostScript objects that you can push and pop on the stack with "direct stack manipulation": The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines — October 1989 https://donhopkins.medium.com/the-shape-of-psiber-space-october-1989-19e2dfa4d91e https://donhopkins.medium.com/the-shape-of-psiber-space-octo... PSIBER Space Deck Demo: https://www.youtube.com/watch?v=iuC_DDgQmsM https://www.youtube.com/watch?v=iuC_DDgQmsM

Dwedit 3y ago

Vertical tabs would be unusable on a window that's resized to be half the width of a 16:9 display.

WorldMaker 3y ago
I do it all the time and I don't think it is "unusable". About the only "issue" with it is often that it shrinks the viewport just enough to trigger "mobile" breakpoints in CSS, but for some websites (YouTube, especially) that can be a feature as much as a "bug".
michaelmrose 3y ago
This is a good point especially on laptops. It might be nice to display side tabs until a breakpoint and thereafter autohide

kjkjadksj 3y ago

Vertical tabs start to suck on a laptop. For one my auto hide sidebar hack for firefox broke and I am too lazy to fix it, so now I have basically a whole inch by several inches of dead gray space because I don’t have a full column of 100 tabs ever open, maybe 5 or 10. This wouldn’t be so annoying except many modern websites use browser viewer size instead of the user agent to make the call you are a mobile or desktop user. So I basically have to use fullscreen browser windows because considering I already lose an inch to the tree style tabs, I really don’t have much width to lose before the site assumes I am an iPad and gives me a ton of hamburger menues that also suck to navigate because of how they tend to wrap text on constrained width browser viewers. Most of the time I just have to disable the sidebar entirely which of course adds a few clicks everytime I change tabs now.