Firefox 4 - Slim(mer) UI

UPDATE: Firefox 4 Beta 9 now has the "slim" title bar by default, making this post redundant. It also works seamlessly as well.

I liked Firefox 4 Beta 1... The simplified interface is kinda clean. But many noticed that there were just too many redundant pixels lying around, taking up your browser space. Thankfully, there was a hack that trims down all that unused space, thanks to the guys at DownloadSquad, who took the hack from another guy, who also took it from another guy. We'll go step by step, with my own modified code.

1. Locate your Profile directory -- click Help > Troubleshooting Information then Open Containing Folder
2. Now navigate to the Chrome directory
3. Copy userChrome-example.css into the same folder
4. Rename your copy to userChrome.css
5. Open userChrome.css with Notepad (or your text editor of choice) and dump the following code in it:

#appmenu-button-container {

position: fixed !important;

}

#appmenu-button {

padding: 3px 5px 3px 5px !important;

margin-left:5px !important;

}

#navigator-toolbox[tabsontop="true"] #TabsToolbar {

padding-left: 83px !important;

padding-right:112px !important;

}

#navigator-toolbox[tabsontop="true"] menubar{

padding-left: 85px !important;

}

#navigator-toolbox[tabsontop="false"] #TabsToolbar {

padding-left: 5px !important;

padding-right:5px !important;

}

#navigator-toolbox[tabsontop="false"] {

padding-top: 24px !important;

}

Save it and restart Firefox. It should look like the screenshot posted above. Note that the hack isn't complete; it might break under certain conditions, but for the most of it, I think there won't be many problems.

Should you want to revert back to the original interface, simply delete userChrome.css.