Since 2006 all major browsers have had ‘tabs’ that allow you to have multiple webpages open in a single window. This greatly improves the user experience, but as soon as you have more than 10 or so tabs open you run into a pretty serious problem…

Is this really the best design?

With more than just a handful of tabs open, you can no longer see the title of the page and you don’t know which pages you have open (you have to click them all to see what’s what).

One very reasonable solution is to have the tabs laid out VERTICALLY. Firefox has a great add-on called “Tree Style Tab” which I’ve been using for years and greatly improves my browsing productivity. Most of us have widescreen monitors these days and webpages often have blank space on the margins anyways, so the placement of tabs on the side makes perfect sense.

Does this not make much more sense?

Firefox add-on available here: https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/

Chrome also has some add-ons to do this kind of thing but I have not found any that work as well as Tree Style Tab for Firefox. Edge will get this feature natively soon: https://www.theverge.com/2020/3/30/21199819/microsoft-edge-vertical-tabs-feature-chromium

Now when you first install the add-on you’ll still see the horizontal tabs like this:

You can remove those tabs to reclaim some screen space by doing the following.

First got to about:config and make sure that toolkit.legacyUserProfileCustomizations.stylesheets is set to true .

Make sure this is true

Then in the Help menu click on Troubleshooting Information.

Click on “Open Folder”.

Then create a folder called “chrome” if one does not already exist (“chrome” refers to the GUI, nothing to do with the browser from Google…):

Then create a file userChrome.css in the chrome folder.

Make sure that file name extensions is checked (in Windows)

to get the file to be recognized as a css file. Then add this text to the file:

/* hides the native tabs */

#TabsToolbar {

visibility: collapse;

} /* space for the window buttons */

#nav-bar {

margin-top: -8px;

margin-right: 0px;

margin-bottom: -4px;

}

Restart Firefox and enjoy your vertical tabs! Please comment if you have trouble getting it to work.