-
Notifications
You must be signed in to change notification settings - Fork 0
Multi row tabs
Adam Katz edited this page Mar 4, 2018
·
1 revision
This does not facilitate perfect functionality the way the Tab Mix Plus add-on did before Firefox 57 (Firefox Quantum) prevented it, but it's still workable.
Note the caveats below!
Code:
:root {
--tabs-lines: 3; /* 3 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); */
height: var(--tab-min-height_mlt) !important;
}
.tab-stack {
width: 100%;
}
#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;
}
Caveats:
- Dragging in the multi-row tab area will affect a random row (the leftmost will be topmost and the rightmost will be bottommost, but other locations will be only vaguely accurate)
- There is a large space below the bottom row, so the scroll bar looks odd
- Don't put a button (like "new tab" or "containers") on the tab bar or it'll look ugly
- The scroll wheel doesn't do anything
See also:
- Mozilla Bug 1226546: Support Tab Mix Plus as a webextension
- The future of Tab Mix Plus
- Other CSS implementations: