Tabs in Firefox 4 (aka, I can’t believe it’s not Chrome)

First up, if you’re not sure how, Lifehacker has a great reference on where to find your userChrome.css file.

One of the things I love about Google Chrome is that it shows all the tabs at once – even if it has to get really squishy. By default, Firefox limits them to 100px wide, then starts scrolling. Since Firefox 2.0, you’ve been able to use browser.tabs.tabMinWidth to disable this. As of Firefox 4.0b2, however, this functionality has been moved to userChrome.css. Add the following CSS to your userChrome.css to make it act the same as Chrome:

.tabbrowser-tab[fadein]:not([pinned]) {
    min-width: 1px !important;
}

Another great feature of Chrome is having the tabs in the title bar, as it reduces wasted space. Again, you can get the same functionality very easily with Firefox 4, by adding the following to your userChrome.css:

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

#appmenu-button {
    padding: 3px 18px 3px 18px !important;
    margin-left:3px !important;
    background-color: rgba(54, 121, 166, 0.2) !important;
}

#toolbar-menubar {
    margin: -25px 100px 5px 100px;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar {
    margin: 0 125px 0 95px;
}

Note that I’ve tweaked this for Windows 7 – you may need to alter the values for other platforms. Feel free to post your tweaks in the comments!

As a bonus, here’s a screenshot of these tweaks in action – lets play “guess which websites Gary has open”.

UPDATE: 2010-09-08: Firefox 4 beta 5 changed how this worked a little bit, so I’ve updated the userChrome.css code.