[Feature suggestions] Vertical tabs about uc.css.js

[henryxrl]

Oh, and I found a small bug related to tabs. After I disabled tab-stretching in userChrome.au.css,

.tabbrowser-tab[fadein]:not([style*="max-width"]) { max-width: var(--tab-max-width, 225px); }

The private tab button follows the tab's position instead of staying with the new tab button. This behavior persists even after I move the private tab button to the right side of the new tab button.

[aminomancer]

Well you're not supposed to "disable tab-stretching." If I wanted to support that I would have made a preference for it in about:config. The script isn't designed to magically adapt to any CSS changes you make.

As for adding/removing buttons to the vertical tabs pane, it's more likely that I would work on turning it into a customizable area that can be modified using the regular customize toolbar page by dragging/dropping buttons onto the pane.

It's impossible to add the "private tab" button to the vertical tabs pane script because those are 2 different scripts. The private tab button doesn't exist in vanilla firefox. The only way that would work is if I find a way to turn it into a customizable area, and then users add the button themselves. It certainly can't be added at startup because the private tab button doesn't even exist at startup.

Everyone has different preferences for what buttons they don't want to see. There's really no point cluttering the already massive script further with marginal settings to show/hide every button. If you don't want to see the pin and toggle buttons you can just hide them in custom-chrome.css the same way you'd hide any other button.
#vertical-tabs-pin-button, #vertical-tabs-close-button {display: none !important;}

Moving pinned tabs to the top would be a reversal of the order. Pinned tabs in the pane aren't in a separate container. They're just like everything else. When I have time I might look into the possibilities of putting them in a separate container. But that is a massive increase in complexity requiring duplicates for every drag event handler so it's unlikely I'll get around to that very soon.

As usual, styling is in your control. The script does the absolute bare minimum of styling because it's a standalone script. If I applied styling then it wouldn't be compatible with other themes. Again, you can apply whatever styling you want in custom-chrome.css. That's what it's for.

Of course, if I wind up putting pinned tabs in a separate container then there will obviously be a separator between them and the regular tabs. But I wouldn't count on that, I'm very busy with my real job and nobody's paying me to take requests. I make these scripts because I use them myself. I just happen to share them after I make them. So I don't often go far out of my way to make something that I don't need myself.

Making the tooltip nav buttons script compatible with the vertical tabs pane script without merging them into one script or making them require each other is a massive endeavor. Since I have a full-time job and need to supervise several research projects there's just not a high likelihood that I will get around to that anytime soon.

[henryxrl]

As for adding/removing buttons to the vertical tabs pane, it's more likely that I would work on turning it into a customizable area that can be modified using the regular customize toolbar page by dragging/dropping buttons onto the pane.

This sounds good! Seems like it's what I need! Thanks!

Since I have a full-time job and need to supervise several research projects there's just not a high likelihood that I will get around to that anytime soon.

As some others mentioned, time is money and you can think of accepting donations. I for one would definitely like to donate. :-) Thanks again for your great work!

[aminomancer]

As for adding/removing buttons to the vertical tabs pane, it's more likely that I would work on turning it into a customizable area that can be modified using the regular customize toolbar page by dragging/dropping buttons onto the pane.

This sounds good! Seems like it's what I need! Thanks!

Since I have a full-time job and need to supervise several research projects there's just not a high likelihood that I will get around to that anytime soon.

As some others mentioned, time is money and you can think of accepting donations. I for one would definitely like to donate. :-) Thanks again for your great work!

Yeah I agree it's a better solution. And yeah I did set up github sponsors yesterday. I don't know if it works yet, but apparently it has been approved so there's a pink sponsor button on here.

[henryxrl]

Hope to see that feature when you have time to implement it!

I saw your sponsor button and I donated a small $5 just to see if it works. If it does, I'll donate more in the future. :-) thanks for the great work and especially your time and effort!

[aminomancer]

Hope to see that feature when you have time to implement it!

I saw your sponsor button and I donated a small $5 just to see if it works. If it does, I'll donate more in the future. :-) thanks for the great work and especially your time and effort!

Yeah I just noticed, I have added your name and profile to the readme. Thanks!

And yeah I'll keep this open until I figure out a way to make it compatible with the customizable area system.

[henryxrl]

Hehe thanks! A small question: how can I adjust the width of the scroll bar especially when not hovering over? Currently, it's only like 2px wide and very hard for me to tell where it is...

[aminomancer]

That would be in userChrome.ag.css, lines 69, 73, 156, 160. You'll have to either edit userChrome.ag.css or make a new agent sheet. You can't use variables for scrollbar properties because they're native anonymous elements and the ones inside the content area don't inherit any custom properties/variables from any other document. But the agent/author sheet loader script can load an unlimited number of agent sheets, so you don't have to edit userChrome.ag.css. You can just make a file in the chrome folder called z-custom-chrome.ag.css and put this code in it:

scrollbar[orient="vertical"]:not(:hover) thumb:not(:active),
.hidevscroll-scrollbar[orient="vertical"]:not(:hover) thumb:not(:active) {
    transform: scaleX(20%) !important;
}
scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active),
.hidehscroll-box scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active) {
    transform: scaleY(20%) !important;
}

And change the transform values to none or I guess if you still want them to collapse a little bit, you could increase them from 20% to 50% or something. The sheet loader (userChromeAgentAuthorSheetLoader.uc.js) will automatically locate it and register it as an agent sheet. Name it z-custom-chrome.ag.css since z comes after the u in userChrome.ag.css. That will ensure that your custom agent sheet loads after the theme's agent sheet.

[henryxrl]

Ohhh!! It's the naming (z- in the front) that I missed! No wonder I saw my ag sheet loaded but no effect... Thanks a ton!

Would be good to make it darker when the page is light, like the scrollbars in Edge.

[aminomancer]

Yeah I have spent dozens of hours trying to do something like that, and made an enhancement request, but no luck. It's not possible with CSS — you can do something kind of like that with an SVG invert filter, but it doesn't work on all backgrounds, and it doesn't look very good. So it requires real programming. The scrollbars don't really exist inside the page they control. So for something to control the scrollbars but be aware of the colors behind them requires messaging between execution contexts. One inside the content and one inside the parent process.

The trouble is, I really have no idea how to do anything to the scrollbar with javascript. They are native anonymous elements so they don't even exist in the DOM. You can see them in the browser toolbox inspector but that's sort of misleading because they're really just simulated elements. I tried getting them to inherit properties from the root element in content documents. That wouldn't work for scrollbars in the main UI but would work in web pages, in principle. But this doesn't work either because the scrollbar's appearance or properties somehow get cached. They freeze until you hover or click the scrollbars. It's very strange.

So I have tried lots of things but ultimately came to the conclusion it would only be possible with C++ or rust. And we can't inject custom binary code into firefox without rebuilding it. So I expect that will either never happen or it will be something that ships with firefox eventually.

[henryxrl]

Wow, good to know it's THAT complicated. Then it's Firefox's own thing - we'll see if they implement this or not.

[aminomancer]

They sort of do implement it, at least for Windows, but it's tied to appearance values like appearance: scrollbar-vertical. And that appearance value overrides a bunch of stuff. It colors the track so we can't have overlay scrollbars at all that way. It makes the scrollbar totally opaque regardless of the color. It actually paints the bounding box behind the scrollbar thumb element, so even though it doesn't override the border-radius property, we wind up with sharp 90 degree corners because it paints the full bounding box, downstream but independent of CSS. So the whole idea of overlay scrollbars basically rules out using the built-in system. At least unless someone at mozilla chooses to change it.

[aminomancer]

Hey I want to let you know I spent quite a while trying to implement this, but I think it's just too unwieldy to make the vertical tabs pane buttons customizable via the customization interface. You can see I came close to pulling this off, but there are major timing issues and a problem that results from the toolbar customization state being shared between windows, while the script itself is not. One major problem is that the pane itself isn't built into the window, so it doesn't exist at startup. It has to be built by the script. But when you register a customizable button, it gets built much sooner on subsequent launches/windows because it becomes cached in the xul store. Since these buttons are supposed to go in the pane, that causes a big problem. The browser doesn't know where to put them until the script kicks in.

There are several other intricately intertwined problems too, just way too complicated for me to even fully wrap my head around, let alone explain it. I just wanted you to know I did try this, but please don't try installing that version, it may permanently corrupt your profile's customization state. Which is odd, since it's supposed to be possible to reset it. But I guess some lower-level cache involved in that reset gets broken, which breaks ALL attempts to add a customizable button, including from addons. So yeah don't install it, I'm just sending it in case you're curious what went wrong.

Unfortunately those problems also make it impractical to add custom buttons to the pane via the customization interface. The same problem that prevents me from making the new tab/pin/close buttons removable also prevents me from letting the user add buttons to the pane. The pane doesn't exist at the time the customizable buttons are added. So I would need to fundamentally change the approach of the script in such a way that the pane exists immediately at startup. But that's getting nearer the realm of modifying firefox's source code directly. I might figure out a way to do this safely eventually, but for now I think it's just not feasible.

That said, I appreciate your donation and want to make it up to you somehow. I will try finding a way to integrate the script with the private tabs script. I haven't actually tested or even looked at the private tabs script in many months so that may take me a while to figure out again. And I'll look into the possibility of putting the pinned tabs in a separate container anchored above the main scrollbox. As for making the pinned tabs more visually distinct, I don't think there's much room to change the background color, because we already need to account for sooo many states via background-color. There's the regular state, the hover state, focused, selected, multiselected, multiselected-hover, multiselected-selected, multiselected-selected-hover, then pending-hover/pending-multiselected. To add another distinct state we'd need to push the brightness of all those states up so they won't look identical to the pinned state. And then the brightness for pinned-multiselected-selected-hover would just be so high its text would look washed out.

But I did contemplate this a bit and decided making the pinned icon visible when the pane is collapsed would be a good alternative. There's already a pinned icon visible on pinned tabs when the pane is expanded, but it just doesn't show up when the pane is collapsed since the buttons are so tiny. I found room to show a mute/audio overlay on the collapsed pane though, so I figured I'd just repurpose that overlay to show the pinned state. Of course the mute state is more important imo so if a tab is both pinned and muted, it'll show the muted icon, not the pinned icon. But I figure the odds of that happening naturally are pretty low, so it's good enough to share that overlay between the sound and pinned states. Anyway, I added the code to uc-tabs-bar.css. If you're using my theme then you'll get it when you update. Otherwise you can just add this standalone version to your stylesheet:

#vertical-tabs-pane[unpinned] .all-tabs-item[pinned]:not([muted], [soundplaying], [activemedia-blocked]) .all-tabs-button .toolbarbutton-icon {
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100%" cy="100%" r="9"/></svg>') exclude 0/100% 100% no-repeat, linear-gradient(#fff, #fff);
	mask-position: 8px 8px;
	transition-property: mask;
	transition-timing-function: ease-in-out;
	transition-duration: calc(var(--pane-transition-duration) / 2);
}
#vertical-tabs-pane[unpinned]:not([expanded]) .all-tabs-item[pinned] .all-tabs-button .toolbarbutton-icon {
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100%" cy="100%" r="9"/></svg>') exclude 0/100% 100% no-repeat, linear-gradient(#fff, #fff);
}
#vertical-tabs-pane[unpinned] .all-tabs-item[pinned]:not([muted], [soundplaying], [activemedia-blocked]) .sound-overlay {
    display: block !important;
    position: absolute;
    left: calc(var(--arrowpanel-menuitem-padding-inline) + 7px) !important;
    top: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
    width: 14px;
    height: 14px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: 0.7 !important;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration: var(--pane-transition-duration);
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"><path d="M9.968 13.622c.255-.255.276-.645.098-.965a2.297 2.297 0 01.374-2.759l2.711-2.711.542.542c.298.298.786.298 1.084 0s.298-.786 0-1.084L9.355 1.224c-.298-.298-.786-.298-1.084 0s-.298.786 0 1.084l.542.542-2.71 2.711a2.3 2.3 0 01-2.76.374c-.32-.179-.71-.157-.965.098l-.07.07a.769.769 0 000 1.084l2.7 2.7-3.784 3.806c-.298.298-.298.786 0 1.084s.786.298 1.084 0l3.784-3.806 2.721 2.721a.769.769 0 001.084 0l.071-.07z"/></svg>') center/11px no-repeat !important;
}
#vertical-tabs-pane[unpinned]:not([expanded]) .all-tabs-item[pinned]:not([muted], [soundplaying], [activemedia-blocked]) .sound-overlay {
	opacity: 1;
	pointer-events: auto;
}
#vertical-tabs-pane[unpinned] .all-tabs-item[selected][pinned]:not([muted], [soundplaying], [activemedia-blocked]) .sound-overlay {
    fill-opacity: inherit !important;
}