[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.

[John0877]

Also, with "tabs_multiple_rows_v2.css v2.4.2, is it possible to set the height of tabs toolbar, to set how many tab rows show (w/o scrolling), like either 1, 2 or 3 at a time?

--tabs-lines: 6; / 3 rows, increase for more / --tab-min-height_mlt: var(--tab-min-height,32px); / set own value here, if used without configuration files /

Should do it.

[Aris-t2]

@bendover22 I don't know the combination of code you are using, but enabling tabs_multiple_lines_v2.css only gives me this result (haven't seen your glitch ever here):

[bendover22]

To answer your question, I had a clean userChrome.css, w/ only the @import for tabs_multiple_lines_v2.css (from CustomCSS v2.4.2) - nothing else (no @namespace), and it showed the blank spaces. Also tried themes that shipped w/ Mint distro - same blank spaces; so not a Linux theme prob.

So, I tried "v1" (not v2) of tabs-multiple-lines.css in Fx 65 LINUX (I thought v2 was compatible w/ Fx 65).
It immediately solved prob of spaces under tab rows.

1) But using "v1" (not v2) of tabsmultiple lines.css - doesn't show a VERT. SCROLLBAR in Fx 65-Linux (see screen). There're several differences in original & v2 versions. Any idea which lines are preventing the scrollbar in the *_lines.css file, in Fx 65?

2) Using tabsmultiple lines.css, All tab rows show - ALWAYS. Isn't there code to set number of visible rows (assuming I get the scrollbar back)? I'd rather have 1 or 2 rows showing.

3) Another version I tried earlier of tabs-multiple-rows, 2 rows max were visible. But what ever version or code it was, also had "blank spaces" under tabs.

4) FWIW, browser toolbox shows tabs_multiple_lines,css has an "invalid property value" for: #tabbrowser-tabs * { **overflow-x: none !important;** Also, "Invalid property value" for

