[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

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

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

[Aris-t2]

This will be fixed on next update.

[simoncarne]

I have been experiencing a strange issue when I activate either _tabs_multiplelines.css or _tabs_multiple_linesv2.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_linesv2.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_linesv2.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_linesv2.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_linesv2.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/generalvariables.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_linesv2.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

[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

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

[ghost]

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)

[ghost]

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

[ghost]

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

[ghost]

@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!

[ghost]

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