[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Page MenuHomePhabricator
Create Task
Maniphest T302076

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

Assigned To
Edtadros
Authored By
ovasileva
Feb 18 2022, 1:57 PM
Tags
Referenced Files
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
View All 22 Files
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Edtadros
Jdlrobson
Jdrewniak
View All 10 Subscribers

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

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

QA Results - Beta

ACStatusDetails
1✅T302076#7818378
2✅T302076#7818378
3✅T302076#7818378

QA Results - Beta

ACStatusDetails
1✅T302076#7849932
2✅T302076#7849932
3✅T302076#7849932

QA Results - Prod

ACStatusDetails
1✅T302076#7859443
2✅T302076#7859443
3✅T302076#7859443

Details

SubjectRepoBranchLines +/-
Remove TOC margin to not always show fade outmediawiki/skins/Vectormaster+0 -1
Fix TOC fadeout propermediawiki/skins/Vectormaster+5 -5
Table of contents should be hidden at low resolutionmediawiki/skins/Vectormaster+6 -3
Add fixes for sticky TOC fade outmediawiki/skins/Vectormaster+5 -4
Add fade to indicate scrollability in TOCmediawiki/skins/Vectormaster+31 -6
Customize query in gerrit

Related Objects
Search...

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.
gerritbot added a comment.Mar 17 2022, 6:38 PM

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
cjming added a comment.Mar 17 2022, 8:33 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?

PatchDemoBot added a comment.Mar 17 2022, 10:42 PM

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.
gerritbot added a comment.Mar 29 2022, 3:17 PM

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
Edtadros added a comment.Mar 30 2022, 1:51 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

ChromeFirefoxSafariEdge
Screen Recording 2022-03-30 at 6.32.54 AM.mov.gif (1×946 px, 1 MB)
Screen Recording 2022-03-30 at 6.35.33 AM.mov.gif (1×946 px, 2 MB)
Screen Recording 2022-03-30 at 6.38.50 AM.mov.gif (1×946 px, 1 MB)
Screen Recording 2022-03-30 at 6.42.27 AM.mov.gif (1×946 px, 1 MB)
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.
• alexhollender_WMF reassigned this task from • alexhollender_WMF to cjming.Apr 5 2022, 1:29 PM
• alexhollender_WMF moved this task from Design Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

@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)

cjming added a comment.Apr 5 2022, 3:51 PM

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)

• alexhollender_WMF added a comment.Apr 5 2022, 4:12 PM

@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:

currentcorrect
image.png (1×1 px, 225 KB)
image.png (1×1 px, 223 KB)
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
gerritbot added a comment.Apr 5 2022, 7:54 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.
gerritbot added a comment.Apr 5 2022, 8:50 PM

Change 777437 merged by jenkins-bot:

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

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

cjming assigned this task to • alexhollender_WMF.Apr 5 2022, 8:51 PM
cjming moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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
• alexhollender_WMF moved this task from Design Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 6 2022, 2:21 PM

@cjming looks great, thanks for the fixes!

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

gerritbot added a comment.Apr 6 2022, 7:02 PM

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
gerritbot added a comment.Apr 6 2022, 9:10 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
gerritbot added a comment.Apr 6 2022, 9:44 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.
gerritbot added a comment.Apr 6 2022, 10:51 PM

Change 777883 merged by jenkins-bot:

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

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

Jdlrobson added a comment.Apr 6 2022, 10:59 PM

Thanks all for the quick turnaround time here!

Maintenance_bot removed a project: Patch-For-Review.Apr 6 2022, 11:30 PM
ovasileva added a comment.Apr 7 2022, 8:32 AM

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
gerritbot added a comment.Apr 7 2022, 5:53 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.
gerritbot added a comment.Apr 7 2022, 9:20 PM

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
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 12 2022, 10:49 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

ChromeFirefoxSafariEdge
Screen Recording 2022-04-12 at 3.43.54 PM.mov.gif (862×608 px, 1 MB)
Screen Recording 2022-04-12 at 3.45.11 PM.mov.gif (862×608 px, 1 MB)
Screen Recording 2022-04-12 at 3.46.20 PM.mov.gif (862×608 px, 1 MB)
Screen Recording 2022-04-12 at 3.47.25 PM.mov.gif (862×608 px, 1 MB)
Edtadros updated the task description. (Show Details)Apr 12 2022, 10:50 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 16 2022, 9:28 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

ChromeFirefoxSafariEdge
Screen Recording 2022-04-16 at 2.16.28 PM.mov.gif (1×1 px, 1 MB)
Screen Recording 2022-04-16 at 2.17.49 PM.mov.gif (1×1 px, 1 MB)
Screen Recording 2022-04-16 at 2.19.18 PM.mov.gif (1×1 px, 2 MB)
Screen Recording 2022-04-16 at 2.21.37 PM.mov.gif (1×1 px, 1 MB)
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
PatchDemoBot added a comment.May 27 2022, 11:30 PM

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

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

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits