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

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

[ghost]

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

[ghost]

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

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

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

https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-374025289 (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 https://github.com/Aris-t2/CustomCSSforFx/pull/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 notifications@github.com 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: https://github.com/Aris-t2/CustomCSSforFx/issues/39#issuecomment-392547840

[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