Want smaller tabs?

While playing around with Firefox 4 testing builds, I found myself being unable to set a minimum tab width in the way it was working with FF 2 or 3 where you could set the config variables:

• browser.tabs.tabMinWidth for the minimum width of tabs before adding the scrolling ability

• browser.tabs.tabMaxWidth for the maximum allowed width for a single tab.

In current "Minefield" builds of Firefox 4, these configuration variables simply do not work any longer and that's something I found disturbing, because the default (and now apparently hardcoded) limit for the minimum width of 140 pixels is way to high when working with lots of tabs.

Solution:

The values can be overridden in userChrome.css with the following code:

.tabbrowser-tab:not([pinned]) {
  max-width: 250px !important;
  min-width: 40px !important;
}

See this issue for reasons why the config variables do no longer work. They were recently removed from the code and possible solutions require userChrome.css editing.

So far, the only way to fix this was to disable tab animations in Firefox 4 by setting the browser.tabs.animate configuration variable to false. However, many people like the animations and would probably love to keep them while still being able to reduce the minimum tab width.

As described in this bugzilla report and submitted in the comments section of this article, there is a solution for the animation issue:

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

Add the code above to your userChrome.css and you should be able to use tab animations together with the modification for the default minimum and maximum tab width.

Credits:

Tip for fixing the tab animation issues submitted by anonymous comment author.