tabbrowser-tabs * {

**overflow-x: none !important;** .........(user agent) minimal-xul.css:23.  And the line is stricken bcs of the same rule  in Custom-CSS: tabs_multiple_lines.css .  They're both invalid.

[Aris-t2]

There is a reason why there are two versions of that option. Both achieve(d) multiple tab rows in an own way. The first one did not limit the amount of rows and the second one offered a scrollbar after a predefined amount of rows.

Normally I don't test files separately, but I gave it a shot. Using just tabs_multiple_lines_v2.css without any other CSS code within userChrome.css on Fx 60-65 gave me this result:

Win10

Ubuntu

[bendover22]

@Aris Apparently the extra space under tabs was caused by commenting out the whole section under / remove crap set by Firefox 58+ / Didn't check if it was one line or all. I don't know Mozilla's default values for those.

But I am suspicious that Fx 65's "density" setting under Customize mode was somehow involved (or not). I discovered in Customize mode, the tabs seemed OK, but absolutely - the missing Vert. scrollbar appeared when in Customize mode (when / remove crap set by Firefox 58+ / was commented) . So I started playing around.

I had tried the original "tabs_multiple_lines_v2.css" (no mods) by itself in userChrome.css many times. Using @import rule (the only code in userChrome) & copying the file contents to userChrome.css. You have a note in the userChrome.css file in the zip package, about

• some '@import' calls might not work properly on macOS and Linux
• ... CSS code has to be added to userChrome.css file manually

I copied tabs_multiple_lines-v2.css contents to a blank userChrome.css (with or w/o an @namespace) & it didn't totally fix it until I toggled the "Density" settings (after uncommenting the "remove crap set by Firefox 58+" section). I've seen other broken features start working after toggling settings.

@John0877 - Thanks, but I'm not quite sure what you indicated in https://github.com/aris-t2/customcssforfx/issues/39#issuecomment-466840045. If putting 6 rows in was just an example; and the other lines are removed? or just not shown to save space? If "tab-lines=3" shows all 3, using 6 won't make fewer visible (which is what I wanted). You can set it to 2 or 1 & it limits visible rows.

Quick Restarting Firefox: when I stopped using Stylish addon, I found one way - make a bookmark for about:profiles (that has a fast "restart normally" button). Add it to the bookmarks toolbar (whether the toolbar's shown or not). Can add the "Show your bookmarks" icon in Navbar.

Over the years,

[John0877]

@bendover22 My post was just the relevant lines I think. I had also hoped 6 would mean 6 visible before it went to scrollbar but that didnt actually happen.

@Aris-t2 I have tabs multiple lines v2 active with lines=6 but it still does the scrollbar on the 3rd line. How can I have more than 2 visible without it going to scrollbar on the 3rd line?

[Aris-t2]

@bendover22 I haven't tested density settings in my previous tests, but I did now and nothing changed. Still working like in the above screenshots, but with larger or smaller tabs depending on the chosen setting.

In general, if you test anything and write/ask about it here, always use clean unmodified files, so everybody who tries to verify your results is on the same level as you. Not sure about others, but I do not offer any support for issues occurring after users modify the code or add own code. In case of multiple tab rows you can see, that both options are not written by me, I added them to this project by request and tried to make them compatible to this projects other tab settings and variables, but more and more deeper changes by Mozilla have broken this feature multiple times. Firefox 66+ for example is not properly supported anymore because of this. If somebody shares new or fixed code, I will add it again.

@John0877 If you are using all of this projects files, you have to set tab-lines variable inside config\general_variables.css file. "6" works fine here.

[bendover22]

I understand your point, Aris. I tried the orig tabs_multiple_lines_v2.css file (several times) In Mint, copying the file contents into userChrome worked better. I was just stating some things I had tried.

The v2 file works, but apparently the "UNSET" lines prevent adding even a left border for unselected tabs - using other code. I assume the unset code is needed to make multiple rows AND a scrollbar work.

However, I can add back a SELECTED tab border, with the original _v2.css file in place, using tab[selected="true"] { and possibly other selectors. I tried every selector I could find to add a left border to unselected tabs, while using original v2 multi lines file. Of course, you 1st have to list a type of border style, like: border-style: solid;
Thanks.

[Aris-t2]

Alright, now I see what this is about. You were trying to "restore" tab borders, by removing the code I titled with "crap". ;-) Not sure why, but none of the default resizing tricks to change .tabbrowser-tab::after und .tabbrowser-tab::before boxes height, so I removed it completely to get rid of the space below tabs.

The way Mozilla implemented "tab border" makes it incompatible to at least this multirow tabs code, because those ::after/::before boxes are treated like content positioned on the same line tabs are. The result is them being just moved into next line creating the space you showed on your screenshots.

Try simpler code like this to get tab borders (for example):

.tabbrowser-tab:not([selected]) {
  border-left: 1px solid transparent !important;
  border-right: 1px solid !important;
}
.tabbrowser-tab[selected] {
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
}

[lakitu13]

Just updated to FF66, multirows v2 seems to display all tabs at minimum width instead of being flexible

[TroudhuK]

Good news! I prefered v1 because of that.

[Aris-t2]

@lakitu13 I'm not actively working on multiple tab line styles. If someone offers a solution, I will add it to this projects files.

[eureekasigns]

If you are using all of this projects files, you have to set tab-lines variable inside config\general_variables.css file. "6" works fine here.

I seem to have "infinite rows" now, no matter what changes to either general_variables.css or the v2.css. Have tried several variants of either/both, and it still seems to have no limit. I am wondering if some other option is preventing this now or if they are just finally breaking it in more ways.

Still, I'm glad this is incorporated. Wish it was something Mozilla cared to simply include (including tabs on bottom).

[Aris-t2]

@eureekasigns That "comment" was for Fx60-65. Fx66 requires new code.

[Laxilef]

@Aris-t2 Hey. On FF 66.0, multiple tabs v2 does not work for me. I was looking for an element with a 'scrollbox-innerbox' class, but it does not exist in the DOM. To solve the problem, I replaced: #tabbrowser-tabs .scrollbox-innerbox { on #tabbrowser-tabs .tabbrowser-arrowscrollbox {

And it worked. p.s. sorry for my english, this is google translate.

[eureekasigns]

@Aris-t2 Hey. On FF 66.0, multiple tabs v2 does not work for me. I was looking for an element with a 'scrollbox-innerbox' class, but it does not exist in the DOM. To solve the problem, I replaced: #tabbrowser-tabs .scrollbox-innerbox { on #tabbrowser-tabs .tabbrowser-arrowscrollbox {

And it worked. p.s. sorry for my english, this is google translate.

This is very interesting. Thank you

It seems to scroll with mousewheel again which is very nice.

One problem is that I'm now seeing only 1 row (instead of 3). Almost rather have 1 row vs "infinite" but will continue to search for a solution that allows 2 or more shown (but not infinite)

@eureekasigns That "comment" was for Fx60-65. Fx66 requires new code.

Understood. Thank you for the response, and for all you do with this great project. I understand this is kind of an "extra" here, but I greatly value the ability to have it included (multi row)

[eureekasigns]

@eureekasigns That "comment" was for Fx60-65. Fx66 requires new code. Still reviewing this, but it appears to work well. Mouse scrolling works, fixed width works, expected number of rows works.

Only thing odd was loss of new tab button in the tab area, but I don't care about that. Moved to main area and use the keyboard shortcut (ctrl+t) most of the time anyway for a new tab.

Not sure if it's worth including as a "v3" in the main project or "version 66" or if it may have elements that tread on any other areas.

I'm just posting because it appears to be a viable solution for what I'm after and may help others who have version 66 and stock "v2" is not working as expected.

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

[Aris-t2]

I will look into it this weekend.

[hedgieinsocks]

ubuntu 18.10, ff66, v2 only => the pinned tabs are noticeably lower than usual tabs

[Aris-t2]

I ran some tests and tried to incorporate the great solution of "MrOtherGuy" into CustomCSSforFx.

Test this:

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/****************************************************************************************/
/* multirow / multiple tab lines - modified for CustomCSSforFx **************************/
/* all credits go to the original authors: **********************************************/
/* https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/ ***********/
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css */
/****************************************************************************************/

/* NOTE  ********************************************************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */

:root{
  --tabs-lines: 4;
  --tab_min_width_mlt: 80px;
  --tab_max_width_mlt: 200px;
  --tab-min-height_mlt: var(--tab-min-height,32px); /* set own value here, if used without configuration files */
}

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc(var(--tab-min-height_mlt) * var(--tabs-lines));
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

/* Test for Firefox < 66 */
@supports not (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox{
    min-height: unset !important;
  }
  #tabbrowser-tabs .scrollbox-innerbox{
    display: flex;
    flex-wrap: wrap;
  }
  #tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
  }
}

