Page MenuHomePhabricator

Refactor rendering code in src/renderer.js for readability and testability
Closed, ResolvedPublic5 Story Points

Description

  • 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.
  • 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:

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

<Marker comment in case anyone wishes to refer to the original task.> This task will be revised based on extensive discussion today.

Niedzielski updated the task description. (Show Details)Feb 26 2018, 8:46 PM
Niedzielski removed Niedzielski as the assignee of this task.Feb 26 2018, 8:55 PM

I'm in the middle of another task so I'm unassigning this at least temporarily. If you're interested in this work, please feel welcome to pick it up but otherwise I'll very happily grab it when I finish with my current work.

Change 417015 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: move SVG string to file

https://gerrit.wikimedia.org/r/417015

Change 417028 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Doc: add pokey mask documentation

https://gerrit.wikimedia.org/r/417028

Change 417369 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: move thumbnail code to separate file

https://gerrit.wikimedia.org/r/417369

Change 417374 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: move settings dialog to separate file

https://gerrit.wikimedia.org/r/417374

Change 418938 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: enable Babel transpilation

https://gerrit.wikimedia.org/r/418938

Niedzielski updated the task description. (Show Details)Mar 12 2018, 5:43 PM
Niedzielski updated the task description. (Show Details)Mar 12 2018, 6:17 PM

Change 418939 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: replace Mustache templates w/ ES6 strings

https://gerrit.wikimedia.org/r/418939

Change 419508 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: enable ES6 in the Webpack config

https://gerrit.wikimedia.org/r/419508

Change 417015 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: move SVG string to file

https://gerrit.wikimedia.org/r/417015

Change 417028 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Doc: add pokey mask documentation

https://gerrit.wikimedia.org/r/417028

Change 417369 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: move thumbnail code to separate file

https://gerrit.wikimedia.org/r/417369

Change 417374 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: move settings dialog to separate file

https://gerrit.wikimedia.org/r/417374

Change 419632 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: use object shorthand where obvious

https://gerrit.wikimedia.org/r/419632

Change 419633 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: replace obvious function methods

https://gerrit.wikimedia.org/r/419633

Change 419634 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: use arrow for anonymous functions

https://gerrit.wikimedia.org/r/419634

Change 419780 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: replace var with let and const

https://gerrit.wikimedia.org/r/419780

Change 419788 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: remove ES5 dist safety check

https://gerrit.wikimedia.org/r/419788

Niedzielski updated the task description. (Show Details)Mar 15 2018, 4:54 PM

Change 419836 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: split LESS into components

https://gerrit.wikimedia.org/r/419836

Niedzielski updated the task description. (Show Details)Mar 15 2018, 7:53 PM
Niedzielski updated the task description. (Show Details)Mar 16 2018, 3:34 PM

Change 420086 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: add Webpack performance requirements

https://gerrit.wikimedia.org/r/420086

Change 420111 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Update: upgrade to Webpack 4 & improve output size

https://gerrit.wikimedia.org/r/420111

Niedzielski updated the task description. (Show Details)Mar 16 2018, 8:07 PM
Jhernandez updated the task description. (Show Details)Mar 19 2018, 10:42 AM

I've done some review up to Hygiene: enable ES6 in the Webpack config.

https://gerrit.wikimedia.org/r/#/c/419632/ seems to be failing on jenkins.

I'll continue with more review tomorrow, thanks for all the great work!

Change 419508 abandoned by Niedzielski:
Hygiene: enable ES6 in the Webpack config

Reason:
Without overrides the Babel config just for the sake of the Webpack config, it doesn't seem to be practical to use ES6 in the Webpack config itself AND disable modules in production.

https://gerrit.wikimedia.org/r/419508

Change 420412 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: favor const

https://gerrit.wikimedia.org/r/420412

Change 420413 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: forbid lint warnings

https://gerrit.wikimedia.org/r/420413

Change 420414 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: use consistent ESLint severity syntax

https://gerrit.wikimedia.org/r/420414

Change 420086 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: add Webpack performance requirements

https://gerrit.wikimedia.org/r/420086

Change 419788 abandoned by Niedzielski:
Hygiene: remove ES5 dist safety check

https://gerrit.wikimedia.org/r/419788

Niedzielski updated the task description. (Show Details)Mar 20 2018, 1:23 PM

Change 420698 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Fix: pin package versions to patch revision

https://gerrit.wikimedia.org/r/420698

Change 420710 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Fix: JSDoc Node.js file copy bug

https://gerrit.wikimedia.org/r/420710

Change 420111 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Update: upgrade to Webpack 4 & improve output size

https://gerrit.wikimedia.org/r/420111

Change 418938 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: enable Babel transpilation

https://gerrit.wikimedia.org/r/418938

Change 418939 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: replace Mustache templates w/ ES6 strings

https://gerrit.wikimedia.org/r/418939

Change 420698 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Fix: pin package versions to patch revision

https://gerrit.wikimedia.org/r/420698

Change 420768 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Hygiene: favor string templates over concatenation

