Customizing FireFox 4 Tabs. Small icon on inactive, Hover and Active Expanded

FireFox 4 added CSS 3 support to their chrome interface. As I typically have 50+ tabs open at one time and hate horizontal scrolling in the tab bar I wanted to maximize the space available. The style below makes all inactive tabs 1px wide showing only the favicon. Hover and Active tabs get expanded to 150px wide allowing you to easily tell what tab you are currently on as well as being able to hover over inactive tabs showing the title information.

To accomplish this, edit –> If C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILENAME]\chrome\userChrome.css with the code below. If the file doesn’t already exist, create a new file.

@namespace url(""); /* set default namespace to XUL */

/* DRR Make tabs small */

/* Shrink tab text by 20% */
.tabbrowser-tabs .tab-text {
font-size: 80% !important;

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

.tabbrowser-tab[selected="true"] {
width: 150px !important;

/* If the tab isn't selected, but is being hovered on, show the text, make it min 128px wide 
.tabbrowser-tabs *|tab:hover {
width: 150px !important;

/* DRR Make Tabs small end */