.tabbrowser-tab{
  height: var(--tab-min-height_mlt);
}

#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.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 > stack{
  width: 100%;
  height: 100%;
}

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{
  display: none !important;
}

/* hide private window indicator, window controls and titlebar placeholders */
#main-window[tabsintitlebar] #TabsToolbar .private-browsing-indicator,
#main-window[tabsintitlebar] #TabsToolbar #window-controls,
#main-window[tabsintitlebar] #TabsToolbar .titlebar-spacer[type="pre-tabs"],
#main-window[tabsintitlebar] #TabsToolbar .titlebar-spacer[type="post-tabs"] {
  display: none !important;
}
#TabsToolbar .titlebar-placeholder[type="pre-tabs"],
#TabsToolbar .titlebar-placeholder[type="post-tabs"] {
  opacity: 0 !important;
}

/* hide tab borders set by Firefox 58+ to solve 'blank space below tabs' issue */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border-left: unset !important;
  border-image: unset !important;
  border-image-slice: unset !important;
  border: 0 !important;
}

/* Fx66+ fix */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: visible !important;
  display: block !important;
}

/* fix scrollbar */
#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}

[electric-skeptic]

Works for me on Win 10, FF 66.0.1 Still have that tab-dragging quirk where they won't move between lines, but I can work around that

[lakitu13]

Just updated to FF66, multirows v2 seems to display all tabs at minimum width instead of being flexible

Reporting back on this, I fiddled around the general_variables.css in /config/ and I believe multiple lines is actually using --tab_max_width: instead of --tab_max_width_mlt: , maybe the min width strings as well.

[Aris-t2]

@electric-skeptic Tab dragging is disabled to fix the scrollbar. You can remove the last code part of the above script to see the difference.

@lakitu13 I can confirm tab width settings won't work properly within this script, but overriding --tab_max_width variable does not work either.

