Category Archives: Software

© 2017 Timothy Takemoto Some rights reserved

Firefox’s update to version 107 destroyed my custom CSS for multi-row tabs. But the internet has an answer. These are the steps:

1. Go to about:config and turn layout.css.moz-box-flexbox-emulation.enabled to “true” (source of this important advice: here)
2. Strip out any old multi-row code from your C:\Users\[YOUR USER HERE]\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILE NAME]\chrome\UserChrome.css file [or create one if this is a fist time]
3. Replace it with the code at MrOtherGuy/firefox-csshacks [link updated].

Worked for me.

I cannot understand why Firefox refuses to make this a standard option.

Anyway, the full instructions are in the description of this video.
1. Find your FF profile folder (location is in about:support if you don’t know it)
2. Navigate to the Chrome sub-folder (or make one if there is none)
3. Create a file called userchrome.css with this content:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* 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*/

/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */

: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
}

@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
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;
}
}

.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: block;
--scrollbutton-display-model: none;
}

.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);
/*

1. Go to about:config and search for toolkit.legacyUserProfileCustomizations
2. Toggle it to true
3. exit and restart firefox

Worked for me!