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

[Amad22]

I'm used to the CustomCCSforFx already; I will use TMPlus maybe when I buy new PC sometime.

I have some tabs with different height than other tabs (see atache). Is it due the CustomCCSforFx
or due to wrong CCS parameters (f.e. different height setting in two CCS files)
or due to the fact that I am using older Fx version (91, due to ESR update channel)?

[Aris-t2]

Either user Custom CSS for Fx v4.1.8 on Firefox 91 ESR or v4.1.9 on Firefox 101+.

tabs_multiple_lines.css + general_variables.css: --classic_squared_tabs_tab_height: 36px !important;

---

tabs_multiple_lines.css + general_variables.css: --classic_squared_tabs_tab_height: 26px !important;

[bottleblue]

Is moving tabs around still supposed to be buggy? If I try to move a tab to somewhere on the same row a lot of times it forces me to put it on a different row and I can't move it back.

[Aris-t2]

That bug was only solved by JavaScript, CSS only was always buggy.

[Crybal]

Since ff 100+ broke some things I really need to set it up again.Now I have these two problems.
1.I need to put a small line between the rows of multirow tabs or alternative put a black border to tabs in order for them to be clear to see.I found the way but only if default theme is used.If I use a black theme it looks like the image.

2.The "new tab" tab exist at the end of the row an not next to the last tab.How to move it there?

[LESHIY-ODESSA]

2.The "new tab" tab exist at the end of the row an not next to the last tab.How to move it there?

about:config

[1] [1a] [1b] [1c] [2] [3] — browser.tabs.insertAfterCurrent — true

[simoncarne]

In response to your point 1, I notice that you have coloured tabs. If you use a colour gradient from top to bottom
eg "linear-gradient(#xxxxxx,#ffffff)"
the lower section of the tab will be a different colour. I have used white in the example below.

[Crybal]

I thought of that but I do not like it so much.I would prefer a black border around each tab.If I cannot do it then I will use that as final solution.Thanks anyway

[simoncarne]

That's beyond my knowledge, but I'm sure someone else will be able to help you out. Good luck.

[Aris-t2]

By default Firefox places the "new tab" tab after last visible tab. Using this projects tabs_multiple_lines.css option does not change that.

The misconfiguration must be somewhere within the affected profile or settings.
Make sure the new tab tab/button is on tabs toolbar, when in customizing mode. Resetting toolbar configuration there might help too.

[Crybal]

Still nothing.However I noticed that borders appear only if Default system theme is applied.If I download and apply anything else the borders disappear

[Crybal]

I found the problem.When tabs_multiple_lines_force_newtab_button_visibility.css is enabled the new-tab tab is hidden!

[Aris-t2]

The gray color for the border is not the best solution, but it works for me for default tabs and default_tabs_photon.css, with all themes I tested.

Example

[Crybal]

