Page MenuHomePhabricator

[ToC] short term: show the ToC inline for smaller resolutions for the A/B test
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

In T298898 we learned that our proposed solution for the ToC on narrower browser windows is not going to be possible until some time in the future. For now, as a short term solution, we've decided that for screen widths below 1000px we will render the ToC inline (as it currently is in Legacy Vector):

(click on GIF if it isn't auto-playing)

narrow screen toc.gif (376×618 px, 2 MB)

basic prototype: https://di-toc-responsive-sidebar.web.app/Osteichthyes

TODO

  • While the A/B test is running at lower resolutions where the table of contents is currently hidden, force the display of the legacy table of contents regardless of which bucket the user is in
  • While the A/B test is disabled AND table of contents is present in the sidebar AND at lower resolution THEN legacy table of contents should be hidden

QA Results - Beta

ACStatusDetails
1T300975#7854298
2T300975#7854298

QA Results - Prod

ACStatusDetails
1T300975#7859427
2T300975#7859427

Event Timeline

We were considering something like this for an A/B test but never as a final production-worthy state. I worry that short-term solutions have a habit of becoming long-term solutions, so I am pretty concerned about this plan.

  • This would significantly add to the HTML size for all page views as it would mean two tables of contents in every single page view. It would also add 1kb to render-blocking CSS which impacts the first paint and load additional unnecessary JavaScript to deal with the collapsible behavior of the existing table of contents.
  • It will also create a lot of challenges for editors as the table of contents is currently tied to various decisions around layout (https://www.mediawiki.org/wiki/Talk:Reading/Web/Desktop_Improvements#Feedback_on_ToC_functionality touches on this somewhat). If the table of contents is in a predictable state it will be much easier for them to work around editorial decisions. I worry that by having 2 table of contents to think about we'll end up with situations like the longstanding #coordinates issue.
  • On low resolutions, we already know this to be a bad experience, as it can considerably push down the article on long articles, making them a bad experience which is why we hide the table of contents on mobile.

. For now, as a short term solution, we've decided

I don't think I was involved in this decision. If so, I'm sorry for somehow missing this.

What problem are we solving and for which users exactly? As far as I see, the only users that will be impacted by this change are users who resize their browser. Users on mobile devices using Vector will not be impacted as we don't enable the viewport tag so the skin does not adapt to the device. What use case is there for seeing the table of contents in a small resized window?

What problem are we solving and for which users exactly?

Problem: With the table of contents on the side of the article, as your screen gets smaller there is less and less room for the article (see the original task, T298898, for more context). At around 1000px the article is quite squished.
Which people: this is for anyone with a browser window less than 1000px wide.

On low resolutions, we already know this to be a bad experience, as it can considerably push down the article on long articles, making them a bad experience which is why we hide the table of contents on mobile

Right, this is not the preferred solution. However until we can collapse the sections (T298898) we need to do something for these people.

Jdlrobson added a subscriber: bwang.

Hey @bwang I chatted to @alexhollender_WMF and @ovasileva about this and I'm going to spend some time with Alex, reviewing some solutions. It's on me to set this meeting up so reassigning this for now.

I haven't managed to get into this because of my vacation. I'm hoping to focus some time on this next week.

So I've been thinking through this and I've come to the conclusion that there is no way of doing this without living with some long term technical debt. Given the desired and preferred end goal is T298898 I decided to spend some time rethinking a way to make that possible. I think I've found one.

With that in mind, pending developer approval on T298898 I suggest we decline this task and focus our energy there.

Jdlrobson renamed this task from [ToC] short term: show the ToC inline for smaller resolutions to [ToC] short term: show the ToC inline for smaller resolutions for the A/B test.Mar 29 2022, 5:14 PM
Jdlrobson reassigned this task from Jdlrobson to ovasileva.

Olga to check in with Jennifer whether this would impact the A/B test

ovasileva added a subscriber: jwang.

Olga to check in with Jennifer whether this would impact the A/B test

@Jdlrobson - done! @jwang confirmed the plan makes sense so long as we're able to have the screen size data as well. Once we do the test, we can look through the data and decide whether we want to throw away the smaller resolutions.

cjming subscribed.

I didn't get very far on this - figure if someone wants to work on it tomorrow, I put it up for grabs. If not, I'll pick it up on Monday and reassign myself.

Jdlrobson added a subscriber: nray.

@cjming might make sense to wait for @nray's A/B test code to land since that may require changes to the CSS selector we use.

Moving to blocked with that in mind.

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

[mediawiki/skins/Vector@master] Force legacy TOC to render at lower resolutions

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

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

hi @alexhollender_WMF cc @ovasileva @Jdlrobson

I thought I was clear but now I am confused by the 2nd ToDo in the ticket description:

While the A/B test is disabled AND table of contents is present in the sidebar AND at lower resolution THEN legacy table of contents should be hidden

"at lower resolution" presumably means below 1000px (desktop breakpoint)

What should be visible when the new TOC feature is enabled and the A/B test disabled for all viewports below 1000px?

What should be visible when the new TOC feature is enabled and the A/B test disabled for all viewports below 1000px?

Confirmed with @Jdlrobson that until we have more data, no TOC (neither legacy nor sticky sidebar) should be visible in this case.

And we will confirm about breakpoint during design review - erring on tablet (pre-existing) for the time being.

Change 777889 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Force legacy TOC to render at lower resolutions

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: While the A/B test is running at lower resolutions where the table of contents is currently hidden, force the display of the legacy table of contents regardless of which bucket the user is in

Screen Recording 2022-04-13 at 6.56.19 PM.mov.gif (1×1 px, 3 MB)

Screen Recording 2022-04-13 at 7.00.28 PM.mov.gif (1×1 px, 3 MB)

✅ AC2: While the A/B test is disabled AND table of contents is present in the sidebar AND at lower resolution THEN legacy table of contents should be hidden

Screen Recording 2022-04-12 at 10.16.51 AM.mov.gif (882×1 px, 3 MB)

Test Result - Prod

Status: ❓ Need More Info
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❓ AC1: While the A/B test is running at lower resolutions where the table of contents is currently hidden, force the display of the legacy table of contents regardless of which bucket the user is in
@Jdlrobson Can this be tested in production yet? I couldn't find any pages that had the AB test body tag.

✅ AC2: While the A/B test is disabled AND table of contents is present in the sidebar AND at lower resolution THEN legacy table of contents should be hidden

Screen Recording 2022-04-16 at 1.57.55 PM.mov.gif (1×1 px, 2 MB)

Looks good, we can double-check in production once the A/B test is live