[MULTIROW TABS SUPPORT THREAD] - multiple tab lines

[aris-t2]

[MULTIROW TABS SUPPORT THREAD] - multiple tab lines

[Aris-t2]

This will be fixed on next update.

[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;
}

[Aris-t2]

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

[eureekasigns]

To OP: This has been working well for me.
Allows multiple rows, and gives a scrollbar when it reaches 3.
Not perfect, but it's workable. Some issues with it - can't scroll with mouse, and dragging to different locations is quirky.

One other thing, is that with the rest of the default CSS changes Aris-t2 provides, one of them breaks the tab height appearance (I forget which). Generally, I have disabled most of those default settings, as I haven't had time to find exactly which one(s) are not getting along and why.
In my case, I have commented out lines (version 1.3.5 ) 36, 47, 172,
and UN-commented 201 (tabs below nav toolbar), though that one is my preference.

Note: you can also change the number of rows in the line below that looks like this (change 3 to something else)
max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */ )

From here: https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/

/*
The class .tabbrowser-tabs has been replaced with id #tabbrowser-tabs
changed selectors accordingly
*/
.tabbrowser-tab:not([pinned]) {
    flex-grow:1;
    min-width:94px !important; /* Needed important tag, width can be whatever you like */
    max-width: 94px !important; /* none - Makes the tabs always fill the toolbar width */
}
.tabbrowser-tab,.tab-background {
    height:var(--tab-min-height);
}
.tab-stack {
    width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto !important;
    min-height: var(--tab-min-height);
    max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible; 
    display: block;
}

#titlebar,#titlebar-buttonbox{
    height:var(--tab-min-height) !important;
}
#titlebar{
    margin-bottom:calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar{
    margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #TabsToolbar{
    margin-left:var(--tab-min-height);
}
#titlebar:active{
    margin-bottom:0 !important;
}
#titlebar:active #titlebar-content{
    margin-bottom:var(--tab-min-height) !important;
}
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
    display: none;
}

/* This enables maximum width before scrollbar is shown */
#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;
}		 

[TroudhuK]

About moving tabs with drag&drop, I found this userchromeJS script: https://github.com/Endor8/userChrome.js/tree/master/Firefox-57/Mehrzeilige-Tableiste
And I successfully use it with the v1 css (I don't like v2 because of the size of the last row tabs).

To use the script (copy/past explanations from @stonecrusher )

To make it work, download this file, unpack it, put config.js and the whole userChromeJS directory into your Firefox program folder (usually at C:\programs\Mozilla Firefox). Put config-prefs.js into C:\programs\Mozilla Firefox\defaults\pref. Put userChrome.js into your chrome folder next to userChrome.css (in your profilefolder, not programfolder). You can delete the userChrome.css and userContent.css which are shipped in the zip. If you've done that once, you now can load javascripts into the browser just by putting files with suffix .uc.js into the chrome folder. Put in the MultiRowTabLiteforFx.uc.js which I linked above and you'll be happy.

I miss the _tabDropIndicator like in Tab Utilities, but dragging a tab on an other tab move it just before.

Or, there is an extension with keyboard shortcuts called "Move Tabs".

Edit FIX FOR Fx60: replace "this.tabbrowser" with gBrowser

[TroudhuK]

Thanks @stonecrusher :)
Updated!
https://github.com/TroudhuK/userChrome.js/tree/patch-1/Firefox-57/Mehrzeilige-Tableiste
All known bugs are fixed: copy, multi-windows operations, after last tab drag and drop, link management... \o/

[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 :)

[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

[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

[Aris-t2]

Anyone seen a solution for the tab dragging issue yet?

[LESHIY-ODESSA]

Hello.

There are installed tabs in two lines - tabs_multiple_lines_v2.css

In the classic Windows theme, when you open a video from youtube to the full screen on the vertical scroll (1), a shadow appears (2) and if you close the tabs to hide it disappears, the shadow remains (3).

[simoncarne]

I have been experiencing a strange issue when I activate either tabs_multiple_lines.css or tabs_multiple_lines_v2.css in conjunction with the option to restore open tabs from the previous session. I find that in addition to the open tabs, the new session opens up three additional tabs that I had previously closed.

As a test that it really is the multi-row function that is doing this, I opened up a brand new profile and made just two changes: (i) setting the option to restore tabs from the previous session and (ii) installing the chrome folder with userChrome.css containing a single line of code to activate tabs_multiple_lines_v2.css. After step (i), the browser worked just fine. But as soon as I carried out step (ii), the three additional tabs reappeared when I opened a new session.

Does anyone have any suggestions for resolving this (or why it occurs)?

A couple of extra comments, in case they help:

1 I have been operating with this for several weeks and I notice that the extra (previously closed) tabs change over time to be replaced by more recent tabs (but still tabs that I had closed).

2 If I deactivate tabs_multiple_lines_v2.css, I have to restart Firefox twice in order to return the browser to normal behaviour (ie no extra tabs).

[Aris-t2]

@simoncarne
I've seen this behavior with multiple tab line settings too, but its not reduced to this case only. Sometimes even without having multiple tab lines ghost tabs magically reaper after restoring sessions.

In the past session restorers never played well with tab modifications achieved by add-ons or custom code. Maybe this misbehavior was carried over to Firefox 57+ as well. For some reason session managers seem to save more information than just the currently opened tabs and cause issues, when this information gets restored.

[LESHIY-ODESSA]

I also think that this is Firefox 57+. I have the opposite, some tabs disappear. So I use - Tab Session Manager.

[simoncarne]

@Aris-t2 , @LESHIY-ODESSA
Thanks, both of you, for your comments. I will explore Tab Session Manager.

[hedgieinsocks]

I got rid of ghost tab issue by tweaking line 52 of the 1st verstion
.tabbrowser-tab:not([pinned]) {
to
.tabbrowser-tab[fadein]:not([pinned]) {

[simoncarne]

Thanks, @arthem1990. I have just tried your suggestion above in tabs_multiple_lines_v2.css and, so far, it has worked there too.

[simoncarne]

Can anyone explain what "[fadein]" is doing in this context?

[hedgieinsocks]

without it in my setup closed tabs were not really closed but rather hidden and that is why they reappered next launch. You can check it with tab counter plugin or sidebar plugin e.g. Redux. Hope this can help you troubleshoot it further

[Aris-t2]

I will add the [fadein] to the code, thanks.

[simoncarne]

@Aris-t2
When you review the code for tabs_multiple_lines_v2.css, may I make a further suggestion to look at? There are several lines of code in this file which appear to be duplicated in /config/general_variables.css. The items I am referring to are:

:root {
  --tabs-lines: 3; /* 3 rows, increase for more */
  --tab_min_width_mlt: 80px;
  --tab_max_width_mlt: 200px;
  --tab-min-height_mlt: var(--tab-min-height,32px);
}

Changing the width and/or line numbers in tabs_multiple_lines_v2.css seems to make no difference.

[Aris-t2]

The idea behind this:

• users, who download release packages with all files, have the benefit of controlling all variables in one single file: general_variables.css
• users, who only pick this projects CSS files manually, will control variables inside files :root area of the file they want to use

For this to work variables inside general_variables.css use !important to override those inside other files.

[simoncarne]

@Aris-t2
Thanks for explaining.

[tomchiverton]

Does anyone know why drag to reorder doesn't work beyond the first few tabs ?

[Aris-t2]

It is a not (yet?) fixable bug as mentioned in the above discussion.

[tomchiverton]

Do we need to ask Mozilla to change something then ? I see some extra tab-related extension points in the latest release, for instance.

[Aris-t2]

The "multi tab" feature never was Mozillas thing. I doubt they will even consider looking into it. Most likely there is not much one can do about it from CSS perspective. TabMixPlus/TabUtilities used JavaScipt to achieve this and even then multiple tab lines cause many issues with other tab related add-ons and tab related changes over time.

[yurikhan]

Mozilla’s position seems to be that Eventually™ there will be an API for extensions to implement toolbars and another to hide the built-in tab bar, and Someone™ will implement a multi-row tab bar as an extension.

[LESHIY-ODESSA]

If you increase the font size in the menu (2) :root{--general_ui_font_size: 16pt;}, it does not work :

#tabbrowser-tabs .scrollbox-innerbox { max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) ) !important; }

And if you do not set the height of tabs higher (default 26px) :root {--classic_squared_tabs_tab_height: 33px !important;}, we get this:

While corrected so:

#tabbrowser-tabs .scrollbox-innerbox {max-height: 74px !important;}

Firefox 59
classic_squared_tabs.css
tabs_multiple_lines_v2.css

[Aris-t2]

You have to set variables inside /config/general_variables.css not inside actual css files/options or they get overwritten.

Note: variables have to be inside css files/options for users, who only use lose project files instead of the whole package.

[LESHIY-ODESSA]

The variable --classic_squared_tabs_tab_height: 33px !important; specified in — userChrome.css

Sorry, but I did not understand your answer.

I use only two files (userChrome.css) :
@import url("./classic_squared_tabs.css");
@import url(./tabs_multiple_lines_v2.css);

[Aris-t2]

I was under the impression you were using the whole package, but tried to set variables inside the actual css files classic_squared_tabs.css and tabs_multiple_lines_v2.css.

In your case you either have to change variable values inside those css files.

[LESHIY-ODESSA]

Thank you for your reply.

My messages are not for solving MY problems. I just wanted to inform you that when you increase the font there are problems.

Thank you very much for your work.

[Aris-t2]

I think there is misunderstanding about how these files are meant to be used.

• variables have to be set, before they are used inside the code
• variables can not be set in userChrome.css, if css files are imported afterwards (Firefox does not allow this)
• variables won't have any effect, if set in userChrome.css after imported files

To solve this:

• import another css files like general_variables.css, where those variables are set, before the actual imported files you want to use or
• change the variables inside target files' :root area

[firefoxneedsmultirow]

I ended up giving up as it appears firefox developers are going out of their way to disable the proper evolution of tabs.
I spent time to get ver 58 to work with multi rows then firefox updated and now that css function no longer worked. all workaround attempts did not work. I then want with Waterfox which imported all passwords, links, addons, ... seemlessly.
and I just to had to go to addons enable and restart waterfox. Now I have multirow browsing again after months I can finally get to work!!!.

Firefox was put out by waterfox. meaning water put out fire.

[stonecrusher]

@firefoxneedsmultirow
Depends on what you want and what you did. My multirow code works since 57, unchanged. Only thing I am missing is proper manual movement of tabs.

[Juvencus]

Is there a way to hide the scroll bar (horizontal in my case) that appears when you enable multirow tabs?

[LESHIY-ODESSA]

Is there a way to hide the scroll bar (horizontal in my case) that appears when you enable multirow tabs?

#tabbrowser-tabs .scrollbox-innerbox {display: block !important;}

[Aris-t2]

@Juvencus

Could you tell us in which case a horizontal scrollbar appears for you? I do not see it.

v1

v2

v1 (tabs not on top)

v2 (tabs not on top)

[Juvencus]

@Aris-t2
It was "tabs not on top" with multirow tabs v2. I've hidden it with @LESHIY-ODESSA 's recommendation but then a (for lack of a a better word) separator line appeared between my tab rows.

I'm using multirow tabs v1 now and it looks fine.

What are the drawbacks with using multirow v1?

(will post screenshots when I can)

[Aris-t2]

@Juvencus
You can see on my screenshots, that no horizontal scrollbar appears. Are you using the latest files? Multi lined tabs code was updated the last time in v1.7.8, but I recommend to use the latest package (1.8.1).

In "multiple tab lines v2" tabs resize between preconfigured tab min/max width values and you can set the amount of tab lines you want to be visible before a vertical scrollbar appears. If you are using the complete project package, the configuration is done inside ./config/general_variables.css. If not, you can change configuration within the file itself (tabs_multiple_lines_v2.css).

To avoid confusion make sure you are using the latest files (v1.8.1) from releases area and are also using Firefox 59+. Firefox 58 and 57 are not supported by this project anymore.

[LESHIY-ODESSA]

Could you tell us in which case a horizontal scrollbar appears for you? I do not see it.

Windows7, Windows Classic OS theme, Firefox 59.0.2 64-bit.
userChrome.css :
@import url("./classic_squared_tabs.css");
@import url(./tabs_multiple_lines_v2.css);

I do not use — general_variables.css

I have to use this:

#tabbrowser-tabs .scrollbox-innerbox {display: block !important;}

[Juvencus]

@Aris-t2

This is my current setup with v1 multirow.

This is the same setup when I switch multirow v2 with v1. I managed to hide the scroll bars but in doing so, the empty space between the tab rows appeared.

[Aris-t2]

@LESHIY-ODESSA

Using Windows Classic Theme and increasing font size might be the reason for horizontal scrollbar visiblilty. I will add this code on next update. It will disable horizontal scrollbar too.

#tabbrowser-tabs * {
  overflow-x: none !important;
}

@Juvencus
Maybe a misconfiguration causes this. Never use a "v1" and a "v2..." together. They are not meant to be used at the same time.

Start over with a clean setup and only enable "tabs_below_navigation_toolbar.css" and "tabs_multiple_lines_v2.css" and leave everything else unchanged. Use this package:
custom_css_for_fx_v1.8.1v2.zip

My results on Windows 10

v1

v2

[LESHIY-ODESSA]

Using Windows Classic Theme and increasing font size might be the reason for horizontal scrollbar visiblilty. I will add this code on next update. It will disable horizontal scrollbar too.

I inserted this code in tabs_multiple_lines_v2.css/userChrome.css and it did NOT solve the problem.

[Juvencus]

@Aris-t2

What I meant with "when I switch multirow v2 with v1" was when I disable multirow v2 and enable v1 but leave everything else the same. Not having both of them on. Sorry for the confusion.

Will try a clean setup with custom_css_for_fx_v1.8.1v2.zip and report back. Thanks!

[Juvencus]

@Aris-t2

This is the result with release 1.8.1v2, clean install, with only below nav bar and multirow v2 changed, like you asked.

[Aris-t2]

Could you put the "new tab" button back to tabs toolbar?

Isn't the "gap" the bookmarks toolbar?

---

EDIT
The missing new tab button changes the space between tab containers end and toolbars end causing the false horizontal scrollbar appearance.

Test this custom_css_for_fx_v1.8.1v3.zip

If the issue still occurs, the value in this code has to be increased.

#TabsToolbar:not([currentset*=new-tab-button]) #tabbrowser-tabs .scrollbox-innerbox {
  -moz-padding-end: 4px !important;
}

Tell me, if "4px" is enough or not.

[Juvencus]

@Aris-t2
v1.8.1v3 seems to do the trick thanks!

How do I get rid of the y scrollbar? I tried increasing the number of rows to 5 and 10 (from 3) but nothing changed in that regard in tabs_multiple_lines_v2.css

Edit: I fixed the number of rows and y scrollbar issue. Thanks for the help with the rest!

[LESHIY-ODESSA]

Install tabs_multiple_lines_v2.css — custom_css_for_fx_v1.8.2

userChrome.css

@import url("./classic_squared_tabs.css");
@import url("./tabs_multiple_lines_v2.css");
:root{--general_ui_font_size: 16pt;}
* {font-size: var(--general_ui_font_size) !important;}
#PanelUI-button, #PanelUI-button * {font-size: var(--general_ui_font_size) !important;}
.toolbarbutton-badge-stack .toolbarbutton-badge{font-size: 10px !important;}
 :root {--tabs-lines: 2 !important;  /* for 'tabs_multiple_lines_v2.css' only */}
#tabbrowser-tabs .scrollbox-innerbox {display: block !important;}
 {--classic_squared_tabs_tab_height: 33px !important;}
/* https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-373749840  */
 #tabbrowser-tabs .scrollbox-innerbox {max-height: 74px !important;}

That's because of this addition

.tabs-newtab-button,

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

we get scrolled.

While corrected so:

/* .tabs-newtab-button, */
.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height_mlt);
}

