Hide or move the orange button in Firefox 4 (updated)

I've been a long time fan of Firefox UI changes, I'm generally against the opinion "OMG CHANGE!!". But this time I kind of do agree about certain UI changes are poorly implemented:

http://groups.google.com/group/mozilla.dev.apps.firefox/browse_thread/thread/071db60ef8baae1e/9f0dee2149f4e0fb

On the amazing plus side, Firefox is always completely hackable. No other browser is even on the same playing field (and god knows I've been trying with Chrome at work because of it's ability to use PKI certificates).

To each their own, but for me the Rainmeter one is too loose, and Sebastian's is too tight - I like to be able to grab onto a couple pixels on the top to move the window around if necessary. This works best for me:

#appmenu-button { padding: 1px 7px 2px!important; margin-top:0px!important; background-color: rgba(0, 230, 230, 0.4)!important; }
#appmenu-button-container { position: fixed!important; }
#navigator-toolbox[tabsontop="true"] #TabsToolbar { padding: 1px 98px 0 80px!important; }
.tabbrowser-strip { height: 22px!important; }
.tabbrowser-tab { height: 22px!important; padding-right: 4px!important; }
#toolbar-menubar { margin: -22px 98px 2px 85px;}

You can change the rgba value of #appmenu-button to suit your color preference, and make sure to insert a "space" item (using Customize toolbar buttons) right after the upper right "List all tabs" or "Group your tabs", just before the minimize button. On Windows, this works brilliantly for me.

The orange button is pure ugly. I don't understand why they implemented it in that style. Spewboy's Strata40 has so much better buttons. In fact, every one of all those styles he gives you is better than the real 4.0 orange button.

Uh... my Firefox directory doesn't have a Chrome folder. I opened it from Troubleshooting Information like the article said. What gives?

Again, though, I must ask: if you don't like the big orange button, why not just click the button, go to the "View" menu, and click "Menu Bar" under the "Toolbars" submenu? That's what I did, and it works just fine. Or am I missing the point?

i've shrunk the menu button, made it translucent, and fixed the problem in which when you filled the tab bar, they were behind the windows buttons of minimize, maximize and close.


#appmenu-button {
padding: 3px 8px 3px 8px !important;
margin-top:0px!important;
background-color: rgba(200, 200, 200, 0) !important;
}
#appmenu-button-container {
position: fixed!important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 81px !important;
padding-right: 110px !important;
}
.tabbrowser-strip {
height: 22px!important;
}
.tabbrowser-tab {
height: 22px!important; padding-right: 3px!important;
}
#toolbar-menubar {
margin: -22px 98px 2px 95px;
}

An alternative that plays nice with maximised and full-screen modes, also if Tabs On Top is turned off.

#appmenu-button {
padding: 2px 8px !important;
margin-top:0px!important;
background-color: rgba(0, 0, 230, 0.2) !important;
}
#appmenu-button-container {
position: fixed!important;
}
.tabbrowser-strip, .tabbrowser-tab {
height: 20px!important;
}
#toolbar-menubar {
padding-left: 78px !important;
padding-right: 98px !important;
}
#navigator-toolbox[tabsontop="true"] #toolbar-menubar {
margin: -23px 0px 1px !important;
}
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #toolbar-menubar {
margin: -21px 0px 0px !important;
}
#navigator-toolbox[tabsontop="false"] #toolbar-menubar:not([inactive]) {
margin: -21px 0px 1px !important;
}
#TabsToolbar {
margin-left: -4px !important;
}
#navigator-toolbox[tabsontop="true"] #toolbar-menubar[inactive] ~ #TabsToolbar:not([inFullscreen]) {
margin-top: -3px;
padding-left: 78px !important;
padding-right: 98px !important;
}
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #toolbar-menubar[inactive] ~ #TabsToolbar:not([inFullscreen]) {
padding-left: 77px !important;
}

I don't want the Firefox button so I'm now using this: It's a variation of Sam J's one. Maybe some of the code can be removed, i don't know, but it works.

#appmenu-button { display:none !important; }
#appmenu-button-container { position: fixed!important; }
#navigator-toolbox[tabsontop="true"]
#TabsToolbar {padding-top:1px !important;padding-right:108px !important;}
.tabbrowser-strip { height: 22px!important; }
.tabbrowser-tab { height: 22px!important; padding-right: 4px!important; }
#toolbar-menubar { margin: -22px 98px 2px 85px;}

I've tried this at home on my Windows 7 machine and it works perfectly!

However, I'd like the tabs next to the orange button at work, where I use Windows XP, as well. The hack actually works, the tabs are put on the window border next to the orange button, but now it's very difficult to find a spot where I can actually click a tab. On top of that, the minimize-maximize-close buttons don't work anymore.

Is this simply because of Windows, is it a bug in Firefox or is there a possibility this could be fixed with yet another userChrome-based hack? I sure hope someone can take a look at this, because it looks great!

I'm running Beta 6, and the original hack still works for me.

all these css hack only work when Aero is enabled. Does anyone have a fix for disabled aero?

Thanks to Daws 14th. It's the perfect solution on firefox beta 5&6

I changed to using margin-top: -4px; in #navigator-toolbox[tabsontop="true"] so that it would let me run the cursor along the top and click to change a tab. Otherwise you're left with a 1px border which is really kinda annoying.