[Bug] `Keep pinned tabs at top` makes tab bar no longer scroll to current active tab

[Lu9-ST]

Affected Theme

• Name: SuperPins
• Version: 1.5.7

Zen Version: 1.15.2b

System OS: Windows 11

Describe the bug
When switching your currently active tab to one that is out of view, (either from "Switch to Tab" from the URL bar, or by creating a new tab) the tab bar does not scroll to the position of the new current active tab.

To Reproduce
Steps to reproduce the behavior:

1. Have enough tabs on screen to scroll through
2. Go to the end (or beginning, depending on settings)
3. Press Ctrl+T to open a New Tab (Preference zen.urlbar.replace-newtab must be set to false)
4. New Tab window will show, but tab bar will stay in place

Expected behavior
Tab bar would scroll to the new tab's location.

[realSilasYang]

The issue still exists. Please fix it at your earliest convenience. Thank you @CosmoCreeper !

[CosmoCreeper]

I partly blame this on Zen for not making pinned tabs what they should be: pinned.

But regardless, the issue with the Keep pinned tabs at the top checkbox in Sine is that it doesn't understand much about Zen's stuff at all. It just tries to keep pinned tabs at the top and in the meantime, it accidentally breaks a plethora of other stuff.

In it's current implementation, I do not think I can fix the setting. There is another implementation that could work, but it requires a background blur that seems to fail, so I'll try again and see if I come up with anything.

[realSilasYang]

Thank you for your detailed response. Perhaps you could consider communicating directly with the Zen development team? That might allow for a more efficient and fundamental resolution to the issue.

[Waquo]

I ran into this issue when entering and leaving full screen video, which scrolled the tab bar to the top with Keep pinned tabs at top aka "uc.pins.stay-at-top" active.
I was not able to fix the flexbox modifications currently being used to implement this, but setting position: sticky on the pinned tabs does work, with caveats.

@media (-moz-bool-pref: "uc.pins.stay-at-top") {
  #tabbrowser-arrowscrollbox .zen-workspace-pinned-tabs-section {
    position: sticky;
    top: 0;
    z-index: 1;
	background-color: var(--mod-superpins-pins-bg);
  }
}

The caveats are a slightly weird scroll bar position, the scroll bar that moves normal tabs now extends all the way past pinned tabs, and that normal tabs are rendered below pinned tabs as they scroll up, which is a real problem because the latter have a transparent background.
That's why I give them a background color in the CSS above. Note that the variable --mod-superpins-pins-bg does not currently exist and would need to be created.
Forcing pinned tabs to have a background color when keeping them at the top is not optimal, but better than the current behavior.

My theory on why the tab bar scrolls to the top when exiting full screen video with "uc.pins.stay-at-top" using flexbox is that the container for normal tabs gets reduced to height 0 during a reflow, removing its scrollbar and thereby the ability to restore scroll position after. I may be wrong about that.

I apologize for not submitting a proper patch, but I don't know how to develop Zen mods locally. I'm hacking on zen-themes.css in my Zen profile right now.

[Kaedriz]

What happens is essentially #navigator-toolbox collapsed its position to make place for full-screen content, temporarily becoming like 5x0px or smth.

Changing it so that it no longer collapsed but just shrinks to 0px seems to remedy this, I just don't know how stable this is, and why are devs even doing it like this (maybe perf reason).

You will have to write yourself CSS, but shouldn't be too hard:

[Waquo]

@Kaedriz I tried styling this selector
:root:is([inDOMFullscreen="true"], [chromehidden~="location"], [chromehidden~="toolbar"]) #navigator-toolbox { ... } } but ended up reverting to my previous approach of using position: sticky due to two issues:

1. I wasn't able to remove the #navigator-toolbar entirely. First I had to fight a width set via inline styles. Then was a border remaining or something like that. And since there is also issue two, I stopped trying to fix this.
2. Position sticky correctly scrolls to the current tab on browser start,

[Kaedriz]

@Waquo You said there were still caveats with that approach?

You can remove that border as well, it's vertical bars separator from main browser content, actually. Similar selectors with width: 0px will remove this too.

I'm wondering tho why would making it sticky make it remember position after restart. After all, all sticky do is that it just "hangs" on content border as you scroll.

Looking at your code, it doesn't even prevent collapse of nav-toolbox, so I'm puzzled this even works.
I thought this was how internally SuperPins handles this, with pos: sticky.

EDIT: After pasting this into userChrome.css, I see no change whatsoever in functionality, so IDK how's that working for you:

#tabbrowser-arrowscrollbox .zen-workspace-pinned-tabs-section {
	position:
	top: 0;
	z-index: 1;
	background-color: var(--mod-superpins-pins-bg);
}

[CosmoCreeper]

The entire concept of this feature is incredibly buggy and I might have an approach that could be stable but otherwise I would not state that this feature is usable in it's current state.

[Waquo]

@Kaedriz

@Waquo You said there were still caveats with that approach?

The caveats to the sticky approach are mostly not so pretty styling, but it comes with improved behavior and usability.

I'm wondering tho why would making it sticky make it remember position after restart.

My guess is that there is some restoration logic in Zen that gets broken when the scrollbar is moved from the element they implemented it for to one of its children, which happens in the flexbox approach to uc.pins.stay-at-top but not with position sticky.

Looking at your code, it doesn't even prevent collapse of nav-toolbox, so I'm puzzled this even works. I thought this was how internally SuperPins handles this, with pos: sticky.

This is the current implementation in SuperPins:

  @media (-moz-pref("uc.pins.stay-at-top")) {
    zen-workspace > arrowscrollbox.workspace-arrowscrollbox {
      overflow-y: hidden !important;
      flex-basis: 100%;
    }

    #tabbrowser-arrowscrollbox .zen-workspace-pinned-tabs-section {
      flex: 0 1 0;
    }

    #tabbrowser-arrowscrollbox .zen-workspace-normal-tabs-section {
      flex: 1 1 0;
      overflow-y: auto !important;
      margin-bottom: 5px;
    }
  }

It moves the scrollbar from the element #tabbrowser-arrowscrollbox to one of its children, setting overflow-y: auto on the section for normal tabs only, so the pinned section is above the scrolling element.
I'm not even sure how exactly this breaks scroll restoration after fullscreen video. Could be a reflow messing things up, could be that zen has restoration logic that expects the scrollbar on a different element.

EDIT: After pasting this into userChrome.css, I see no change whatsoever in functionality, so IDK how's that working for you:

It is a replacement for the current flexbox implementation, not an addition to it. You need to paste over the previous section for @media (-moz-pref("uc.pins.stay-at-top")).

[Kaedriz]

@Waquo Okay, I got it working, while it "fixes" the problem SuperPins had in a way, introducing another (background, which is a big deal if you want seamless gradient), the core issue is still Zen, and its band-aid, that just scroll to selected tab, so you're preserving "rough" position of scroll. Ex. while your tab was higher on tab list, after this, it will go to the lowest point, scrolling the whole list, if you can understand what I'm getting what.

Your solution just restores that function of Zen so it can scroll on startup, that's why it is restoring after reset. Just wondering why my solution doesn't work that way, maybe something else is interfering at startup that just shrinks tabs list vertically.

EDIT: My workaround scrolls fine at startup, so there is something that SuperPins does is interfering. You can even notice it by just enabling and disabling SuperPins in options page.

If only Zen could expose some CSS variables like number of pinned etc, things could be so much different...