Make Firefox 4's Tab Bar Take Up Less Space

Chrome made a dent on the browser wars (aside from its touted page loading speed) because of its minimalist interface. Interface elements presented in a way that maximized screen real estate—especially moving the browser tabs to the window title.

You'd think that Mozilla would've come up with something similar for the Firefox 4 beta. Turns out that wasn't the case. Yes, the browser's title bar is now smaller, but the tabs are still below it. Luckily, the latest version of Mozilla's browser lets users work some CSS magic to push Firefox's tabs upwards. All it involves is adding the following code:

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 80px !important;
margin-right: 105px !important;
padding-top: 2px !important;
}

#appmenu-button{
padding: 3px 5px 3px 5px !important;
height: 20px !important;
}

...to Firefox 4's userChrome.css file. Instructions on how to locate the file—and an important warning—are available on Gdgtry.