A horizontal scroll is also present.

[Aris-t2]

OK, I see what happened. Your case was not caught yet.

Case one (default configuration): tabs followed be new tab button on tabs toolbar.
Case two: new tab button not on tabs toolbar
Case three: tab button on tabs toolbar, but something else (hidden) between tabs and new tab button

I could only reproduce your issue with case three, so the fix for it can be tested by using this package:
custom_css_for_fx_v1.8.2v2.zip

The ".tabs-newtab-button" code got also altered to avoid another glitch. I don't think you should use the above code the way you do in your userChrome.css.

Use this

@import url("./classic_squared_tabs.css");
@import url("./tabs_multiple_lines_v2.css");

:root {
  --general_ui_font_size: 16pt;
  --tabs-lines: 2 !important;  /* for 'tabs_multiple_lines_v2.css' only */
}

* { 
  font-size: var(--general_ui_font_size) !important;
}

#PanelUI-button, #PanelUI-button * {
  font-size: var(--general_ui_font_size) !important;
}

.toolbarbutton-badge-stack .toolbarbutton-badge {
  font-size: 10px !important;
}

Don't use this (it even has errors in --classic_squared_tabs_tab_height line)

#tabbrowser-tabs .scrollbox-innerbox {display: block !important;}
 {--classic_squared_tabs_tab_height: 33px !important;}
