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

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/

You are right, spytev.

I spent a couple of hours or more getting multirow tabs to work in FF69 now in FF71 it is broken again!

I have made sure that toolkit.legacyUserProfileCustomizations.stylesheets is still set to true.

This is awful. What are Mozilla thinking about?

Aha MrOtherGuy has provided updated css that works in FF71 here

It is a shame that we need to jump through these hoops to get such basic functionality.

Been trying to get tabs back for a couple weeks. Thanks for posting the setting to update. Worked great!

Hi all.

This is very frustrating - losing functionality when updating!
Could someone post a full updated method to get the multiple row functionality working.
I’ve read this thread but I am struggling to piece together all the steps.
Im on FF71.0.

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}