Page MenuHomePhabricator

Identify requirements and solutions for sharing assets, LESS variables, and styles in MobileFrontend
Open, MediumPublicSpike

Description

NOTE: this task is a draft and should be considered work in progress until resolution or this notice is removed.

This task captures some of the use cases for styling components in MobileFrontend and possible solutions. The task can broken apart as needed.

Acceptance criteria

  • Task out the proposed solutions.
  • Use cases and requirements are published on wiki.

Use cases and possible solutions

LESS variables

Wikimedia design variables for colors and metrics are split into a convenient repo, wikimedia-ui-base, but there doesn't seem to be a good way to reference them. This issue has come up before but most recently in T219895 where only two colors (#d33 and #00af89) are needed. Some options are:

  1. Copy and paste bits and pieces as needed (current approach). Obviously works and obviously not ideal.
  2. Copy all of wikimedia-ui-base to a new module in Core or MobileFrontend. This would probably be an easy change in either place but Core would be ideal.
  3. npm install wikimedia-ui-base and add Webpack LESS processing to dump the styles into resources/dist. We have Webpack but haven't explored stylesheet processing yet. This would give us a useful abstraction between styles written and styles shipped but will need a little initial tooling.
  4. Depend on the oojs-ui-core.styles ResourceLoader module. This may work but adds quite a lot more than only the variables.

Icons

Icons are usually copied and pasted into MobileFrontend and MinervaNeue. Some options are:

  1. Copy the icons into the repo and add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed.
  2. Add new modules to MobileFrontend extension.json / MinervaNeue skin.json that reference the icons needed from Core. Seems much better than copying.
  3. Add a new module to Core that has all the icons with useDataURI to false (URLs like /w/load.php?modules=wikimedia.ui&image=link&variant=base20&format=original&lang=en&skin=minerva are used instead of data URIs). The overhead shoudl be smaller than data URIs but this may still be big and may not work for all use cases.
Adding a module to skin.json
https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/da4c7757cdb77cc30d30bca82de157f5c13fee3a/skin.json#257

"wikimedia.ui": {
  "class": "ResourceLoaderImageModule",
  "selectorWithoutVariant": ".wikimedia-ui-{name}:before",
  "selectorWithVariant": ".wikimedia-ui-{name}-{variant}:before",
  "useDataURI": false,
  "variants": {
    "base20": {
      "color": "#54595d",
      "global": true
    }
  },
  "images": {
    "articleRedirect": {
      "file": {
        "ltr": "resources/wikimedia.ui/articleRedirect-ltr.svg",
        "rtl": "resources/wikimedia.ui/articleRedirect-rtl.svg"
      }
    },
    "info": "resources/wikimedia.ui/info.svg",
    "link": "resources/wikimedia.ui/link.svg",
    "listBullet": {
      "file": {
        "ltr": "resources/wikimedia.ui/listBullet-ltr.svg",
        "rtl": "resources/wikimedia.ui/listBullet-rtl.svg"
      }
    },
    "logo-Wikidata": "resources/wikimedia.ui/logo-Wikidata.svg",
    "logo-Wikimedia": "resources/wikimedia.ui/logo-Wikimedia.svg",
    "quotes": {
      "file": {
        "ltr": "resources/wikimedia.ui/quotes-ltr.svg",
        "rtl": "resources/wikimedia.ui/quotes-rtl.svg"
      }
    },
    "upload": "resources/wikimedia.ui/upload.svg",
    "userAvatar": "resources/wikimedia.ui/userAvatar.svg"
  }
},

A new approach to icons was added to Core and is only used in one place of MobileFrontend:

Add a single icon from Core to extension.json
https://gerrit.wikimedia.org/g/mediawiki/extensions/MobileFrontend/+/refs/changes/67/510067/11/extension.json#227

"mobile.init.icons": {
  "class": "ResourceLoaderOOUIIconPackModule",
  "targets": [
    "mobile",
    "desktop"
  ],
  "icons": [ "close" ]
},

Component styles

MobileFrontend has lots of UI. One example is the link:

Anchor.mustache
<a {{#href}}href="{{href}}"{{/href}} class="mw-ui-anchor
	{{#progressive}} mw-ui-progressive{{/progressive}}
	{{#destructive}} mw-ui-destructive{{/destructive}}
	 {{additionalClassNames}}">{{label}}</a>

These component styles, like mw-ui-progressive, come from mediawiki.ui but are deprecated, may be outdated, and may be better divided so it's easier to make consistent interfaces in a modicum of bytes. What component styles are we missing, where should they live, and how should they be referenced?

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJun 13 2019, 9:49 PM
Restricted Application added a subscriber: Liuxinyu970226. · View Herald Transcript
nray updated the task description. (Show Details)Jun 13 2019, 9:59 PM
Niedzielski renamed this task from Identify requirements and solutions for sharing assets, variables, and styles in MobileFrontend to Identify requirements and solutions for sharing assets, LESS variables, and styles in MobileFrontend.Jun 13 2019, 10:28 PM
Niedzielski updated the task description. (Show Details)
Jdlrobson triaged this task as Medium priority.Aug 2 2019, 4:56 PM