/* https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-373749840  */
 #tabbrowser-tabs .scrollbox-innerbox {max-height: 74px !important;}

[Juvencus]

@Aris-t2 @LESHIY-ODESSA

I fixed that by increasing the number of tab rows.

However, I had to do it in general_variables.css
/* for 'tabs_multiple_lines_v2.css' only */
--tabs-lines: 5 !important;

(up from 3)

The option in tabs_multiple_lines_v2.css doesn't work for me.

:root {
--tabs-lines: 3; /* 3 rows, increase for more */
--tab_min_width_mlt: 80px;
--tab_max_width_mlt: 200px;
--tab-min-height_mlt: var(--tab-min-height,32px);
}

Increasing the number of rows removes the x scroll bar as well.

[Aris-t2]

@Juvencus
The variables inside the actual files only work, if you are using loose files. Using the whole package all variables have to be set in general_variables.css. Its not a bug, its a feature.
Anyway, with the latest test build (custom_css_for_fx_v1.8.2v2.zip) no horizontal scrollbars appears for me independent of the amount of tab lines.

[LESHIY-ODESSA]

I give up. Apparently I will stop updating to your new version.

tabs_multiple_lines_v2.css

/* .tabs-newtab-button {
  vertical-align: bottom !important;
  height: var(--tab-min-height_mlt);
} */