EDIT I just checked it again. Setting --tab_min_width_mlt and --tab_max_width_mlt variables inside general_variables.css file works here. If you are not using the whole package and only use the the above style, those variables have to be set within the styles root area.

[lakitu13]

@Aris-t2 Upon further investigation the cause was my userChrome.css leaving @import "./css/tabs/tab_maxwidth.css"; uncommented, sorry for this!

[tomchiverton]

Anyone else getting tabs that are loading being lower down the tab bar than ones that are loaded since updating to FF66?

Edit : replace use of classic_squared_tabs.css with classic_squared_tabs_australized.css to fix

[zolstarym]

I ran some tests and tried to incorporate the great solution of "MrOtherGuy" into CustomCSSforFx.

Test this:

The tab min/max width variables don't seem to take, instead staying at some default value, but I have flex grow/shrink with that, when I didn't before.

edit: seems to be related to multirow: close tab button is hidden but mouse clicks in the right most area of the tab is closing that tab even though I can't see the X

[Aris-t2]

@tomchiverton Post a screenshot

@zolstarym I can only repeat the above statement: https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-475735318

Try to setup this projects full package again and only replace the above file and the variable values inside the general variables file.

[tomchiverton]

Still occurs with classic_squared_tabs_australized.css - loading, pin'd tabs are lower than others

[ArkadiuszMichalski]

If someone uses own .js files anyway, they should reach Endor8 solution. Everything works as it should with Nightly68, we have new tab button in proper place, standard scrooll and supports drag & drop!!! And all works fine with Aris styles, Btw, solution from TMP was better (especially for drag&drop when we see some marker where drop tab), but maybe some day someone port it to user js. Pure CSS has to much limit for such simple thing.

[Aris-t2]

@tomchiverton Have you reduced your tab height? Looks like that for me on your screenshot.

[ArkadiuszMichalski]

@Aris-t2 Is there any solution for lwt solving this problem: I use last yor files and check this variants:

@import "./css/tabs/tabs_multiple_lines_v2.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_multiple_lines_v3.css"; /**/ /* <--- EXPERIMENTAL */

and both have problem with background, looks like lwt is over, can we stretch it somehow or duplicate it?

[bottleblue]

If someone uses own .js files anyway, they should reach Endor8 solution. Everything works as it should with Nightly68, we have new tab button in proper place, standard scrooll and supports drag & drop!!! And all works fine with Aris styles, Btw, solution from TMP was better (especially for drag&drop when we see some marker where drop tab), but maybe some day someone port it to user js. Pure CSS has to much limit for such simple thing.

I don't speak German so I don't understand how to use the scripts on that page. I would like to try it if I could.

[tomchiverton]

@Aris-t2 I've changed --tab_max_width: --tab_min_width: in config/general_variables.css --tab_min_width_mlt: --tab_max_width_mlt: in css/tabs/tabs_multiple_lines_v2.css And that's about it.

After an "svn update" this morning, it's now all pinned tabs (loading or not) that are higher than normal tabs

[simoncarne]

I have switched from tabs_multiple_lines_v2.css to v3 (from release 2.4.9) to use with Fx 66. All seems good except for the new tab button on the left-hand side, which has been covered over by the tabs. [Note: When I select "Customize" under the hamburger bar, the new tab button is still there. But it is covered up when I exit "Customise".]

Any suggestions?

[bottleblue]

Do multi-row tabs not work with tabs below navigation bar? Separately they both work fine but together it looks messed up.

[zolstarym]

Is v3 multiline forcing the open new tab button to show on the tab bar? I don't see an option to disable it in the css setting file, and I can't get rid of it by using menu/customize, as I can't drag and drop it at all.

[Aris-t2]

@ArkadiuszMichalski Lw-themes don't offer full window themes, but there might be a way to repeat their code vertically.

Something like that would be needed (untested):

#main-window:-moz-lwtheme {
  background: var(--lwt-header-image) !important;
  background-repeat: repeat-y !important;
}

@bottleblue You don't have to speak German. Either test the scripts or use Google translator.

tabs_below_navigation_toolbar_fx65_v2.css + tabs_multiple_lines_v3.css works in Firefox 66+, but it has some issues.

