This is still the header! Main site

About Browser Tabs

2021/07/30

A short timeline

They kinda made sense originally. After all, the Windows taskbar has a lot of tab-like entities already; instead of open web pages cluttering this, it's nice to have The Browser Window that has yet another level in the hierarchy.

Following this though... multiple things happened:

There are just enough pictures on the internet showing how the "tab" interface becomes impressively useless once you have enough of them. And yet... we haven't actually seem to have invented anything smarter.

A solution?

Here is a neat solution: the Vertical Tabs Reloaded extension! (Well, for Firefox at least; other browsers surely have similar solutions.) It looks something like this:

screenshot showing a Firefox window, with a column of tabs stacked on the left

It makes a whole lot more sense to stack tab titles vertically, since this way you can actually read them, instead of having to rely on site favicons. Meanwhile, computer displays ended up being 16:9 or 16:10 anyway, and a full screen browser isn't really using up all this horizontal space, so we can afford putting a sidebar to the left. (Most websites are either constant width, leaving a lot of room to be used on the sides, or entirely adaptive, making it really hard to read loooong lines.)

(... the screenshot is not overly realistic as it is showing a window taking up only a small part of the screen so that it fits this article... also, this indeed wouldn't work especially well on a 640x480 screen. We did end up having nicer screens in the past decade though.)

Tweaking the Firefox window

However, this is still just a UI added by an extension; it's in fact fairly hard to get modern Firefox to get rid of its original row of tabs. Nevertheless, doing this is useful: it helps counteract all the conditioning to keep glancing towards the top of the screen (instead of the new, more readable tabs). It's not impossible though: since the Firefox UI is itself just HTML and CSS, you can create a chrome/ directory in your profile folder, create a file called userChrome.css and add some code like this:


/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}/* leaves space for the window buttons */

#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}
        
(see a neat description here (warning: it's a Medium article with 87 tons of garbage Javascript, but the description itself is neat.)

This is post no. 22 for Kev Quirk's #100DaysToOffload challenge.

... comments welcome, either in email or on the (eventual) Mastodon post on Fosstodon.