otherwise :

[LESHIY-ODESSA]

How to do it like this?

[Aris-t2]

You must be doing something different. The vertical scrollbar does not occur here with "custom_css_for_fx_v1.8.2v2.zip" for one line of tabs.

---

I always suggest to backup and remove everything from "chrome" folder and to start over with a fresh copy of this projects complete package. Never use other code or your code additions while testing.

---

Your new tab button was not attached to tabs, because you moved it to the right and there are other invisible buttons between tabs and new tab button.

You can drag & drop new tab in customizing mode onto the right area of the tabs or hit "restore defaults" in customizing mode to restore its default position.

---

In your case I suggest to start over with a clean new profile for testing purposes. Use Portable Firefox for that.

[Onepamopa]

So, does the mouse scrolling work with any of these userChrome files?

[Aris-t2]

v1 always displays all present tabs. If you have 200 tabs open, it shows 200 split into multiple lines. Nothing to scroll there.
v2 shows a customizable amount of lines and a vertical scrollbar appears when more tabs are present than those lines can hold. The scrollbar can be scrolled manually by clicking on it, but the mouse wheel has no effect on it.

[stonecrusher]

Just dropping this here...
Had some problems with FF60 and modifying the tab height in multirow v1.
This is what works for me now:

/* Multirow v1 with smaller tab height */
:root {
  --height: 25px;
  --tab-min-height: 0 !important;
}

/* titlebar buttons */
#titlebar-buttonbox {
  vertical-align: top !important;
  display: block !important;
}

.tabbrowser-arrowscrollbox scrollbox {
  overflow: visible !important;
}

.tabbrowser-arrowscrollbox scrollbox > box {
  display: block !important;
}

/* tabs end position */
/*.titlebar-placeholder[type="pre-tabs"],*/
.titlebar-placeholder[type="post-tabs"] {
  width: 0 !important;
}

