Hi Purebeads, Firefox has never had multiple rows of tabs. Instead, Firefox has left and right scroll buttons for when your tabs cannot all fit on the row.

With the built-in settings, you can reduce the minimum width of tabs from 76 pixels (the default) to 50 pixels. Here's how:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste tabmin and pause while the list is filtered

(3) Double-click the browser.tabs.tabMinWidth preference to display a little dialog where you can edit 76 to 50, then click OK

If you need even narrower tabs, you will need to use a custom style rule in a userChrome.css file. That is about 10 minute project to set up, and it does involve a leap of faith in magical incantations (style rules) instead of in an extension, but many others have walked this road before you because userChrome.css is an ancient feature from the 90s.

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Set minimum width below which tabs will not shrink */
:root {
  --my-tab-min-width: 36px;  
}
/* Essential rule for reducing minimum tab width */
.tabbrowser-tab:not([pinned]){
  min-width: var(--my-tab-min-width) !important;
}
/* Optional rules for widths below 40px */
/* Reduce icon's right margin for less wasted space */
.tabbrowser-tab:not([pinned]) .tab-icon-image {
  margin-right: 1px !important;
}
/* Adjust padding for better centering and less wasted space */
.tabbrowser-tab:not([pinned]) .tab-content{
  padding-left: calc((var(--my-tab-min-width) - 22px)/2) !important;
  padding-right: calc((var(--my-tab-min-width) - 22px)/2) !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize (don't close) that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

I do not have a magical incantation for multi-row tabs, but I saw a link to one on Github on the FirefoxCSS subreddit (https://www.reddit.com/r/FirefoxCSS/). Perhaps that's why you mentioned Github?

Regarding Github pages such as --

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

-- I'm attaching a screenshot with some notes on it.

As noted in my first reply, Firefox is looking for the exact name userChrome.css in a very specific folder. When you download from Github, you get a file with a different name. How can you use that?

One option is, if you don't have any userChrome.css file, you can rename the downloaded file to userChrome.css.

Another option is to use the @import command in an otherwise empty userChrome.css file. This allows you to keep your various collections of rules separate and update them independently without as much confusion. I have some notes on it here:

https://www.userchrome.org/adding-style-recipes-userchrome-css.html

But there is a learning curve the first time, as with anything.

I appreciate that you are trying to help, although what you said doesn't improve my opinion of Firefox any.

First of all, the value in about:config is already 48. But when I take a screen shot and pull it into my photo editor and measure it, I discover that the distance between the tab edges is 63 pixels. I'm wondering if this might be because of some Windows setting. I think, for example, that I have Windows set to "large fonts", although I can't find where that setting is right at the moment.

Regarding cascading style sheets, I don't understand your instructions starting with B. I haven't tried to follow them, however, since you said that 50 is the minimum value, and it is already set to 48. To save something with Github, I am going to need step-by-step instructions, and your instructions are a little broad.

Maybe I should just reinstall version 56.2. God, I have come to hate Firefox over the years.

Purebeads said

First of all, the value in about:config is already 48. But when I take a screen shot and pull it into my photo editor and measure it, I discover that the distance between the tab edges is 63 pixels. I'm wondering if this might be because of some Windows setting. I think, for example, that I have Windows set to "large fonts", although I can't find where that setting is right at the moment.

Yes, the 50 pixels are multiplied by Windows Text Size setting, which often is 125%. That would be 62.5 pixels.

Regarding cascading style sheets, I don't understand your instructions starting with B. I haven't tried to follow them, however, since you said that 50 is the minimum value, and it is already set to 48.

50 is the minimum you can achieve using the built-in setting. I have attached a screenshot comparison with my normal value of 100 vs. the above custom style rule.

In step B, you are going to that link, and it will display an editor. You delete the current code in the editor and paste in the new code. Then use the button below the editor to generate a file and save it.

I finally got over my resistance to learning this procedure, and I managed to reduce the space used by each tab. I already had a userChrome.css file, so I appended the code to the file.

I then decided to use the same procedure to create a css page to give me multiple rows, and I used the code from this Github page:

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

I copied the code into FrontPage (which I still use to design web pages), and I did a Save-As to save it as a css page. I named it "multi-row_tabs.css" and I put it in the Chrome folder. However, when I restarted Firefox, I didn't have more than one row of tabs. What do you suppose I did wrong? Was doing a Save-As on the file using the .css extension the right way to create a css file?

Thank you for your help.

You can open the file in a Firefox tab (File -> Open File or drop the file in a Firefox window) to see if it is a plain text file with only the .css file extension.

Browsers are supposed to be able to open CSS pages, right? So if it WON'T open, that means it is a TXT file? I thought that CSS pages were a kind of text file.

When I open it, it opens with FrontPage, which seems to suggest it is a CSS file.

(I'm off to bed. I'll check in about 8 hours from now. Thank you all for your help.)

Purebeads said

I then decided to use the same procedure to create a css page to give me multiple rows, and I used the code from this Github page: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

I copied the code into FrontPage (which I still use to design web pages), and I did a Save-As to save it as a css page. I named it "multi-row_tabs.css" and I put it in the Chrome folder. However, when I restarted Firefox, I didn't have more than one row of tabs.

Two things come to mind:

(1) By any chance, did you click the Raw button before saving? If not, try the Raw page:

https://'raw.githubusercontent.com/MrOtherGuy/firefox-csshacks/master/chrome/multi-row_tabs.css

You can Save Page As on that to get a clean plain text file named multi-row_tabs.css

(2) Next, all @import lines need to be at the very top of your userChrome.css file:

@import url("multi-row_tabs.css");

Then when Firefox processes your userChrome.css file, the first thing it should do is grab the multi-row_tabs.css file from the same folder.

Yes, I clicked the RAW button. However, I didn't import the multi-row tab file. I suspected that something like that might be necessary. I am going to do that, and I'll post the results later. If I have success, then this could be put into an instruction sheet for people to follow (since I see that you sometimes do that -- you are apparently dedicated to helping people). My only concern is exactly where to reference the mutti-row tab in the userChrome file. Thanks again for your help. I'll post again later today.

Purebeads said

My only concern is exactly where to reference the mutti-row tab in the userChrome file.

All @import lines should be at the very top of the userChrome.css file.

I have good news to report: I now have tab rows with a scroll bar on the side, along with narrower tabs. I can control the number of rows, and I can control the width of tabs. There is one remaining problem: When I restart Firefox, the icon on each tab does not show until I click on that page, and that makes it a little hard to identify what page the tab represents. However, that is a minor inconvenience. I appreciate that you stayed with me long enough to get this figured out.

There are other things I'd like to change about FF 66, and I am wondering if I can post them here, or if I should post them in another thread. For example, it doesn't make sense to me to have the tabs above the navigation bar; I would like them to be right above the body of the page. I also don't like that the text fades at the end of each tab (as it nears the X). In addition, I would prefer to remove the X from the tabs, having it instead on the right side of the tab bar. (That's the way it was in the early versions of Firefox.) Incidentally, I have been using FF since version ONE, and I think that gives me the right to complain about the changes.

One more thing: The tabs are still taller (larger vertically) than they need to be. I'd like them to be more compact.

So what shall I do, post these various probems here or in another thread?

Thank you again for your good help.

Hi Purebeads, I'l try to give you a quick answer for each, but some may require a new thread or a search on the FirefoxCSS subreddit.

► There is one remaining problem: When I restart Firefox, the icon on each tab does not show until I click on that page, and that makes it a little hard to identify what page the tab represents.

This is part of speeding up the session restore. Unfortunately, I think the alternative is setting Firefox to load the page from cache, which adds time and memory use. Maybe there is an add-on to split the difference?

► ...it doesn't make sense to me to have the tabs above the navigation bar; I would like them to be right above the body of the page.

Okay, I don't know if you can move the tab bar AND have multiple rows. Could be a tricky combination. The users on the FirefoxCSS subreddit will know.

► I also don't like that the text fades at the end of each tab (as it nears the X).

Another userChrome.css rule will be needed.

► In addition, I would prefer to remove the X from the tabs, having it instead on the right side of the tab bar. (That's the way it was in the early versions of Firefox.)

Oh yes, long ago I posted a page on that major change in Firefox 2.0: https://www.jeffersonscher.com/FxPrefs/tabClose.html

But back to the current decade. You'll need a userChrome.css rule to hide the unwanted buttons, then use an extension like this one to add a tab close button, then in Customize mode, move that button from the main toolbar to the tabs bar.

► One more thing: The tabs are still taller (larger vertically) than they need to be. I'd like them to be more compact.

If you haven't already, could you try changing from the Normal to the Compact "density" on the Customize tab (the selector for that is along the bottom row): Customize Firefox controls, buttons and toolbars.

The density thing was the first thing I changed after installing FF 66, but it's not dense enough for me. I'll try the other things you mentioned. Thank you very much for your help. At least I'm not going back to version 56.2 now.

If you need more density, you know what I'm going to say: it would be another custom style rule! Anyway, I suggest getting the tab bar location sorted first, as the extra space may be helpful in the lower location, or you might decide you want a different spacing above and below the icons/labels after that.

About the tab-close X, when many tabs are open, it only shows on the active tab. That will do for now.

It seemed that you said there might not be a solution for moving the tabs lower. Are you saying I have to go to the subreddit site for that?

I'm really surprised that there haven't been extension-developers busily coming up with solutions for these problems. Of course, if Mozilla pulled the rug out from under them once (by making all their extensions obsolete), it might do it again. I'm surprised that the fellow who developed Tab Mix Plus hasn't come up with a pared-down version of it by now. I'd gladly pay him money for it, even if it doesn't have all the features I want.

Actually, what surprises me most is that Mozilla hasn't made the program more flexible. They see FF as a Model T Ford. You may not know this, but Ford originally made a very basic car, and people had to go to third parties for their customizations.

Tab Mix Plus had zillions of options. Many of the most popular ones are available in Firefox now, but many an be hard to discover because you have to double-click a preference in the about:config preferences editor. Feel free to ask about particular features.

There is a proposed toolbar API that would allow extensions to make non-trivial toolbar changes, but it is on the back burner compared with other extension APIs. Maybe by 2020. Until then, userChrome.css to the rescue.

I just noticed that after upgrading, Tab Mix Plus and other extensions that are not compatible with version 66 are still marked as enabled. Classic Them Restorer is too. Should I just disable them, or does it matter?

Purebeads said

I just noticed that after upgrading, Tab Mix Plus and other extensions that are not compatible with version 66 are still marked as enabled. Classic Them Restorer is too. Should I just disable them, or does it matter?

I don't think it matters, but just in case Firefox is wasting cycles with them enabled, I would disable them.