Page MenuHomePhabricator

Move MinervaTemplate::getContentHtml logic into Mustache template
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
Jdlrobson
Sep 27 2021, 7:16 PM

Description

MobileFrontend sets a property on OutputPage unstyledContent for all mobile special pages, it provides. This is read by Minerva when deciding how to output the special page. We'd like to avoid this confusing communication between MobileFrontend and Minerva. The directive, tells Minerva to turn off the content class for all special pages provided inside MobileFrontend. This is likely better served by skinStyles for those particular special pages.

TODO

  • Update minerva.mustache to use template variables provided by core (https://www.mediawiki.org/wiki/Manual:SkinMustache.php#Template_data). Remove the usage of unstyledContent.
  • Add skin styles to apply to the relevant special pages which are impacted by unstyledContent (see QA steps).
  • MinervaTemplate::getContentHtml should be removed
  • Drop contenthtml from SkinMinerva::getTemplateData
  • Remove the setting of unstyledContent in SkinMinerva::prepareQuickTemplate
  • Drop code in MobileFrontend setting unstyledContent

QA

Resize browser to mobile (320px), tablet (720px) and desktop (1000px) thresholds for each of these pages on the mobile domain with AMC disabled. When testing we are looking specifically for problems with how the content is aligned horizontally:

With AMC enabled check the following:

https://phabricator.wikimedia.org/T291871#7504783

QA Results - Beta

QA Results -Prod

Event Timeline

Jdlrobson triaged this task as Medium priority.Sep 27 2021, 7:16 PM
Jdlrobson created this task.

Change 726101 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Remove MinervaTemplate::getContentHtml

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

Change 726111 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Drop unstyledContent OutputPage property

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

Change 730895 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Adds mw-mf-special-page class to Mobile special pages

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

nray subscribed.

Reassigned this to @bwang for code review as he's been doing a great job with the review, and I haven't had much time to look into it

Change 730895 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Adds mw-mf-special-page class to Mobile special pages

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

Change 726101 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove MinervaTemplate::getContentHtml

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: bwang.

Change 726111 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Drop unstyledContent OutputPage property

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

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Resize browser to mobile (320px), tablet (720px) and desktop (1000px) thresholds for each of these pages on the mobile domain with AMC disabled. When testing we are looking specifically for problems with how the content is aligned horizontally:

✅ AC1: Check Special:RecentChanges for UI regressions e.g. https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (6).png (1×640 px, 189 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (7).png (1×640 px, 189 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (9).png (1×1 px, 270 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (8).png (1×1 px, 270 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (10).png (1×2 px, 285 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (11).png (1×2 px, 285 KB)

@ovasileva, In the section for "Other review tools", the text appears to be vertically centered vs top justified which would be more readable. It is the same in prod so it's not a regression, but I wanted to highlight it for you.

✅ AC2: Check Special:Nearby for UI regressions (not Extension:Nearby version)

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby.png (1×640 px, 76 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby (3).png (1×640 px, 195 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby (4).png (1×1 px, 224 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby (1).png (1×1 px, 101 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby (2).png (1×2 px, 117 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Nearby (5).png (1×2 px, 445 KB)

✅ AC3: Check mobile diff page for UI regressions e.g. Special:MobileDiff e.g. https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:MobileDiff/310553&type=revision

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileDiff_310553&type=revision.png (1×640 px, 110 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileDiff_310553&type=revision (1).png (1×1 px, 143 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileDiff_310553&type=revision (2).png (1×2 px, 161 KB)

✅ AC4: Check Special:MobileLanguages for UI regressions

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_MobileLanguages_Dog.png (1×640 px, 77 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_MobileLanguages_Dog (2).png (1×1 px, 110 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_MobileLanguages_Dog (3).png (1×2 px, 125 KB)

✅ AC5: Check Special:MobileContributions for UI regressions

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_edtadros-beta1.png (1×640 px, 140 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_edtadros-beta1 (1).png (1×1 px, 182 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_edtadros-beta1 (2).png (1×2 px, 209 KB)

❌ AC6: Check Special:MobileWAtchlist for UI regressions

320px720px1000px
Screen Shot 2021-11-15 at 6.59.30 AM.png (592×271 px, 47 KB)
Screen Shot 2021-11-15 at 7.02.03 AM.png (592×606 px, 57 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Watchlist&filter=all&watchlistview=feed.png (1×2 px, 179 KB)

✅ AC7: Check mobile history page for UI regressions e.g. https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Caption_list&action=history

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_History_Caption_list.png (1×640 px, 83 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_History_Caption_list (1).png (1×1 px, 114 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_History_Caption_list (3).png (1×2 px, 131 KB)

With AMC enabled check the following:

✅ AC8: Check Special:MobileContributions for UI regressions

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_edtadros-beta1 (3).png (1×640 px, 161 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_Edtadros-beta1 (4).png (1×1 px, 250 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_Contributions_Edtadros-beta1 (5).png (1×2 px, 262 KB)

✅ AC9: Check Special:MobileWAtchlist for UI regressions

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_w_index.php_hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=30&enhanced=1&title=Special_Watchlist&watchlistview=feed&filter=all&urlversion=2.png (1×640 px, 157 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=30&enhanced=1&title=Special_Watchlist&watchlistview=feed&filter=all&urlversion=2 (1).png (1×1 px, 207 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=30&enhanced=1&title=Special_Watchlist&watchlistview=feed&filter=all&urlversion=2 (2).png (1×2 px, 256 KB)

✅ AC10: Check mobile history page for UI regressions e.g. https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Caption_list&action=history

320px720px1000px
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Caption_list&action=history.png (1×640 px, 124 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Caption_list&action=history (1).png (1×1 px, 161 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Caption_list&action=history (2).png (1×2 px, 178 KB)

Test Result - Prod

Status: ❌ Fail
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Resize browser to mobile (320px), tablet (720px) and desktop (1000px) thresholds for each of these pages on the mobile domain with AMC disabled. When testing we are looking specifically for problems with how the content is aligned horizontally:

✅ AC1: Check Special:RecentChanges for UI regressions e.g. https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges

320px720px1000px
en.m.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2.png (1×640 px, 173 KB)
en.m.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (1).png (1×1 px, 243 KB)
en.m.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=1&enhanced=1&urlversion=2 (2).png (1×2 px, 263 KB)

In the section for "Other review tools", the text appears to be vertically centered vs top justified which would be more readable. It is the same in beta so it's not a regression.

✅ AC2: Check Special:Nearby for UI regressions (not Extension:Nearby version)

320px720px1000px
en.m.wikipedia.org_wiki_Special_Nearby.png (1×640 px, 95 KB)
en.m.wikipedia.org_wiki_Special_Nearby (3).png (1×640 px, 326 KB)
en.m.wikipedia.org_wiki_Special_Nearby (1).png (1×1 px, 121 KB)
en.m.wikipedia.org_wiki_Special_Nearby (4).png (1×1 px, 356 KB)
en.m.wikipedia.org_wiki_Special_Nearby (2).png (1×2 px, 126 KB)
en.m.wikipedia.org_wiki_Special_Nearby (5).png (1×2 px, 378 KB)

✅ AC3: Check mobile diff page for UI regressions e.g. Special:MobileDiff e.g. https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:MobileDiff/310553&type=revision

320px720px1000px
en.m.wikipedia.org_w_index.php_title=Special_MobileDiff_310553&type=revision.png (1×640 px, 128 KB)
en.m.wikipedia.org_w_index.php_title=Special_MobileDiff_310553&type=revision (1).png (1×1 px, 240 KB)
en.m.wikipedia.org_w_index.php_title=Special_MobileDiff_310553&type=revision (2).png (1×2 px, 250 KB)

✅ AC4: Check Special:MobileLanguages for UI regressions

320px720px1000px
en.m.wikipedia.org_wiki_Special_MobileLanguages_Dog.png (1×640 px, 87 KB)
en.m.wikipedia.org_wiki_Special_MobileLanguages_Dog (1).png (1×1 px, 132 KB)
en.m.wikipedia.org_wiki_Special_MobileLanguages_Dog (2).png (1×2 px, 148 KB)

✅ AC5: Check Special:MobileContributions for UI regressions

320px720px1000px
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01.png (1×640 px, 119 KB)
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01 (1).png (1×1 px, 177 KB)
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01 (2).png (1×2 px, 199 KB)

❌ AC6: Check Special:MobileWAtchlist for UI regressions

320px720px1000px
Screen Shot 2021-11-15 at 7.00.37 AM.png (592×271 px, 51 KB)
Screen Shot 2021-11-15 at 7.02.37 AM.png (591×604 px, 60 KB)
en.m.wikipedia.org_wiki_Special_EditWatchlist.png (1×2 px, 180 KB)

✅ AC7: Check mobile history page for UI regressions e.g. https://en.m.wikipedia.org/w/index.php?title=Albert_Fish&action=history

320px720px1000px
en.m.wikipedia.org_wiki_Special_History_Albert_Fish.png (1×640 px, 109 KB)
en.m.wikipedia.org_wiki_Special_History_Albert_Fish (1).png (1×1 px, 148 KB)
en.m.wikipedia.org_wiki_Special_History_Albert_Fish (2).png (1×2 px, 163 KB)

With AMC enabled check the following:

✅ AC8: Check Special:MobileContributions for UI regressions

320px720px1000px
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01 (3).png (1×640 px, 154 KB)
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01 (4).png (1×1 px, 202 KB)
en.m.wikipedia.org_wiki_Special_Contributions_EdTestCommons01 (5).png (1×2 px, 222 KB)

✅ AC9: Check Special:MobileWAtchlist for UI regressions

320px720px1000px
en.m.wikipedia.org_w_index.php_title=Special_Watchlist&watchlistview=a-z.png (1×640 px, 158 KB)
en.m.wikipedia.org_w_index.php_title=Special_Watchlist&watchlistview=a-z (1).png (1×1 px, 205 KB)
en.m.wikipedia.org_w_index.php_title=Special_Watchlist&watchlistview=a-z (2).png (1×2 px, 251 KB)

✅ AC10: Check mobile history page for UI regressions e.g. https://en.m.wikipedia.org/w/index.php?title=Albert_Fish&action=history

320px720px1000px
en.m.wikipedia.org_w_index.php_title=Albert_Fish&action=history.png (1×640 px, 137 KB)
en.m.wikipedia.org_w_index.php_title=Albert_Fish&action=history (1).png (1×1 px, 205 KB)
en.m.wikipedia.org_w_index.php_title=Albert_Fish&action=history (2).png (1×2 px, 221 KB)

Change 739285 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/MobileFrontend@master] Fix misaligned buttons on Special:MobileLanguages

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

Change 739285 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Fix misaligned buttons on Special:MobileLanguages

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

Test Result - Prod

Status: ✅ Pass
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Resize browser to mobile (320px), tablet (720px) and desktop (1000px) thresholds for each of these pages on the mobile domain with AMC disabled. When testing we are looking specifically for problems with how the content is aligned horizontally:

✅ AC6: Check Special:MobileWAtchlist for UI regressions

320px720px1000px
en.m.wikipedia.org_wiki_Special_EditWatchlist.png (1×640 px, 164 KB)
en.m.wikipedia.org_wiki_Special_EditWatchlist (1).png (1×1 px, 191 KB)
en.m.wikipedia.org_wiki_Special_EditWatchlist (2).png (1×2 px, 208 KB)
Jdlrobson updated the task description. (Show Details)