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

Just applied your version and it works like a charm…only had to changed the Tabs Margin Left to 1 to suit my liking!
Thanks for the share.

My decision was to stick with 56v to keep all my addons. The missing multirow just turned me off. Disabled all updates and its still working.
You can also use the long term service version https://www.mozilla.org/en-US/firefox/organizations/all/

Amazing work! Finally I can again see I have all too many tabs open. Now we just need someone to make this work as an extension!

thanks fh1. Simple easy to follow, except I still have the standard 1 long row. Does this need to be enabled to work? Are there other add-ons that might be preventing it from working?

1 Like

Where to download updated version?

What would be fun now is a way to navigate via keyboard vertically through the tab rows. You use ctl pgup and ctl pgdn to move right and left. So how about ctrl home/end to go down one plus over one left/right and wrap top from the bottom, and ctrl insert/delete to go up one plus left or right one wrap bottom from the first line? I know, off topic here, but we don’t get the family together that often. :slight_smile:

With alcohol you get all the confidence and none of the competence.

Thanks, this is very useful.

Only thing is, the tabs are to narrow for me. I tried to change
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;}
to
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:70px;}, but it didn’t seem to work for me. Could you give me any pointers?

Also, the native functionality that starts with wide tabs and shrinks them if they start to be many is cool. Would there be a way to keep this while having several tabs, when the native display starts to use some scrolling? That’s a pity that Mozilla doesn’t offer an option to switch to multilines instead of scrolling.

To increase tabs width modify “browser.tabs.tabMinWidth” in about:config

If you find it does not work, make sure that your chrome folder is inside the folder which opens when clicking the ‘Open Folder’ button in step 2 of instructions I gave above. Some addons or operating systems may move this folder elsewhere it seems.

As for the small tab width, try setting min-width to 70 as well, that way all tabs are bigger “as a minimum”. But note that I previously found (an older) version of FF to work faster if the tab width is really small.

1 Like

it is possible to limit the rows?

This script causes serious slowness of sites being loaded in Firefox 61.0.2. Removing the script and restarting browser causes the sites to open immediately like usual.

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.