Multiple Row Tabs

[smihaila]

My vivaldi (x64) install was having the "for all users" option enabled, so the "resources\vivaldi\style" subdir was quite easier to find (in C:\Program Files\Vivaldi).

I've tested your version of the mod, and it WORKS. Wow! There is some ray of hope after all with vivaldi

Any idea as to why the tabs color changes whenever I switch between them?
Thanks very much for suggesting this way of approaching the problem!

[P.S. Maybe we could also run mc / the Midnight Commander for the connoisseurs - inside the vivaldi browser context :-} Well, I'm only joking for now]

[alexander.gorbovets]

@smihaila said in Multiple Row Tabs:

Any idea as to why the tabs color changes whenever I switch between them?

Perhaps this mod conflicts with the option to colorize tabs using site colors. I use the subtle theme with colorization turned off and there's no such issue

[smihaila]

@alexander-gorbovets said in Multiple Row Tabs:

@smihaila said in Multiple Row Tabs:

Any idea as to why the tabs color changes whenever I switch between them?

Perhaps this mod conflicts with the option to colorize tabs using site colors. I use the subtle theme with colorization turned off and there's no such issue

The 'subtle' theme does indeed seem to be stable. Without using any "colorization turned off" option (which I don't know what you're talking about / not sure where it is).

Thanks, great suggestions so far! Tomorrow I'll definitely install Vivaldi + this mod on my Mac laptop (I hate mac in general, but have to live with it at work )

[stuckOnFirefox56]

I am going through an awful divorce process with Firefox that has started when they launched their Quantum version. I've been using Firefox 56 since then, but recently I made my last effort to save the marriage by trying very hard to tolerate the stripped down Quantum version... sadly, it didn't work out.

I just installed Vivaldi and so far I liked most of the features—it's a relief to see a status bar again, as well as to have options to better manage tabs, but...

But the ability to have tabs in multiple rows was actually the main issue that made me look for another browser. Since Vivaldi was known to be highly customizable, I thought I would find it here, but that's not the case. :‌(

I tried the enabling it by using the common.css file, and I was able to do it to some extent, but it was very buggy.

I want to try Vivaldi, as I had a good first impression of it, but I see no point in trying it at this point knowing that it lacks one of the most important features that I use, so I'm going back to Firefox 56 with Tab Mix Plus for the moment.

Any idea if this is a feature that might be coming to Vivaldi? I will gladly try the browser again if it does—unless I happen to find and settle with some other browser that offers it first.

[alexander.gorbovets]

@stuckOnFirefox56 said in Multiple Row Tabs:

I tried the enabling it by using the common.css file, and I was able to do it to some extent, but it was very buggy.

In previous versions this mod worked well, but in version 2.4 the new tab stopped working properly with the mod. That's why I keep using version 2.3 where it works. I will try to fix it later when I'll have free time. Another problem with dragging tabs perhaps can't be fixed using CSS. Maybe it can be fixed by custom JS - I'm not sure. Dragging is not accurate but it's possible to move tabs when you get used to it

[ingosp]

@stuckOnFirefox56
Hello fellow FF 56 user. I luckily managed to stay on the older FF (55) in order to use TMP - up to now.

Now I was struck by the big firefox certificate bug. My TMP was disabled by this nonsense, now no browser on the internet will allow my more than a few tabs.

Do you know a workaround? I already had the xpinstall.signatures.required to false, but that seems to work only in developers editions. Now I try to find a FF below 59 , developers edition.

Or is there a solution in vivaldi or anywhere.

[fjelsten]

I am using Waterfox since this will allow you to use old extensions.

I am holding out for tab groups, better session handling - and multi-line tabs before I can switch to Vivaldi for real. As and old Opera user, I would really like to be able to do this.

[gibbins]

@ingosp Pale Moon is probably your best bet. It's really sad that something as central to life in this day and age - the browser, just can't seem to support the features so many of us want. Firefox had them due to the add-ons before it self-destructed. Now the lot of us are out here struggling to just find some way to make the web manageable for us today.

[alexander.gorbovets]

@ingosp you can try my multiline tabs mod:

https://gist.github.com/gorsash/0d4de703a84c620c7280830aba582758

Just append contents of this gist to the end of the common.css file:

On Windows common.css is located at %localappdata%\Vivaldi\Application\VIVALDI_VERSION\resources\vivaldi\style
(replace VIVALDI_VERSION with the currently installed Vivaldi version, for example - 2.2.1388.37).

In latest versions of Vivaldi the new tab button sometimes disappears. But I can sacrifice it to have multirow tabs. I will try to fix it later

[Pesala]

@alexander-gorbovets It works, but as you say it loses the New Tab button. It also shows two rows with only one tab.

It shows what can be done, but also demonstrates why it is not that easy to implement this feature. Too many areas where bugs could be introduced: Drag & Drop, Stacks, Tiling, Tabs on the side, etc.

People will have to be patient; this feature request is not even tagged as PIPELINE or IN PROGRESS yet. Too much to do, and not enough developers.

[OlegVartanov]

@Pesala I've removed this extra row with just margin-bottom: -30px; , but at the cost of Trash Can, now it disappeared) Also I'm using this browser only because of that multi row option.

[fpdragon]

I brought back the "new tab" button and removed the emty line. It's quick and dirty hack but I still drop it here for those who are interested:

/* multiline tabs */

#tabs-container {
    height: auto !important;
	/* margin-bottom: -30px; */
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar > .newtab {
    /* right: 0px !important; */
	/* top: 0px !important; */
	right: 0px !important;
    position: absolute;
    width: 30px !important;
	

	
	/* right: 10px !important; */
    /* top: -30px !important; */
    /* position: relative !important; */
    /* display: inline-block; */
    /* padding: 0; */
    /* vertical-align: top; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: grey; */

}

[fpdragon]

And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

/* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}

[alexander.gorbovets]

Mod to make equal width for all tabs including pinned. Width of all tabs is set to 100px. Pinned tabs are marked with asterisk:

/* Equal width tabs without shrinking  */
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 100px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 100px !important;
}


.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}

[OlegVartanov]

@fpdragon Thanks a lot!

[alexander.gorbovets]

@fpdragon said in Multiple Row Tabs:

And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

Version of this mod without tab borders:

/* multiline tabs */
#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;


 /* border-style: solid; */
 /* border-width: 1px; */
 /* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
 left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */


 border-style: none;
 border-width: 0;
 border-color: transparent;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
 left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

 border-style: none;
 border-width: 0;
 border-color: transparent;
}
.toolbar-tabbar {
 /* width: 30px; */

 /* border-style: none; */
 /* border-width: 0; */
 /* border-color: lime; */
}
.toolbar-tabbar > .newtab {
 top: 0px !important;
 left: 0px !important;
    position: absolute !important;

 /* border-style: solid; */
 /* border-width: 1px; */
 /* border-color: red; */


}

[sabine]

@fpdragon Hi, I like this mod very much and it brings me back to Vivaldi after I've ignored it for a long time just because of this missing feature.
Thank you very much for the work!!
Regarding the "New Tab" button... is it possible to "glue" it to the Trash icon? I'm not an expert at programming. Just a question as I'm so used to having it at the right side.

Regards,
Sabine

[ButterSig]

Thanks for updating the code @fpdragon and @alexander-gorbovets - Vivaldi is now usable for me again!

Is it possible to have the tabs stretch to fit the row? Or some kind of max width? The latest code posted by Alexander seems to keep the tabs at a specific width no matter how many tabs fill the tab bar.

[sabine]

@fpdragon
I've managed to make the tabs a bit shorter, so they do better fit my (wide) screen and still remain readable (and this even although I have no clue of programming ).
One more question: is it possible to limit the number of visible lines to 3 lines and in case there are more tabs than fit on 3 lines, have a slider to move the invisible lines up (and down)?

Thanks,
Sabine

[sabine]

@sabine said in Multiple Row Tabs:

@fpdragon
I've managed to make the tabs a bit shorter, so they do better fit my (wide) screen and still remain readable (and this even although I have no clue of programming ).
One more question: is it possible to limit the number of visible lines to 3 lines and in case there are more tabs than fit on 3 lines, have a slider to move the invisible lines up (and down)?

Dear @fpdragon and/or @alexander-gorbovets,

Happy New Year to you !

did you see my 2 contributions to this subject some 3 weeks ago?
Would love to hear your opinion to my sugestions.

Thanks,
Sabine