Multi-row tab bar in Firefox Quantum

Question

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.

Answer 1

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.

Answer 2

I tried looking for alternatives for this too and found no real options but to use a combination of addons:

I'm now using Tab Mix Plus (WebExtensions) and the Tree Style Tab addons, along with Session Sync, using a combination of those I can make a more bearable experience the tab management.

The tree style tab allows for a good alternative to the multirow feature due to the width of monitors and current resolutions, listing several tabs at the sidebar, the session sync improves the management via grouping of tabs in windows sessions and tab mix plus webextensions allows for related pages to stay in the same window. It's obviously not a multirow setup, but it's better than nothing.

Answer 3

The best solution, with tab movement support is: Izheil's Multirow tabs

Answer 4

I agree with https://superuser.com/a/1480226/460302 that Izheil's Multirow Tabs is the most promising means of obtaining multirow tabs in FireFox. However, that answer does not tell how to implement the solution. Here is some background:

First, Izheil states that his Javascript-based solution Works with Firefox 69-70. I can confirm that it does not work with Firefox 68.2.0 esr (the latest ESR as of this writing, 10/23/19) under Windows 10. However, Izheil provides several fully automated workarounds for Windows installations (see below).

Second, Izheil states [sic],

Mozilla finally removed all XBL bindings from firefox, so in advance of the removal of the posibility to inject JS scripts through userchrome.xml, I decided to update the patching method to another one that doesn't rely on this.

Basically this means he is no longer relying on userchrome.xml as an installation method. To deploy using the new Javascript-based solution you need to patch Firefox to enable JS injection. This is probably an excellent innovation, but it does involve multiple manual steps, including clearing one's FF startup cache following each install.

However, if you wish to keep using XBL bindings (which seems the only option with FF versions prior to 69), you may accomplish this automatically using one of several Windows batch scripts currently included in Izheil's repository. To use this method,

1. Download and extract https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/archive/master.zip

2. Navigate to the extracted file's Installers directory

3. Read the file titled READ BEFORE RUNNING ANY BATCH FILE.txt

4. Select and execute one of the .bat files found in this directory

5. Restart FireFox and leave a comment to this answer with your results, including Windows and FireFox versions.