Gee's Blog World: Make Firefox 4's UI slimmer than Google Chrome

Monday, July 19, 2010

Make Firefox 4's UI slimmer than Google Chrome - no add-ons required!

Since the release of the Firefox 4 beta, I've been happily using it as my default Web browser once again. Google Chrome had been my primary browser for quite some time, but Firefox 4's improved speed and the fact that it can do three things I've wished Chrome could do for ages have won me back.

The three things? A real download manager (plus great add-on options like DownThemAll and Automatic Save Folder), being able to right click an image and set it as my wallpaper, and the euphoria-inducing ability to copy and paste in our CMS once more (with Chrome, you have to right click, paste, paste into a pop-up window, then click OK -- it's a security thing, supposedly, but rather cumbersome).

One thing I don't like about Firefox 4 is that big, orange button and all the wasted space it creates along the top. I like Chrome's minimalist UI -- and with Firefox's awesome array of customization options it's easy enough to mimic without a theme or addon!

All I did was add a few lines to my userchrome.css -- using Sebastian's ugly button removal code as a starting point. Here's my code:

#appmenu-button-container {
width: 92px;
position: fixed !important;
}
#appmenu-button {
padding: 3px 8px 3px 8px !important;
margin-top:0px !important;
background-color: rgba(200, 200, 200, 0.4) !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 95px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 98px !important;
padding-top:1px !important;
padding-right:98px !important;
}

.tabbrowser-tab {
height: 20px !important;
padding-right: 4px !important;
}
.tabbrowser-strip {
height: 20px !important;
}

Basically, I've trimmed a few pixels here and there and made two adjustments via customize > toolbar layout. To the right side of the tab bar, I added a flexible space -- to keep the Windows minimize/restore/close buttons from overlapping any of Firefox's UI elements.