Firefox – Multi-row tab bar in Firefox Quantum

browserbrowser-addonsbrowser-tabsfirefoxfirefox-extensions

Firefox Quantum breaks tab mix plus and tab kit. Is there any way to get a multi-row tab bar in Firefox Quantum?

If possible, I'm looking for a supported, stable solution, that is unlikely to break at the next new version.

Best Answer

Here's an updated userChrome.css that shows icons and hides the ugly scrollbar in the tab rows

UPDATE: Newer Firefox versions changed userChrome behavior again, now I've taken the script directly from here (with a minor change to the max rows and tab width): https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css:

/* 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: 6;
    --multirow-tab-min-width: 150px;
    --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;
  }
}

#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);
  /*
  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% }

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

Update July 7th 2020: UserChrome behavior has changed once again for FF78+, please update to the above or check the Github page for source CSS.

Related Question