Firefox 4 introduced the Firefox Button as a way to save space by eliminating the menu bar. The Firefox Button gives you access to a redesigned menu much like the ‘wrench’ button in Chrome. It’s a good idea but I always felt it needed some improvement. Below is a screenshot taken in the Aurora Release of Firefox 6 showing the normal layout:
A couple things that bother me about the normal layout in regards to Mozilla’s theory that this would increase screen space. First, the button is huge compared to the wrench button 
in Chrome. Second unless the window is maximized the button sits by itself on the upper left corner across form the window control buttons on the upper right corner. In between there is a bunch of dead space. We did write about a tweak not long ago which would move the tabs in between the Firefox Button and the window controls, more on this in a bit.
During my daily reading in the Firefox Builds Group, I came across Move Firefox Button add-on. This add-on does a couple things, first off it changes the Firefox Button into an icon. Second as the name implies, this icon is Movable via the Customize… option. Third since the button is now on the tab bar or can be moved on to the navigation bar, it will show up in Full Screen mode (you will need to use this tweak to keep the tab and location bars displayed). After installing this add-on in Aurora and restarting this what the screen looks like:
So the ‘Aurora’ button has been replaced with an icon and moved down to the tab bar. Again though, there is all this dead space up on top if you do not have your browser window maximized. So, that brings me back to that tweak that we posted earlier this month. For Windows users, the Firefox 4 Move Tabs To Top Tweak works well this add-on…but with a minor tweak.
The original CSS code for this tweak took in account that the Firefox button was 80px wide and was not moveable. So if you use the original CSS from that tweak this is what you are going to end up with when you restart:
This does however give you a prospective of just how big the Firefox button was with all that empty space to the left. So if you want to have your tabs all the way at the top and have the moveable Firefox button too, use this snippet of CSS in your userChrome.css:
/*Setting FF4′s Tabs to Always be in the Title Bar.*/
#main-window[sizemode=normal][tabsontop] #appmenu-button{padding-left: 8px !important;padding-right: 8px !important;height: 22px !important;}
#main-window[sizemode=normal][tabsontop] #toolbar-menubar[autohide="true"]{ margin-top:-20px;
-moz-padding-start:80px!important; }
#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
-moz-padding-start:0px!important; -moz-padding-end:110px!important; }
The only change I made was on the last line of the CSS which was to change the value for “-moz-padding-start” from 80px to 0px. The Wiki has already been updated to reflect this change.
Movable Firefox Button works on Firefox 4 through the most current Nightly builds of Firefox 7 for all OS.
Another option is to use the Hide Caption Titlebar Plus addon…
On XP, the min/max/close window controls are hidden. Everything else is layed out perfectly.
Is there a CSS tweak that can bring the controls to the foreground (or narrow the “tab bar”)?
Ah…. Found my own answer. I took the CSS from the “Tabs Always in Toolbar” add-on, and hacked the values to suit XP.
——
#main-window[chromemargin^="0,"][sizemode="normal"]:not([inFullscreen="true"])[tabsontop="true"] #navigator-toolbox:not([customizing="true"]) :-moz-any(#TabsToolbar,#toolbar-menubar) {
-moz-padding-start:0px!important;
-moz-padding-end:60px!important;
}
#main-window[chromemargin^="0,"][sizemode="normal"]:not([inFullscreen="true"])[tabsontop="true"] #navigator-toolbox:not([customizing="true"]) {
margin-top:-20px !important;
}
#main-window[chromemargin^="0,"][sizemode="normal"]:not([inFullscreen="true"])[tabsontop="true"] :-moz-any(#appmenu-button-container,#titlebar-buttonbox-container) {
position: relative !important;
}
#toolbar-menubar:not([autohide="true"]),
#TabsToolbar[tabsontop="true"],
#navigator-toolbox[tabsontop="false"] > #nav-bar,
#nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
#navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
}