Maniphest T182069

Table of contents code does not show on Timeless on mobile domain in tablet mode
Closed, ResolvedPublic
Actions

Description

The contents headline show up, but there's no link to show the TOC. I can reproduce this on Firefox (57.0.1 on both Ubuntu and Android) and Chrome (Ubuntu, 62.0.3202.94).

Developer notes

There are styles in skins.minerva.tablet.styles and skins.minerva.base.styles relating to 'toc-mobile' in Minerva. Move these to a new style module in MobileFrontend called "mobile.init.styles" that loads on page load for all mobile pages (including Timeless mobile) and remove them in Minerva
Move skins.minerva.tablet.scripts/toc.js to MobileFrontend's mobile.init module so it runs on Timeless mobile.

Details

	Subject	Repo	Branch	Lines +/-
	Remove table of contents handling	mediawiki/extensions/MobileFrontend	master	+13 -224
	Move Toggling and TableOfContents from Minerva to MobileFrontend	mediawiki/extensions/MobileFrontend	master	+198 -19

Customize query in gerrit

Related Objects

Mentioned In: T198976: Make it easier for search engines to index anchors on mobile
Mentioned Here: T193772: [Research] In-article navigation user testing

Event Timeline

Sebastian_Berlin-WMSE created this task.Dec 5 2017, 10:46 AM

Sebastian_Berlin-WMSE added a project: WMSE-Bug-Reporting-and-Translation-2017.

Sebastian_Berlin-WMSE moved this task from Backlog to Reported bugs on the WMSE-Bug-Reporting-and-Translation-2017 board.

What project is this on?

Wikipedia, e.g. https://en.m.wikipedia.org/wiki/Yellowhammer?useskin=timeless.

Thank you, looks like it's a compatibility issue with mobilefrontend.

Isarra added a project: MobileFrontend.Dec 5 2017, 5:09 PM

(The issue does not occur on mobile resolutions without going through MF. See: https://en.wikipedia.org/wiki/Yellowhammer?useskin=timeless which does not have the ToC issue, but also lacks all the other MF content improvements.)

Yeh this is done by the MobileFormatter inside MobileFrontend and done purposely as the desktop table of contents doesn't make sense in this medium and detracts from the reading experience by pushing content down. A placeholder is left for skins to do as they wish. A section collapsing or a JavaScript based approach is encouraged there instead but is up to skin developer.

It will only happen for the mobile version of the skin (the '.m' domain).

Jdlrobson moved this task from Untriaged to Discuss further on the Web-Team-Backlog (Tracking) board.Jan 30 2018, 5:54 PM

Based on what we discussed, is it actually possible to do it without js currently?

Not right now, but we're still actively trying to find a good solution for table of contents on mobile. T193772 is making some progress in this area right now.

I think this is an unfortunate biproduct of MobileFrontend and Minerva being split. In current state toc-mobile should be optional and opt-in. It should be hidden by default and revealed by skinStyles. My advice here would be to make the MobileFrontend mobile.toc hide ".client-js .toc-mobile {" by default and add a skinStyle for Minerva that reveals this. This would hide the table of contents from Timeless. I could also do this, but it might get done quicker if you want to submit a patch.

Once that's done, I'd advise waiting for us solve this across all mobile skins - this doesn't seem like a Minerva/Timeless-only problem. You should of course feel free to add table of contents handling via JavaScript if you so wish.

Jdlrobson mentioned this in T198976: Make it easier for search engines to index anchors on mobile.Jul 6 2018, 10:06 PM

this came up today in a code review with @Volker_E
The issue here is that MobileFrontend should be shipping a stylesheet (and loading the table of contents code) for all skins on the mobile design, since it strips the desktop table of contents.

Currently that responsibility is being split between Minerva and MobileFrontend.

Jdlrobson renamed this task from No way to show TOC in mobile view to Table of contents code does not show on Timeless on mobile domain in tablet mode.Nov 2 2018, 3:17 PM

Prod subscribed.Dec 8 2018, 8:56 PM

Jtraulle subscribed.Jul 10 2019, 8:37 PM

Isarra moved this task from Backlog to Compatibility on the Timeless board.Aug 16 2019, 8:16 PM

Schlagmichdoch subscribed.Aug 25 2019, 2:46 PM

Change 533356 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Move Toggling and TableOfContents from Minerva to MobileFrontend

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

gerritbot added a project: Patch-For-Review.Aug 29 2019, 11:08 PM

Change 533356 abandoned by Jdlrobson:
Move Toggling and TableOfContents from Minerva to MobileFrontend

Reason:
While doing this inspired by a new idea..

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

Maintenance_bot removed a project: Patch-For-Review.Aug 30 2019, 12:10 AM

Change 533363 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Remove table of contents handling

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

gerritbot added a project: Patch-For-Review.Aug 30 2019, 12:34 AM

Change 533363 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove table of contents handling

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

Maintenance_bot removed a project: Patch-For-Review.Sep 3 2019, 9:10 PM