Multiple Row Tabs

pimalu

LOL, my projects sessions includes 500+ tabs. I do organize them opening more browsers, one for each theme.

Hababr

Hey guys, let me share my variant of multi row tabs. I tested it only in Windows so it's possible there are some bugs on other systems.

Differences of my script:

Pinned tabs are of default size (narrow).
Other tabs have adaptive width. The minimum width you can adjust on line 9 (--mrt-min-width).
Dragging of a tab works correctly.
Does not work with accordion tab stack style.

Demo.gif

/*
  Multiple Row Tabs - Created by @hababr. Version 2021.10.26.
  Base on work of and inspired by @nomadic, @fpdragon, @potmeklecbohdan, @alexander.gorbovets, @barbudo2005.
*/

/* Configuration */
:root {
  /* That will be the minimum width of a tab. You can adjust the number as you like. */
  --mrt-min-width: 106px;
}

/* Changes to allow multi row tab bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-tabbar-container {
  height: auto !important;
}

/* Fix overflow issue on secondary bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer {
  flex-basis: unset !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip {
  display: flex;
  flex-wrap: wrap;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span,
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .tab-position {
  display: inline-block;
  position: relative;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space {
  --PositionX: 0px !important;
  height: 30px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position {
  --PositionX: 0px !important;
  height: 30px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space:not([style*="--Width:31px"]),
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width:31px"]) {
  min-width: min(var(--mrt-min-width), var(--Width)*99999) !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position,
.toolbar-tabbar > .newtab {
  position: static;
}

/* Keep title visible on tabs */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small .tab-header .title {
  display: flex !important;
}

/* Keep tab stack counter visible  */
#browser:is(.tabs-top, .tabs-bottom) .tab-position .tab.tab-small .stack-counter {
  display: block !important;
}

/* Keep tab header style */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small.tab-mini .tab-header,
#browser:is(.tabs-top, .tabs-bottom) .tab.pinned.tab-mini .tab-header {
  padding-left: 6px !important;
  border: none !important;
  justify-content: normal !important;
}

/* Fix width for tab stack border */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width:0px"]) .tab {
    --Width: max(100%, var(--mrt-min-width));
}

#browser:not(.alt-tabs, .tabs-left, .tabs-right) .tab-position .tab:hover.tab-small.active .favicon {
  flex-shrink: 0 !important;
}

alexander.gorbovets

@hababr said in Multiple Row Tabs:

Hey guys, let me share my variant of multi row tabs. I tested it only in Windows so it's possible there are some bugs on other systems.
Differences of my script:

Pinned tabs are of default size (narrow).
Other tabs have adaptive width. The minimum width you can adjust on line 9 (--mrt-min-width).
Dragging of a tab works correctly.
Does not work with accordion tab stack style.

Good job! You managed to move the + button to the right, and added nice animation when dragging tabs.

I made my version where it's possible to adjust width of pinned tabs using the variable --mrt-min-pinned-tab-width:
https://github.com/gorsash/vivaldi-multiline-tabs/blob/94b84027c1b168781ba4b41fabbc58ecfa4bc75e/multiline-equal-size-tabs.css

fjelsten

@alexander-gorbovets Love it. Every time my multi tabs break, I regret updating. I don't for the life of me understand why this is not a standard feature.

Saved2Serve

@vertigo220
MTR have been working for me since last Feb. and now in version 5, and I have not had to do anything more, thank God, even if it cannot compare with the legacy Firefox customization, nor can MTW in FF Quantum (requires its own hack) but these are a vast improvement over the default of one tab row.

I have a standalone installation and keep my Custom UI Modifications in a separate folder outside the Vivaldi one.

I also use Waterfox classic for the extensions, and multiple installations of FF Quantum (so I can still use FF ESR 59) - each generally having its own purpose - but I think Vivaldi is the best of the Chromium family of browsers.

And I think that any shortcomings of it is not the fault of gifted industrious programmers, but with the Chromium engine itself, which has its reasons why such extensions as Tab Mix Plus and the old (vs. the new) Colorful Tabs extension (as shown in a past post) cannot be made to work.

So we can complain, but I am blessed to have so many options to enable better efficiency and Internet use. May God bless those programmers who do good work.

JumpingLawnChair

Hi all, I have been away since several pages ago, and am posting fast:

@vertigo220
Sorry you had such a bad time. Did you have the customizations stored outside of the Vivaldi folder (like in my earlier tutorial)? I did, and my multi-row tabs have worked through all the updates including now v.5.0.

@alexander-gorbovets
Does your recent update of the MRT hack include what @Hababr did? Because their version looks really great! Dragging tabs around had not been working smoothly!

I wrote a tutorial for using these hacks in this thread back in Feb 8, 2021 (for me its page 7). That seems to still work for me, but I want to update it with the new code here when I can get a moment. I am just another user.

Also, yes, I was able to give tab stacks permanent names by right clicking on them. Thanks to whoever mentioned that a while back (if I forgot to thank you then).

And to Vivaldi. Include this feature (MRT) officially in your browser (then you can better protect it)! I am still using Waterfox Classic AND Vivaldi.

Thanks to all who donate their time to help others!

Saved2Serve

@jumpinglawnchair
Thank you for your input and help. So many do not know what they are missing. Can I recommend the Scrollbar Customizer and Aurora dark theme here in the further interest of customization?
alt text

Thank God for eyes to see!

JumpingLawnChair

OK,

@alexander-gorbovets
I see that you credit @Hababr (and others) in the header of your code so I assume it is a ~~combo~~ evolution that includes all, so I am now using the code from that github link. It is definitely an improvement over what I had been using in my mini-tutorial from Feb 8,2021.

-Speaking of which, that tutorial still works well. It continues to allow the multi row tabs and has survived several updates. Just paste in this newer code when you get to that step.

@Saved2Serve
-Thanks for the addon and theme ideas. I am now happily using them!

Gelf

Is there a current working version that has a scroll bar for tabs, so you have, say, 3 rows visible and after that the top row is hidden and a scoll bar to the right of the tabs gives access to hidden rows?
I think there used to be one earlier in this thread, but it stopped working.

Radup

This feature, however hackish it is, is what made me switch to Vivaldi (from Waterfox). I would really love to see it implemented officially, with more options and easier to configure.

JumpingLawnChair

@radup
Agreed (again)! Also, if this would get built into Vivaldi, then possibly people could start making add-ons for it (I think).

JumpingLawnChair

I am just dropping by to say that the settings from alexander.gorbovets (29 Nov 2021, 13:07) are stunningly awesome! Such an improvement over earlier code! Thank you!

For anyone not super comfortable with working with this code, our step-by-step mini-tutorial from Feb 8, 2021 makes it pretty fast and easy to have multi row tabs in Vivaldi, and those simple modifications we made have still survived several Vivaldi updates.

Also, it might be a good idea to do this Vivaldi setting:

Tools > Settings > Tabs > Tab Features > Set Tab Stacking to "Two-Level"

intersk

закреплённые вкладки наезжают друг на друга
//
fixed tabs run into each other

dynamix

This post is deleted!

dynamix

@Hababr Great code, it works almost perfectly. There's a threshold when resizing the browser horizontally, the "Open new tab button" (the plus symbol) is moved onto the new row. It's not a big issue, but it would be nicer to have it stick to the last tab and not hang alone by itself.

dynamix

@Hababr It doesn't work in the stacked tabs.

barbudo2005

@dynamix

It works (not in the @Hababr Mod):

Look this post:

https://forum.vivaldi.net/topic/25453/multiple-row-tabs/107

dynamix

@barbudo2005 There were too many comments about the mod it gets confusing, can you share what you're using? Thanks.

barbudo2005

@dynamix

You only have to add this code to the Mod you are using:

#tabs-subcontainer.top.visible

{flex-basis: auto !important;}

Saved2Serve

@JumpingLawnChair
And regarding JumpingLawnChair's EASY VIVALDI MULTI-ROW GUIDE, then for reference "the info from nomadic's Vivaldi forum post here" is https://forum.vivaldi.net/post/442801.
Mine mod is still working, thank God,
alt text
yet missing the close x on all tabs, and I cannot right click on ant tab except the open one to copy the URL.

Thanks again for the work.