Firefox, OS X and lots of tabs

January 13, 2010

I’m what Alex Limi calls a tab power user. I always have a lots of open tabs in my Firefox. Right now it’s 38. Some of them are regular web apps that I never close (Gmail, Twitter, Facebook, etc.), some of them are websites that I’m currently using (project wikis, API references, etc.), and some of them are things I’ve opened for later reading (you might call them short-term bookmarks).

Clearly the standard tab bar in Firefox is completely impractical for this. There is, however, the Tree Style Tab extension which allows you to arrange tabs in a vertical tree at the left or right hand side of your browser window. Apart from the obvious advantages of being able to sort tabs in a tree, it also solves two simple visual problems: On modern widescreen displays you want to waste as little vertical space as possible. Moving the tab bar from a horizontal toolbar to a vertical sidebar therefore not only gives you more vertical space for the content window but also more space for the tabs. The latter is very important obviously when you have lots of open tabs.

There’s just one thing that’s always bothered me a bit about Tree Style Tab: The default theme on OS X may look nice but it wastes a lot of space by trying to make tabs look like, uh, tabs. It also doesn’t actually feel like a native OS X UI. Just consider iTunes, Apple Mail or other applications with a sidebar tree…

Enter SidebarStyleTab. This little extension I cobbled together earlier this week restyles your vertical tree style tab bar to look like a sidebar you know from other OS X applications (including the sidebar in Firefox itself). It’s not 100% perfect yet, but for me it’s a big improvement over the default OS X tree style tab theme. I might get around to fixing the few remaining UI quirks eventually, but I welcome others to beat me to it: the code is on GitHub.

SidebarStyleTab in action

SidebarStyleTab in action

P.S.: I think this is not the end of redesigning tabs in Firefox. This is obviously a much debated topic to which I might eventually add my 2 cents. But not today🙂

16 Responses to “Firefox, OS X and lots of tabs”

  1. Nick Says:

    Does this work with Firefox 3.6?

    • philikon Says:

      I haven’t tried it which is why I set the accepted version range for the add-on to 3.5.* only. Once I’ve tried it on 3.6 I’ll release an update that will accept Firefox 3.6 as well.

  2. Charles Says:

    I like FaviconizeTab. I ‘pin’ tabs that stay open to the far left side. Having 2 widescreen monitors, each with a firefox of it’s own I’m usually able to keep my tabs from wrapping… usually : ) I had to reboot a while back and firefox let me know I had 68 tabs. Instead of closing firefox normally, I kill the process, reboot, and firefox remembers where I was!

  3. Jeff Balogh Says:

    Here’s what it looks like in 3.6: http://skitch.com/jbalogh/nxcgi/sidebarstyletab-3.6

    I’m liking this! Things I’d like to see:

    * The selected tab in blue, as shown in the screenshot.
    * A little bit of text-shadow on the selected tab, for contrast and texture.
    * More highlighting when I’m hovering over a tab. The close box shows up, and the favicon brightens, but more response would be nice.

    I’ll try playing with the code, but I’m no add-on author. Thanks for this.

    • philikon Says:

      Hi Jeff, thanks for the feedback!

      So on Firefox 3.6 the selected tab isn’t blue? That’s bad. It definitely needs to be fixed.

      Good idea with the text shadow. The selected tab’s label originally has a text shadow but I removed it because it didn’t look right. Looking at other Mac apps that have a sidebar, I now see they do have a slight shadow, so I’ll try and emulate that.

      As for the hovering, I was actually trying to get rid of the favicon brightening. I would prefer if they were all at 100% opacity all the time. It’s just that the CSS rule I put in doesn’t seem to work and I haven’t figured out why yet. But just out of curiosity, what kind of “more response” would you like to see when hovering over a tab?

  4. philikon Says:

    Jeff,

    I see now why the selected tab is grey on Firefox 3.6. It must no longer have chrome://browser/skin/places/selected-focused-gradient.png which I used so that the selected gradient matches the one from the sidebar. Using -moz-linear-gradient would indeed be a better idea, though I’m unsure which colours to use. Finder and iTunes use a different blue than Mail.app and Firefox’s sidebar. Any thoughts?

    As for the shadow, I don’t think it has an x-offset in the native OS X widgets. It’s also not black. For me text-shadow: 0 1px #404040 looks pretty realistic.

    I’ll try to work out the favicon thing. I’m not entirely happy about the wandering close button either, but I prefer the current solution over having it there all the time. Let me know if you have a better idea🙂

    • Jeff Balogh Says:

      I like your text shadow.

      I found the gradients in http://hg.mozilla.org/mozilla-central/file/973dab910358/toolkit/themes/pinstripe/global/shared.inc.

      sidebarItemBackground has the muted blue, while sidebarItemFocusedBackground is the royal blue one. I think I prefer the muted blue, but I’d get used to either one.

      If you put the -moz-linear-gradient background after the chrome png background, it should do the right thing in 3.5 and 3.6. That’s the way it works in web pages, at least.

      It would be cool to have a pref for hiding the close button on hover. I use the middle button to close tabs, so I wouldn’t mind removing it.🙂

      • philikon Says:

        I’ve tested it on Firefox 3.6 now. I got the gradient working, but the border-top has disappeared and the spacing of everything has changed ever so slightly (for the worse). I’ve also had to adjust the font-size (fixed it to 11px now). Did you run into the same problems?

  5. Jeff Balogh Says:

    I noticed the font size seemed bigger, but I never saw it on 3.5 so the other issues didn’t bother me.

    One of my coworkers noticed another problem: some dark personas change the tab text color to white, which doesn’t play well with the light SidebarStyle background. Hopefully you can be explicit about the tab text color and it will override any personas wankery.

    • philikon Says:

      Thanks for the info about Personas. I’ve now set the font colour explicitly to black. Hope that will fix the problems. I don’t use Personas so I haven’t tested it. But explicitly setting it seems a good idea anyway just in case some other extension messes it up.

      I’ve just released SidebarStyleTab 1.2 which contains the Firefox 3.6 fixes and a two or three other minor improvements. As usual, addons.mozilla.org takes a while to update its caches so it should become available by the end of the day. Let me know what you think.

  6. philikon Says:

    I’ve just released SidebarStyleTab 1.3 on https://addons.mozilla.org/en-US/firefox/addon/58998/. Among others, it fixes the icon opacity nuisance.

    Note that it’s still primarily designed for Firefox 3.5. I wanted to push these fixes out before I get cracking on Firefox 3.6 support. Due to the many subtle differences between 3.5 and 3.6, the next release will *require* Firefox 3.6 anyway as I can’t be bothered to do cross-brother testing.


  7. […] said, I use Tree Style Tabs to organize my various tabs. Two weeks ago I started creating my own custom theme of the tree, modeling it after the trees we find in sidebars of various OS X applications (e.g. […]


  8. […] I made my case for why we need web browsers that are designed for today’s cloud apps. In parts 2a and 2b I have been exploring tabs, particularly how to deal with lots of them. And how a simple […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: