Change Firefox's Minimum, Maximum Tab Width

I just stumbled upon the Firefox extension Custom Tab Width which adds functionality to Firefox to change the minimum and maximum tab width.

The default values are a minimum width of 100 pixels and a maximum width of 250 pixels. Custom Tab Width adds a small configuration window to Firefox where users can change the maximum and minimum tab width.

The idea here is to either make more room for tabs on the tab bar without having to scroll, or to display less at the same time but more of the site's title.

Note: Mozilla changed things in recent versions of Firefox. Skip to the "Update" part of the guide below for recent instructions.

I did seem to recall however that this setting was available in the advanced configuration of the web browser. I'm not sure if I have published a guide in the past about this. I think I did but I cannot find it.

Firefox offers two parameters to change the minimum and maximum tab width of the browser. To change these parameters users need to type about:config in the Firefox address bar and hit enter. This opens the advanced configuration. Users who never opened the configuration before see a warning page before the configuration is displayed to them.

The configuration holds many parameters and it is usually a good idea to use the filter at the top to display only those parameters that need to be edited. Enter browser.tabs.tab in the filter form, this should display the following parameters:

browser.tabs.tabMaxWidth defines the maximum width of each individual tab in the browser. The default value is set to 250 pixels.

browser.tabs.tabMinWidth defines the minimum width of each tab in the Firefox web browser. The default value is set to 100 pixels.

Why is there a minimum and maximum value for the tab width? Firefox changes the size of the tabs dynamically based on those values. A few open tabs are shown with 250 pixels which is reduced gradually until the minimum width 100 is reached.

A good value for the minimum width parameter is 25 which reveals enough so that the tabs can be identified. Some users may want to reduce the minimum width so that only the favicon of the site is displayed. These users need to reduce the minimum width further and test the setting with dozens of open tabs.

Update 2: Mozilla added the preference browser.tabs.tabMinWidth again to the browser. You can use it to set a minimum tab width before scrolling is enabled. The default is set to 76 in Firefox 58 Nightly.

Update:

The parameters are no longer working in Firefox 4 or newer versions of the web browser. The only available option is to use CSS to define the maximum and minimum tab width.

The following entries need to be added to the userChrome.css file in the Firefox profile folder:

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

The easiest way to find the right profile directory is to enter about:support in the address bar to load the page.

It list, among other things, a button to open the active profile directory. Open the Chrome subfolder and look for the file userChrome.css. If it does not exist create it. This is best done by creating a new text document and renaming its name and file extension. Windows users right-click in the directory and select New > Text Document.

To be clear, you need to put the userChrome.css file into FirefoxProfileFolder\chrome\.

Now copy and paste the code into the file. You can append the CSS code at the bottom in case the file existed previously. Please note that the above instructions change the maximum width to 250 pixels, and the minimum width to 40 pixels. You may want to play around with the values to find the one best suitable for you. Restart the browser after making the change to see the changes in action.

If you do not feel like editing the configuration file, install the add-on Custom Tab Width ( no longer available) which allows you to modify the minimum and maximum tab width of the Firefox web browser as well.

Advertisement