[x] Replace inlined SVG string
- Add svg-inline-loader to Webpack config (referencing [[ https://gerrit.wikimedia.org/r/plugins/gitiles/marvin/+/master/src/client/webpack.config.ts#141 | Marvin ]])
- Move the SVG in createPokeyMasks() to an SVG file
- Add documentation explaining that this is a fancy mask to point at the link
- The pokey is displayed adjacent to the image (“touching”), the pokey contains part of the image (https://drive.google.com/file/d/1HH4LjqIdfOa3eTPLgXKPOK1rRyX8Wgac/view). SVG masks are used in place of CSS masks for browser support issues (see https://caniuse.com/#feat=css-masks).
- Reword files to consistently refer to popups and previews
- Popups is a generic term that should be used whenever referring to common code
- Previews is a specific term that should be used whenever referring to the current usage in desktop ("page previews")
- There may be fewer offenders than originally supposed but this work should at least include documenting the distinction
- Componentize UI
[x] Extract settings dialog, thumbnail, and popups into distinct components from their renderers
- Separate render (appending to DOM) and binding events from creation
[] Replace Mustache with ES6 template strings
[x] Add ES6 transpilation step for string template usage; remove ES5 ESLint config
- Convert Mustache templates to template strings
- If this is difficult, use Preact as an exercise
- Document JavaScript filesizes on release timeline
- Note: it’s also about the MediaWiki payload size. It’s depending on mediawiki.template.mustache
- Add ADR and share on wikitech-l / mobile-l.
- Split LESS into separate files that much the structure of the JS.
Notes on triggering for QA:
- https://drive.google.com/file/d/10skTokq_kOjIu9C8wg7DTHt73YjvScmS/view?usp=sharing