Page MenuHomePhabricator

[Minerva TOC] design feedback
Closed, ResolvedPublic3 Estimated Story Points

Description

Moving design feedback to its own separate ticket. Original feedback: https://phabricator.wikimedia.org/T415794#11633138

  • When you deep link into the page, whether with the ToC or otherwise, the scroll position of the ToC defaults to the top. Whatever the active section is should be in the center of the ToC.
  • The ToC is missing from beside the title.

7C75E36E-531E-41C0-8D86-D2696200C0A5_1_105_c.jpeg (603×1,304 px, 220 KB)

  • ToC window should have a 2px border radius
  • ToC border should be muted colour
  • When you scroll, the active ToC item should update with the current section. Right now it looks like a hover not an active.

3D65CC46-FFFB-4D00-A69F-8C68FB2E9E6F_1_105_c.jpeg (603×1,304 px, 195 KB)

  • Big spaces are on the right side of the sticky header for sections without an edit icon.

2D2B8199-057D-45B7-9849-157118B80BFB_1_105_c.jpeg (603×1,304 px, 224 KB)

Acceptance Criteria

  • Ensure deep link functionality works as expected
  • Add the article page heading button. This button opens/closes the TOC below the button.
  • Clicks outside the TOC close the TOC
  • Revise TOC's border styles: 2px border radius, border-color-muted border color
  • Add box shadow to the TOC: box-shadow-medium

Related Objects

Event Timeline

When you deep link into the page, whether with the ToC or otherwise, the scroll position of the ToC defaults to the top. Whatever the active section is should be in the center of the ToC.

Test deep link: https://en.wikipedia.beta.wmcloud.org/wiki/Berlin?mpo=mobile-toc-abc:treatment1#Geography

The ToC is missing from beside the title.

This appears to be the page title, not the sticky header. I'll double check that.

When you scroll, the active ToC item should update with the current section. Right now it looks like a hover not an active.

I need more details on what's broken here.

Big spaces are on the right side of the sticky header for sections without an edit icon.

For that NASA example, the word "Development" wouldn't fit on the first line with the margins. Unless we break the word.

minerva-toc sticky header title.png (506×294 px, 46 KB)
minerva-toc sticky header h2.png (482×180 px, 31 KB)

Discussed https://phabricator.wikimedia.org/T417932#11634200 with Justin:

  1. Deep link: deep link functionality is working correctly on production https://en.wikipedia.org/wiki/Berlin?mpo=mobile-toc-abc:treatment1#Geography
  2. Missing page title icon: the article page title has an icon (refer to Figma)
  3. Scrolling behavior: The code intentionally prevents scrolling the main page while the table of contents is open. Decision: acceptable, no longer a priority concern
  4. Sticky headers without edit icons: Edit icon space allocation is not the cause of large spacing. Decision: acceptable

Change #1240796 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/ReaderExperiments@master] Minerva TOC: address design feedback

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

