Gdgtry

This post is now outdated, please see the update here:

http://gdgtry.com/2011/01/thinning-down-firefox-4s-tab-bar-2/

If you’ve read my rant on window layout in a widescreen world you’d know that I dislike wasted vertical space in my window layouts.

FireFox 4 beta has just been released and they haven’t solved my pet issue… that silly title bar. Just look at the wasted screen real estate:

FireFox 4's Tab Layout

However, thanks to FireFox’s flexibility, the addition of a few lines to one file can solve the problem! Simply adding the following below the @namespace line:

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

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

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

To your userChrome.css file, and you now get this wonderful layout:

FireFox 4 with a better tab layout

Hooray!

The userChrome.css file is located in the following locations:

XP: C:\Documents and Settings\<user>\Application Data\Mozilla\Firefox\Profiles\<profile>\chrome\
Vista\7: C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\

A note: This “fix” will look bad if you have FireFox set to not display that tab bar when you only have a single tab open. Just set FF to always show that tab bar to resolve the issue (FireFox Button > Options > Tabs > Always display tab bar).

EDIT: I changed a line in the navigation toolbox from margin-right to padding right. Using padding right gives a better look.