[Spike] Mobile Section Improvements: Technical feasibilty study
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	egardner
	Thu, Oct 9, 6:32 PM

Description

Background

We'd like to begin evaluating the feasibility of the mobile section improvements project proposal (see this doc for details)

Acceptance criteria

Answer these questions (see here)
1. What changes to MobileFrontend will be needed to make this change?
2. What is the level of complexity in achieving the new design?
3. Can we easily turn off section collapsing on the Minerva mobile skin for an experiment
4. What markup changes might be needed to support the new design.
Schedule a meeting to share and discuss with the team
Document findings (see comment linked above)
Provide a recommendation for next steps based on findings and follow-up conversation

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
[Proof-of-concept] Add experimental "expandSections" URL param	mediawiki/extensions/MobileFrontend	master	+17 -4
Annotate some PHP method return types, basic cleanup	mediawiki/extensions/MobileFrontend	master	+20 -15
Minor improvements to type annotations	mediawiki/extensions/MobileFrontend	master	+33 -17

Customize query in gerrit

Event Timeline

egardner created this task.Thu, Oct 9, 6:32 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptThu, Oct 9, 6:32 PM

egardner triaged this task as High priority.Thu, Oct 9, 6:32 PM

ovasileva updated the task description. (Show Details)Fri, Oct 10, 7:45 AM

ovasileva moved this task from Needs Refinement to Sprint 2 (Oct 14 - Oct 27) Q2 25/26 on the Reader Growth Team board.Fri, Oct 10, 3:12 PM

ovasileva edited projects, added Reader Growth Team (Sprint 2 (Oct 14 - Oct 27) Q2 25/26); removed Reader Growth Team.

egardner set the point value for this task to 2.Tue, Oct 14, 4:32 PM

egardner claimed this task.Tue, Oct 14, 11:04 PM

mfossati added a project: FY2025-26 WE3.1 Engaging New Audiences.Thu, Oct 16, 3:36 PM

Change #1196973 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MobileFrontend@master] Minor improvements to type annotations

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

gerritbot added a project: Patch-For-Review.Fri, Oct 17, 9:27 PM

Change #1196973 abandoned by Eric Gardner:

[mediawiki/extensions/MobileFrontend@master] Minor improvements to type annotations

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

Change #1196982 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MobileFrontend@master] Annotate some PHP method return types

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

egardner moved this task from Committed to Doing on the Reader Growth Team (Sprint 2 (Oct 14 - Oct 27) Q2 25/26) board.Mon, Oct 20, 3:51 PM

Change #1196982 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Annotate some PHP method return types, basic cleanup

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

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.25; 2025-10-28).Tue, Oct 21, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Tue, Oct 21, 4:32 PM

Change #1197704 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MobileFrontend@master] [Proof-of-concept] Add experimental "expandSections" URL param

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

gerritbot added a project: Patch-For-Review.Tue, Oct 21, 7:19 PM

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://711609d9b7.catalyst.wmcloud.org/w/

Change #1197704 abandoned by Eric Gardner:

[mediawiki/extensions/MobileFrontend@master] [Proof-of-concept] Add experimental "expandSections" URL param

Reason:

Abandoned in favor of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1198165. Ideally we can do what we need without modifying MobileFrontend at all. We can restore this code if we do end up needing to modify the sections/headers at the time of generation.

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

Maintenance_bot removed a project: Patch-For-Review.Wed, Oct 22, 10:30 PM

Initial findings

What changes to MobileFrontend will be needed to make this change?

After some exploration, we may be able to make this change with little to no modification of MobileFrontend. This would be a great outcome, and would significantly simplify our work.

In https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1198165, I have demonstrated how we can use a new URL param as a feature flag to trigger auto-expansion of any collapsed sections which may be present on the page (regardless of whether Parsoid or the legacy parser is being used) by relying on the pre-existing collapsible-headings-expanded CSS class (which was originally introduced for DiscussionTools, but which we can use as-is here). What's great is that we can do this all from ReaderExperiments (in a PHP hook), leaving MobileFrontend untouched. Just like with ImageBrowsing, eventually we can use either the URL param OR the experiment system to determine whether this behavior gets triggered.

What is the level of complexity in achieving the new design?

Assuming we start with an approach like what was described above, the next step would be to define a new custom ResourceModule in MobileFrontend which would add any additional CSS/JS to add the sticky behavior (similar to what was done here) and instrument any interactions we need to log.

In terms of the new behavior, we can follow this as prior art: https://vector-2022.vercel.app/sticky-section-headers

We may need to add some new event handlers to the .mf-collapsible-heading elements that MobileFrontend's sectionCollapsing.js code sets up, but ideally this would be purely additive and could be done from ReaderExperiments.

Can we easily turn off section collapsing on the Minerva mobile skin for an experiment

Yes, with the simple addition of the collapsible-headings-expanded class to the page <body> element.

What markup changes might be needed to support the new design.

No markup changes should be needed at all.

One open question that remains here is whether we need to support both legacy-parser-generated markup and parsoid-generated markup for our sticky headers (the markup is different for the sections and section header elements). We may want to decide to limit our prototype to only Parsoid-rendered pages. In that case, we might need to add some logic in the PHP code to automatically "opt-in" any users who are bucketed into our experiment (or who provide the appropriate URL param) into Parsoid – even if they would not otherwise get it (like on English Wikipedia). If we opt our experiment group into Parsoid, we might also want to opt our control group into Parsoid as well.

egardner updated the task description. (Show Details)Wed, Oct 22, 10:41 PM

egardner moved this task from Doing to Signoff on the Reader Growth Team (Sprint 2 (Oct 14 - Oct 27) Q2 25/26) board.Mon, Oct 27, 4:07 PM

@egardner - could you give an update on the two pieces of acceptance criteria not yet checked off?

The "discuss with the team" and "recommendation for next steps" ACs have been covered by the new tickets we refined and pulled into sprint 3. This can be considered done.

egardner closed this task as Resolved.Thu, Oct 30, 6:13 PM

[Spike] Mobile Section Improvements: Technical feasibilty studyClosed, ResolvedPublic2 Estimated Story PointsActions