unless @JScherer-WMF feels strongly otherwise, I would like to propose that only the top two bugs are launch blocking and the others are nice to have (maybe we get to them now that we've moved launch out by a day but if not we can still go), so please work on fixes in this order: #2, #1, the rest. thank you!!!

unless @JScherer-WMF feels strongly otherwise, I would like to propose that only the top two bugs are launch blocking and the others are nice to have (maybe we get to them now that we've moved launch out by a day but if not we can still go), so please work on fixes in this order: #2, #1, the rest. thank you!!!

These are all fixed except the page title icon, which is a big one, I agree. I think the border radius and stroke colours would be nice and are probably trivial to change.

I revised the TOC border styles and added the main page title icon. Use the patchdemo links to preview changes, and remember to enable mobile view in the link at the bottom of the page.

I revised the TOC border styles and added the main page title icon. Use the patchdemo links to preview changes, and remember to enable mobile view in the link at the bottom of the page.

@lwatson - "404 page not found" is displayed for both links.

Checked and confirmed the behavior described in https://phabricator.wikimedia.org/T417932#11634376

Change #1241037 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/MobileFrontend@master] Minerva TOC: reserve space for the article page heading button

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

@Etonkovidova - I'm still working on this task and will create a new link later. I deleted all stale patchdemos earlier, so 404 is expected.

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

https://8df60de463.catalyst.wmcloud.org/w/

Here's a new patchdemo of the latest changes:

Please note that the page heading button and heading text are not aligned in patchdemo, but they are aligned locally.

LocalhostPatchdemo
Screenshot 2026-02-20 at 6.20.28 PM.png (596×398 px, 35 KB)
Screenshot 2026-02-20 at 6.20.45 PM.png (340×203 px, 13 KB)

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

https://7911086964.catalyst.wmcloud.org/w/

Change #1240796 abandoned by LWatson:

[mediawiki/extensions/ReaderExperiments@master] Minerva TOC: address design feedback

Reason:

decided to use a teleport approach which reduces code duplication

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

Change #1242260 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Add extra button next to header

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

Change #1242515 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/ReaderExperiments@master] Minerva TOC: handle clicks outside the toc

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

Change #1242536 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] Quick accessibility hack for toc sticky header

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

Change #1241037 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Minerva TOC: reserve space for the article page heading button

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

Change #1242260 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Add extra button next to header

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

Change #1242536 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Quick accessibility hack for toc sticky header

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

Change #1242805 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Move TOC below sticky

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

Change #1242515 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Minerva TOC: handle clicks outside the toc

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

Change #1243004 had a related patch set uploaded (by Matthias Mullie; author: LWatson):

[mediawiki/extensions/MobileFrontend@wmf/1.46.0-wmf.16] Minerva TOC: reserve space for the article page heading button

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

Change #1243004 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@wmf/1.46.0-wmf.16] Minerva TOC: reserve space for the article page heading button

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

Mentioned in SAL (#wikimedia-operations) [2026-02-24T08:33:49Z] <mlitn@deploy2002> Started scap sync-world: Backport for [[gerrit:1243004|Minerva TOC: reserve space for the article page heading button (T417932)]]

Mentioned in SAL (#wikimedia-operations) [2026-02-24T08:35:39Z] <mlitn@deploy2002> mlitn: Backport for [[gerrit:1243004|Minerva TOC: reserve space for the article page heading button (T417932)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-02-24T08:40:22Z] <mlitn@deploy2002> Finished scap sync-world: Backport for [[gerrit:1243004|Minerva TOC: reserve space for the article page heading button (T417932)]] (duration: 06m 33s)

Change #1242805 abandoned by Matthias Mullie:

[mediawiki/extensions/ReaderExperiments@master] Move TOC below sticky

Reason:

Decided to stick with existing position after all

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

(1) tested on enwiki wmf.16 (Checked on enwiki beta and on https://80274d9a03.catalyst.wmcloud.org/wiki/NASA?mpo=mobile-toc-abc:treatment1) - the issue is present.

  • When you deep link into the page, whether with the ToC or otherwise, the scroll position of the ToC defaults to the top. Whatever the active section is should be in the center of the ToC.

Steps:

Screenshot 2026-02-25 at 11.23.59 AM.png (876×1,720 px, 233 KB)

NOTE: TOC on Desktop works correctly, i.e. the TOC would show (and expand the section if needed) the header that the link referred to. https://en.wikipedia.beta.wmcloud.org/w/index.php?title=Moon&mpo=mobile-toc-abc%3Atreatment1#Renewed_exploration_(1990-present)
Screenshot 2026-02-25 at 11.10.53 AM.png (2,816×1,740 px, 1 MB)

Tested on enwiki wmf.16 (also enwiki beta and on https://80274d9a03.catalyst.wmcloud.org/wiki/NASA?mpo=mobile-toc-abc:treatment1)
(2)

  • Add the article page heading button. This button opens/closes the TOC below the button.

Checked on enwiki beta:

Screenshot 2026-02-25 at 11.43.24 AM.png (794×1,296 px, 195 KB)
Screenshot 2026-02-25 at 11.43.36 AM.png (814×1,508 px, 188 KB)

(3)

  • Clicks outside the TOC close the TOC

(4) & (5)

  • Revise TOC's border styles: 2px border radius, border-color-muted border color
  • Add box shadow to the TOC: box-shadow-medium
ext-readerExperiments-minerva-toc__sticky__toc {
  background: var(--background-color-base,#fff);
  border: 1px solid var(--border-color-muted,#dadde3);
  border-radius: 2px;
  position: fixed;
  left: 16px;
  right: 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 4px 0 var(--box-shadow-color-alpha-base,rgba(0,0,0,0.06)),0 0 8px 0 var(--box-shadow-color-alpha-base,rgba(0,0,0,0.06));
  width: calc(100% - 2 * 16px);

Tested on enwiki wmf.16 (also checked on enwiki beta and on https://80274d9a03.catalyst.wmcloud.org/wiki/NASA?mpo=mobile-toc-abc:treatment1)

(6) the current section a user is on gets updated in the TOC:

  • When you scroll, the active ToC item should update with the current section. Right now it looks like a hover not an active.
from the task descriptionwmf.16
3D65CC46-FFFB-4D00-A69F-8C68FB2E9E6F_1_105_c.jpeg (603×1,304 px, 195 KB)
Screenshot 2026-02-25 at 3.50.37 PM.png (856×1,538 px, 184 KB)
lwatson set the point value for this task to 3.

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

https://80274d9a03.catalyst.wmcloud.org/w/