103 comments

[ 3.7 ms ] story [ 203 ms ] thread
I've been using Tree Style Tabs[0] with Firefox for a long time. Being able to nest tabs and then collapse them is awesome. It is hard to live without it when using Chrome (I know there is a similar addon for Chrome[1], but it doesn't have the same feel since it just adds a new window off to the side and still has the tabs across the top).

[0] https://addons.mozilla.org/en-US/firefox/addon/tree-style-ta... [1] https://chrome.google.com/webstore/detail/sidewise-tree-styl...

TST is awesome. "Bookmark this tree" & "Close this tree" features make so much sense when one researches some topic.
While I love Tree Style Tab, I think separate windows for separate topics is more useful than trees, and I think saving windows/topics as sessions using the Session Manager extension is more useful than bookmarking, especially seeing as how Session Manager supports appending windows to previously saved sessions.
Sometimes what I think will be a quick search turns into multiple tabs so its really easy to pull a tree into a new window and then save it using Session manager.
Agreed on separate windows for distinct topics. For that, I find the FireTitle extension invaluable:

https://addons.mozilla.org/en-US/firefox/addon/firetitle/

You can flexibly add text to the title bar of each window to name the window as you choose. These names show up in Aero Peek etc. to make switching between windows effortless.

TreeStyleTabs, FireTitle, and a few other FF extensions are what keep me firmly in the FF camp. Its extensibility is the best of all the browsers IMHO.

This is the feature I miss the most in Chrome. I wish there was a good way to add this.
I love it too. Drag-n-drop and collapsing them makes managing tabs so much easier. Its hard to navigate tabs in a browser without it!
+1 for Tree Style Tabs. This seems in the right direction, but it's not nearly as feature packed as TST. One thing with TST though, pinned tabs is broken :(
They seem to work fine for me, did you try force-updating the add-on?
uuh, I have TST on OSX with Firefox 30 and 5 perfectly pinned tabs. What do you mean by "broken"?
I just installed TST and it lost all my 4 pinned tabs but could pin them again with no issues.
+1 for TST

On my 1366x768 laptop I use auto-hide[0] so as to not lose too much screen real estate.

[0] http://i.imgur.com/LuOWjGw.png

thank you for sharing that feature / option. I needed to be able to do that and didn't know it existed.
In addition to that, Firefox handles many tabs very well because it is a single process application and does not use as many resources as Chrome does. Tree Style Tab is the best when you are researching something and you basically keep all open tabs under a single branch. When you are done, you just close all branch.
At this point I'm legitimately unsure how people do web research/search without TST. I know at some point in the far past I did it myself...but I'm not sure how.
+1. Tree style tabs and Snaplinks are the main reasons I switched to Firefox.
The only thing that annoys me about TST is that the various built-in themes really only look good on OS X, because they're typically hard-coded to use colours from the standard OS X theme. If you're using a markedly different theme on another OS, TST varies between weird and unreadable.

Of course, I still use it. Better weird-looking tabs than non-vertical, non-nested tabs at all.

As an aside, for those that aren't aware, try pressing Ctrl-Shift-E in Firefox for another way of organising tabs...
Wow, apparently this has been a thing since Firefox 20. This is absolutely wonderful. You can also add the Tab Groups button anywhere from the customize menu.
20? Panorama has been around since Firefox 4.
Likewise, i like the tree style.

That said its not convenient on small screen resolution. Its fine on fullhd+.

