Maniphest T302076

[ToC] Create an indicator that the ToC is scrollable
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	Feb 18 2022, 1:57 PM

Description

Background

Since we are removing the default scrollbar in cases where the ToC is longer than the available space, we would like to visually indicate the ToC is scrollable in another way

Acceptance criteria

Add indicator that the ToC is scrollable
Indicator should only appear when the ToC is scrollable

QA steps

Navigate to a page with a long TOC in modern vector using the feature flag to see sticky TOC
- patchdemo link: https://patchdemo.wmflabs.org/wikis/e440050eb8/wiki/Barack_Obama?useskin=vector-2022&tableofcontents=1
- beta cluster link: TK
Open some header links in TOC to make TOC content longer than viewport height and scroll down a little ways
Note transparent fade at bottom and no scrollbar
Note TOC still scrollable
Resize windows to see fade at bottom
Tested in Chrome, Firefox, Safari, Edge

Screen Shot 2022-03-17 at 4.57.03 PM.png (1×2 px, 1 MB)

QA Results - Beta

AC	Status	Details
1	✅	T302076#7818378
2	✅	T302076#7818378
3	✅	T302076#7818378

QA Results - Beta

AC	Status	Details
1	✅	T302076#7849932
2	✅	T302076#7849932
3	✅	T302076#7849932

QA Results - Prod

AC	Status	Details
1	✅	T302076#7859443
2	✅	T302076#7859443
3	✅	T302076#7859443

Details

Subject	Repo	Branch	Lines +/-
Remove TOC margin to not always show fade out	mediawiki/skins/Vector	master	+0 -1
Fix TOC fadeout proper	mediawiki/skins/Vector	master	+5 -5
Table of contents should be hidden at low resolution	mediawiki/skins/Vector	master	+6 -3
Add fixes for sticky TOC fade out	mediawiki/skins/Vector	master	+5 -4
Add fade to indicate scrollability in TOC	mediawiki/skins/Vector	master	+31 -6

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T273473 [Epic] Improve the table of contents
Resolved	ovasileva	T304169 [Goal] Begin table of contents A/B test
Resolved	Edtadros	T302076 [ToC] Create an indicator that the ToC is scrollable

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

cjming removed cjming as the assignee of this task.Mar 16 2022, 4:26 PM

cjming moved this task from Doing to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming subscribed.

cjming claimed this task.Mar 16 2022, 10:26 PM

cjming moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

[mediawiki/skins/Vector@master] Add fade to indicate scrollability in TOC

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

gerritbot added a project: Patch-For-Review.Mar 17 2022, 6:38 PM

cjming removed cjming as the assignee of this task.Mar 17 2022, 6:38 PM

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming updated the task description. (Show Details)Mar 17 2022, 6:44 PM

cjming updated the task description. (Show Details)Mar 17 2022, 6:47 PM

In T302076#7775288, @bwang wrote:

I think we might also be able to apply a negative margin to the ul element to avoid the extra padding on the bottom.

I wasn't able to get this to work -- is there another way you can think of to avoid this extra padding at the bottom?

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/e440050eb8/w/

cjming updated the task description. (Show Details)Mar 17 2022, 10:51 PM

cjming updated the task description. (Show Details)Mar 17 2022, 10:59 PM

cjming assigned this task to bwang.Mar 18 2022, 6:09 PM

bwang reassigned this task from bwang to cjming.Mar 23 2022, 6:49 PM

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming removed cjming as the assignee of this task.Mar 23 2022, 9:35 PM

cjming assigned this task to bwang.

cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Mar 23 2022, 10:35 PM

cjming removed bwang as the assignee of this task.Mar 24 2022, 12:35 AM

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to bwang.Mar 24 2022, 5:15 PM

bwang reassigned this task from bwang to cjming.Mar 24 2022, 6:29 PM

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming removed cjming as the assignee of this task.Mar 25 2022, 8:14 PM

cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming assigned this task to bwang.Mar 25 2022, 8:34 PM