Since nothing happened with themes other than default,I used this and at least it looks good
--default_tabs_bg_unloaded: linear-gradient(to top,rgba(255,255,255,.3),yellow,yellow,yellow,yellow,yellow,yellow,yellow,yellow);
-default_tabs_bg_default: linear-gradient(to top,rgba(255,255,255,.3),#F2F2FF,#F2F2FF,#F2F2FF,#F2F2FF,#F2F2FF,#F2F2FF,#F2F2FF,#F2F2FF);

[Crybal]

Any idea how can we change that gray color to eg.black?

[TroudhuK]

https://github.com/TroudhuK/userChromeJS/blob/master/MultiRowTabLiteforFx.uc.js broken with Firefox 106... I try to fix it, if someone can help me to easily know what are the changes between 105.0.3 and 106.0 (or to do the fix)...

Edit: fixed

[bottleblue]

I installed it. It works well. But the tabs are too narrow. Do you know how to make them wider?

[stonecrusher]

Does just changing the browser.tabs.tabMinWidth preference not work?

[bottleblue]

I don't see this line in 01-MultiRowTabLiteforFx.uc.js or any of the other files I downloaded.

Edit: I see it's in the about:config. Yes that seemed to work thx. Is there a way to adjust the tab height also?

Edit 2: ok I got it. In 01-MultiRowTabLiteforFx.uc.js there's two lines that say .tabbrowser-tab,#tabs-newtab-button { height: calc(8px + var(--tab-min-height)); } and #TabsToolbar > .titlebar-buttonbox-container .titlebar-button { height: calc(8px + var(--tab-min-height)); padding: 0 !important; width: 46px; }
I changed the 8px to a lower number and that changes the tab height.

[bottleblue]

@bottleblue In order to use .uc.js scripts you have to make some preparations once. See readme of the repository I linked above.

Just a question, you have to disable AutoConfig sandboxing to use this script. Does that mean sandboxing is completely turned off for Firefox? I'm wondering if using this is worth the risk.

[TroudhuK]

Fixed for Firefox 133

[glennpc]

There's an extra space below the tabs on fx107.0b2 when using tabs_multiple_lines.css
This wasn't present on fx106 or earlier versions.
I even tried removing the "List All Tabs" button by setting this to false:
browser.tabs.tabmanager.enabled

[Aris-t2]

Is this a Fx 107 issue only? I can not reproduce it on Firefox 106 or 108.

[glennpc]

Yes @Aris-t2 Fx 107 only.

[glennpc]

Just now updated to Fx 107.0b3 and still the same issue.

[Aris-t2]

Add this to the bottom of the corresponding CSS file:

box.scrollbox-clip[orient="horizontal"] {
  display: inline !important;
}

[glennpc]

Thanks @Aris-t2, that did it!

[Crybal]

1.Before the 115 version I could move the tabs (multirow). Now,whatever I tried ,I cannot do it.Any trick for it?
2.I also have a problem as it appears below.The navigation buttons overlap the main menu.How can I increase the height of the menu bar?

Thanks.

[Aris-t2]

Moving tabs was actually "fishy" right from the start, if only the CSS code was used. Look through the thread. Only the JavaScript version of this feature worked the way it should.

Does the issue with overlapping buttons/menubar happen with the latest version of this projects files?
Have you tried to reduce menubars text size? Does not seem to be the default one.

[arcanetrivia]

I think moving tabs has been at least semi-broken for a while now? But it does seem to have broken further, recently.

Actually I can, kinda, move tabs around, but it's difficult to make a tab land where I would want it. The target blank space showing where the tab would be dropped wants to stick to the first or third rows (in my case) and I can't successfully target the second; and then getting it in a certain position side to side is also very inconsistent behavior. My tab width settings are wider than default which may also be affecting things.

[TroudhuK]

I forgot to upload the Firefox 112 update for my Multi-Row userChrome JS, you can try it: https://github.com/TroudhuK/userChromeJS/blob/master/MultiRowTabLiteforFx.uc.js

@Crybal : It's because the big font for menus, you have to increase the value in tabs_below_navigation_toolbar_alt.css line 42 (18px by default).

[Crybal]

It doesnt work.As I can see it looks like the height of the field the address bar is in (including the buttons),is not that high to fit in. This field should be 5-6px higher

[bottleblue]

Using tabs_multiple_lines.css and latest Firefox. On youtube I noticed having multiple tab rows will change the layout width of the right side of the page. Generally the more rows you have the narrower it gets from the right. Different zoom levels + multiple rows makes the width alter differently as well. I'll post screenshots to show what I mean.

After 6 rows the width doesn't seem to change anymore. This probably happens on other sites too. Is there a way to keep multiple rows from affecting the page layout?

[Aris-t2]

This is default behavior and happens with all browsers. The vertically available space changes sizes and spaces of Youtubes web content. Other sites do this too. Just test with only one tab by changing the size of you browsers window.

test.mp4

[bottleblue]

Is there a way to make the page layout fixed? I understand it's default behavior but most people don't use multiple row tabs so they never notice this. This becomes more of an issue for us that do.

[diegobersanetti]

Hi all,

first of all thanks to the authors of this tweak! I wanted to report a problem, which is that one cannot move pinned tabs in the second row, since as soon as I start to drag a tab the "destination" space is always on the first row.

[yurikhan]

That’s by design in Firefox. You can’t pin a tab in the middle of a single-row tab bar, either.

[arcanetrivia]

Pinned or unpinned, unfortunately this is just how it is. Firefox doesn't really support multirow tabs at all (hasn't for quite some time) and CustomCSS can only kinda-sorta make it work.

[rulon]

broken in ff 131.
downgrade to 130b9 restore

[myname1614]

Created new profile.
Downloaded 4.5.8.
Added many tabs.
Not working:

my settings:

