X
Tap here to go to the mobile version of the site.

Support Forum

How can I minimize tab width in Firefox Quantum -- all the prescribed fixes do not work in my Quantum version.

Posted

I've tried about:config and other posted solutions. They don't work with my Firefox Quantum that I just upgraded to (without any proper support or notice from Mozilla about changes involved with Quantum). I keep getting messages saying the links to set tab width don't work with Firefox Quantum, and it won't let me click them. I'm using Windows 8.1

I've tried about:config and other posted solutions. They don't work with my Firefox Quantum that I just upgraded to (without any proper support or notice from Mozilla about changes involved with Quantum). I keep getting messages saying the links to set tab width don't work with Firefox Quantum, and it won't let me click them. I'm using Windows 8.1
Beerbaron23 15 solutions 162 answers

about:config

then play with these settings

browser.tabs.tabClipWidth browser.tabs.tabMinWidth

If not you will have to look into editing your UserChrome.css

about:config then play with these settings browser.tabs.tabClipWidth browser.tabs.tabMinWidth If not you will have to look into editing your UserChrome.css

Question owner

As I said, I've tried about:config and it did nothing. On the other hand, maybe I'm not completing the task -- it opened up browser.tabs.tabminwidth and the other one you suggested, and I entered a lower number, but there was no option to save changes, etc. Is that all I need to do? If so, it gave me no result.

I have no clue what UserChrome.css is. I pasted it into my computer search field and came up with nothing. Is that refering to Google Chrome? I am not a computer geek, just trying to use my computer as is required in our current world.

As I said, I've tried about:config and it did nothing. On the other hand, maybe I'm not completing the task -- it opened up browser.tabs.tabminwidth and the other one you suggested, and I entered a lower number, but there was no option to save changes, etc. Is that all I need to do? If so, it gave me no result. I have no clue what UserChrome.css is. I pasted it into my computer search field and came up with nothing. Is that refering to Google Chrome? I am not a computer geek, just trying to use my computer as is required in our current world.
user1929 72 solutions 290 answers

When you open about:config and double-click on the preference you want to change, you should get a dialog box titled "enter integer value" where you enter a new number. Once you enter a number and click "OK", your changes should be saved.

One thing to note about the tabMinWidth setting is that the tabs will only shrink to that width when you have more tabs open than will fit in the tabstrip. If you only have a few tabs open, the tabs will be larger - is that what you're trying to change?

When you open about:config and double-click on the preference you want to change, you should get a dialog box titled "enter integer value" where you enter a new number. Once you enter a number and click "OK", your changes should be saved. One thing to note about the tabMinWidth setting is that the tabs will only shrink to that width when you have more tabs open than will fit in the tabstrip. If you only have a few tabs open, the tabs will be larger - is that what you're trying to change?
Happy112 561 solutions 5694 answers

Calyxia said

As I said, I've tried about:config and it did nothing. On the other hand, maybe I'm not completing the task -- it opened up browser.tabs.tabminwidth and the other one you suggested, and I entered a lower number, but there was no option to save changes, etc. Is that all I need to do? If so, it gave me no result.

After you've changed a pref's value in 'about:config' you need to close and restart Fireofx, in order for the change(s) to take effect.

