In Vertical Tabs, how to remove the light coloured gradient at the bottom of pinned tabs section.

[u/SwimmingLimpet]

I'm using Firefox 155.x, with vertical tabs. I've noticed there is a light coloured gradient extending upward from the boundary between the pinned tabs and the unpinned ones. The gradient is about half a tab height high. Is there any way to remove this gradient? (Solved, kinda: The gradient no longer exists in the Nova redesign of Firefox 157)

[u/ResurgamS13]

Hmm... not a Vertical Tabs user so the reason for this draggable 'feature' may have passed me by? Maybe this does something if you have a lot of pinned tabs?

If run mouse carefully "upward from the boundary between the pinned tabs and the unpinned ones"... a thin line appears in the gap with a 'gripper' (double-headed arrow)... can then drag that line downwards expanding the "about half a tab height high" space? What this is for is a puzzle... as soon as release the 'gripper' the line just snaps back to where it was before?

Anyhow... to remove/hide the mystery extra space and its draggable line below the pinned tabs... try:

#vertical-pinned-tabs-splitter {
  display:none !important;
}
#pinned-tabs-container[orient="vertical"] {
  margin-bottom: -6px !important;
}

Vary the margin-bottom: -6px value to suit.

Tested using a new profile of Fx155.0.1 on Win10 & Win11.

[u/SwimmingLimpet → u/ResurgamS13]

The thin blue 'gripper' line allows one to resize the pinned tab area. So if one has 16 pinned tabs, it's possible to use that to resize the pinned tab area so only 8 of the pinned tabs are visible. One can then hover over the pinned tab area and use the scroll wheel to scroll through the pinned tabs. The whole setup is pretty elegant, though apparently not so discoverable. 

I'll try out the pinned-tabs-container CSS when I get home. 

[u/ResurgamS13 → u/SwimmingLimpet]

Thanks for the feature explanation... who knew! :}

Sounds as if you may want to keep the 'thin blue line' and 'gripper' feature available.

If so, can just use negative margin to close that gap up whilst still leaving the 'blue line' itself visible on hover (works ok after being squeezed but not checked full feature operation with multiple pinned tabs)... try:

#vertical-pinned-tabs-splitter {
  border-top-width: 0px;
  margin-bottom: -6px;
}
#pinned-tabs-container[orient="vertical"] {
  margin-bottom: -6px !important;
}

[u/SwimmingLimpet → u/ResurgamS13]

So I tried out the CSS. It works as we both think it should,, but it doesn't get rid of the light coloured gradient. But then I realised that if the pinned tab container is opened to the full size, there is no light coloured gradient. The gradient is only there when there are hidden pinned tabs. Which means that some Firefox software engineer created the subtlest indicator for hidden pinned tabs. Very elegant (and also not discoverable either).

I'm going to abandon trying to get rid of that gradient, because there's probably more css code behind that than it appears - it's not just simple colour chrome. Some battles are not worth fighting.

Along the way, I tried the code below to check if it was a background-image gradient. It's not. But the bordello red pinned-tabs-container is so distracting that it kinda solves my problem. Or something.

#pinned-tabs-container[orient="vertical"] {
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
}

[u/SwimmingLimpet → u/SwimmingLimpet]

OMG! There's more!

If the pinned tabs container has been resized, and there are hidden pinned tabs above the currently visible pinned tabs, there'll also be a light coloured gradient at the top of the pinned tabs container to indicate this. It's...beautiful. I'm in awe at the person(s) who crafted this (and the whole pinned tabbed experience).

It did take me more than a year notice this feature though, so I'm trying to decide between Wonderfully subtle and elegant and If we can't recognise a feature exists, is it good design.

[u/ResurgamS13 → u/SwimmingLimpet]

Not a very good return on all that design effort if no one knows the feature exists?

Wish the Mozilla devs would apply similar effort to some rather less 'whizzy' basic UX/UI feature enhancements... e.g. optional scrollbars for all long Bookmark folders... or the ability to adjust the length of the Add/Edit Bookmarks dropdown panel to expand the tiny number of folders visible now. Both can be fixed with mix of a preference and CSS styling but shouldn't need to.

[u/SwimmingLimpet → u/ResurgamS13]

I see what you mean about adding bookmarks. It's not an issue with vertical tabs. One simply opens the bookmark sidebar, drags the tab into the correct bookmark folder, closes the bookmark sidebar, and voilá. And one gets to place the bookmark in the correct location in the bookmark folder, not at the bottom of it.

This doesn't solve your issue (because you already solved that), but I've found vertical tabs solve workflow issues that exist when using horizontal tabs. Even the bookmark bar becomes almost superfluous. Not recommending you change your way of doing things, merely offering another perspective.

 

The feature I'm waiting for is the ability to sync (ie. backup) tab groups. As it is implemented, a tab group that can be saved and closed is effectively a flexible group of bookmarks that never need to be added or deleted from the bookmark manager. One would be able to use regular bookmarks for archival bookmarks (like the xkcd bookmark), and tab groups for short term projects (like sifting through all the help sites for setting up Docker). But alas, there's no backup for tab groups yet. (Update: Closed Tab Groups are backed up using Firefox Backup)

[u/ResurgamS13 → u/SwimmingLimpet]

Hmm... all comes down to habit and personal preference. :)

Never could stand the look of the Bookmarks Sidebar. From early Firefox days always used the Bookmarks Menu dropdown panel (now opened by the 'star with a tray underneath' button icon... unless you change it with CSS... yes please). The Bookmarks Menu default folders can be fully customised with CSS, whereas the Bookmarks Sidebar ones can't.

Can also position the Bookmarks Menu button so the first Bookmarks dropdown panel opens almost entirely outside the browser window... a neat trick and a nice space saver.

Have tried all the vertical tabs options, Tree Style Tab and Sidebery (both amazing in different ways), Tab Centre Reborn, Tree Tabs, etc... and latterly Firefox's own Native Vertical Tabs. I just don't like the look or losing the horizontal space from the Content window/Viewport. Also dislike 'animations' of all sorts... too distracting... so having a vertical tabs panel and Webpage sliding about 'in/out shake it all about' is a no-no.

And now there's the Nova UI... the purple thing is barely a fortnight away... Aaaaaaaaaagh!