- Replace inlined SVG string
- Add svg-inline-loader to Webpack config (referencing 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
- 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
- Add ES6 transpilation step for string template usage
- 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.
- Extract settings dialog, thumbnail, and popups into distinct components from their renderers
- Notes on size differences via mw.loader.inspect()
- Before (doesn't include templates themselves)
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
http://localhost:8080/wiki/Barack_Obama (d35286a): 53727 + 8266 + 3135 + 96 = 65224 (index) name size sizeInBytes 0 oojs-ui-core 149.3 KiB 152905 1 oojs-ui-core.styles 61.6 KiB 63049 2 oojs-ui.styles.icons-interactions 53.2 KiB 54522 **3 ext.popups.main 52.5 KiB 53727** 4 oojs-ui.styles.icons-content 37.2 KiB 38130 5 oojs-ui.styles.icons-alerts 18.2 KiB 18589 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 mediawiki.template.mustache 8.1 KiB 8266** 11 mediawiki.debug 7.8 KiB 7967 12 mediawiki.language 7.0 KiB 7142 13 oojs-ui.styles.indicators 6.9 KiB 7115 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 1384 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 67 skins.vector.styles 0 0
After (includes templates themselves which according to source-map-explorer are about 3.6 KiB)
http://localhost:8080/wiki/Barack_Obama (f65dc63): 53962 + 3135 + 96 = 57193 (index) name size sizeInBytes 0 oojs-ui-core 149.3 KiB 152905 1 oojs-ui-core.styles 61.6 KiB 63049 2 oojs-ui.styles.icons-interactions 53.2 KiB 54522 **3 ext.popups.main 52.7 KiB 53962** 4 oojs-ui.styles.icons-content 37.2 KiB 38130 5 oojs-ui.styles.icons-alerts 18.2 KiB 18589 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 mediawiki.debug 7.8 KiB 7967 11 mediawiki.language 7.0 KiB 7142 12 oojs-ui.styles.indicators 6.9 KiB 7115 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 1384 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:
