nullstream weblog - Dress Up Firefox for Vista

« Cell Phone Nation | C64 As The High End »

Dress Up Firefox for Vista


March 9, 2007 02:37 PM PST

In the early days of Mozilla it was pretty ugly. When running it on XP it just didn't look like it belonged. It had odd widgets and a non standard scroll bar etc. Early Firefox cleared it up some, and modern Firefox looks right at home in XP. That is until you try and run it on Vista. It just doesn't fit in. Bring it up along side Vista IE 7 and it looks down right sad. Since I'm finally getting around to reacquainting myself with Vista, I decided to dig around to see if I could pretty it up a bit.

Actually this all started by me trying to improve IE. I had not yet installed Firefox on my Vista box since I didn't want to put too much stuff on their in case I decided to re-install again (it's a long story).  I decided to take a look at what add-ons were available for IE7 now, since I had not checked in a few months. My goal was to see if I could get the functionality up to par with Firefox. I need an ad blocker, flash blocker etc. Also I was looking for some way to get 'tab previews'. Vista has this cool feature where you hover over the items in your task bar and you get a pop up thumbnail of the app. I've never figured out why they didn't do the same thing for the tabs in IE (I can do it in Firefox). It seems only natural and consistent with the rest of the UI. I was pleased to see there are a lot of add-ons now. Last time I checked there were about 5. I did manage to find a few things like IE Pro which has an ad blocker and a bunch of tab related stuff. Also ieSpell which gives IE spell checking capabilities (like Firefox 2.0). I didn't find anything like a flash blocker, or tab previews, and a way to get new tabs created from the search field, but certainly nothing as cool as Google Browser Sync. I got bored and installed a fresh copy Firefox.

As I mentioned at the beginning, stock Firefox looks dated on Vista. So I did some digging and found a very nice Vista style theme. To my surprise it made Firefox look a lot better than IE7. (I did a quick search and could not find any themes for IE7, so for now I guess I'm stuck with the current look). After installing my favorite extensions, I added in the tab preview feature IE lacks, and also found a really nice equivalent for IE7's quick tabs feature.

Here is my current Vista Firefox config. Note the little preview thumbnail I got by hovering over the last tab (the mouse cursor doesn't show in the screen grab).


Compare that with Vista IE 7. I don't understand why they went with lightly colored toolbars and tab pane. Other apps like the file explorer, game explorer, and calendar have a darker blue themed toolbar, while some like Media Player, movie maker and Photo Gallery have a nearly black toolbar.


This is all personal preference of course, but I think it certainly looks more at home on Vista than stock Firefox.

Here is a comparison of the two quick tabs features in action.



Here are the goods: (I've tweaked my toolbars a bit from standard per my preference. I have also adjusted the extensions a bit.)
Vista Black 1.0 theme
Tab Preview
Tab Catalog

In Tab preview I prefer to turn down the thumbnail size a bit to 30%
In Tab Catalog I turned on the feature to assign shortcut keys to the thumbnails, and stretched out the 'show the list' delay to 500mS. I put a button for it on my toolbar, but I probably won't use it. The default hotkey is F8 this can be changed, but I have not been able to get it to work with ctrl+q which is the default in ie7. But the coolest way is to use the option to click both left and right mouse buttons to bring it up.

Advanced Tweak:
Another feature Firefox and IE7 have in common is a list of all open tabs. IE7 puts a down arrow on the left of the tab bar next to the quick button. Firefox puts theirs on the right of the tab bar. I prefer it on the right, but if you want to change it to match IE, the tweak is here. Firefox does not have a shortcut key for the tab list, while IE7 does (ctrl+shift+q). I really want a short-cut key. With a short-cut I can switch between tabs with no mouse, using the cursor key and enter, just like I do for apps with Taskswitch Pro.

To get a shortcut mapped you need to install the keyconfig extension. It can be a bit tricky to install, you can also grab it here. Remember you pretty much have to reboot firefox after every extension install.
1. Open up the keyconfig menu (tools->keyconfig) or ctrl+shift+F12.
2. Click 'Add a new key'
3. Name it 'List All Tabs'
4. Enter this chunk of code: gBrowser.mTabContainer.mAllTabsPopup.showPopup();
5. Hit ok.
6. Now find it, click on it, and enter your desired shortcut key by clicking in the edit box at the bottom, hit your favorite keystroke and click apply.

Reboot Firefox again. You should be good to go.
Comments (2)

Paul, March 9, 2007 11:43 PM:

Actually, I don't like the first Firefox screenshot: the window border is translucent (which ruins any color scheme the rest of an app uses), the menu bar and tab bar use the Vista app look, and the Firefox button bar between them is yet a different a different color. It's too garish.

Here's Camino, a Firefox based browser. It's much, much cleaner and consistent looking.

john, March 10, 2007 01:18 AM:

You're not going to be able to do much about the translucent border when you run on Vista.

The button bar color and look actually match a lot of the Vista windows. It's usually not sandwiched between to black bars though. Luckily you have plenty of choices out there for Firefox theming.

All links will be marked with the nofollow tag, making them useless for search rankings. Any posts containing spam URLs will then be deleted.