Page MenuHomePhabricator

[Share Highlights] Add a "Share" button to mobile article toolbar
Closed, ResolvedPublic3 Estimated Story Points

Description

Article-level share's entry point is a share button within Minerva. Implement design.

Screenshot 2026-04-21 at 10.52.00 AM.png (1×818 px, 374 KB)

Acceptance criteria

  • add share button (with "Share" aria label) to toolbelt (visible before JS initializes)
  • clicking this icon should fire a JS hook that the Vue app can subscribe to. Ultimately this will open the Share dialog in "Article" mode (without highlighted text), but that will be done in T423860.
  • Remove the "Download PDF" button for experiment treatment group participants (note: confirm that we are doing this)

Technical considerations

Minerva includes a toolbar (icon row) and a conditional overflow dropdown. The overflow is gated by the MinervaOverflowInPageActions config (base: false, loggedin: true), so logged-out readers on main namespace pages (the target population per T420773) should see only the toolbar.

Sources of toolbar items. They don't all come from the same place:

  • Language / Watch / History / Edit are server-rendered via the SkinTemplateNavigation::Universal hook and built into the toolbar by Minerva's ToolbarBuilder.
  • "Download as PDF" is Minerva's own button, not from the Collection extension. It is injected client-side by skins.minerva.scripts/downloadPageAction.js via mw.util.addPortletLink, and self-gates on the wgMinervaDownloadNamespaces JS config var exposed by SkinMinerva::getJsConfigVars().

The good news for us is that we should be able to keep all work inside ReaderExperiments, no need for a Minerva patch:

  1. Add share icon — register SkinTemplateNavigation::Universal and insert a share-keyed entry with an icon property into $links['views'] for enrolled users. ToolbarBuilder renders any view with an icon, so nothing is needed on Minerva's side. The existing ShareHighlight ResourceLoader module binds the click handler.
  2. Remove Download-as-PDF icon — in the existing BeforePageDisplay handler, call $out->addJsConfigVars( 'wgMinervaDownloadNamespaces', [] ) for enrolled users. Minerva's JS self-gate reads that config and skips injection entirely — no CSS suppression, no DOM flash.

Gating for both changes mirrors the existing ShareHighlight pattern: Minerva skin + NS_MAIN + logged-out + assigned experiment group.

QA instructions

On patchdemo, local wiki, or production (once patch lands via train)

  • Visit an article page on a real or emulated mobile device (feature is gated on minerva; Firefox responsive design mode can emulate)
  • Make sure you are using Minerva/Mobile view
  • Add ?mpo=share-highlight:treatment param to the URL

The "download PDF" button should be gone, and a "share" (curved arrow) icon action button should appear instead. The button should be focusable, hoverable, and clickable. Clicking won't do any visible action until T423860 is complete, but it will log to the console for now. If T423860 is complete, then clicking the button opens the share dialog.

Event Timeline

Is there a reason to replace the download button with a share button versus adding a new share button for the experiment?

@JScherer-WMF... so I spoke to @Jdlrobson-WMF and he tagged me here to see if there will be any clashes between this experiment and our logged out save icon experiment which will replace the star. I don't think it is an issue and I think it is more of a question for people designing the experiment than us.

The question of overall architecture of this menu and the overflow menu also came up. But I feel we would need to align on that only if you all decide to scale this experiment. If this becomes more permanent then the concerns were 1) what happens to download button 2) should we have guidelines on which options should we show to logged out users 3) how would the experience be for users after log in and don't find those things on the bar etc.

egardner renamed this task from [Share Highlights] Replace download button on Minerva with share button to [Share Highlights] Add a "Share" button to mobile article toolbar.Tue, Apr 21, 8:08 PM
egardner changed the point value for this task from 5 to 3.

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

[mediawiki/extensions/ReaderExperiments@master] [Share Highlight] Add toolbar share icon on Minerva

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

So far I have only implemented the addition of the new button in my patch. I want to be 100% clear that we're ok with temporarily removing "Download" as part of this experiment before I do that part of the task.

So far I have only implemented the addition of the new button in my patch. I want to be 100% clear that we're ok with temporarily removing "Download" as part of this experiment before I do that part of the task.

Hey @egardner I met with @JScherer-WMF and we agreed that we can hide the download button and worry about this when and if we scale the solution.

To hide the download button I'd recommend using CSS, as modifying globals has caused cache pollution and been hard to debug in the past.

li#minerva-download {
    display: none;
}

I asked Justin about the positioning of the icon and he was indifferent.

Change #1276042 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] [Share Highlight] Add toolbar share icon on Minerva

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

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

[mediawiki/extensions/ReaderExperiments@master] [Share Highlight] Hide Minerava "download PDF" button via CSS

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

Change #1276825 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] [Share Highlight] Hide Minerava "download PDF" button via CSS

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

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

[mediawiki/extensions/ReaderExperiments@master] Wire up share button

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

Change #1277124 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Wire up share button

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

QA
(1) Button is rendered
  • Test locally, beta, and production.
  • Article-level share button is present locally and on beta wiki. ✅
  • Article-level share button is not yet present on production wiki. ❓
(2) Button has interactive states
  • Test locally and on beta.
  • Article-level share button has interactive states (active, hover, and focus). ✅
    ShareHighlight_article-level_share_button_focus.png (114×360 px, 8 KB)
(3) Button action
  • Test locally and on beta.
  • Clicking the article-level share button opens the share dialog, displaying a preview of the quote card with page summary text. ✅
Notes

The article-level share button is not present on production wiki.

ShareHighlight_article-level_share_button_not_present_on_prod.png (614×890 px, 79 KB)

Next steps: Check Italian wiki on Wednesday, April 29 (example: https://it.wikipedia.org/wiki/Italia?mpo=share-highlight:treatment&useformat=mobile), or all wikis on Thursday, April 30th, based on the deployment train.

lwatson changed the point value for this task from 3 to 0.

Repointing to 0 and pulling into the new sprint - we only need to check production wiki.