Currently, clicking on a footnote marker in the article causes the ReferenceDialog popup to display the full footnote body for that ref. We want this mechanism to be extended to show both the main ref on top and subref on the bottom.

As an example of how subreference previews are rendered in the mobile web view, the following wikitext:

<ref name="main">Named ref (body)</ref>
<ref name="main" details="Subreference (body)" />

is shown in a preview with the main and subref bodies stacked vertically, single-spaced:

This has already been implemented for MobileFrontend, see the relevant code: https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/refs/changes/72/1161872/1/src/mobile.startup/references/ReferencesHtmlScraperGateway.js#36

The basic algorithm is that when a footnote marker is clicked, we extract two chunks of content rather than one, following these steps:

• Use ID embedded in the footnote marker to locate the subref reflist item
• Extract subreference footnote body content the same as for a normal ref
• Traverse to the parent, which is the main ref for the subref.
• Extract the parent's footnote body content.
• Render the foonote preview like:

[<subref number, eg. 1.1>] <main ref content>
<subref content>

Ideally this be wholly or partially implemented in the shared pagelib JS layer.

The attached proof-of-concept patch shows the basic desired behavior, but the style and code should be refined: