Multiple Row Tabs

[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

[A Former User]

@sabine I'm sorry for not responding earlier, I was ignoring this thread as it produced too many comments.

I'm not sure if we can help you until you show us the code — every little change has impact (though sometimes not so big) and there are also many versions and I don't know which one you are using.

[sabine]

@potmeklecbohdan No problem :-). There's no hurry. Thank you for answering.

I'm using the code that was originally published by fpdragon and/or alexander.gorbovets on nov.15:

}
.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: auto !important;
  width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 120px !important;
}


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

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


.tab-strip > .newtab {
  left: 0px !important;
  top: 0px !important;
  position: relative !important;
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.tab-header > .favicon > svg {
  height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
/* 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; */

}

Thanks,
Sabine

---

modedit Fixed the code block

[A Former User]

@sabine Sorry, but I cannot read or copy it easily now and it wastes quite much space on the page. Please add an otherwise empty line like this (see below) before and after the code (edit the post, do not make a new one).

```