$ cat userChrome.css | grep -P '^@import'
@import "./config/general_variables.css"; /**/
@import "./config/color_variables.css"; /**/
@import "./css/buttons/icons_colorized.css"; /**/
@import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/
@import "./css/buttons/buttons_on_navbar_more_compact_mode.css"; /**/      
@import "./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css"; /**/
@import "./css/buttons/whatnew_button_always_hidden.css"; /**/
@import "./css/appbutton/appbutton_popup_icons.css"; /**/
@import "./css/appbutton/appbutton_popup_icons_colorized.css"; /**/
@import "./css/appbutton/appbutton_on_navbar_start_position.css"; /**/
@import "./css/appbutton/appbutton_in_titlebar_icon_only.css"; /**/
@import "./css/appbutton/appbutton_in_titlebar_autocolor.css"; /**/
@import "./css/tabs/classic_squared_tabs.css"; /**/
@import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; /**/
@import "./css/tabs/missing_tab_favicon_restored_default.css"; /**/
@import "./css/tabs/tab_close_always_visible.css"; /**/
@import "./css/tabs/tab_icon_colors.css"; /**/
@import "./css/generalui/private_mode_indicator_hidden.css"; /**/
@import "./css/generalui/bookmark_icons_colorized.css"; /**/
@import "./css/generalui/context_bfrsb_labels_without_icons.css"; /**/
@import "./css/generalui/searchbar_glassplus_indicator_hidden.css"; /**/
@import "./css/toolbars/toolbars_old_padding.css"; /**/
@import "./css/toolbars/tabs_toolbar_adjustments.css"; /**/
@import "./css/toolbars/searchbar_on_menubar_fix.css"; /**/
@import "./css/toolbars/bookmarks_toolbar_old_height.css"; /**/
@import "./css/toolbars/general_toolbar_colors.css"; /**/
@import "./css/locationbar/ac_popup_result_font_size.css"; /**/
@import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/
@import "./css/locationbar/urlbar_restore_visible_border.css"; /**/
@import "./css/locationbar/ac_popup_megabar_title_and_url_50percent_width.css"; /**/
@import "./css/locationbar/ac_popup_megabar_compact_results.css"; /**/

Same on old FF

[MrOtherGuy]

Your grepped results suggest that you are not importing tabs_multiple_lines.css at all.

[Aris-t2]

What MrOtherGuy said... :-)

[myname1614]

Indeed. Thanks. I found my old comments where I included this in my_userChrome.css.
I fixed something a long time ago and forgot.
Here is based on some old revision of:
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

I will return the original code.

[myname1614]

Thanks guys! Everything worked as expected
updated ff to 132.0b3

[nykoo]

update v4.5.7 perfectly fixed multirow tabs problem with firefox 131, thank you @MrOtherGuy and @Aris-t2 :)

[arcanetrivia]

This fix seems to also have had the side effect of fixing a problem I'd been having for quite some time where the tabs were somehow 1-2 px taller than the vertical space they were supposed to fit in under the bookmarks toolbar, so it was possible to slightly scroll vertically up and down if I hovered over the line of tabs and I'd often trigger it by accident. Now it doesn't do that. 👍

[HubbTain]

Hello
Since the update I can't get the focus/jump on the active tab. This is very annoying when you have a lot of tab rows.
Is there a solution please?
Thanks in advance

[Aris-t2]

I think we need a bit more information here.

Which update Firefox or this projects files?
With version/combination did work / does not work?

Vanilla setup of this projects files + tabs_multiple_lines.css works for me in Fx 132 and 133 beta.

Working examples:
Up to Fx 134: tabs_multiple_lines.css, if used default tabs on top.
Fx132: tabs_multiple_lines.css + tabs_below_navigation_toolbar_alt.css
Fx133+: tabs_multiple_lines.css + tabs_below_navigation_toolbar_fx133.css

[HubbTain]

Ok sorry
I've customized my userchrome.css a lot and for years...
Since upgrading to version 132, I've made the small changes to have multiple row again but now I'm forced to scroll until I find the active tab. And that's not very practical if you have dozens... of row.
I've searched and tested but still haven't found a solution.
Is there a css rule or rules that can be used to restore this behavior ?

=> the cause of the problem are :
scrollbox[part="scrollbox"][orient="horizontal"] > slot {
...
flex-wrap: wrap; AND overflow-y: auto;
...
}