Absolutely No Machete Juggling

I love having the latest and greatest version of software that I enjoy. Firefox 2 came out today, and contains a number of nifty features, most notably the form spellcheck. However, I also can't stand obnoxious graphics. Gradients, rounded corners, all of that stuff irritates me for some reason, because it reminds me that the graphics aren't being rendered using the native os widgets.

I like native widgets for desktop applications because I like consistency. I realize that Firefox is multi-platform, so it can't really use native widgets, unfortunately. I happen to be pretty anal about stuff being rendered correctly and looking consistent, so if Firefox isn't going to use pure native widgets, I at least it to look close enough to native that I'm not bothered by it when I use it.

To make matters worse, I use the Windows Classic theme in XP at work (and I run Windows 2000 at home on the Windows machine) because I don't particularly like the xp style. I realize part of this is me being old-fashioned, but I find too many bright colors distracting. I find that keeping widgets and controls in a grayish color is easier on my eyes. To prove it's not simply a matter of me being "anti-change", I loved the improvements Windows 2000 made over Windows 98.

I just have a certain way I like the controls of an application to look, and as of Firefox 2's release it became pretty clear I wasn't going to have it by default in firefox.

However, if you're like me (and you almost certainly are not), you'd like to use Firefox 2 without having it look all ridiculous and snazzy. Well, here's how.

Step 1: Windows Classic Menus

As of Firefox 1.5, the Mozilla team decided that the windows default theme needed to look better with xp-style. It was apparently difficult to tell from the OS if the user was running in "Windows XP Style" mode or "Windows Classic" mode, so they decided it was more important to look right for XP Style. This was the right decision, since most XP users run this style, but it draws my menus (which should be slightly 3D) as ugly and flat.

To fix this, go here.

The link provides instructions on how to modify your userChrome.css file to give menus the "classic" look.

Another link is here. This one is more detailed, but still not quite what I wanted.

I tweaked this a bit until I got it closer (though still not perfect) to menus rendered using native Windows widgets.

/* Classic Menus */
.menu-accel,
.menu-iconic-accel,
.menu-text,
.menu-iconic-text {
 margin-top: 2px !important;
 margin-bottom: 3px !important;
}
 
.menu-iconic-left {
 margin-top: 1px !important;
 margin-bottom: 1px !important;
 min-width: 12px;
 -moz-margin-start: 2px;
 -moz-margin-end: 2px;
}
 
menubar > menu {
 border: 1px solid transparent !important;
 padding-top: 0px !important;
 padding-bottom: 0px !important;
 margin-bottom: 0px !important;
 -moz-padding-start: 0px;
 -moz-padding-end: 0px;
}
 
menubar > menu[_moz-menuactive="true"] {
 background-color: transparent !important;
 color: MenuText !important;
 border-top: 1px solid ThreeDHighlight !important;
 border-right: 1px solid ThreeDShadow !important;
 border-bottom: 1px solid ThreeDShadow !important;
 border-left: 1px solid ThreeDHighlight !important;
}
 
menubar > menu[_moz-menuactive="true"][open="true"] {
 background-color: transparent !important;
 color: MenuText !important;
 border-top: 1px solid ThreeDShadow !important;
 border-right: 1px solid ThreeDHighlight !important;
 border-bottom: 1px solid ThreeDHighlight !important;
 border-left: 1px solid ThreeDShadow !important;
 padding-top: 0px !important;
 -moz-padding-end: 2px !important;
 padding-bottom: 0px !important;
 -moz-padding-start: 3px !important;
}
 
/* Classic Popups */
menupopup,
popup {
 border: 2px solid !important;
 -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
 -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow !important;
 -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow !important;
 -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
 padding: 1px !important;
 min-width: 1px !important;
 background-color: Menu;
}
 
popup[type="autocomplete"],
.autocomplete-history-popup {
 border-width: 1px !important;
 -moz-border-top-colors: ThreeDDarkShadow !important;
 -moz-border-right-colors: ThreeDDarkShadow !important;
 -moz-border-bottom-colors: ThreeDDarkShadow !important;
 -moz-border-left-colors: ThreeDDarkShadow !important;
 padding: 0px !important;
 background-color: -moz-Field !important;
}
 
menulist > menupopup,
.menulist-menupopup {
 border-width: 1px !important;
 -moz-border-top-colors: -moz-FieldText !important;
 -moz-border-right-colors: -moz-FieldText !important;
 -moz-border-bottom-colors: -moz-FieldText !important;
 -moz-border-left-colors: -moz-FieldText !important;
 padding: 0px;
 min-width: 0px;
 background-color: -moz-Field;
}
 
.tabs-closebutton-box {
   display: none !important;
}
 
.toolbarbutton-1, .toolbarbutton-menubutton-button {
   padding: 2px 3px !important;
}
.toolbarbutton-1[checked="true"], .toolbarbutton-1[open="true"],
.toolbarbutton-menubutton-button[checked="true"],
.toolbarbutton-menubutton-button[open="true"] {
   padding: 4px 1px 1px 4px !important;
}
 
.toolbarbutton-menubutton-button > .toolbarbutton-box,
.toolbarbutton-1 > .toolbarbutton-box
{
    max-width: 20px !important;
    text-align: center !important;
} 
 
.toolbarbutton-box
{
    max-height: 18px !important;
}
#nav-bar-inner
{
  margin: 0px !important;
}

This has been something I've had to do since Firefox 1.5, but Firefox 2 preserves it so I figured I'd mention it.

Step 2: Re-enabling "Classic" Look

The most unattractive (in my opinion) thing about the new firefox are all the curves and gradients everywhere. This looks nice on a theme that uses bright colors for backgrounds, but it looks dreary and awful (not to mention non-native!) with Windows Classic.

To fix this, simply install the theme "Winstripe FF Classic". You can find a link here.

This will do wonders in the way of de-uglying Firefox 2.

Step 3: Remove the Go Button

I hate the Go button. Previously, you could simply customize your toolbar to not contain it, but as of Firefox 2, it's apparently permanently attached to the address bar. Remove the go button and you lose the bar.

If you install the extension mentioned here, you can fix that.

Simply download the xpi file, then drag it from your file manager into Firefox, and it will install the extension. Then you can customize your toolbar and safely remove the Go button.

Step 4: Removing the X on each tab

I use middle clicking to open and close tabs, and I have no use for the little X. The close button used to be on the far right side of the tab bar, and you could simply ignore it or remove it. Now, however, the close button is on each tab. This wastes screen space, not to mention that the icon for the X looks stupid since I don't use an XP theme, and thus don't have a big red X for my close button anywhere else.

To fix this, install this extension.

UPDATE: Jake pointed out that the plugin Tabbrowser Preferences can do the same thing. In addition, you can use that plugin to fix the "horizontal scrolling" effect when you open too many tabs. Before, tabs would just get smaller and smaller (until they couldn't get smaller, and then they'd just disappear off the right side of the screen), but as of Firefox 2, opening 10 tabs or so will cause a horizontal scroller to appear. I liked it when the tabs shrunk more, and you can use the Tabbrowser plugin to set the "minimum width" for tabs. I set mine to something like 20, and now tabs shrink until they can't anymore.

That's it, Firefox 2 should now look basically like Firefox 1, in Windows Classic mode.