https://gerrit.wikimedia.org/r/420768

Change 420710 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Fix: JSDoc Node.js file copy bug

https://gerrit.wikimedia.org/r/420710

Change 419632 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: use object shorthand where obvious

https://gerrit.wikimedia.org/r/419632

Change 419633 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: replace obvious function methods

https://gerrit.wikimedia.org/r/419633

Change 419634 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: use arrow for anonymous functions

https://gerrit.wikimedia.org/r/419634

Change 420839 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Doc: update some of the popups / preview terminology

https://gerrit.wikimedia.org/r/420839

Jdlrobson updated the task description. (Show Details)Mar 20 2018, 10:25 PM

Change 420412 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: favor const

https://gerrit.wikimedia.org/r/420412

Change 420413 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: forbid lint warnings

https://gerrit.wikimedia.org/r/420413

Change 420414 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: use consistent ESLint severity syntax

https://gerrit.wikimedia.org/r/420414

Niedzielski updated the task description. (Show Details)Mar 22 2018, 4:13 PM

Change 421334 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] Doc: ADR for replacing Mustache with ES6 strings

https://gerrit.wikimedia.org/r/421334

Niedzielski removed Niedzielski as the assignee of this task.Mar 22 2018, 4:14 PM

Doing some review today

Change 420839 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Doc: update some of the popups / preview terminology

https://gerrit.wikimedia.org/r/420839

Change 421334 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Doc: ADR for replacing Mustache with ES6 strings

https://gerrit.wikimedia.org/r/421334

Change 419836 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Hygiene: split LESS into components

https://gerrit.wikimedia.org/r/419836

Change 423943 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/Popups@master] POC: Hygiene: refactor HTML template rendering to ES6 tagged templates

https://gerrit.wikimedia.org/r/423943

Change 423943 abandoned by Niedzielski:
POC: Hygiene: refactor HTML template rendering to ES6 tagged templates

Reason:
just a demo

https://gerrit.wikimedia.org/r/423943

Niedzielski removed Niedzielski as the assignee of this task.Apr 4 2018, 5:17 PM
Niedzielski assigned this task to ABorbaWMF.
Niedzielski added a subscriber: ABorbaWMF.
Niedzielski added a subscriber: Niedzielski.

@ABorbaWMF, the result of this task in itself should not be especially user visible. Please just generally verify that page previews appear to be working. Thank you!

Change 423943 restored by Niedzielski:
POC: Hygiene: refactor HTML template rendering to ES6 tagged templates

https://gerrit.wikimedia.org/r/423943

Change 423943 abandoned by Niedzielski:
POC: Hygiene: refactor HTML template rendering to ES6 tagged templates

https://gerrit.wikimedia.org/r/423943

Since it wasn't specified - please test this on the beta cluster.

@Niedzielski, the gif is very helpful, thank you. If possible could you also include some text steps? My only difficulty with the gif is no 'pause' functionality.

Thanks @ABorbaWMF. That gif was meant to be informational and may or may not be useful since I think all the testing can be done as a user. Testing for this is pretty much just a run through of all the popups UI. Something like:

Disambiguation preview

  1. Hover over a disambiguation link
  2. A disambiguation preview should be shown
  3. Make sure all the links work as expected and the pop up appears correctly in different orientations

Error preview

  1. Create a page
  2. Create a page that links to the first page
  3. Hover over the link
  4. A normal page preview should be shown
  5. Delete the first page
  6. Hover over the link
  7. An error preview should be shown
  8. Make sure all the links work as expected and the pop up appears correctly in different orientations

Page preview

  1. Hover over a link to a normal page, such as Barack Obama
  2. A normal page preview should be shown
  3. Make sure all the links work as expected and the pop up appears correctly in different orientations

Settings (anonymous)

  1. Hover over a link to a normal page, such as Barack Obama
  2. A normal page preview should be shown
  3. Click the settings cog
  4. Try changing the different states and verify they work

Settings (logged in)
This is covered by the page preview test but the cog button should take you to the standard user preferences page.

Great thanks @Niedzielski

Disambiguation

Error (I was not able to recreate the scenario above, but we do have this page which links to a few different error cases)
https://en.wikipedia.beta.wmflabs.org/wiki/Category:Page_Previews

Page Previews (general)
https://en.wikipedia.beta.wmflabs.org/wiki/Dog

Settings (anonymous)
Looks good except for IE 11. This is probably a separate issue. I only see this on IE11. It is not present on Chrome, Edge, Opera, or Firefox.

Settings (logged in)

Thanks @ABorbaWMF!

Looks good except for IE 11. This is probably a separate issue. I only see this on IE11. It is not present on Chrome, Edge, Opera, or Firefox.

Just to confirm, the issue here is that the settings dialog is centered on the upper left corner?

I was referring to the page previews settings dialog (logged out). On IE11 it is not centered on the page. On other browsers, it is centered.

Niedzielski closed this task as Resolved.Apr 11 2018, 5:21 PM

Good find @ABorbaWMF. I've opened T192004 to track. Closing this unrelated ticket per discussion.