Saturday, November 22, 2008

Vertical Space Conservation in Firefox

Why Conserve Vertical Space
With the advent of widescreen monitors, vertical space on the desktop is at a premium. That is, we have more space in the horizontal direction than we have in the vertical direction. Thus, the conventional layout of an application GUI is not very suited for these widescreen monitors. To illustrate what I mean, let’s look at the default Firefox screen.

We see that the components of the window are laid out in a vertical stack. We have the menubar on the top, then the toolbar below it, then the bookmarks toolbar, then the webpage viewport and finally the status bar. However, when you’re surfing the web, the portion that you need to pay attention to is the webpage viewport. Especially with Web2.0 applications (like Facebook) the webpage itself will have a lot of controls which will take up a lot of vertical space. And on the other hand, a lot of horizontal space is wasted.

Would it not be nice if we can somehow shift all this controls taking up vertical space to occupy horizontal space? Unfortunately, that is not possible on Windows. (It is possible on KDE on linux but that going to be another post.)

However, in the specific case of Firefox, we can conserve some vertical space to our advantage.

The status bar has two cheif functions. One, it shows you a nifty little progressbar when a page is loading to show, well, the progress of the page load. It is good visual feedback when you’re waiting for the page to load. Second, when you hover over a link in the webpage it shows you the URL of the link so that you know what you’re getting into once you hit the link.

Now, there’s a great firefox extension knows as Fission. What Fission does is make your addressbar double up as a status bar. That is, the addressbar will show a progressbar when the page is loading and also the link URL when you hover. Voila, now you can hide the statusbar.

When using Firefox, how many times do you really use the menubar? Once you’ve made the initial settings, hardly ever. Why not hide it then. Hide Menubar lets you do just that. It hides the menubar. In case you do need it, you can show the menu bar by hitting ALT. Easy, simple.

This one is tricky and you may or may not like it. This is what it will look like.

What I did was – fireup bookmarks organizer and put all your bookmarks into a top level folder, called ‘Go’ here. Then right-click on the toolbar and customize. What many will be surprised to know is that you can now drag your bookmarks onto the toolbar. The bookmarks toolbar will appear empty after this. You can add separators around ‘Go’ to make it more distinctive. Voila, you can hide your bookmarks toolbar too now.

The reason that a lot of users will not like it is because it will now take an additional click to do anything. But again, in this Web2.0 age, you have to fireup a web application only once, don’t you?

(Alternately you can also drag the bookmarks onto the menubar. That way, you can have both the menubar and bookmarks visible and still use some horizontal space.)

That’s All Folks
Yes, we’re done. This is what firefox looks like now, with loads of extra webpage viewing space!


  1. Doesn't hitting F11 practically do the same thing?

  2. @ Shanth - Yes and no. F11 hides, everything including the tab bar and the OS panel. Hiding the panel, systemtray etc makes navigation somewhat cumbersome, I think. Personally I wish F11 would at least not hide the tab bar. It's a pain to hit the upper edge of the screen every time you want to switch tabs.

    And it's personal preference after all. I just wanted to share something I do and find useful.

  3. Sahi yaar. Hide Menubar makes Firefox look a bit like Chrome. Just that the top window strip is still there and the tabs are below the address bar.

  4. @ Hussain - Chrome has a really nice no-nonsense user-interface that I like a lot. I think that was partly the inspiration to experiment with Firefox UI. It was really clever of chrome to put tabs on the titlebar, although they had to pay the price by using a very non-standard GUI toolkit to make it happen -- which is why we still don't have Chrome for Linux and Mac.

  5. @Vinod F11 doesn't hide the tab bar for me. I guess there's some option in about:config that's set differently for me. It does hide the panel, which can be pesky if you want to switch to other windows in between.

    Although, more than these tweaks and tricks, your post got me thinking we should actually develop some sort of a CSS standard, such that the layout can be delegated more to the client-side interface. It is an interesting observation about the availability of more horizontal real estate on the monitor.

  6. @ Shanth - Thanks for that tip about about:config. :) I now have a much better full screen view for Firefox. :)

    As for you second suggestion do you mean a CSS that will be respected systemwide. I mean, write one CSS and Word, Firefox, Acrobat, Photoshop, iTunes all obey it?

  7. And availability of more horizontal space is hardly an original observation. Why do you think M$ put their sidebar in Vista on the side? :)

  8. Vertical Tabs!
    Look it up.

  9. @Anonymous: thanks for the tip. I personally don't like vertical tabs for aesthetic reason. But yes, good tool to saver vertical space and use the horizontal one.