[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.
[x] Split LESS into separate files that much the structure of the JS.
- Notes on size differences via `mw.loader.inspect()`
- Before (doesn't include templates themselves)
``` lines=7
https://en.wikipedia.org/wiki/Barack_Obama (2018-03-16): 58248 + 8266 + 1304 = 67818
(index) name size sizeInBytes
0 mw.EmbedPlayer 95.3 KiB 97538
**1 ext.popups 56.9 KiB 58248**
2 jquery.ui.core 52.4 KiB 53682
3 jquery.uls.data 33.5 KiB 34329
4 ext.wikimediaEvents 29.0 KiB 29709
5 ext.visualEditor.desktopArticleTarget.init 25.4 KiB 25982
6 mmv.bootstrap 25.2 KiB 25774
7 ext.centralNotice.display 24.4 KiB 24944
8 mw.TimedText 21.2 KiB 21689
9 jquery.embedMenu 19.6 KiB 20023
10 mediawiki.jqueryMsg 17.6 KiB 17977
11 mw.EmbedPlayerNative 16.1 KiB 16521
12 jquery.ui.core.styles 15.3 KiB 15708
13 oojs 14.4 KiB 14727
14 mw.PlayerSkinKskin 14.1 KiB 14465
15 jquery.ui.slider 12.7 KiB 12995
16 jquery.suggestions 12.6 KiB 12875
17 ext.uls.interface 11.6 KiB 11884
18 mediawiki.Title 10.9 KiB 11169
19 ext.uls.compactlinks 9.6 KiB 9782
20 jquery.ui.widget 9.5 KiB 9754
21 site 8.3 KiB 8518
**22 mediawiki.template.mustache 8.1 KiB 8266**
23 mw.MediaElement 7.5 KiB 7662
24 ext.gadget.ReferenceTooltips 7.4 KiB 7575
25 ext.centralNotice.choiceData 7.1 KiB 7226
26 mediawiki.language 7.0 KiB 7142
27 mediawiki.libs.pluralruleparser 6.8 KiB 6980
28 ext.navigationTiming 6.8 KiB 6974
29 mw.TextSource 6.6 KiB 6769
30 ext.centralNotice.kvStore 6.5 KiB 6700
31 mw.MediaWikiPlayerSupport 6.4 KiB 6575
32 mediawiki.util 6.0 KiB 6187
33 mediawiki.api 6.0 KiB 6155
34 jquery.spinner 6.0 KiB 6118
35 ext.visualEditor.targetLoader 5.5 KiB 5664
36 mediawiki.searchSuggest 5.5 KiB 5632
37 mw.EmbedTypes 5.4 KiB 5579
38 skins.vector.js 5.4 KiB 5537
39 mediawiki.ui.button 5.1 KiB 5209
40 mw.MediaSource 5.0 KiB 5128
41 jquery.textSelection 5.0 KiB 5071
42 user.defaults 4.8 KiB 4876
43 ext.uls.common 4.6 KiB 4694
44 ext.eventLogging 4.5 KiB 4622
45 mw.MwEmbedSupport.style 4.4 KiB 4542
46 mw.MwEmbedSupport 4.4 KiB 4469
47 Spinner 4.2 KiB 4284
48 jquery.client 4.1 KiB 4213
49 mediawiki.inspect 4.1 KiB 4213
50 ext.centralNotice.bannerHistoryLogger 4.1 KiB 4182
51 mediawiki.Uri 4.0 KiB 4146
52 ext.tmh.OgvJsSupport 4.0 KiB 4094
53 ext.uls.eventlogger 3.2 KiB 3248
54 mw.MediaPlayers 3.1 KiB 3181
55 jquery.ui.mouse 3.1 KiB 3136
56 mw.PopUpMediaTransform.styles 2.9 KiB 2940
57 jquery.accessKeyLabel 2.9 KiB 2927
58 ext.3d 2.5 KiB 2517
59 ext.centralNotice.impressionDiet 2.5 KiB 2511
60 mediawiki.client 2.3 KiB 2389
61 mw.Api 2.3 KiB 2358
62 ext.centralNotice.largeBannerLimit 2.2 KiB 2206
63 mediawiki.String 2.1 KiB 2192
64 mw.ajaxProxy 1.9 KiB 1977
65 ext.uls.webfonts 1.9 KiB 1924
66 ext.centralauth.centralautologin 1.8 KiB 1867
67 fullScreenApi 1.7 KiB 1788
68 ext.centralNotice.kvStoreMaintenance 1.7 KiB 1758
69 mediawiki.legacy.wikibits 1.7 KiB 1732
70 ext.centralNotice.geoIP 1.5 KiB 1576
71 mediawiki.template 1.5 KiB 1531
72 ext.uls.preferences 1.5 KiB 1499
73 mediawiki.UtilitiesTime 1.5 KiB 1498
74 jquery.ui.touchPunch 1.5 KiB 1496
75 jquery.cookie 1.5 KiB 1493
76 mediawiki.user 1.5 KiB 1485
77 jquery.hidpi 1.4 KiB 1466
78 jquery.highlightText 1.4 KiB 1458
79 ext.visualEditor.tempWikitextEditorWidget 1.4 KiB 1457
80 mediawiki.toc 1.4 KiB 1399
81 jquery.mwEmbedUtil 1.4 KiB 1387
82 ext.eventLogging.subscriber 1.3 KiB 1354
83 jquery.hoverIntent 1.3 KiB 1315
**84 ext.popups.images 1.3 KiB 1304**
85 jquery.triggerQueueCallback 1.2 KiB 1263
86 mediawiki.cookie 1.2 KiB 1194
87 jquery.loadingSpinner 1.1 KiB 1162
88 ext.gadget.switcher 1.1 KiB 1158
89 mediawiki.api.options 1.1 KiB 1133
90 ext.centralNotice.startUp 1.1 KiB 1128
91 mw.TMHGalleryHook.js 1.0 KiB 1068
92 jquery.throttle-debounce 1.0 KiB 1030
93 schema.UniversalLanguageSelector 986 986
94 mmv.head 927 927
95 mw.PopUpMediaTransform 923 923
96 ext.cite.a11y 901 901
97 mediawiki.ui.icon 887 887
98 jquery.embedPlayer 877 877
99 mw.TimedText.loader 843 843
100 mediawiki.page.ready 776 776
101 mediawiki.experiments 707 707
102 mediawiki.storage 693 693
103 mediawiki.absoluteUrl 688 688
104 mw.MediaPlayer 663 663
105 jquery.tabIndex 652 652
106 ext.gadget.refToolbar 630 630
107 ext.gadget.teahouse 621 621
108 ext.math.scripts 597 597
109 jquery.debouncedresize 551 551
110 ext.visualEditor.track 514 514
111 mediawiki.language.init 512 512
112 ext.visualEditor.supportCheck 490 490
113 jquery.checkboxShiftClick 432 432
114 mw.EmbedPlayer.loader 422 422
115 ext.centralNotice.legacySupport 404 404
116 mediawiki.page.startup 364 364
117 jquery.getAttrs 352 352
118 mediawiki.api.user 326 326
119 mediawiki.cldr 285 285
120 mediawiki.editfont.styles 272 272
121 mediawiki.language.data 265 265
122 mw.MediaWikiPlayer.loader 256 256
123 mmv.bootstrap.autostart 252 252
124 ext.visualEditor.ve 249 249
125 jquery.mw-jump 240 240
126 ext.gadget.extra-toolbar-buttons 236 236
127 mediawiki.notify 224 224
128 mediawiki.template.regexp 205 205
129 ext.gadget.charinsert 201 201
130 ext.gadget.DRN-wizard 168 168
131 ext.gadget.watchlist-notice 155 155
132 mediawiki.RegExp 147 147
133 user.tokens 132 132
134 ext.uls.init 26 26
135 site.styles 0 0
136 noscript 0 0
137 user 0 0
138 user.styles 0 0
139 user.options 0 0
140 mediawiki.skinning.interface 0 0
141 mediawiki.hidpi 0 0
142 mediawiki.sectionAnchor 0 0
143 mediawiki.legacy.commonPrint 0 0
144 mediawiki.legacy.shared 0 0
145 skins.vector.styles 0 0
146 ext.cite.styles 0 0
147 ext.visualEditor.desktopArticleTarget.noscript 0 0
148 ext.math.styles 0 0
149 ext.uls.interlanguage 0 0
150 ext.wikimediaBadges 0 0
151 wikibase.client.init 0 0
152 ext.tmh.thumbnail.styles 0 0
153 ext.gadget.charinsert-styles 0 0
154 ext.globalCssJs.user 0 0
155 ext.globalCssJs.user.styles 0 0
156 ext.globalCssJs.site 0 0
157 ext.globalCssJs.site.styles 0 0
```
```lines=7
http://localhost:8080/wiki/Barack_Obama (0e4e498): 53686 + 8266 + 3135 + 96 = 65183
(index) name size sizeInBytes
0 oojs-ui-core 149.1 KiB 152679
1 oojs-ui-core.styles 61.2 KiB 62687
**2 ext.popups.main 52.4 KiB 53686**
3 oojs-ui.styles.icons-interactions 46.3 KiB 47398
4 oojs-ui.styles.icons-content 37.2 KiB 38068
5 oojs-ui.styles.icons-alerts 18.9 KiB 19329
6 mediawiki.jqueryMsg 17.5 KiB 17951
7 oojs 14.4 KiB 14727
8 jquery.suggestions 12.6 KiB 12875
9 mediawiki.Title 10.9 KiB 11169
10 oojs-ui.styles.indicators 8.3 KiB 8465
**11 mediawiki.template.mustache 8.1 KiB 8266**
12 mediawiki.debug 7.8 KiB 7967
13 mediawiki.language 7.0 KiB 7142
14 mediawiki.libs.pluralruleparser 6.8 KiB 6980
15 mediawiki.util 6.0 KiB 6187
16 mediawiki.api 6.0 KiB 6155
17 mediawiki.searchSuggest 5.5 KiB 5632
18 skins.vector.js 5.4 KiB 5537
19 mediawiki.ui.button 5.1 KiB 5209
20 jquery.client 4.1 KiB 4213
21 mediawiki.inspect 4.1 KiB 4213
22 mediawiki.Uri 4.0 KiB 4146
23 oojs-ui.styles.textures 3.4 KiB 3494
**24 ext.popups.images 3.1 KiB 3135**
25 jquery.accessKeyLabel 2.9 KiB 2927
26 mediawiki.String 2.1 KiB 2192
27 mediawiki.template 1.5 KiB 1531
28 user.defaults 1.5 KiB 1525
29 jquery.cookie 1.5 KiB 1493
30 mediawiki.user 1.5 KiB 1485
31 jquery.hidpi 1.4 KiB 1466
32 jquery.highlightText 1.4 KiB 1458
33 mediawiki.toc 1.4 KiB 1399
34 ext.eventLogging.subscriber 1.3 KiB 1354
35 mediawiki.cookie 1.2 KiB 1194
36 jquery.throttle-debounce 1.0 KiB 1030
37 mediawiki.ui.icon 887 887
38 mediawiki.page.ready 776 776
39 mediawiki.experiments 707 707
40 mediawiki.storage 693 693
41 jquery.tabIndex 652 652
42 jquery.footHovzer 611 611
43 mediawiki.language.init 512 512
44 jquery.checkboxShiftClick 432 432
45 mediawiki.page.startup 364 364
46 jquery.getAttrs 352 352
47 mediawiki.api.user 326 326
48 mediawiki.cldr 285 285
49 mediawiki.language.data 265 265
50 jquery.mw-jump 240 240
51 mediawiki.notify 224 224
52 mediawiki.template.regexp 205 205
53 mediawiki.RegExp 147 147
54 user.tokens 132 132
**55 ext.popups 96 96**
56 site 0 0
57 site.styles 0 0
58 noscript 0 0
59 user 0 0
60 user.styles 0 0
61 user.options 0 0
62 mediawiki.skinning.interface 0 0
63 mediawiki.hidpi 0 0
64 mediawiki.sectionAnchor 0 0
65 mediawiki.legacy.commonPrint 0 0
66 mediawiki.legacy.shared 0 0
```
After (includes templates themselves which according to source-map-explorer are about 3.6 KiB)
```lines=7
http://localhost:8080/wiki/Barack_Obama (f65dc63): 65202 + 3135 + 96 = 68433
(index) name size sizeInBytes
0 oojs-ui-core 149.1 KiB 152679
**1 ext.popups.main 63.7 KiB 65202**
2 oojs-ui-core.styles 61.2 KiB 62687
3 oojs-ui.styles.icons-interactions 46.3 KiB 47398
4 oojs-ui.styles.icons-content 37.2 KiB 38068
5 oojs-ui.styles.icons-alerts 18.9 KiB 19329
6 mediawiki.jqueryMsg 17.5 KiB 17951
7 oojs 14.4 KiB 14727
8 jquery.suggestions 12.6 KiB 12875
9 mediawiki.Title 10.9 KiB 11169
10 oojs-ui.styles.indicators 8.3 KiB 8465
11 mediawiki.debug 7.8 KiB 7967
12 mediawiki.language 7.0 KiB 7142
13 mediawiki.libs.pluralruleparser 6.8 KiB 6980
14 mediawiki.util 6.0 KiB 6187
15 mediawiki.api 6.0 KiB 6155
16 mediawiki.searchSuggest 5.5 KiB 5632
17 skins.vector.js 5.4 KiB 5537
18 mediawiki.ui.button 5.1 KiB 5209
19 jquery.client 4.1 KiB 4213
20 mediawiki.inspect 4.1 KiB 4213
21 mediawiki.Uri 4.0 KiB 4146
22 oojs-ui.styles.textures 3.4 KiB 3494
**23 ext.popups.images 3.1 KiB 3135**
24 jquery.accessKeyLabel 2.9 KiB 2927
25 mediawiki.String 2.1 KiB 2192
26 mediawiki.template 1.5 KiB 1531
27 user.defaults 1.5 KiB 1525
28 jquery.cookie 1.5 KiB 1493
29 mediawiki.user 1.5 KiB 1485
30 jquery.hidpi 1.4 KiB 1466
31 jquery.highlightText 1.4 KiB 1458
32 mediawiki.toc 1.4 KiB 1399
33 ext.eventLogging.subscriber 1.3 KiB 1354
34 mediawiki.cookie 1.2 KiB 1194
35 jquery.throttle-debounce 1.0 KiB 1030
36 mediawiki.ui.icon 887 887
37 mediawiki.page.ready 776 776
38 mediawiki.experiments 707 707
39 mediawiki.storage 693 693
40 jquery.tabIndex 652 652
41 jquery.footHovzer 611 611
42 mediawiki.language.init 512 512
43 jquery.checkboxShiftClick 432 432
44 mediawiki.page.startup 364 364
45 jquery.getAttrs 352 352
46 mediawiki.api.user 326 326
47 mediawiki.cldr 285 285
48 mediawiki.language.data 265 265
49 jquery.mw-jump 240 240
50 mediawiki.notify 224 224
51 mediawiki.template.regexp 205 205
52 mediawiki.RegExp 147 147
53 user.tokens 132 132
**54 ext.popups 96 96**
55 site 0 0
56 site.styles 0 0
57 noscript 0 0
58 user 0 0
59 user.styles 0 0
60 user.options 0 0
61 mediawiki.skinning.interface 0 0
62 mediawiki.hidpi 0 0
63 mediawiki.sectionAnchor 0 0
64 mediawiki.legacy.commonPrint 0 0
65 mediawiki.legacy.shared 0 0
66 skins.vector.styles 0 0
```
Notes on triggering for QA:
- https://drive.google.com/file/d/10skTokq_kOjIu9C8wg7DTHt73YjvScmS/view?usp=sharing