How to Restore Multi-Line Tabs to Firefox 83

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!

This entry was posted in Internet, Software. Bookmark the permalink.

6 Responses to How to Restore Multi-Line Tabs to Firefox 83

  1. Eric says:

    I’m rooting for that rooted Firefox.

    Adding “about:reader?url=” before a web address will automatically enable reader mode (if available) and/or get past post-html paywall notifications as well.

  2. dk says:

    for linux name it userChrome.css and not userchrome.css
    it is toolkit.legacyUserProfileCustomizations.stylesheets and not toolkit.legacyUserProfileCustomizations

  3. Miro says:

    Thanks mate,
    that save me a lot of time to fix this.

    Best regards
    miro

  4. Henry says:

    This worked fine until now FF 89. Still works mostly but the + for the new tab creates a second line. It no longer sits to the right of the tabs on the first line. If there are two lines of tabs open it does sit to the right on the second line. Is there a way to fix this?

    • I cleaned out all my userchome cruft and replaced it with this code. It’s ok, except that it makes giant tabs on a line with only a few ones, which I find disconcerting.

      I have been reading about “QuietFox” but haven’t had a chance to try it. If anyone has experience, please post it here.

  5. Summit is cool says:

    THx soo much helped a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.