[MULTIROW TABS SUPPORT THREAD] - multiple tab lines

[nykoo]

First of all, Thank you for this FF57 life saver repo 👍

Maybe you can save my live by finding a solution to had multiple lines tabs possible (was possible via Tab Mix Plus prior to FF57). This will be great as i downgrade back to FF56 for this, session manager and passifox.

I'm not so confindent asking this as even chrome don't have this function :/

I really need this.

[maraigue]

https://00.bulog.jp/archives/1476 (article in Japanese)
Writing this code in userChrome.css can make the tabs aligned as multiple lines.

[Aris-t2]

Good find thanks.

It actually works up to Firefox 59.

Here is the port for this projects squared tabs size:

/* multi line tabs */
/* all credits go to https://00.bulog.jp/archives/1476 */

/* titlebar buttons */
#titlebar-buttonbox {
  vertical-align: top !important;
  display: block !important;
}
.tabbrowser-arrowscrollbox scrollbox {
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
  display: block !important;
}
/* titlebar button height */
toolbarbutton.titlebar-button {
  min-height: 31px !important;
}
/* tabs right position */
.tabbrowser-tabs {
   margin-right: -41px !important;
}
/* tab size */
.tabbrowser-tab:not([pinned]) {
  min-height: 26px !important;
  max-height: 26px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
  vertical-align: top !important;
  -moz-box-sizing: border-box !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
/* new tab size */
.tabs-newtab-button {
  vertical-align: bottom !important;
  height: 27px !important;
}

[nykoo]

i downgrade to FF56for now, but i will try your code as soon as i upgrade again to FF57... When i'd found a solution for my other missing addons functions.

Thank you very much @maraigue and @Aris-t2 :)

[macrogreg]

Thank you for the above CSS code snippet. I was about to uninstall Firefox - I kept using it for the multi-row tabs and their "upgrade" meant there is no longer a reason for me to stick with it. Because I am not aware of a different browser that can do multi-row tabs and due to your solution, I might use it for a little longer. :)

Note, the X (aka "close") buttons are a little annoying in the above solution. If you want to get rid of them, add the following to your userChrome.css:

.tab-close-button {
    display: none;
}

[aapo]

Code works, almost:
*It breaks 'new-tab-button'. Button doesn't even get focus anymore. For workaround adding button on toolbar: https://addons.mozilla.org/fi/firefox/addon/simple-new-tab-button/
*It breaks moving tabs with dragging. Any tab can be moved, but it can be dropped only to the first row (if there are two rows).

Suggestions:

/* Button for scrolling tabs to the left */
.scrollbutton-up{
    display: none;
}

/* Button for scrolling tabs to the right */
.scrollbutton-down{
    display: none;
}

/*Drop-down menu for all tabs */
#alltabs-button{
    display: none;
}

I don't know how to hide (this non-working) new-tab-button. Hiding .tabs-newtab-button is not working, anybody?

And for @macrogreg, I found that works very well: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_close_show_on_hover_only.css

[Aris-t2]

.tabs-newtab-button is the button in tab form after tabs.
#new-tab-button is the button shown in overflow mode.

[stampis]

any way to use this as some sort of hack solution to the #navbar aswell?
I've been using Icons + Text for back/forward/refresh etc..
And i want the location bar under those buttons.
With CTR that was easy, just pop in a "additional toolbar" under the buttons and move the locationbar to that..
Would it be possible to use some overflow css rule to the navbar and set the min/max width to force it to overflow to a "new" row?

[Aris-t2]

Navigation toolbar contains flexible items like address bar and search bar and some toolbar items/buttons get hidden once there is not enough space left for them to be displayed.

Because of that it most likely is not possible to create a multi lined navigation toolbar.

[Karlston]

Do you intend to incorporate this into CustomCSSforFx?

From what I've read multi-row tabs is a popularly requested feature.

Thanks