Multiple Row Tabs

vertigo220

After what happened the other day, I've decided Vivaldi just isn't the browser for me and I'm going back to Waterfox. I've spent the past half year using it as my primary browser, trying to give it a fair chance despite constant frustrations from various design elements, most notably the lack of multiple tab rows and the issues with the rows provided by the hack, whether due to the hack itself or Vivaldi's behavior. And while I really like the tab stacking feature, and think it would be great in addition to multiple rows, I think multiple rows should have been the priority. Regardless, the other day showed that not only did they decide to do tab stacks instead, but either they did a lousy job with it, or this hack conflicts with it. Either way, regardless of whether it's their fault or the fault of an unsupported hack, I need multiple rows for a browser to be of any use to me, so if the only way to get that is through a hack, and if that hack causes problems with the official features, then I guess it just isn't going to work for me.

Anyways, for the sake of others using both the hack and tab stacking, in the hopes of possibly saving someone else the frustration that wasted over half an hour of my time, be very careful with the close tabs to the right/left functions. One would expect that to be contained within a tab stack, but I had ~90 tabs/stacks open, with ~5 or 6 of those being stacks containing anywhere from a few to a dozen to a couple dozen tabs, so probably close to 150 tabs altogether. And when I right-clicked a tab in a tab stack that was my fifth "tab", EVERY SINGLE TAB/STACK to the right of it closed, leaving me with only about 20 of my tabs left. Luckily, I periodically bookmark all my tabs, so I opened all the bookmarks from that (which revealed another issue with tab stacks, because doing so doesn't open the tabs in stacks, so each stack has to be done separately, then restacked, proving to be a nightmare all on its own) and then had to dig through the history to find any other tabs I'd opened since last bookmarking them.

And that, of course, led to yet ANOTHER discovery of Vivaldi's general crappiness. To try and make it easier to sift through the history, I searched for various terms of sites that flooded the history in order to remove them and declutter it. But I would search for a term, e.g. xyz mail, and it would filter to show all pages that matched, and I would start selecting, then it would refresh (I can only assume it has such poor search performance that it was still finding more entries even after it seemed to be finished) and mess up my selections. After dealing with that and trying to select and reselect stuff and delete stuff in chunks instead of trying to select it all, in order to be fast enough to do it before Vivaldi decided to refresh it again, I eventually realized that it was screwing up and causing me to delete stuff I didn't intend to delete. I think it was randomly filtering to the search term then changing and showing other stuff that didn't match. Anyways, that's when I really had enough. It just amazes me that something as basic as filtering and cleaning the history is such a buggy, PITA mess. So yeah, Vivaldi, I really, really tried, but I need a browser I can rely on, not one that's going to screw me over not once, but twice in one day.

And hopefully this will at least save someone else the headache this POS browser caused me.

alexander.gorbovets

@vertigo220 said in Multiple Row Tabs:

After what happened the other day, I've decided Vivaldi just isn't the browser for me and I'm going back to Waterfox. I've spent the past half year using it as my primary browser, trying to give it a fair chance despite constant frustrations from various design elements, most notably the lack of multiple tab rows and the issues with the rows provided by the hack, whether due to the hack itself or Vivaldi's behavior. And while I really like the tab stacking feature, and think it would be great in addition to multiple rows, I think multiple rows should have been the priority. Regardless, the other day showed that not only did they decide to do tab stacks instead, but either they did a lousy job with it, or this hack conflicts with it. Either way, regardless of whether it's their fault or the fault of an unsupported hack, I need multiple rows for a browser to be of any use to me, so if the only way to get that is through a hack, and if that hack causes problems with the official features, then I guess it just isn't going to work for me.

@rainbowmagicmarker
@Saved2Serve

I have updated this mod to work with Vivaldi 4.0. Just replace the old mod with this new file (ctrl+s and save to your mod directory):
https://raw.githubusercontent.com/gorsash/vivaldi-multiline-tabs/master/multiline-equal-size-tabs.css

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.