Update: See also Tab Utilities. IMPORTANT: The code at the end of this post works again as of Beta 6 with browser.tabs.animate on false.
Firefox 4 does not allow you to change the width of your tabs through the about:config setting. You must add the CSS code yourself. Now, I’m not averse to picking up some code here and there; it’s fascinating. If I don’t know exactly how to put something, I can look it up. But here’s the problem: it’s a basic setting and the settings were already there. For the average user, who may well find any sort of code daunting, about:config would certainly be a lot quicker, if not simpler (even about:config isn’t apparent unless you like to mess around). It’s not broken; it’s not a bug. Why are you “fixing” it?
What irks me more is the attitude behind the reason given: “I don’t think the prefs are worth it.” That statement makes me uneasy beyond the tab issue, because it reinforces an assumption I felt they were making from the beginning: that they were the norm for all users. It was as if they thought everyone would be a developer and would automatically know where and how everything was.
The breezy “Oh, just put in the CSS if you really want it” makes me wonder if they’re going to do the same with other basic options down the line that may affect physical accessibility more than the tabs do. I’m not saying Firefox should stop being a geek’s browser; I learn things by tinkering with it. But not everyone is physically or cognitively able to be a geek. If you want the CSS for tab width, copy and adjust as needed:
.tabbrowser-tab:not([pinned]) {
max-width: 100px !important;
min-width: 40px !important;
}
UserChrome instructions:
1. Your userChrome folder (in XP; this probably varies) is located in C:/Documents and Settings/your name/Application Data/Mozilla/Firefox/Profiles.
2. Choose the default profile that comes up when you open that folder. Then open the Chrome folder. There should be a file called userChrome.example.CSS.
3. Open this file and paste whatever snippet you want to use.
4.Go to File, then Save As. Name the document userChrome.CSS.
Anytime you want to make a change to how Firefox looks or acts, this will be the file in which you will paste the script.
Hand to Mouth: Assistive Technology 
This CSS is not working anymore with Firefox 4 beta4. Closed tabs will still be visible!
Yes — I noticed that when I started up this morning. Dang it…
Thanks for the hints here… I turned it into a nice “Always AppTab” chrome if you’re interested. Keeps the tabs minimal, expands them if selected or hovered on. Looks great on a Mac! Please post tweaks!
/* Disable Container box for "List all Tabs" Button */
.tabs-alltabs-box {
display: none !important;
}
/* ==== TAB SPINNER ==== */
/* Show tab loading indicator while the tab is loading */
.tabbrowser-tabs *|tab[busy] .tab-icon-image {
display: -moz-box !important;
}
/* ==== TAB TEXT ==== */
/* Shrink tab text by 20% */
.tabbrowser-tabs .tab-text {
font-size: 80% !important;
}
/* ==== FAVICONS ==== */
/* Show favicon on tabs */
.tabbrowser-tabs .tab-icon-image {
opacity: 1.0 !important;
display: -moz-box !important;
-moz-box-ordinal-group: 2 !important; // Left side
}
/* But don't show default image (i.e. no favicon for site) */
.tabbrowser-tabs *|tab:not([image]) .tab-icon {
display: none;
}
/* If the tab isn't selected, hide the text, make it narrow */
.tabbrowser-tab:not([selected="true"]) > .tab-text {
visibility: hidden !important;
min-width: 1px !important;
width: 1px !important;
display: none !important;
}
.tabbrowser-tab:not([selected="true"]) {
min-width: 42px !important;
width: 42px !important;
}
/* If the tab is selected, show the text, make it min 256px wide */
.tabbrowser-tab[selected="true"] {
max-width: 400px !important;
min-width: 150px !important;
width: 100% !important;
}
/* If the tab isn't selected, but is being hovered on, show the text, make it min 128px wide */
.tabbrowser-tabs *|tab:hover {
max-width: 400px !important;
min-width: 150px !important;
width: 100% !important;
}
.tabbrowser-tab:not([selected="true"]):hover > .tab-text {
display: visible !important;
visibility: visible !important;
min-width: 100px !important;
width: 90% !important;
display: block !important;
}
Nice. Thanks!
it works for me in 4.0b6pre with browser.tabs.animate set to false 🙂
Excellent to know. Thanks! 🙂
i had this in my user.js to make the tabs work better for me before firefox 4:
user_pref("browser.tabs.selectOwnerOnClose", false);user_pref("browser.tabs.tabMinWidth", 30);
user_pref("browser.tabs.closeButtons", 3);
the min width doesn’t work anymore in ff4, but your post helped show me what to put in userChrome.css to get my minimum widths back. there’s a reason we have favicons and tooltips on the tabs!
.tabbrowser-tab:not([pinned]) {min-width: 30px !important;
}
Pingback: Tab Utilities revisited: tab widths, new tabs, accessibility | Hand to Mouth: Assistive Technology