/* tab width */
/* See following URL
about:config?filter=browser.tabs.tabMinWidth
adjust tab-width according to number of pinned tabs and newtab-button */

.tabbrowser-tab {
  min-height: var(--height) !important;
  max-height: var(--height) !important;
  vertical-align: top !important;
  -moz-box-sizing: border-box !important;
}
#TabsToolbar > tabs#titlebar,
#TabsToolbar > tabs#tabbrowser-tabs {
  min-height: var(--height) !important;
  --tab-min-height: 18px !important;
  margin-bottom: 0 !important;
}

/* 'new tab' tab size */
.tabs-newtab-button {
  vertical-align: bottom !important;
  height: var(--height) !important;
}


/* Button for scrolling tabs to the left */
/* not necessary? */
/*.scrollbutton-up ,
.scrollbutton-down,
#TabsToolbar #alltabs-button{
  display: none;
}/**/

[Aris-t2]

Doesn't look like you were using latest files of this project. The css file for multiple tab lines differs from this one.

[TroudhuK]

For the userChromeJS used to drag and drop with multirow tabs, I fixed and improved the script for Firefox 60, the drop indicator is working now. Update your .js from here:
https://github.com/TroudhuK/userChrome.js/tree/patch-1/Firefox-57/Mehrzeilige-Tableiste

And in tabs_below_navigation_toolbar.css:

#tabbrowser-tabs .tab-drop-indicator {
  /*margin-bottom: 0px !important; COMMENTED */
  z-index: 100 !important;
}

[stonecrusher]

Yes, it's a derivate of an older version which I customized. Don't know what the additions of the latest version do better. My custom one works very well for me.

To the contrary, the latest version from here leads to very small tabs for me

@TroudhuK
Nice, I'll give it a try!

[cybrguy]

Is this update available in English? I would be more comfortable trying it if I could read it...

[Aris-t2]