bwang reassigned this task from bwang to Edtadros.Mar 29 2022, 3:04 PM

bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 771681 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add fade to indicate scrollability in TOC

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

cjming updated the task description. (Show Details)Mar 29 2022, 3:19 PM

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Mar 29 2022, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Mar 29 2022, 4:10 PM

Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Mar 29 2022, 4:58 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Navigate to a page with a long TOC in modern vector using the feature flag to see sticky TOC
patchdemo link: https://patchdemo.wmflabs.org/wikis/e440050eb8/wiki/Barack_Obama?useskin=vector-2022&tableofcontents=1
beta cluster link: TK
Open some header links in TOC to make TOC content longer than viewport height and scroll down a little ways
✅ AC1: Note transparent fade at bottom and no scrollbar
✅ AC2: Note TOC still scrollable
✅ AC3: Resize windows to see fade at bottom
Tested in Chrome, Firefox, Safari, Edge

Chrome	Firefox	Safari	Edge

Edtadros updated the task description. (Show Details)Mar 30 2022, 1:52 PM

ovasileva added a parent task: T304169: [Goal] Begin table of contents A/B test.Apr 4 2022, 5:24 PM

cjming reassigned this task from Edtadros to • alexhollender_WMF.Apr 4 2022, 5:26 PM

cjming moved this task from QA in Prod to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming added a subscriber: Edtadros.

@cjming looks good for the most part. I'm seeing a 1px gap between the bottom of the fade and the bottom of the ToC:

Screen Shot 2022-04-05 at 9.25.10 AM.png (988×2 px, 325 KB)

Screen Shot 2022-04-05 at 9.25.21 AM.png (1×2 px, 448 KB)

hi @alexhollender_WMF - I'm not able to duplicate this -- where/how are you seeing this?

On beta cluster, I see bottom for .sidebar-toc:after as zero - confirmed this on Chrome, FF, Safari, Edge for this url https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama:

Screen Shot 2022-04-05 at 9.38.19 AM.png (1×5 px, 2 MB)

@cjming I'm also seeing bottom: 0 in the CSS, however that seems to be resulting in the gap for some reason (which is why I was showing bottom: -1px...maybe not the approach we want to take, but it demonstrates how the fade should ultimately be positioned).

the gap is quite subtle so you might not notice it unless you zoom in:

also I've just realized that the fade doesn't cover the toggle arrows, but it should:

current	correct

cjming moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 5 2022, 5:04 PM

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

[mediawiki/skins/Vector@master] Add fixes for sticky TOC fade out

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

gerritbot added a project: Patch-For-Review.Apr 5 2022, 7:54 PM

cjming removed cjming as the assignee of this task.Apr 5 2022, 7:55 PM

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 777437 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add fixes for sticky TOC fade out

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

hi @alexhollender_WMF latest fix should be on beta cluster soon (within 30 mins?) since it was just merged - hopefully addresses your feedback - lmk if not.

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.7; 2022-04-11); removed MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Apr 5 2022, 9:00 PM

Maintenance_bot removed a project: Patch-For-Review.Apr 5 2022, 9:30 PM

@cjming looks great, thanks for the fixes!

Screen Shot 2022-04-06 at 10.19.56 AM.png (1×1 px, 120 KB)

Change 777859 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Table of contents should be hidden at low resolution

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

gerritbot added a project: Patch-For-Review.Apr 6 2022, 7:02 PM

Change 777859 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Table of contents should be hidden at low resolution

Reason:

IT seems the container is meant for layout. To be continued..

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

Maintenance_bot removed a project: Patch-For-Review.Apr 6 2022, 9:30 PM

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

[mediawiki/skins/Vector@master] Fix TOC fadeout proper

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

gerritbot added a project: Patch-For-Review.Apr 6 2022, 9:44 PM

cjming removed • alexhollender_WMF as the assignee of this task.Apr 6 2022, 10:17 PM

cjming assigned this task to • nray.

cjming moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming reassigned this task from • nray to Edtadros.Apr 6 2022, 10:40 PM

cjming moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming added a subscriber: • nray.

Change 777883 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix TOC fadeout proper

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

Thanks all for the quick turnaround time here!

Maintenance_bot removed a project: Patch-For-Review.Apr 6 2022, 11:30 PM

Unsure if this is related, but we're seeing a shorter than expected ToC on https://en.wikipedia.beta.wmflabs.org/wiki/Acinonyx

Screen Shot 2022-04-07 at 10.32.22 AM.png (1×1 px, 488 KB)

ovasileva reassigned this task from Edtadros to cjming.Apr 7 2022, 5:04 PM

ovasileva moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 7 2022, 5:45 PM

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

[mediawiki/skins/Vector@master] Remove TOC margin to not always show fade out

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

gerritbot added a project: Patch-For-Review.Apr 7 2022, 5:53 PM

cjming removed cjming as the assignee of this task.Apr 7 2022, 8:48 PM

cjming assigned this task to bwang.

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson reassigned this task from bwang to Edtadros.Apr 7 2022, 9:05 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 778326 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove TOC margin to not always show fade out

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

Maintenance_bot removed a project: Patch-For-Review.Apr 7 2022, 9:32 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Navigate to a page with a long TOC in modern vector using the feature flag to see sticky TOC
beta cluster link: https://en.wikipedia.beta.wmflabs.org/wiki/George_Washington
Open some header links in TOC to make TOC content longer than viewport height and scroll down a little ways
✅ AC1: Note transparent fade at bottom and no scrollbar
✅ AC2: Note TOC still scrollable
✅ AC3: Resize windows to see fade at bottom
Tested in Chrome, Firefox, Safari, Edge

Chrome	Firefox	Safari	Edge

Edtadros updated the task description. (Show Details)Apr 12 2022, 10:50 PM

Test Result - Prod

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

Test Artifact(s):

QA Steps

Navigate to a page with a long TOC in modern vector using the feature flag to see sticky TOC
beta cluster link: https://en.wikipedia.org/wiki/Dog
Open some header links in TOC to make TOC content longer than viewport height and scroll down a little ways
✅ AC1: Note transparent fade at bottom and no scrollbar
✅ AC2: Note TOC still scrollable
✅ AC3: Resize windows to see fade at bottom
Tested in Chrome, Firefox, Safari, Edge

Chrome	Firefox	Safari	Edge

Edtadros updated the task description. (Show Details)Apr 16 2022, 9:30 PM

ovasileva closed this task as Resolved.Apr 19 2022, 11:19 AM

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/e440050eb8/w/~~

	F35054491: Screen Recording 2022-04-16 at 2.21.37 PM.mov.gif
	Apr 16 2022, 9:28 PM

	F35054488: Screen Recording 2022-04-16 at 2.19.18 PM.mov.gif
	Apr 16 2022, 9:28 PM

	F35054484: Screen Recording 2022-04-16 at 2.17.49 PM.mov.gif
	Apr 16 2022, 9:28 PM

	F35054481: Screen Recording 2022-04-16 at 2.16.28 PM.mov.gif
	Apr 16 2022, 9:28 PM

	F35048615: Screen Recording 2022-04-12 at 3.47.25 PM.mov.gif
	Apr 12 2022, 10:49 PM

	F35048613: Screen Recording 2022-04-12 at 3.46.20 PM.mov.gif
	Apr 12 2022, 10:49 PM

	F35048611: Screen Recording 2022-04-12 at 3.45.11 PM.mov.gif
	Apr 12 2022, 10:49 PM

	F35048609: Screen Recording 2022-04-12 at 3.43.54 PM.mov.gif
	Apr 12 2022, 10:49 PM

[ToC] Create an indicator that the ToC is scrollableClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Background

Acceptance criteria

QA steps

QA Results - Beta

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

[ToC] Create an indicator that the ToC is scrollable
Closed, ResolvedPublic2 Estimated Story Points
Actions

Related Objects
Search...