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

Same here…
my TabMix worked for month now. But since yesterday it stopped working.
No additional rows. I am not very used on how to make manual fixes myself.

In my “userChrome.css”, I have this info:

.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;}
.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;}
#titlebar,#titlebar-buttonbox{height:var(--tab-min-height) !important;}
#titlebar{margin-bottom:calc(var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #titlebar{margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #TabsToolbar{margin-left:var(--tab-min-height);}
#titlebar:active{margin-bottom:0 !important;}
#titlebar:active #titlebar-content{margin-bottom:var(--tab-min-height) !important;}
#tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){display: none;}

My FF: 71.0 (64-Bit)
What & how should I make changes?
Please help. Thanks.

You should change your userChrome.css to the updated:
/* Makes tabs to appear on multiple lines /
/
Tab reordering will not work and can’t be made to work /
/
You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* It’s recommended to move tabs new-tab-button outside tabs toolbar */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll /
/
This maximum visible rows won’t work before Fx66 /
/
So this setting does nothing on Fx65 and all tab rows will be shown /
:root{
–multirow-n-rows: 3;
–multirow-tab-min-width: 100px;
–multirow-tab-dynamic-width: 1; /
Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can’t be clicked but the rows can be scrolled with mouse wheel /
/
Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* .tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}
/* Selectors for Firefox 71+ /
/
These are not tabs toolbar specific but horizontal scrollbox isn’t used elsewhere, except in bookmarks toolbar but there it doesn’t have [part] attribute since it’s not in shadow-root */
@-moz-document url(chrome://browser/content/browser.xhtml){
.scrollbutton-up[orient=“horizontal”][part]~spacer,
.scrollbutton-up[orient=“horizontal”][part],
.scrollbutton-down[orient=“horizontal”][part]{ display: none }

scrollbox[part][orient=“horizontal”]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(–tab-min-height) * var(–multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
}
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(–tab-min-height) * var(–multirow-n-rows));
scrollbar-color: var(–toolbar-bgcolor) var(–lwt-accent-color);
scrollbar-width: thin;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox{
min-height: unset !important;
}
#tabbrowser-tabs .scrollbox-innerbox{
display: flex;
flex-wrap: wrap;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}

.tabbrowser-tab{ height: var(–tab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
min-width: var(–multirow-tab-min-width) !important;
flex-grow: var(–multirow-tab-dynamic-width);
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don’t set to none or you’ll see errors in console when closing tabs
*/
/max-width: 100vw !important;/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }

Done for me FF71 64 debian

:root {--max-tab-rows: 5;--tab-growth: 2}
.tabbrowser-tab:not([pinned]) {flex-grow: var(--tab-growth)}
.tabbrowser-tab::after {border: none !important}
:root:-moz-lwtheme[lwtheme-image] {background-repeat: repeat-y !important}
#tabbrowser-tabs .tab-background {max-height: var(--tab-min-height) !important; min-height: var(--tab-min-height) !important}
@media (-moz-os-version: windows-win10) {
    #tabbrowser-tabs .tab-background, #tabbrowser-tabs .tabbrowser-tab {min-height: calc(var(--tab-min-height) + 1px) !important}
}
#main-window[sizemode="normal"] .tabbrowser-tab .tab-line,
#main-window[sizemode="maximized"] .tabbrowser-tab .tab-line,
#main-window[sizemode="fullscreen"] .tabbrowser-tab .tab-line,
:root[uidensity="touch"] .tabbrowser-tab .tab-line,
:root[uidensity="compact"] .tabbrowser-tab .tab-line {transform: translate(0,1px) !important}
.tab-stack {width: 100%}
#tabbrowser-tabs .tabbrowser-arrowscrollbox {overflow: visible; display: block}
:root[uidensity="touch"] .tabbrowser-tab,
:root[uidensity="touch"] .tab-stack {
    min-height: calc(var(--tab-min-height) + 3px) !important;
    max-height: calc(var(--tab-min-height) + 3px) !important;
    margin-bottom: 0 !important}
:root[uidensity="touch"] #tabbrowser-tabs .arrowscrollbox-scrollbox {
    min-height: var(--tab-min-height) !important;
    max-height: calc((var(--tab-min-height)*var(--max-tab-rows)))}