I love TST, but I find that on my current screen it takes too much space to be actually usable. I suppose it is great for people with relatively small screens where you have browser maximized practically always, and on very large screens where you can still comfortably fit two windows side-by-side even with TST. But I'm stuck firmly in the middle, where maximized browser seems waste, but I can't really fit anything useful on the side if I'm using TST.
Any chance of this being published via Mozilla Add-Ons, or do you want to keep it as a prototype?
Right now it works (best) on OSX, I'd love to get some help to make it work better across platforms. My colleague Hayden's work will probably progress faster than mine (this was just a side project for me!) https://github.com/dhdemerson/VerticalTabs
Very nice to see FF designers discovering the joy of vertical tabs, but it seems pretty strange to not have the article mention the traditional solutions to that, like Tree Style Tabs. Are the designers living in a bobble when it comes to extensions?
Thanks for pointing this out, I should have made mention in my post :) I've have seen tree style tabs – which does a great job for more advanced organization of tabs. For my experiments (and Firefox features in general), we try and focus on simplicity and the more general audience.
TST is pretty simple to use and extensible if you want more. What you did was... not really practical. Have you tried using TST for a few days? I promise you won't be able to go back to any other way of browsing.
For developers and other tech guys maybe. But the average, non tech savy users have a very hard time understanding hierarchies and therefore tree controls. It's to such a degree that UX specialists like Alan Cooper strongly suggests never using tree views unless the data is naturally thought of as a hierarchy, such as a family tree etc.
It looks a lot like the windows start menu. Which is pretty easy to use.
I have seen people get lost in the Start Menu, and beg to have all their apps in one giant list at the top level.
They get lost in it because there are too many things, but they understand how it works. Which is the point here since they would make the tree themselves with something such as TreeStyleTab
No, the cases I speak of get lost in it when they have tree-style menus, when their apps are grouped in different themes (games, tools, office) and want a flat, 3-column single layer.
>But the average, non tech savy users have a very hard time understanding hierarchies and therefore tree controls

Oh, that sounds very much like BS. "non tech saavy" users have been using hierarchies in computers since before Windows 95 (considering people that used MS-DOS as 'tech saavy' users). DOS/Windows folders were presented in a structure; File Explorer presented stuff in a structure manner. Hell, the "my documents" folder was structured... and even Gnome (the epithome of doing simple interfaces) presents folders in a structure manner.

Because a UI control exists before Windows 95 doesn't mean it's understood by the majority of users. Also, there is a larger amount of users with minimal software exposure now than ever before, due to tablets and smartphones.

If your computing experience is limited to iOS for example, chances are you'll never even have seen a nested tree view control, much less understand the hierarchy behind it.

At least just read a minimum on usability and UX, before being so rude as to "call bullshit" based on your own personal opinion.

If you want to try this out, download release.xpi from the repo and drag it into Firefox.

Link: https://github.com/darrinhenein/VerticalTabs/raw/master/rele...

Is there a reason this isn't on the firefox addons site? I think it's bad practice to recommend people run arbitrary code from the internet when there's a simple alternative.
OP isn't the primary addon developer and doesn't want to steal eyes/users from his friend?

There are lots of addons that are, at least in part, distributed as blobs from github

Ahh - the OP should urge the primary developer to publish this on the addons site - it looks nice!
It sounds like they are, or at least they've submitted a pull request. Both the original dev and OP are on github (hence its eminently forkable) and work for Mozilla.
TIL: putting code on the firefox addons site makes it secure by pure magic.
...and reviews by others, and a process by which known bad extensions get taken down.

It's not watertight (as the recent abuses in the chrome web store illustrate), but it's better than nothing.

