Page MenuHomePhabricator

Table of contents should show scrollbar when scrolling
Closed, ResolvedPublic

Description

Description

If the table of contents is long enough it has its own scroll area. When you are scrolling the table of contents it should show a scrollbar.

currentupdated

prototype: https://di-collapsible-menus.web.app/Paris

The scrollbar not show when:

  • the TOC is short enough that it doesn't have it's own scroll area
  • you are not scrolling

Developer notes

See: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/mast[…]ources/skins.vector.styles/components/TableOfContents.less

QA

  • Check Window's computers
  • Check with & without external mouse
  • Check Firefox & Safari

QA Results - Beta

ACStatusDetails
1T310540#8012878
2T310540#8012878

QA Results - Prod

ACStatusDetails
1T310540#8027325
2T310540#8027325

Event Timeline

ovasileva triaged this task as Medium priority.Jun 14 2022, 8:57 AM

Change 806241 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Show scrollbars in sticky TOC

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

cjming subscribed.

thanks to @Jdrewniak for pinpointing the css that hides the scrollbars -- so went ahead and threw up a quick patch to remove the rule

for QA, I don't have an external mouse nor a windows machine (tho it appears to work in Edge) - hopefully these QA steps will pass fine

@cjming @LGoto @Jdrewniak Scroll bar is visible now, thanks! But before closing this task, in my opinion, the item "Contents" of ToC is the title of this section, and should be viewed permanently, and placed at the top of section, and outside the scrolling area, and should not be scrolled. This is similar to other scrolling area schemes that the title is outside the scrolling area and not scrolling.

Unfortunately it is not visible now on June 17, 2022, 6:26. It was temporarily, it seems that changes has reverted and scroll bar is hidden now (at the time I written on).

Change 806241 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Show scrollbars in sticky TOC

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

@cjming @LGoto @Jdrewniak Scroll bar is visible now, thanks! But before closing this task, in my opinion, the item "Contents" of ToC is the title of this section, and should be viewed permanently, and placed at the top of section, and outside the scrolling area, and should not be scrolled. This is similar to other scrolling area schemes that the title is outside the scrolling area and not scrolling.

thanks @Hooman_Mallahzadeh -- duly noted! I'm going to cc our designer @alexhollender_WMF here about your suggestion.

Unfortunately it is not visible now on June 17, 2022, 6:26. It was temporarily, it seems that changes has reverted and scroll bar is hidden now (at the time I written on).

hmm - the patch just got merged so it won't be on production sites until next week as the release train rolls out

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

The scrollbar not show when:

✅ AC1: the TOC is short enough that it doesn't have it's own scroll area
✅ AC2: you are not scrolling

Firefox - W External MouseFirefox - W/O External MouseSafari - W External MouseSafari - W/O External Mouse
Windows
Screen Recording 2022-06-17 at 4.03.03 PM.mov.gif (884×620 px, 2 MB)
Screen Recording 2022-06-17 at 4.03.57 PM.mov.gif (884×620 px, 1 MB)
Screen Recording 2022-06-17 at 4.03.26 PM.mov.gif (884×620 px, 1 MB)
Screen Recording 2022-06-17 at 4.06.14 PM.mov.gif (884×620 px, 853 KB)
NANA
MacOS
Screen Recording 2022-06-17 at 3.25.12 PM.mov.gif (784×525 px, 1 MB)
Screen Recording 2022-06-17 at 3.53.05 PM.mov.gif (784×580 px, 437 KB)
Screen Recording 2022-06-17 at 3.25.27 PM.mov.gif (784×526 px, 1000 KB)
Screen Recording 2022-06-17 at 3.53.21 PM.mov.gif (784×580 px, 508 KB)
Screen Recording 2022-06-17 at 3.25.53 PM.mov.gif (783×515 px, 1 MB)
Screen Recording 2022-06-17 at 3.53.48 PM.mov.gif (784×580 px, 766 KB)
Screen Recording 2022-06-17 at 3.26.07 PM.mov.gif (784×515 px, 1 MB)
Screen Recording 2022-06-17 at 3.54.57 PM.mov.gif (784×580 px, 1 MB)

@cjming, @Jdrewniak, I don't know if it matters. But in chrome and safari the scroll bar in the TOC fades as it reaches the bottom, firefox does not.

ChromeFirefoxSafari
Screen Recording 2022-06-17 at 4.14.41 PM.mov.gif (658×270 px, 412 KB)
Screen Recording 2022-06-17 at 4.15.24 PM.mov.gif (658×270 px, 387 KB)
Screen Recording 2022-06-17 at 4.12.35 PM.mov.gif (658×270 px, 246 KB)
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

The scrollbar not show when:

✅ AC1: the TOC is short enough that it doesn't have it's own scroll area
✅ AC2: you are not scrolling

Firefox - W External MouseFirefox - W/O External MouseSafari - W External MouseSafari - W/O External Mouse
Windows
Screen Recording 2022-06-25 at 6.59.10 PM.mov.gif (692×344 px, 121 KB)
Screen Recording 2022-06-25 at 7.00.12 PM.mov.gif (692×344 px, 458 KB)
Screen Recording 2022-06-25 at 7.00.52 PM.mov.gif (692×344 px, 259 KB)
Screen Recording 2022-06-25 at 7.00.35 PM.mov.gif (692×344 px, 268 KB)
NANA
MacOS
Screen Recording 2022-06-25 at 6.33.15 PM.mov.gif (776×362 px, 513 KB)
Screen Recording 2022-06-25 at 6.33.37 PM.mov.gif (776×362 px, 629 KB)
Screen Recording 2022-06-25 at 6.34.00 PM.mov.gif (776×362 px, 198 KB)
Screen Recording 2022-06-25 at 6.34.18 PM.mov.gif (776×362 px, 661 KB)
Screen Recording 2022-06-25 at 6.37.23 PM.mov.gif (776×362 px, 114 KB)
Screen Recording 2022-06-25 at 6.37.38 PM.mov.gif (776×362 px, 610 KB)
Screen Recording 2022-06-25 at 6.42.07 PM.mov.gif (776×362 px, 117 KB)
Screen Recording 2022-06-25 at 6.42.25 PM.mov.gif (776×362 px, 588 KB)

@ovasileva please take a look at T310540#8012892 before you resolve this.

Edtadros updated the task description. (Show Details)

I think it's sufficient to resolve. @alexhollender_WMF - do we want to do a follow-up for T310540#8012892?

Also seeing scroll bar as persistent in Chrome:

Screen Shot 2022-06-27 at 1.45.06 PM.png (664×840 px, 229 KB)

Also seeing scroll bar as persistent in Chrome:

Screen Shot 2022-06-27 at 1.45.06 PM.png (664×840 px, 229 KB)

that might be dependent on your macOS settings. can you go to System Preferences > General, and check what you've got?

Screen Shot 2022-06-27 at 12.41.02 PM.png (822×780 px, 190 KB)


I think it's sufficient to resolve. @alexhollender_WMF - do we want to do a follow-up for T310540#8012892?

task created T311436: TOC scrollbar should be on top of bottom fade (Chrome & Safari)