@cybrguy
MultiRowTabLiteforFx.uc.js -> the main js file you need to "load" via a userChromeJS
mehrzeilige-Tableiste.css -> equal to "multilined_Tabstoolbar.css"
main page ( https://github.com/TroudhuK/userChrome.js/tree/patch-1/Firefox-57/Mehrzeilige-Tableiste ) ->

CSS Code modifications
tab width:
CSS Code modifications:

.tabbrowser-tab:not([pinned]) {
  flex-grow: 1 !important;
  display: -webkit-box !important;
  min-height: 32px !important;
}

change the above to:

.tabbrowser-tab:not([pinned]) {
  flex-grow: 1 !important;
  display: -webkit-box !important;
  min-height: 32px !important;
  min-width: 150px !important; /* min value - default 76px */
  max-width: 150px !important; /* max value - default 225px */
}

change/modify values carefully
make sure values are identical
select what you need and add it to userChrome.css

/* --- Tab text color --- */

/* Active tab */
.tabbrowser-tab[selected="true"] .tab-label {
  color: rgba(50, 205, 50, 1.0) !important; /* limegreen */
  text-shadow: 1px 1px 1px #aaa !important;
}

/* Inactive tab */
.tabbrowser-tab:not([visuallyselected=true]) .tab-label {
  color: rgba(65, 105, 225, 1.0) !important; /* RoyalBlue */
  text-shadow: 1px 1px 1px #666 !important;
}

/* Loaded, but not selected tab (not supported by Fx60+ anymore) */
.tabbrowser-tab:not([selected="true"])[unread] .tab-label {
  color: rgba(255, 0, 0, 1.0) !important; /* red */
  text-shadow: 1px 1px 1px #999 !important;
}

/* not reloaded, but visited tab */
.tabbrowser-tab:not([selected="true"])[pending] .tab-label,
.tabbrowser-tab:not([selected="true"])[visited] .tab-label {
  color: rgba(0, 0, 0, 0.7) !important; /* black */
  text-shadow: 1px 1px 1px #bbb !important;
  font-weight: 900;
  font-size: 120%;
}

/* currently loading tab */
.tabbrowser-tab[busy] .tab-text.tab-label {
  color: rgba(0, 191, 255, 1.0) !important; /* deepskyblue */
  text-shadow: 1px 1px 1px #999 !important;
}

[tomchiverton]

I placed the contents of MultiRowTabLiteforFx.uc.js in userChrome.js in the same folder as userChrome.css but nothing changed. Drag and drop of anything other than first 6 or so tabs does't work.

What you need as well is some bits from two of the files in https://github.com/nuchi/firefox-quantum-userchromejs

Add the .xml file into the profile folder, and then add the contents of the .css to the end of userChrome.css

Sorted.

[TroudhuK]

#39 (comment) (the quote contains a full functional explanation)

@cybrguy
The only file to consider and take is MultiRowTabLiteforFx.uc.js (don't care about the readme and the other file), explanation is in the above comment, and use it with the multirow tabs CSS from here.

[tomchiverton]

Pull request #126

[Aris-t2]

Sorry, this is not a userChrome.js collection. Otherwise many other features and option from CTR would be ported to this project too.

[TroudhuK]

How can the Firefox/GitHub community provide the equivalent of integrated solutions, like the old extensions, grouping look and behaviour? No way to be visible for the Firefox users? Maybe build a WebExtension or an external program grouping some useful GitHubs projects, listing features and HowTo, a GUI to parse/edit userChrome.css / js with checkboxes, a fixed format for the parsing...

You know, like Messenger Plus! (RIP), we need a Firefox Plus!.

[Aris-t2]

@TroudhuK
None of these projects modifications can be used within a WebExtension. That is why it is "here" on Github. ;-)

Firefox forks like Waterfox and Basilisk support the "old"/legacy add-ons this project is based on. I also posted some of my add-ons on Palemoon page, so they can be used with that browser/fork officially.

Maintaining an own Firefox fork or creating external software to create custom styles and scripts costs time and money. Most of these things are done in free time between family, work, life and other projects.

[tomchiverton]

A user chrome JS fix is the only way to solve multi tab row issues. Please reconsider, or multirow will stay broken. Unless you know of another approach that shows merit? You don't have to bring in the whole of some other framework just to fix this single issue.

…

-- Tom Sent from my phone.

On 28 May 2018 15:55:17 BST, Aris ***@***.***> wrote: Sorry, this is not a userChrome.js collection. Otherwise many other features and option from CTR would be ported to this project too. -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: #39 (comment)

[stonecrusher]

@tomchiverton
Maybe you could make an own repo just for multirow tabs and it will be linked here?

[TroudhuK]

@Aris-t2 : I know about the technical limitations, but almost nobody can know our work here. I was talking about a webextension to be a bridge for someone looking through the Firefox addons interface, to take knowledge of solutions, or better, a program to make it easier to manage. Because maintaining all these CSS / JS takes time and can be profitable for a lot of users.

It's just some thoughts, not a requirement especially for you.

Maybe, thanks to userChromeJS, there is a way to convert and wrap the old .xpi to Quantum! And to continue to maintain the old extensions, visible from an other portal (not the Mozilla one).

[tomchiverton]

@stonecrusher you're welcome to checkout https://github.com/tomchiverton/CustomCSSforFx/tree/patch-1 and use that.
Use is just like the parent project - put the contents of the classic folder in the profile folder, then enable the new option marked EXPERIMENTAL in the tabs section of the classic/userChrome.css file as well as the multirow tab 'v2'

[stonecrusher]

@tomchiverton
Thanks. It was just a suggestion as it won't be integrated here.

I personally only needed the .uc.js file (which is the same as TroudhuK's), it already fulfills my needs for proper drag n drop combined with my .css multirow file.

[Crystal-RainSlide]

Can we try Flexbox or Grid Layout? I'll give them a try after my Material Design theme released. Which won't bring formal Chrome appearence back but formal Material Design before Android O on the new Firefox.

[AkiraErebos]

Is somehow possible get rid of this black line under tab? Is this bug? I'm using FF62 and Win10. When adding new tabs, bug is preserved, but only in the first row. After second row appears, line is no longer there.

[Aris-t2]

Are you using the latest files this project offers?
Are there any buttons on tabs toolbar?

[AkiraErebos]

It was v2.0.6 yesterday, but I tried today v2.0.7 also. I'm using your project only because of multi-row and short bookmarks, so I have disabled every line in userChrome.css except 5 (one multirow and four about bookmark menu appearance). I tried disabling everything except tabs_multiple_lines_v2.css, but unwanted line is still there. I have few buttons on toolbar (through addons), but line is preserved even when I disable every ad-don and restart Firefox. Many thanks for your time.

[Aris-t2]

Strange that I can not see that line with browsers default tabs on Fx62. I need to know more about your configuration. Are you using Windows HiDPI modes?
Could you also test a new Portable Firefox setup?

[AkiraErebos]

Sure. I downloaded portable version. Unpacked it, I changed nothing, then unpacked custom_css_for_fx_v2.0.7 to newly created chrome folder, disable every line in userChrome.css, and then enabled @import "./css/tabs/tabs_multiple_lines_v2.css". Line is now there. I'm using 28" monitor with 1920 × 1080 resolution and I don't use DPI scaling (is set to 100 %).

Then I transported this fresh portable version inside freshly installed virtual machine Windows 10 with smaller resolution, Line is there and is also there inside normal installed version of Firefox (clean install, and the only this css setting enabled).

Then I transported it inside Window 8.1 virtual machine and line is even there.

[Aris-t2]

I now know what is causing this glitch. Next update will take care of it.

[AkiraErebos]

That's fantastic. Thank you for your work and time.

[Aris-t2]

This change will have one side effect. Changing ui density will have no effect on tab size. Sizes will have to be set within the given variable.

[Crybal]

In multiplerow mode,how can I limit the viewable lines eg. in three lines and browse to other through arrows (up/down)?

[Aris-t2]

Limiting tab lines is only supported for tabs_multiple_lines_v2.css.

You can set the amount of lines here (if using CustomCSSforFx package)
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/general_variables.css#L32

or here (if using only tabs_multiple_lines_v2.css)
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v2.css#L14

[Crybal]

...I am not using this version of multirow...

[Aris-t2]

Well, this project only supports those two versions and only one allows you to set the amount of rows.

[Crybal]

Well, this project only supports those two versions and only one allows you to set the amount of rows.

OK,I change it to v2 and it is OK.
However I would suggest that
max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) )
should be
max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt)+2px )
in order to see that there are more below.
Can the middle mouse button scroll through the lines?