AFAIK, Chrome extensions don't go through a review process. SmoothGestures was just one extension that got a new developer and then started submitting every visited url to their servers.
Well, there's certainly some central control even if it's not formal review. Of course, review wouldn't catch everything anyway (I think the ability to identify and block bad actors is more important than the a priori review).
It gives a clear path to revocation of bad actors as well as future updates.
It also gives a ton of power to a few large organisations at the expense of small dev shops and advanced users.
Firefox doesn't prevent you from installing code directly. I am stating what I find valuable in their add-on marketplace.
TIL: people too lazy to write three whole words are more interested in sarcasm than saying something sensible.
Looks ugly in windows. And show to on the right is not working. Waiting for a better version. :)
Agreed! My work was done on OSX, as a proof of concept. My colleague Hayden is doing some great work to carry it forward, including Windows support (https://github.com/dhdemerson/VerticalTabs)
Why it needs Windows support? Isn't it just an xul, js and css using xulrunner on every platform? Sorry, I ask because I never code in xul before.
"show on the right" required a restart after being checked to work for me in linux. Perhaps that helps?
Oddly enough, the apparent lack of the setting (or maybe it didn't seem to work) drove me to https://addons.mozilla.org/en-US/firefox/addon/side-tabs/ around six or eight months ago.
About two hours later, I've switched back: Vertical Tabs is very slow, and makes Firefox 30 on Ubuntu 14.04 seem slow. Ah, well.
I had the same experience on Elementary.
Second time i find myself plugging this add on: https://addons.mozilla.org/en-US/firefox/addon/tree-style-ta...

You can put it on either side, and it doesn't look as ugly as "side-tabs" that you linked to. No, I'm not the author or anything, I've just been using this thing for a good solid few years. And I can't believe people are now falling for this silly side-tabs prototype when a perfectly Good, 100% working side/tree tab add on is already available and mature.

I totally agree that side-tabs isn't the prettiest thing in the world. That said, the tree-style-tabs addon seems to be built around a concept that I don't need, which is why I hadn't really considered it before. It does seem to be fast, though, so I'll give it a try for a while and see if my life improves.

Thanks!

I wish this existed for Chrome, they used to have a command line flag (–enable-vertical-tabs) but they turned it off. Which made me really sad.

Does anyone know of a nice looking version of this for Chrome?

I am enjoying this on OSX. I tried Tree Style Tabs in the past, but was not a fan of how it looked. This looks much better and is working nicely so far. In the future it would be nice to see collapse-able tab groups.

Pinned tabs should have a visual distinction, rather than only being pinned to the top. An icon, badge, or subtle change in background shade would work.

Looking good!

Thank you! Really appreciate it. My colleague's fork is tackling pinned tabs and some other cool ideas, check it out! https://github.com/dhdemerson/VerticalTabs
One idea I'd just thought of adding might be to use the empty space below the tabs with a top-list of frequently used URLs, excluding those already open. And maybe the most recently closed tabs. Also when mentioning productivity, I immediately thought of putting check boxes or labels on the tabs. Or swipe actions.
I'd like to see the same dark theme on Linux otherwise I'll stick to tree style tabs.
Slick. I've tried the popular tree style tab extensions a few times over the years, but this one feels the most natural. The others were always too complicated.

One nit: the target area to trigger the resize is super tiny. 1 pixel, I think.

Thanks, glad to hear you like it :) Good call on the resize target, I'll look at that!
OmniWeb did this over a decade ago: http://i.imgur.com/U4Q5siY.jpg

I'm glad it's getting more popular but surprised it's taken this long. It makes more sense to use horizontal space on a widescreen monitor.

I'm glad OW got a mention here; I miss its tabs very much. More than just putting the tabs vertically, it included a thumbnail and a scrollbar, both of which I found incredibly helpful; my workflow hasn't been the same since I switched away from it.
Something Omniweb did(/does?) was remove common prefixes from the titles of multiple open tabs from the same web site. This further served to maximize usage of limited screen real estate (something that vertical tabs already helps with greatly, of course). I wonder if there's an addon for any modern browsers to do this. I'll need to check once I get home.
Safari does something very similar on 10.9. I think it looks at the titles of all the tabs and tries to find the sections that have least commonality between them (not just common prefix).
This causes the address bar to climb up and disappear halfway on my OS X Nightly. :(
More generally, but in the same vein, I miss the side panel from Opera -- it's both easy and satisfying to 'throw' the mouse into the side of the screen to get access to extra control real estate.
I like the idea of the windows task bar on the left side, but instead of showing thumbnails if it showed document titles we could just use that instead of side-tabs. Start a new browser window instead of a tab and let the desktop environment handle that. Of course there's persistence issues, but those could be resolved. I guess I don't like duplicating functionality between application and the desktop, and all the apps getting tabs is just that. Perhaps the desktop implementation needs to be better rather than having apps do it themselves?
I've tried many vertical tabs add-ons for Firefox, but, sadly, none are at the point where I can use them consistently. Some issues that I had:

  - interface buttons disappeared: new tab, tab groups
  - bugs when reordering tabs
  - looked out of place/ugly even with the default theme
That said, this is a sufficient hindrance for me daily that I'm considering learning add-on development to be able to fix these issues in those add-ons or create my own.

One thing that I'd love to have is the ability to reverse the order of the tabs and place the buttons at the top of the vertical tab bar instead of the bottom. I'm surprised that it isn't an option in any of the ones I tried: having the new tab button near the menu button would be a big usability improvement for me (I use the vertical tab bar on the right).

Then I guess you haven't tried a recent version of: https://addons.mozilla.org/en-US/firefox/addon/tree-style-ta...

I've been using it for, I think, 2-3 years. And it's come a long way since the early days when it was buggy. I suggest you give it another go with a more recent version. And don't be put off by the ugly screenshots on the add on page as it's not quite what it looks like anymore.

Recent version of TST are perfect imo. You can customize them exactly how you want them to behave.
Where I really want side tabs is on my Android Nexus 7 tablet.

On it in Chrome I normally browse the web in portrait mode and I can see the titles of about three tabs, but only a few words of each. With a slide out side panel on the left (activated by dragging left to right from off the screen onto the screen) I would be able to see the titles for 15 or so tabs, with larger press areas and close buttons.

I realize for every tab switch this would require a swipe and a click, but as it is now the tab is often not one of the three visible and so I already have to swipe multiple times across the tab bar to see the tab before clicking it.

Chrome had side tabs for a long time. It was a 'hidden feature' you had to enable in the about:config screen. But Google knows how you're supposed to surf, and vertical side tabs are not it. So they tore it out. Many issues were opened on their bug tracker asking for it to be replaced, but the final word came down - 'we don't like vertical tabs, and therefore no one can have them. Stop opening new issues.'
Firefox on my N7 has side tabs, but with full-tab previews, not just the titles. I don't find the extra space used to be a problem.
Unfortunately not in portrait mode, at least for me. And in both portrait and landscape modes on my N7 Firefox only shows 3.5 tabs, about the same as Chrome.
You just described Firefox's tab switcher on Android.
I have never understood why this has not been done far sooner and why the big browsers don't at least support the option.

It makes absolutely no sense to use up vertical space on wide-screens (which everyone now has) on tabs that then have to collapse, stack, or shrink when we could take advantage of all that white space left and right of the content to list all the tabs including labels and even add a few more pixels of vertical space.

It's so baffling to me. I don't understand it.

It's not as much as a win if you just don't maximize your browser window.
Opera (as usual) had this ability for years, although I have not used recent versions of their browser, so dunno if it's still there. They also added a nice "tab group" feature, which was/is much better than firefox's half-assed tab group feature (which isn't even "visible" by default because it sucks).

EDIT: Can find older versions to check it out here (Appears as 12.17 is the last version which had this): http://www.opera.com/download/guide/?os=windows&list=all. You simply right click the tab bar and it has place> top/left/right/bottom.

I use Firefox now, and couldn't survive without Tree style tabs, although I still miss a significant number of features from Opera, although from what I gather, they basically thrown away most of it and now have not much more than a clone of Chrome. This is baffling to me too - current Opera is a clear regression from what they had 5 years ago.

How does this compare to Tree Style Tab? I've been using TST for years and I don't want to downgrade.
It looks nicer (in my opinion at least, and I've only test it on Linux), more minimalist style. But it doesn't have the collapsable tree groups that TST has, just a standard list of tabs.
It looks pretty bad on windows.
i have fvwm configured to have decorations on the left side, since most monitors have more X than Y pixels...
Why should the tabs be at the top. side looks better. Because it is easier read than the top.
This post attempts to walk a fine line between hyping up the work the author has done and recognizing the contributions of... largely the wrong people.

- There is a pretty popular Firefox extension called Tree Style Tabs, by "Piro". It is awesome, it is actively maintained, it works great. It has around 100k active users.

- Some time later, "philiKON" (Philipp von Weitershausen) made a smaller extension that just shows tabs vertically. "It is heavily inspired by and borrows ideas from the excellent Tree Style Tab add-on", its page says. I used it for a while, but it fell into disrepair and I switched back to TST. Vertical Tabs has around 5k users.

- Finally, "Vlad" made a fork of Vertical Tabs to fix it up a little, since philiKON had abandoned it.

So who does Mr. Henein credit? Mainly himself and his colleague Vlad. Vlad is credited as the author of Vertical Tabs at the beginning of the post, although what he was not "something [Henein]’d be willing to trial" (ouch). It needed Henein's touch to "bring this add-on to a level where users would find it delightful and usable enough to at least give it a fair shot."

But still, he does credit his pal Vlad for doing most of the work, and even throws in a mention of von Weitershausen in the middle of the post, without explaining what he has to do with Vertical Tabs.

No mention at all of Piro or Tree Style Tabs, even though it was the inspiration of Vertical Tabs, and to this day is used by orders of magnitude more people. In fact, its existence seems to be intentionally removed. "The hypothesis I was hoping to validate was that there was a subset of the Firefox user base that would find value in the layout that Side Tabs enabled. I wanted to bring this add-on to a level where users would find it delightful and usable enough to at least give it a fair shot." I would say that TST, its over 2 million downloads over at least 7 years, and its 100k active users validate that hypothesis pretty well.

I think this is a pretty shoddy way for Mozilla to treat a member of its community. There is an add-on that introduced all of these ideas to Firefox, is well-known and appreciated by Firefox power-users, and has been tirelessly maintained for seven years, yet they go and act as if "side tabs" (he even slipped his own new name for it in there) were some amazing new area of cutting-edge experimentation, while giving a hat tip to a derivative of a derivative of the original extension.

And then all the flowery rhetoric: "This is how great things are built; rarely from scratch, but more commonly on the shoulders and brilliance of those who came before you." "I’ve had great response on Twitter from developers and users who love the add-on and who can’t wait to share their ideas and thoughts. It’s awesome to see ideas take shape and grow so organically like this. This is collaboration."

Maybe I'm crazy, but the whole thing just rubs me the wrong way.

Presumably he wasn't necessarily aware of TST? I wasn't.

I don't see anything wrong with crediting where he found his inspiration. There's always a chain to these things, presumably TST wouldn't exist without Firefox, which wouldn't exist without IE or Netscape, which... which wouldn't exist without the wheel... fire...

Plausible deniability is extremely thin here. TST's inspiration is credited in the first paragraph of Vertical Tabs's Readme on GitHub (even in Vlad's fork), and in Vertical Tabs's description on addons.mozilla.org. In fact, if you google "Vertical Tabs" the first result comes with the snippet "This Firefox add-on arranges tabs in a vertical rather than horizontal fashion. It is heavily inspired by and borrows ideas from the excellent Tree [...]".

On top of that, Mr. Henein is a Mozilla employee and has several colleagues who are also working on vertical tabs (he mentions Vlad, but also Stephen Horlander, one Hayden, and there are others who are not mentioned by name). Basically, there is a group of people at Mozilla who is (finally, after seven years) looking into officially supporting vertical tabs. How likely it is that none of them has ever heard of TST, or found out about it while researching this feature? I'd say it defies belief.

It takes active, deliberate effort for Mozilla to ignore the community's efforts in this field. It is certainly more satisfying to a designer's narcissism to pretend that he (with some help from his pals) is bringing forth a bold new creation, but it is an especially egregious attitude to take for a community-based organization like Mozilla.

These things used to rub me the wrong way in the 90's, but I've learned to take it in stride. I think it's great that people are rediscovering and trying out old ideas in new systems, and perhaps the understandable belief that something's never been done before isn't so bad, if it motivates them to keep trying out different ideas in new contexts, and leads to even more great stuff that's never been done before, or even just re-implementations of old ideas that aren't as ugly as they used to be the first time around.

So many "modern" user interfaces are such cargo cult carbon copies of each other (like tabs along just the top edge, or that way "flat" is such a big fad these days), that it's easy to get the impression that anything slightly different is actually original.

Back in the day, we had no choice but to draw "flat" user interfaces, because all we had was black and white, and moving the cursor across the screen was uphill both ways!

Looks like it doesn't work very well on Windows Machine.
Side tabs are great, because text is wider than it is tall, so you can fit a lot more of them on the screen, to manage more windows.

But why restrict yourself to the top edge, the bottom edge, one side or the other, when you can allow the user to drag the tabs around to any place along any edge that they want? I am perplexed that all tabbed user window frames don't allow this useful and obvious feature, after all these years.

Also, tabbed windows work very nicely with pie menus, and tabbed frames plus pie menus are an excellent combination for window managers and web browsers.

I implemented side tabs in a commercial product in 1988, for UniPress (Gosling) Emacs 2.20 running on the Sun NeWS and SGI 4Sight window systems, and I used them for the HyperTIES hypermedia browser and authoring tool that I developed with Ben Shneiderman at the University of Maryland Human Computer Interaction Lab.

HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS HyperTIES is an early hypermedia browser developed under the direction of Dr. Ben Shneiderman at the University of Maryland Human Computer Interaction Lab. http://www.donhopkins.com/drupal/node/101

Designing to Facilitate Browsing: A Look Back at the Hyperties Workstation Browser By Ben Shneiderman, Catherine Plaisant, Rodrigo Botafogo, Don Hopkins, William Weiland. http://www.donhopkins.com/drupal/node/102

Here's some stuff about it from Wikipedia:

https://en.wikipedia.org/wiki/Tab_(GUI)

The NeWS version of UniPress's Gosling Emacs text editor was the first commercially available product to pioneer the use of multiple tabbed windows in 1988. It was used to develop an authoring tool for the Ben Shneiderman's HyperTIES browser (the NeWS workstation version of The Interactive Encyclopedia System), in 1988.[2][3] HyperTIES also supported pie menus for managing windows and browsing hypermedia documents with PostScript applets. Don Hopkins developed and released several versions of tabbed window frames for the NeWS window system as free software, which the window manager applied to all NeWS applications, and enabled users to drag the tabs around to any edge of the window.[4] HyperTIES was a "hypermedia" browser, a term first used by Ted Nelson in 1965. The first "web" browser came out later in 1990,[5] and the term "World Wide Web" was not invented until 1990.[6]

HCIL Demo - HyperTIES Authoring https://www.youtube.com/watch?v=hhmU2B79EDU

Here's another different application of tabs that I developed on NeWS, a visual PostScript programming interface.

The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines Written by Don Hopkins, October 1989. University of Maryland Human-Computer Interaction Lab Computer Science Department College Park, Maryland 20742 http://www.donhopkins.com/drupal/node/97

Also, here's a video of an even more general implemented of tabbed window frames with a pie menus based window manager, that I implemented at Sun Microsystems for The NeWS Toolkit 2.0:

http://www.donhopkins.com/home/movies/TabWindowDemo.mov

Here is the source code in PostScript for a few different implementations that I gave away for free back in the 80's and 90's:

This is the original version for NeWS 1.1 that shipped with UniPress Emacs, and that I used for the HyperTIES hypermedia browser and authoring environment, which is demonstrated in the video at