I have no idea what the folks at Mozilla were thinking as they designed the Firefox 4 user interface, but they’re wasting a lot of space and rubbing it in the face of their users. I know that may seem a bit harsh, but I’m a bit OCD when it comes to user interfaces.
In case you’re not sure what I’m talking about, the Firefox 4 Beta UI includes a new tab-on-top feature similar to the Chrome and Opera web browsers. The Mozilla team also decided to forego the seemingly ubiquitous menu bar and opted instead for a bright orange Firefox labeled menu button. I don’t have any problem with this because a single menu button clears up an awful lot of space.
The problem lies with the location of the Orange Button. Rather than place the button in line with the tab navigation row, the Mozilla UI designers decided to give the button it’s own row despite leaving a similarly sized space at the beginning of the tab navigation row below it as you can see in the following screenshot.
Normally this sort of design feature wouldn’t be a huge problem, but the increased usage of widescreen monitors and netbooks places vertical viewing space at a premium. Now, this feature used to be easily fixed in the previous beta iterations. All that was needed was the creation of a userChrome.css file within a user’s firefox profile from the userChrome-examples.css that is already there. By adding the following code,
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 18px 3px 18px !important;
margin-top:3px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 95px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 90px !important;
padding-top:1px !important;
padding-right:120px !important;
}
the Firefox UI could be manipulated in a more pixel efficient manner by placing the Orange Button in the space adjacent to the first tab.
Sadly, the recently released Firefox 4 Beta 5 breaks this CSS fix. I’m still tinkering trying to find a new way to collapse the button, but until then Beta 5 is officially a space waster.
Hey, try this:
#appmenu-button {
padding: 1px 7px 2px!important;
margin-top:0px!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;
}
Your welcome
Tweaked it a bit:
#appmenu-button {
padding: 3px 18px 3px 18px !important;
margin-top:0px!important;
}
#appmenu-button-container {
position: fixed!important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 91px !important;
}
.tabbrowser-strip {
height: 22px!important;
}
.tabbrowser-tab {
height: 22px!important; padding-right: 4px!important;
}
#toolbar-menubar {
margin: -22px 98px 2px 95px;
}
You’re welcome, once again
THANK YOU!! Ahhh. That’s much better.