Page MenuHomePhabricator

Audit RL modules used for the mobileapps CSS base endpoint (and what we really need them for)
Closed, ResolvedPublic

Description

As a first step toward evolving the provisioning of content styles in the apps, we should document the various modules used, and what specifically we need them for (e.g., which rules, and/or which kinds of content).

The goal is to move from there to pulling in specific rules in a more targeted way, to reduce pulling in unneeded rules, and avoid breakage from changes unrelated to the apps' needs.

Findings

skins.minerva.base.styles

Added when skins.minerva.base.reset was merged into it. The Android app has been using skins.minerva.base.reset since May 2015 (https://gerrit.wikimedia.org/r/213465). The specific rules needed are TBD.

skins.minerva.content.styles

This is the base stylesheet for page content in the app. It has also been in use since https://gerrit.wikimedia.org/r/213465. All changes to it should be reviewed by apps and RI engineers.

skins.minerva.content.styles.images

This is a new module needed to fix T219411.

mediawiki.page.gallery.styles

Added in https://gerrit.wikimedia.org/r/282437, with the goal of improving the presentation of images contained in MediaWiki's in-page "image galleries" in the apps. The specific rules needed are TBD; possibly, it could just be removed.

mediawiki.skinning.content.parsoid

This is an important module for Parsoid HTML consumers, which re-implements things like auto-numbering counters for references in order to achieve feature parity with PHP parser HTML; however, it is desktop-focused and we should probably narrow down the specific rules we need. Added in https://gerrit.wikimedia.org/r/346756/.

ext.cite.style

Needed for styling references; added in https://gerrit.wikimedia.org/r/248364/.

ext.math.styles

Needed for styling math formulae; added in https://gerrit.wikimedia.org/r/351840/.

ext.timeline.styles

Needed for styling timelines; added in https://gerrit.wikimedia.org/r/357391/.

ext.pygments

Supports syntax highlighting; added in https://gerrit.wikimedia.org/r/392067/.

mobile.app

Contains apps-specific custom snippets to:

  1. hide IPA "(listen)" parentheticals (ipa.less)
  2. contain wide images to prevent horizontal page scrolling (imageOverflow.less)

mobile.app.parsoid

An app-specific custom snippet to center images in Parsoid HTML (figure.less)

Historical note

Prior to May 2015 and https://gerrit.wikimedia.org/r/213465, the MobileApp extension was directly referencing .less files from MobileFrontend and pulling them in, and these were in turn pulled into the app via RL. See https://gerrit.wikimedia.org/r/213431.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 12 2019, 4:58 PM
Mholloway renamed this task from Audit RL modules used (and what we really need them for) to Audit RL modules used for the mobileapps CSS base endpoint (and what we really need them for).Mar 12 2019, 4:58 PM
Mholloway updated the task description. (Show Details)
Mholloway triaged this task as Medium priority.Mar 13 2019, 3:39 PM
Mholloway claimed this task.Apr 2 2019, 5:05 PM
Mholloway raised the priority of this task from Medium to High.

Bumping to high priority, because problems to this keep occurring regularly; see most recently T219411: External links no longer have arrow icon in Light theme..

Mholloway updated the task description. (Show Details)Apr 2 2019, 6:27 PM
Mholloway updated the task description. (Show Details)Apr 2 2019, 6:29 PM

Note only certain pages need mediawiki.page.gallery.styles and ext.timeline.styles and you should be able to identify those (along with others) from the parser:
https://en.wikipedia.org/wiki/Special:ApiSandbox#action=parse&format=json&page=Pythagorean_theorem&prop=modules

@Jdlrobson Oh, thanks for the pointer -- that will be handy in the event we iterate on the PCS CSS endpoint to vary the styles served per page.

bearND updated the task description. (Show Details)Apr 3 2019, 9:10 PM
bearND added a subscriber: bearND.EditedApr 3 2019, 9:37 PM

Added skins.minerva.content.styles.images to the description, which is a new RL module we don't have included yet.

@Jdlrobson Are there any other ones we might need? How about skins.minerva.mainPage.styles?

Running Object.keys(mw.loader.moduleRegistry).filter((key)=>mw.loader.getState(key) === 'ready') in developer console on a wiki page will show you all the modules that are loaded to power the mobile site.

It's hard to know which of these you'll need as I'm not sure how much of the mobile UI is consistent with Android:

["user", "user.styles", "user.defaults", "user.options", "user.tokens", "jquery", "mediawiki.base", "mediawiki.legacy.wikibits", "jquery.accessKeyLabel", "jquery.client", "jquery.cookie", "jquery.textSelection", "jquery.throttle-debounce", "mediawiki.template", "mediawiki.template.regexp", "mediawiki.api", "mediawiki.hlist", "mediawiki.notify", "mediawiki.RegExp", "mediawiki.String", "mediawiki.storage", "mediawiki.Title", "mediawiki.Uri", "mediawiki.user", "mediawiki.util", "mediawiki.viewport", "mediawiki.cookie", "mediawiki.experiments", "mediawiki.language", "mediawiki.cldr", "mediawiki.libs.pluralruleparser", "mediawiki.jqueryMsg", "mediawiki.page.startup", "mediawiki.ui.anchor", "mediawiki.ui.button", "mediawiki.ui.icon", "oojs", "mediawiki.router", "oojs-router", "oojs-ui.styles.icons-location", "ext.cite.styles", "ext.centralauth.centralautologin.clearcookie", "ext.centralNotice.startUp", "ext.centralNotice.geoIP", "ext.centralNotice.choiceData", "ext.centralNotice.kvStoreMaintenance", "ext.visualEditor.targetLoader", "ext.visualEditor.ve", "ext.visualEditor.track", "mobile.pagelist.styles", "mobile.pagesummary.styles", "mobile.startup.images.variants", "mobile.messageBox.styles", "mediawiki.template.hogan", "mobile.startup.images", "mobile.init", "mobile.startup", "mobile.site", "mobile.site.styles", "skins.minerva.base.styles", "skins.minerva.content.styles", "skins.minerva.content.styles.images", "skins.minerva.icons.loggedin", "skins.minerva.icons.images", "skins.minerva.icons.images.scripts", "skins.minerva.icons.images.scripts.misc", "skins.minerva.icons.page.issues.uncolored", "skins.minerva.icons.page.issues.default.color", "skins.minerva.icons.page.issues.medium.color", "skins.minerva.mainMenu.icons", "skins.minerva.mainMenu.styles", "skins.minerva.loggedin.styles", "skins.minerva.scripts", "skins.minerva.notifications.badge", "skins.minerva.notifications", "skins.minerva.options.share.icon", "skins.minerva.options", "skins.minerva.talk", "skins.minerva.toggling", "skins.minerva.watchstar", "ext.relatedArticles.readMore.gateway", "ext.relatedArticles.readMore.bootstrap", "ext.eventLogging", "ext.eventLogging.subscriber", "ext.wikimediaEvents", "ext.wikimediaEvents.loggedin", "ext.navigationTiming", "mw.externalguidance.init", "ext.quicksurveys.lib", "ext.quicksurveys.init", "ext.kartographer", "ext.kartographer.style", "ext.kartographer.linkbox", "ext.kartographer.util", "ext.gadget.switcher", "ext.gadget.MobileMaps"]

In theory all the skins.minerva prefixed ones might be useful and long term they'll likely be merged into a single module skins.minerva.styles.

bearND added a comment.EditedApr 3 2019, 9:49 PM

I like that some of them have 'content' in the name. Those are most likely what we need. We don't need the chrome ones.

Mholloway closed this task as Resolved.Apr 26 2019, 1:16 PM