Aapo Rantalainen's blog

Experiences with Information Technology and Open source

Multi row tabs on Firefox 66

Posted by Aapo Rantalainen on April 15, 2019

My previous post about Multi row tabs for Firefox 57 needed some updating.

I still think there must be a way to see all tabs in once even there are MANY tabs. Using multiple rows is a natural way for that.


Here comes one (not yet finalized) solution.

*Create folder named chrome in your firefox profile folder. If you don’t know where is your profile folder, use firefox and go to the address about:support add click ‘open profile folder’. (It is possible you have this chrome folder already).
*Create new text document on chrome folder, named userChrome.css (If you have it already, you should know why you have it already, and then try to merge modifications)
*Copy+paste this to the userChrome.css:

/* Remove tab title blur */
.tab-label-container[textoverflow]:not([pinned]) {
mask-image: unset !important;
}


/* Remove tab close button */
.tabbrowser-tab .tab-close-button {
visibility: collapse !important;
}

/* Hover makes X-button visible */
.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important;
display: block !important;
}


/* Active Tab Background Color */
.tab-background[selected="true"] {
background-attachment: none!important;
background-color: rgb(167, 167, 167)!important;
background-image: none!important;
background-position: none!important;
background-repeat: none!important;
background-size: none!important;
}


/* Multi-row tabs
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v2.css
*/
:root {
--tabs-lines: 3; /* number of rows, increase for more */
--tab_min_width_mlt: 80px;
--tab_max_width_mlt: 200px;
--tab-min-height_mlt: var(--tab-min-height,32px);
}

.tabbrowser-tab[fadein]:not([pinned]) {
flex-grow: 1;
min-width: var(--tab_min_width_mlt) !important;
max-width: var(--tab_max_width_mlt) !important;
}

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

.tabs-newtab-button {
vertical-align: bottom !important;
height: var(--tab-min-height_mlt);
margin-bottom: -1px !important;
}

.tab-stack {
width: 100%;
}

/* fix tab position */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
min-height: var(--tab-min-height_mlt) !important;
}
:root[uidensity=touch] .tabbrowser-tab:not([pinned]) .tab-content .close-icon {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

#tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: collapse !important;
overflow-y: auto !important;
min-height: var(--tab-min-height_mlt);
max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) ) !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow-x: collapse;
overflow: visible;
display: block;
}

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
display: none;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
opacity: 0 !important;
}

#tabbrowser-tabs * {
overflow-x: none !important;
}

#main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
display: block !important;
}

#tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 4px !important;
}

#TabsToolbar[currentset^="tabbrowser-tabs,new-tab-button"] #tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 0px !important;
}

/* End Multi-row Tabs */

Issues:
* This solution breaks moving tabs by dragging.

Credits:
* https://techne.alaya.net/?p=19043
* https://github.com/Aris-t2/CustomCSSforFx/
* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: