Page MenuHomePhabricator

Non zebra scrollable indicators on sticky pinnable elements (toc, page tools, client prefs) are broken
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

Vector 2022 has scrollable indicators on sticky pinnable elements

Screenshot 2023-11-30 at 12.25.15 PM.png (122×410 px, 16 KB)

After changes in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/976861, which were necessary to support the pinned client prefs menu, the scrolling indicators broke on non Zebra.

Missing scroll indicator on the TOC

Screenshot 2023-11-30 at 12.20.12 PM.png (1×738 px, 250 KB)

Messed up scroll indicator with client prefs
Screenshot 2023-11-30 at 12.20.50 PM.png (1×1 px, 692 KB)

Event Timeline

ovasileva lowered the priority of this task from High to Medium.Nov 30 2023, 6:38 PM
ovasileva set the point value for this task to 2.

Change 979391 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix nonzebra sticky container scrolling behavior and scrollable indicator

https://gerrit.wikimedia.org/r/979391

This is not a cache problem so backport can happen later. Might be obsoleted by Zebra deploy.

From my testing, it looks like @bwang 's above patch also fixes T352432 "ToC overlaps with footer in Vector 2022 again" so I'm going to merge this & backport tomorrow.

Change 979391 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix nonzebra sticky container scrolling behavior and scrollable indicator

https://gerrit.wikimedia.org/r/979391

Change 980467 had a related patch set uploaded (by Jdrewniak; author: Bernard Wang):

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Fix nonzebra sticky container scrolling behavior and scrollable indicator

https://gerrit.wikimedia.org/r/980467

Change 980467 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Fix nonzebra sticky container scrolling behavior and scrollable indicator

https://gerrit.wikimedia.org/r/980467

Mentioned in SAL (#wikimedia-operations) [2023-12-05T21:27:42Z] <jforrester@deploy2002> Started scap: Backport for [[gerrit:979704|[Zebra] Make .vector-column-start cache compatible (T347712 T351830)]], [[gerrit:980467|Fix nonzebra sticky container scrolling behavior and scrollable indicator (T352464)]]

Mentioned in SAL (#wikimedia-operations) [2023-12-05T21:30:00Z] <jforrester@deploy2002> jdlrobson and jforrester and jdrewniak: Backport for [[gerrit:979704|[Zebra] Make .vector-column-start cache compatible (T347712 T351830)]], [[gerrit:980467|Fix nonzebra sticky container scrolling behavior and scrollable indicator (T352464)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-12-05T21:40:32Z] <jforrester@deploy2002> Finished scap: Backport for [[gerrit:979704|[Zebra] Make .vector-column-start cache compatible (T347712 T351830)]], [[gerrit:980467|Fix nonzebra sticky container scrolling behavior and scrollable indicator (T352464)]] (duration: 12m 50s)

ovasileva added a subscriber: Jdrewniak.

This will be testable in production once Zebra is deployed everywhere

Edtadros subscribed.

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

❌ AC1: Verify scroll indicator on the TOC
The scroll indicator works, but if you look at the screen shots you will see that sometimes the scroll bar only activates after more than one TOC item.

screenshot 201.mov.gif (840×698 px, 712 KB)

screenshot 202.mov.gif (820×698 px, 843 KB)

screenshot 200.mov.gif (820×698 px, 1 MB)

❌ AC2: Verify scroll indicator with client prefs
I'm not sure how this is supposed to work. when the Main Menu an TOC are both in the sidebar, the main menu doesn't have a scroll bar, but the TOC will. On the right side, when the tools menu and client prefs are in the sidebar, they both have one scroll bar, as though they are the same. Some clarification on how they should work when there are multiple menus pinned to the same side is needed.

Left side behavior:

screenshot 205.mov.gif (542×628 px, 2 MB)

Right side behavior:

screenshot 203.mov.gif (542×698 px, 292 KB)

screenshot 204.mov.gif (792×628 px, 662 KB)

@Edtadros i believe both of these are passes. in AC1 the scroll bars are supposed to only show up when the contents are overflowing/cut off.

In AC2, page tools and client prefs will share the same scroll bar because they are both sticky when you scroll down, meaning they need to be in the same container. This is different than the main menu and toc because the main menu is not sticky

bwang removed bwang as the assignee of this task.Jan 3 2024, 5:32 PM

All criteria pass, resolving.