@media (-moz-os-version: windows-win10) {
    .titlebar-buttonbox, #titlebar-buttonbox {
        display: block !important; height:var(--tab-min-height) !important}}
#alltabs-button, :root:not([customizing]) #TabsToolbar #new-tab-button, .tabbrowser-tab::after {display: none}
#tabbrowser-tabs .tabbrowser-arrowscrollbox { overflow: visible; display: block;}
scrollbar {-moz-window-dragging: no-drag !important}
scrollbox {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: var(--tab-min-height);
    max-height: calc(var(--tab-min-height)* var(--max-tab-rows));
}
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator {position: fixed !important}
.scrollbutton-up, .scrollbutton-down, spacer {display: none !important}

As of FF72 under Linux this is now broken again, although I understand it does work under Windows. Neither this or the repo at https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/tree/master/Multirow%20and%20other%20functions/Multirow%20tabs work any more.

Thanks for removing my choice to run my browser the way I want, Firefox. Great work.

Anyone found a way to get multi rows back on FF72??.. its soo frustrating

It seems clear to me, regarding Mozilla and it’s most dedicated users.

It’s users are the beavers.
Mozilla is the land owner.

This will never end with the land owner relinquishing their land to USers.

It’s a matter of principle. We are the vermin. We must be defeated.

Hi Potnoodle, a good source for up-to-date userchrome.css hacks is the following subreddit:

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

The repo is working on Mac, Ubuntu and Windows, but Debian Firefox seems to be more strict with Javascript for some reason (I’ve had reports of other people using Debian having trouble with Multirow tabs before while it was working on all other platforms). If anyone using Debian was willing to test multi-row, I could try get it fixed.

I think it is traumatic in a way. It is like keeping water out of a boat while it keeps on coming in.
No peace. Which might have led to the question: why is tabs made impossible in Firefox? It’s a matter of wholesomeness, it can be seen more often. This wholesomeness may not be achieved. Not lasting. As if it was planned for a long time to get rid of it.

It seems Firefox has not lost enough marketshare already. Ignorant behavior to loyal users like this I can have with Google or Microsoft, no need to use Firefox for that. Thank you and goodbye.

FF76 broke the multi rows hack…

1 Like

This one still works on a standard Firefox - with easy installer!

2 Likes

Same for me. Luckily MrOtherGuy recently updated his “multi-row tabs” userChrome.css hack and it works nicely with Firefox 76: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

Applied MrOtherGuy hack and all is well. Save the day for me with FF!

Just updated to FF81,…n iy broke the hack! :sob:

This fix is updated to FF81 and easy to do:

  • with installer, just accept the warnings if on Windows.
    Very nice MultiRows. Only problem is it insists on Focus Tab on hover.

What do you mean with “insits on Focus Tab on hover”?
The installer doesn’t have any function enabled by default unless you tick their checkbox (and no function is auto-ticked when you tick some other)

If you installed one of them and want it removed, you have to tick that one and then press the “uninstall” button… otherwise it stays installed, even if you untick it and choose to install some other one.

Yep. That would be the expected behavior. So I was surprised that for me the Hover function stayed on even after full uninstall and re-install, without ticking it again. So I just changed it to at really high value, and accepted…

I know I can easily fix this myself in the code, but are just happy that I did not need to do more to get MultiRows working in FF81. But of course I warned others about that specific strangeness, I found.

No, what I meant is that just clicking “remove patch” without ticking the function you want uninstalled will just remove the patching, not the installed functions (the patching allows for the functions to work).

To remove the functions you’d have to select “no” on the window prompt that asks if you want to remove the patch after clicking the “remove patch” button, and then “yes” on the prompt that appears after (which asks if you want to remove the functions instead).

It was made like this to prevent deleting modified versions that people had changed after installing, but it seems like it’s counteruntuitive, so I’ll change the first prompt to remove everything instead.

Thanks Tom, all is well and good again with your heads up on the fix!