@tomchiverton Can you test pinned tabs with this projects default setup, and then start enabling options one by one to determine the option responsible for this glitch. I tested a few combination but pinned tabs never moved like an your scrrenshot. classic_squared_tabs.css/classic_squared_tabs_australized.css + tabs_below_navigation_toolbar_fx65.css/tabs_below_navigation_toolbar_fx65_v2.css + tabs_multiple_lines_v3.css + tab_close_hidden.css

@simoncarne Does this also happen, if new tab button is on the right?

@zolstarym Yes, 'new tab' tab visibility is forced. Otherwise it randomly disappears and reappears. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v3.css#L88

[bottleblue]

@bottleblue You don't have to speak German. Either test the scripts or use Google translator.

tabs_below_navigation_toolbar_fx65_v2.css + tabs_multiple_lines_v3.css works in Firefox 66+, but it has some issues.

I did test it and used google translator but it didn't work at all. It looks like there's some extra steps I need to do but I'm not sure.

[simoncarne]

@Aris-t2 With the button on the right, it appears next to the last tab, rather than being ina a fixed location on the right hand side of the browser. As a result, the button moves around according to the number of tabs I have and, when the number of rows exceeds the visible limit, the button disappears down at the bottom. I would prefer to have it on the left-hand side if possible.

[Aris-t2]

@bottleblue Maybe those scripts don't work on your end.

@simoncarne Add this to the bottom of your userChrome.css, if you are using tabs_multiple_lines_v3.css:

:root:not([customizing]) #navigator-toolbox #TabsToolbar #new-tab-button {
  display: unset !important;
  visibility: visible !important;
}

.tabs-newtab-button {
  display: none !important;
  visibility: hidden !important;
}

[simoncarne]

@Aris-t2 Perfect. Many thanks.

[macrogreg]

I cannot believe Firefox keeps breaking the styling. I am not surprised its market share it not doing well. I really enjoy the browser, but with this strategy, oh well....

Anyway, thank you for the fix to the recent break around multi-line tabs. :) tabs_multiple_lines_v3.css works for me as long as I set my config variables in general_variables.css (I set tab_min_width_mlt and tab_max_width_mlt to 225px and tabs-lines to 10; I recommend to all to try that layout :) ).

What I also noticed is that my above-mentioned tweak to hide .tab-close-button no longer works and the whole ab_close_show_on_hover_only.css option does not work either. Does anyone have any pointers on that? Is there maybe a place where Firefox documents its style class monikers?

Thank you!

[macrogreg]

In respect to my above comment https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-476413190, just found a solution to the issue in ab_close_show_on_hover_only.css. For the Firefox 66, prepend the two styles there with #TabsToolbar #tabbrowser-tabs:

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
  visibility: collapse !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  display: block !important;
}

@Aris-t2 please take note.

:)

[ArkadiuszMichalski]

@Aris-t2 yes, this code do the job, maybe add them to your multiline tab solutions (as repair lwt background image, default comment or uncomment)

#main-window:-moz-lwtheme {
  background: var(--lwt-header-image) !important;
  background-repeat: repeat-y !important;

@bottleblue I don't want spam here but the ease way is install xiaoxiaoflood loader, you have nice instruction in english, after this you can put to chrome folder any script you want, so put there one of the Endor8 script for multiline tab, restart browser and enjoy.

[jpfleury]

Hi,

I now have Firefox 66, so I updated CustomCSSforFx to use the new code for multirow tabs (v3). However, the style of my tabs is no longer the same. Here's how it was with Firefox 65:

and here's the new style with the updated CustomCSSforFx code:

Is there a way to set my previous tab style?

Thanks a lot for your useful code.

[Aris-t2]

Unset this style: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L323

[jpfleury]

@Aris-t2 Great, thanks a lot for this quick answer. It's now almost the same. However, the vertical borders between tabs are no longer apparent:

On Firefox 65, these borders had the color #9E9FA0.

[Aris-t2]

Remove this line https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v3.css#L84 and this rule https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v3.css#L107

[tomchiverton]

@Aris-t2 the issue is with "./css/tabs/classic_squared_tabs_australized.css" turned on. This removes the blue highlight bar at the top of pinned tabs, but adds the weird side effect. With it commented out pinned tabs are fine.

[Aris-t2]

Point to the code inside that file.