[Aris-t2]

I think the scrollbar indicating "more available" lines should be enough "in order to see that there are more below".

Unfortunately mouse scroll button does neither scroll through tabs nor is it moving the scrollbar.

[Crybal]

I ve found this https://forum.manjaro.org/t/howto-enable-tab-switching-in-firefox-using-mouse-wheel/39954 .It scrolls through tabs but it doesnt suits me...I d preffer lines instead of tabs.Maybe you could make it work!!!

[Aris-t2]

@Crybal
Rebinding tab scrollbox to mouse wheel is completely unrelated to multilined tabs this project provides.

[Crybal]

Would it be possible to have a second scroll bar on the left?

[albino1]

In addition to the bug where you can't drag tabs without them jumping to the top row, another related bug that's probably a consequence of enabling this is that you can't open links in the last tab position.

If you have three rows and you open a link in a new tab from Row 1 it will show up correctly at the end of Row 3, but then immediately jump back to Row 1. It's interesting that it goes to the correct place at first only to move to the wrong place so quickly.

This happens whether you change the option in about:config manually or even if you use an extension like Tab Open/Close Control.

The original code for this seems to have been written about a year ago, I wonder if Mozilla has added anything that might make the tab dragging and tab positioning work a bit better now? Multi Row Tabs was probably the best thing about pre-Quantum Firefox (TabMixPlus ftw), and I'd hate to just give it up, so I'll probably just deal with the dragging thing if push comes to shove :)

[Aris-t2]

@Crybal
Scrollbars don't work like that. You can't have them on both sides.

@albino1
Since both features work fine with default single-lined tabs, I doubt Mozilla is changing anything there ever.
Some features just can not work with dirty CSS hacks like these options are.

Most likely there are Javascripts out there to offer "proper" versions of multilined tabs.

[albino1]

Appreciate the information. Bummed about that, but at least I won't get my hopes up for something that will probably never happen :D