''Calyxia [[#answer-1047463|said]]'' <blockquote> As I said, I've tried about:config and it did nothing. On the other hand, maybe I'm not completing the task -- it opened up browser.tabs.tabminwidth and the other one you suggested, and I entered a lower number, but there was no option to save changes, etc. Is that all I need to do? If so, it gave me no result. </blockquote> After you've changed a pref's value in 'about:config' you need to close and restart Fireofx, in order for the change(s) to take effect.

Question owner

Thanks for the 3 posted suggestions. Unfortunately, I tried all the suggestions and there's still no change. I changed the minimum width to 20 on about:config, clicked OK, then restarted the whole computer, and the tab widths are unchanged.

Any other suggestions, anyone???

Thanks for the 3 posted suggestions. Unfortunately, I tried all the suggestions and there's still no change. I changed the minimum width to 20 on about:config, clicked OK, then restarted the whole computer, and the tab widths are unchanged. Any other suggestions, anyone???
Happy112 561 solutions 5694 answers

Calyxia said

Any other suggestions, anyone???

You could create a userChrome.css file, as described here :

https://www.reddit.com/r/firefox/comments/7d17qy/quantum_how_do_i_reduce_size_of_tabs/

''Calyxia [[#answer-1047995|said]]'' <blockquote> Any other suggestions, anyone??? </blockquote> You could create a userChrome.css file, as described here : https://www.reddit.com/r/firefox/comments/7d17qy/quantum_how_do_i_reduce_size_of_tabs/

Question owner

I have no clue how any of you know all this stuff. Did you take classes in it? I tried following the instructions, but either I failed or my computer is messed up. I wasn't at all clear about the instructions, I'm truly in the dark, so any clarifications are greatly appreciated:

1. I don't even know at this point how to restart the browser, is there some way other than either restarting my computer, or closing out all my Firefox windows? 2. When you say create a file inside the Chrome folder, do you mean create a Word document, or another subfolder, or what? 3. And then when I paste the text, am I actually pasting all of the following text that's in the shaded box you posted: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* The above line always stays there. Anything below will change the browser UI. */

/* minimum tab thickness when many tabs are open */

.tabbrowser-tab {

 min-width: 4.5em !important;
 clip-width: 4.5em !important;

} /* In future I can add more UI hacks below */ w */

I have no clue how any of you know all this stuff. Did you take classes in it? I tried following the instructions, but either I failed or my computer is messed up. I wasn't at all clear about the instructions, I'm truly in the dark, so any clarifications are greatly appreciated: 1. I don't even know at this point how to restart the browser, is there some way other than either restarting my computer, or closing out all my Firefox windows? 2. When you say create a file inside the Chrome folder, do you mean create a Word document, or another subfolder, or what? 3. And then when I paste the text, am I actually pasting all of the following text that's in the shaded box you posted: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* The above line always stays there. Anything below will change the browser UI. */ /* minimum tab thickness when many tabs are open */ .tabbrowser-tab { min-width: 4.5em !important; clip-width: 4.5em !important; } /* In future I can add more UI hacks below */ w */
WestEnd
  • Top 25 Contributor
60 solutions 5379 answers

Calyxia said

I've tried about:config and other posted solutions. They don't work with my Firefox Quantum that I just upgraded to (without any proper support or notice from Mozilla about changes involved with Quantum). I keep getting messages saying the links to set tab width don't work with Firefox Quantum, and it won't let me click them. I'm using Windows 8.1

Might be late here but what does that look like? Can you provide a Screen of the problem?

''Calyxia [[#question-1193864|said]]'' <blockquote> I've tried about:config and other posted solutions. They don't work with my Firefox Quantum that I just upgraded to (without any proper support or notice from Mozilla about changes involved with Quantum). I keep getting messages saying the links to set tab width don't work with Firefox Quantum, and it won't let me click them. I'm using Windows 8.1 </blockquote> Might be late here but what does that look like? Can you provide a Screen of the problem?
user1929 72 solutions 290 answers

Calyxia said

I have no clue how any of you know all this stuff. Did you take classes in it? I tried following the instructions, but either I failed or my computer is messed up. I wasn't at all clear about the instructions, I'm truly in the dark, so any clarifications are greatly appreciated: 1. I don't even know at this point how to restart the browser, is there some way other than either restarting my computer, or closing out all my Firefox windows? 2. When you say create a file inside the Chrome folder, do you mean create a Word document, or another subfolder, or what? 3. And then when I paste the text, am I actually pasting all of the following text that's in the shaded box you posted: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* The above line always stays there. Anything below will change the browser UI. */ /* minimum tab thickness when many tabs are open */ .tabbrowser-tab { min-width: 4.5em !important; clip-width: 4.5em !important; } /* In future I can add more UI hacks below */ w */

1. Firefox should quit when you close all of the open Firefox windows - you can tell for sure by looking at the Firefox icon in the taskbar. If it's higlighted, Firefox is still open, and if it has the same background as everything else, Firefox is closed. Then, you can just click on it again to re-open Firefox.

I'll try to provide some more clear instructions for the userChrome file:

1. Type "about:profiles" in the address bar. 2. you'll see a series of tables. Above one, you should see a message stating "This is the profile in use". Find the "root directory" entry in that table, and click the "Open Folder" button next to it. 3. In the Explorer window that appears, right-click anywhere on the screen, and choose New > Folder. 4. Title the new folder "chrome". 5. Open that folder. 6. Right-click again, and choose New > Text Document. 7. Select the entire name (the "New Text Document.txt", and title it "userChrome.css". 8. If you get a message about changing the file extension, choose "yes". 9. Open the file you just created. 10. Paste everything in the box below into it:

 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* The above line always stays there. Anything below will change the browser UI. */


 /* minimum tab thickness when many tabs are open */
.tabbrowser-tab {
  min-width: 4.5em !important;
  clip-width: 4.5em !important;
}

/* In future I can add more UI hacks below */

11. Save the file. 12. Restart Firefox.

This website also has a video showing how to do the steps listed above: https://www.userchrome.org/how-create-userchrome-css.html .

''Calyxia [[#answer-1048060|said]]'' <blockquote> I have no clue how any of you know all this stuff. Did you take classes in it? I tried following the instructions, but either I failed or my computer is messed up. I wasn't at all clear about the instructions, I'm truly in the dark, so any clarifications are greatly appreciated: 1. I don't even know at this point how to restart the browser, is there some way other than either restarting my computer, or closing out all my Firefox windows? 2. When you say create a file inside the Chrome folder, do you mean create a Word document, or another subfolder, or what? 3. And then when I paste the text, am I actually pasting all of the following text that's in the shaded box you posted: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* The above line always stays there. Anything below will change the browser UI. */ /* minimum tab thickness when many tabs are open */ .tabbrowser-tab { min-width: 4.5em !important; clip-width: 4.5em !important; } /* In future I can add more UI hacks below */ w */ </blockquote> 1. Firefox should quit when you close all of the open Firefox windows - you can tell for sure by looking at the Firefox icon in the taskbar. If it's higlighted, Firefox is still open, and if it has the same background as everything else, Firefox is closed. Then, you can just click on it again to re-open Firefox. I'll try to provide some more clear instructions for the userChrome file: 1. Type "about:profiles" in the address bar. 2. you'll see a series of tables. Above one, you should see a message stating "This is the profile in use". Find the "root directory" entry in that table, and click the "Open Folder" button next to it. 3. In the Explorer window that appears, right-click anywhere on the screen, and choose New > Folder. 4. Title the new folder "chrome". 5. Open that folder. 6. Right-click again, and choose New > Text Document. 7. Select the entire name (the "New Text Document.txt", and title it "userChrome.css". 8. If you get a message about changing the file extension, choose "yes". 9. Open the file you just created. 10. Paste everything in the box below into it: <pre> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* The above line always stays there. Anything below will change the browser UI. */ /* minimum tab thickness when many tabs are open */ .tabbrowser-tab { min-width: 4.5em !important; clip-width: 4.5em !important; } /* In future I can add more UI hacks below */ </pre> 11. Save the file. 12. Restart Firefox. This website also has a video showing how to do the steps listed above: https://www.userchrome.org/how-create-userchrome-css.html .

Question owner

Thank you so much for all of your attempts to help me. You're being very patient and giving me very clear instructions. I followed the instructions (which were actually the same as what I had done before) and nothing has changed in my tab width!

I'm really about done with Firefox. I've spent about 2 hours on this -- this time around -- and there are other issues that come up with Firefox -- such as I can't ever open linked pages from a certain website on Firefox (both before and after installing Quantum), whereas they open with no problem in other browsers.

I'm going to go back to Opera, since it doesn't track me and feed me related ads, and it works well except for one major glich: it sometimes closes out the entire browser for no apparent reason -- which can definitely be a problem in some rare situations, other times just a nuisance. Internet Explorer I used to like a lot of features on, but it's now defunct. Chrome is definitely invasive with tracking and ads. I tried Vivaldi recently and liked it, but it was tracking me and sending ads. Any other suggestions?

Thank you so much for all of your attempts to help me. You're being very patient and giving me very clear instructions. I followed the instructions (which were actually the same as what I had done before) and nothing has changed in my tab width! I'm really about done with Firefox. I've spent about 2 hours on this -- this time around -- and there are other issues that come up with Firefox -- such as I can't ever open linked pages from a certain website on Firefox (both before and after installing Quantum), whereas they open with no problem in other browsers. I'm going to go back to Opera, since it doesn't track me and feed me related ads, and it works well except for one major glich: it sometimes closes out the entire browser for no apparent reason -- which can definitely be a problem in some rare situations, other times just a nuisance. Internet Explorer I used to like a lot of features on, but it's now defunct. Chrome is definitely invasive with tracking and ads. I tried Vivaldi recently and liked it, but it was tracking me and sending ads. Any other suggestions?
jscher2000
  • Top 10 Contributor
8693 solutions 71065 answers

I think the reason you still see as much tab width as you do is that reducing the minimum width doesn't force Firefox to use only that minimum width. You also need to reduce the maximum width to force that.

You mentioned in another thread that you want to see 100 tabs at one. That might not be possible, but if you only show the 16px wide site icon and 2px of blank space on each side, you can get close. Not sure how usable that is when you have a lot of tabs open to the same site, but here goes:

/* Minimal Tab (Only icon visible) */
.tabbrowser-tab {
  min-width: 20px !important;
  max-width: 20px !important;
}
.tab-content {
  padding: 0px 2px !important;
}
.tab-icon-image {
  margin-right: 0 !important;
}

Edit: If you get bored of waiting for a tooltip when you hover the tab, you can have it slide open to show part of the title by adding this:

/* Show part of title on hover */
.tabbrowser-tab:not([pinned]):hover {
  max-width: 175px !important;
}

Sample screenshot attached.

I think the reason you still see as much tab width as you do is that reducing the ''minimum'' width doesn't force Firefox to use ''only'' that minimum width. You also need to reduce the ''maximum'' width to force that. You mentioned in another thread that you want to see 100 tabs at one. That might not be possible, but if you only show the 16px wide site icon and 2px of blank space on each side, you can get close. Not sure how usable that is when you have a lot of tabs open to the same site, but here goes: <pre>/* Minimal Tab (Only icon visible) */ .tabbrowser-tab { min-width: 20px !important; max-width: 20px !important; } .tab-content { padding: 0px 2px !important; } .tab-icon-image { margin-right: 0 !important; } </pre> ''Edit: If you get bored of waiting for a tooltip when you hover the tab, you can have it slide open to show part of the title by adding this:'' <pre>/* Show part of title on hover */ .tabbrowser-tab:not([pinned]):hover { max-width: 175px !important; } </pre> Sample screenshot attached.

Modified by jscher2000

Question owner

Thanks for the suggestion. Right now, my min width is set for 5, and my max width is set for 30. Now I just changed it to 2 and 10 just to try it. It didn't make any noticeable change, and it's still scrolling to show tabs out of the view.

That's about it for me. I'm done using Firefox. How rude of Mozilla to just go ahead and change bunches of things without explaining what might be involved, without giving the option of keeping features the same, etc.

Thanks for the suggestion. Right now, my min width is set for 5, and my max width is set for 30. Now I just changed it to 2 and 10 just to try it. It didn't make any noticeable change, and it's still scrolling to show tabs out of the view. That's about it for me. I'm done using Firefox. How rude of Mozilla to just go ahead and change bunches of things without explaining what might be involved, without giving the option of keeping features the same, etc.
cor-el
  • Top 10 Contributor
  • Moderator
17473 solutions 157934 answers

Note that Firefox might not use a minimum tab width if you make the value too small, so you can try a larger value for the pref like 50 and use px values for the min-width and max-width in userChrome.css (e.g. 50px or 100px) to see if that works. Make sure to add the !important flag (min-width: 100px !important). Alternatively you can consider to pin all your tabs to make them as small as possible.

Did you verify via the properties that the file name is userChrome.css and not userChrome.css.txt or userChrome.css.css in case Windows is hiding the real file extension?

Try to create a new profile to test if your current profile is causing the problem and create the chrome folder and userChrome.css in that profile. You can use the Profile Manager to switch between profiles.

See "Creating a profile":

If the new profile works then you can transfer files from a previously used profile to the new profile, but be cautious not to copy corrupted files to avoid carrying over problems.

Note that Firefox might not use a minimum tab width if you make the value too small, so you can try a larger value for the pref like 50 and use px values for the min-width and max-width in userChrome.css (e.g. 50px or 100px) to see if that works. Make sure to add the !important flag (min-width: 100px !important). Alternatively you can consider to pin all your tabs to make them as small as possible. Did you verify via the properties that the file name is userChrome.css and not userChrome.css.txt or userChrome.css.css in case Windows is hiding the real file extension? Try to create a new profile to test if your current profile is causing the problem and create the chrome folder and userChrome.css in that profile. You can use the Profile Manager to switch between profiles. See "Creating a profile": *https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles *http://kb.mozillazine.org/Standard_diagnostic_-_Firefox#Profile_issues If the new profile works then you can transfer files from a previously used profile to the new profile, but be cautious not to copy corrupted files to avoid carrying over problems. *http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox
jscher2000
  • Top 10 Contributor
8693 solutions 71065 answers

Calyxia said

I'm done using Firefox. How rude of Mozilla to just go ahead and change bunches of things without explaining what might be involved, without giving the option of keeping features the same, etc.

No Firefox features were deleted. Legacy extensions with free rein to modify the user interface are no longer supported. Some of their powers may be restored to other extensions in the future. Until then, a userChrome.css file can do it if you set it up just right.

I created a whole website to help Firefox users with that. If you decide to return to Firefox feel free to take a look: https://www.userchrome.org/how-create-userchrome-css.html

''Calyxia [[#answer-1048182|said]]'' <blockquote>I'm done using Firefox. How rude of Mozilla to just go ahead and change bunches of things without explaining what might be involved, without giving the option of keeping features the same, etc. </blockquote> No Firefox features were deleted. Legacy ''extensions'' with free rein to modify the user interface are no longer supported. Some of their powers may be restored to other extensions in the future. Until then, a userChrome.css file ''can'' do it if you set it up just right. I created a whole website to help Firefox users with that. If you decide to return to Firefox feel free to take a look: https://www.userchrome.org/how-create-userchrome-css.html