Tabs in two or more Rows (like TabMixPro) in Quantum?

Having trouble using this script on my Mac. (Maybe because I’m using Nightly?)

When I open folder in step two, it opens my finder. Then I create a text file, but I only have Text Edit to do that, which gives it an ODT file extension. Then I remove the extension when I’ve saved it to the Chrome folder.

When I restart Firefox nothing is different, only one row I have to scroll right on.

Am I doing something wrong?

Hi Lydia, here are two possible workarounds for the problem creating a new userChrome.css file.

(1) Download a blank one. This was created in Windows, but should work on Mac:

https://www.userchrome.org/samples/userChrome.css

(2) Paste your CSS to the following page and download userChrome.css with your rules in it:

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

Hopefully one of those will be convenient for you.

And if you haven’t seen my terribly boring video from the brief time where I had hands on a Mac: https://vimeo.com/245560075

Bonus workaround:

(3) Download the the file from Github, if you’re using one of those, rename the file to userChrome.css, and move it into your chrome folder.

This has stopped working correctly in FF65.

Hi chuckbutkus, try here:

https://www.reddit.com/r/FirefoxCSS/

(Or if you downloaded from an author on Github, try contacting them directly.)

FF65 - remove entries for #titlebar
new file:

/** https://www.reddit.com/r/firefox/comments/726p8u/multirow_tabs_firefox_ignores_mozboxflex/dngb8qf/ */
.tabbrowser-tab:not([pinned]) { flex-grow:1; min-width:150px; }
.tabbrowser-tab,.tab-background { height:var(–tab-min-height); }
.tab-stack { width: 100%; }
#tabbrowser-tabs .scrollbox-innerbox { display: flex; flex-wrap: wrap; }
#tabbrowser-tabs .arrowscrollbox-scrollbox { overflow: visible; display: block; }
#main-window[sizemode=“maximized”] #TabsToolbar{ margin-left:var(–tab-min-height); }
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){ display: none; }

2 Likes

This is the only one working on FF65. One annoying thing is that the tab titles get pushed to the top of the tab but aren’t aligned on the center. Even the shade on the tab bar seems to stop exactly at the middle. Not sure how this can be fixed. Checked with multiple themes but this seems not related to the themes.

1 Like

I second this:

What I did was replace:

.tabbrowser-tab,.tab-background { height:var(–tab-min-height); }

with

.tabbrowser-tab,.tab-background { height:40px; }

and now it looks fine. The final contents of userChrome.css:

.tabbrowser-tab:not([pinned]) { flex-grow:1; min-width:150px; }
.tabbrowser-tab,.tab-background { height:40px; }
.tab-stack { width: 100%; }
#tabbrowser-tabs .scrollbox-innerbox { display: flex; flex-wrap: wrap; }
#tabbrowser-tabs .arrowscrollbox-scrollbox { overflow: visible; display: block; }
#main-window[sizemode=“maximized”] #TabsToolbar{ margin-left:var(–tab-min-height); }
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){ display: none; }
2 Likes

Please help. With the latest Firefox Quantum v65.0 the last row is hidden under the navigation bar. See the picture. Can someone help?

2 Likes

Awesome! used 35px instead.

For me too it is badly misaligned. Somehow my FF got updated to v65.
I downgraded to v64 and it is working fine on MAC now. Also, disabled automatic updates.

Thanks so much! Fixed the hidden last row with the latest v65.0.

No fixed for me (35, 30, 20 no help).
Help Firefox 60.5.2esr.

This has broken again in v66. Can we get native multi-row tabs please, Mozilla?

Any idea why I now have a scroll bar one I exceed 3 tab rows?

Also, is the gap on the left normal? The min,max,close buttons also get bigger the more tabs I have open.

Resizable windows have a “drag space” on the left in case you want to drag the window somewhere. You can close that up using a style rule, but I don’t have it at my fingertips. You could search or ask on https://www.reddit.com/r/FirefoxCSS/ .

2 Likes

As geekoid already mentioned: the solutions in this thread broke again when v66 came out. This starts to get annoying.

But for now this fixed everything for me:
multi-row_tabs.css from the firefox-csshacks github

Has this broken again on FF69? Yes! Please see the end of this post.

My tabs are all on one line. I am using


with
@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
added to the top of the useChrome.css file.
(And I tried it without that too).

Aha! FF69 turns off userChrome.css unless you change something in about:config, apparently.

That worked. Or almost, I could not “find” the relevant key in about config (not sure why, perhaps there is a minor change or did I search in the wrong way?) but scrolled down to toolkit.legacyUserProfileCustomizations and changed the value to true (by clicking on it).

I now have multi-row tabs back after two hours of trying.

I wish Firefox would tell us when they do something like this (“This update also changes…”).

Everything is broken again in v71. I can not find why but tabs are in one line while all changes from userChrome.css are present in tabs and scrollbar propetrties. Have anybody seen the same with last beta or nightly?

1 Like

A good site for the latest style recipes is:

https://www.reddit.com/r/FirefoxCSS/

Have you made sure that the toolkit.legacyUserProfileCustomizations.stylesheets pref in the about:config is still set to true ?

https://www.reddit.com/r/FirefoxCSS/comments/brmi8v/psa_firefox_v69_users_will_have_to_set_a_pref_to/