(Translated by https://www.hiragana.jp/)
⚓ T340262 Use Codex CSS Button components inside MobileFrontend
Page MenuHomePhabricator
Create Task
Maniphest T340262

Use Codex CSS Button components inside MobileFrontend
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
Jdlrobson
Authored By
Jdlrobson
Jun 23 2023, 9:08 PM
Tags
Referenced Files
F37161192: Screenshot 2023-08-02 at 6.32.29 PM.png
Aug 3 2023, 1:35 AM
F37161164: RPReplay_Final1691024933.mov.gif
Aug 3 2023, 1:11 AM
F37161161: RPReplay_Final1691024712.mov.gif
Aug 3 2023, 1:11 AM
F37161155: RPReplay_Final1691024595.mov.gif
Aug 3 2023, 1:11 AM
F37161152: RPReplay_Final1691024394.mov.gif
Aug 3 2023, 1:11 AM
F37161138: Screen Recording 2023-08-02 at 5.54.18 PM.mov.gif
Aug 3 2023, 1:11 AM
F37161134: Screenshot 2023-08-02 at 5.52.32 PM.png
Aug 3 2023, 1:11 AM
F37161127: Screen Recording 2023-08-02 at 5.41.01 PM.mov.gif
Aug 3 2023, 1:11 AM
View All 31 Files
Subscribers
Aklapper
bwang
Edtadros
Jdlrobson
Krinkle
Masumrezarock100
Volker_E

Description

NOTE: When signing off please read sign off steps!

Vector is now using Codex components. To get the full benefit of transitioning over, we also need to do this for MobileFrontend starting with the CSS only button components

Checklist

  • Update MobileFrontend PHP code to use Codex button markup
  • Update MobileFrontend JavaScript code to use Codex button markup

QA

  • Check article page as anonymous user:
    • In Chrome browser, check download link in dropdown
    • Check page issues at top of page https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain
    • In mobile device click edit icon to show editor overlay. Check close icon in top left displays correctly without a label.
    • Click watchstar to open up drawer at bottom of page. MAke sure the arrow is centered.
  • Make sure advanced mode is disabled on the mobile site
  • Go to a mobile diff page and check the icons for bytes added and for the username and the thanks icon in the bottom right. They should match or look similar to production as in the screenshots below:

https://en.m.wikipedia.org/wiki/Special:MobileDiff/1165399895

Screenshot 2023-07-18 at 2.39.16 PM.png (500×1 px, 61 KB)

Screenshot 2023-07-18 at 2.40.18 PM.png (417×1 px, 48 KB)

  • Exploratory testing: In mobile site perform the following functions. Look for any icons/buttons that look "strange".
    • Search
    • Edit
    • Click an image to view it in a lightbox
    • Click read in another language

Sign off steps

QA Results - Beta

ACStatusDetails
1✅T340262#9057478
2✅T340262#9057478
3✅T340262#9057478
4✅T340262#9057478
5❓T340262#9057478
6✅T340262#9057478
7✅T340262#9057478
8❓T340262#9057478
9✅T340262#9057478
10✅T340262#9057478
11✅T340262#9057478
12✅T340262#9057478

QA Results - Prod

ACStatusDetails
1✅T340262#9065036
2✅T340262#9065036
3✅T340262#9065036
4✅T340262#9065036
5❌T340262#9065036
6❓T340262#9065036
7✅T340262#9065036
8✅T340262#9065036
9✅T340262#9065036
10✅T340262#9065036
11✅T340262#9065036
12✅T340262#9065036

Details

Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
LGoto set the point value for this task to 3.Jun 29 2023, 5:35 PM
Jdlrobson raised the priority of this task from High to Needs Triage.Jun 29 2023, 11:35 PM
Jdlrobson triaged this task as High priority.
Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2); removed Web-Team-Backlog (Needs Prioritization (Tech)).
Jdlrobson mentioned this in T319260: IP masking: Last modified bar: Minerva uses non-standard version of mw-ui-icon (Codex).
gerritbot added a comment.Jun 30 2023, 5:53 PM

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

[mediawiki/extensions/MobileFrontend@master] MobileUI: Use Codex markup for icons in diff page

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

gerritbot added a project: Patch-For-Review.Jun 30 2023, 5:53 PM
Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 6 2023, 8:09 PM
Jdlrobson moved this task from Ready for Development to Incoming on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.
ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 11 2023, 2:20 PM
ovasileva added a parent task: T313828: [EPIC] Typography: improve typography and allow for variable typography settings .Jul 11 2023, 6:32 PM
Jdlrobson moved this task from Ready for Development to Incoming on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 14 2023, 4:03 PM
Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.
bwang claimed this task.Jul 18 2023, 4:42 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.
gerritbot added a comment.Jul 18 2023, 7:09 PM

Change 934597 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] MobileUI: Use Codex markup for icons in diff page

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

Maintenance_bot removed a project: Patch-For-Review.Jul 18 2023, 7:11 PM
ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.19; 2023-07-25).Jul 18 2023, 8:00 PM
Jdlrobson updated the task description. (Show Details)Jul 18 2023, 9:37 PM
Jdlrobson updated the task description. (Show Details)Jul 18 2023, 9:42 PM
gerritbot added a comment.Jul 21 2023, 3:26 PM

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

[mediawiki/extensions/MobileFrontend@master] Use codex button classes in Icon.js

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

gerritbot added a project: Patch-For-Review.Jul 21 2023, 3:26 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 24 2023, 9:20 PM
Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 24 2023, 11:39 PM
gerritbot added a comment.Jul 26 2023, 9:00 PM

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

[mediawiki/extensions/Echo@master] Update Echo to use MobileFrontend IconButton.js

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

gerritbot added a comment.Jul 26 2023, 10:38 PM

Change 940378 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Update Icon.js to be IconButton.js and use codex button classes

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

gerritbot added a comment.Jul 26 2023, 10:38 PM

Change 942021 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Update Echo to use MobileFrontend IconButton.js

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

ReleaseTaggerBot edited projects, added MW-1.41-notes (1.41.0-wmf.20; 2023-08-01); removed MW-1.41-notes (1.41.0-wmf.19; 2023-07-25).Jul 26 2023, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Jul 26 2023, 11:10 PM
gerritbot added a comment.Jul 27 2023, 12:01 AM

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

[mediawiki/extensions/MobileFrontend@master] Fixes: CTA drawer down arrow alignent

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

gerritbot added a project: Patch-For-Review.Jul 27 2023, 12:01 AM
gerritbot added a comment.Jul 27 2023, 3:42 AM

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

[mediawiki/skins/MinervaNeue@master] Restore space between download icon and text

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

gerritbot added a comment.Jul 27 2023, 3:47 AM

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

[mediawiki/extensions/Popups@master] Scope rule to Popups

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

gerritbot added a comment.Jul 27 2023, 4:05 AM

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

[mediawiki/skins/MinervaNeue@master] Fixes page issue icon

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

gerritbot added a comment.Jul 27 2023, 3:24 PM

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

[mediawiki/extensions/MobileFrontend@master] IconButton: should use mf-icon-element class

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

Jdlrobson added a comment.EditedJul 27 2023, 3:29 PM

I found a few issues with this code before it goes into production.

  • Labels showing on mobile devices

I noticed on a mobile device the labels are showing on https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain#/editor/all
It wasn't obvious in testing because of this code: https://gerrit.wikimedia.org/r/942041
While working on Minerva and fixing an issue with Popups (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Popups/+/942041) the issue became apparent.

FIX: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/942450

  • Page issues icon not showing

Minerva uses the Icon element which now requires an "icon" field rather than a "name" field. I checked code search and couldn't find any other usages.

FIX: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/942054

  • CTA drawer arrow not aligned.

FIX: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/942036

  • Download icon and text misaligned

This was broken by the changes to icon.spinner

FIX: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/942052

  • Thanks button is not displaying icon or text

Compare https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/397846 with https://en.m.wikipedia.org/wiki/Special:MobileDiff/1106461150

  • Growth overlay icon hidden

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Homepage#/homepage/suggested-edits and notice the close icon is gone https://gerrit.wikimedia.org/g/mediawiki/extensions/GrowthExperiments/+/c8f8d766e575cdd227c94f61e9af6365725786e4/modules/ext.growthExperiments.Homepage.mobile/MobileOverlay.js#91

Screenshot 2023-07-27 at 9.13.49 AM.png (938×774 px, 373 KB)

  • Reference drawer label is showing

Screenshot 2023-07-28 at 4.40.01 PM.png (339×686 px, 84 KB)

Jdlrobson updated the task description. (Show Details)Jul 27 2023, 4:17 PM
Jdlrobson updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)Jul 27 2023, 4:41 PM
gerritbot added a comment.Jul 27 2023, 5:21 PM

Change 942041 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Scope rule to Popups

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

gerritbot added a comment.Jul 27 2023, 6:19 PM

Change 942036 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Fixes: CTA drawer down arrow alignment

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

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 27 2023, 6:27 PM
gerritbot added a comment.Jul 27 2023, 8:15 PM

Change 942052 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Ensure space between download icon and text

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

gerritbot added a comment.Jul 27 2023, 9:46 PM

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

[mediawiki/skins/MinervaNeue@master] Handle icon only labels with Codex in Minerva

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

gerritbot added a comment.Jul 27 2023, 10:17 PM

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

[mediawiki/extensions/GrowthExperiments@master] Use IconButton instead of Icon

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

gerritbot added a comment.Jul 27 2023, 11:25 PM

Change 942450 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] IconButton: should use mf-icon-element class

Reason:

chatted to Bernard and decided to go with https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/942509

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

gerritbot added a comment.Jul 27 2023, 11:39 PM

Change 942509 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Handle icon only labels with Codex in Minerva

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

gerritbot added a comment.Jul 28 2023, 5:55 PM

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

[mediawiki/extensions/Thanks@master] Update Thanks extension to use IconButton.js from MobileFrontend

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

gerritbot added a comment.Jul 28 2023, 6:03 PM

Change 942514 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Use IconButton instead of Icon

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

gerritbot added a comment.Jul 28 2023, 6:47 PM

Change 942536 had a related patch set uploaded (by Jdlrobson; author: 沈澄心しん):

[mediawiki/extensions/MobileFrontend@master] Update storybook to reflect change in Minerva

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

gerritbot added a comment.Jul 28 2023, 6:47 PM

Change 942697 merged by jenkins-bot:

[mediawiki/extensions/Thanks@master] Update Thanks extension to use IconButton.js from MobileFrontend

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

bwang mentioned this in T343036: Combine Button.js and IconButton.js in MobileFrontend.Jul 28 2023, 6:53 PM
gerritbot added a comment.Jul 28 2023, 7:02 PM

Change 942536 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Update storybook to reflect change in Minerva

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

gerritbot added a comment.Jul 28 2023, 8:10 PM

Change 942054 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fixes page issue icon

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

Maintenance_bot removed a project: Patch-For-Review.Jul 28 2023, 8:11 PM
gerritbot added a comment.Jul 28 2023, 9:21 PM

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

[mediawiki/extensions/MobileFrontend@master] Update Button.js to be a wrapper of IconButton.js, remove mediawiki.ui.button as a dependency

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

gerritbot added a project: Patch-For-Review.Jul 28 2023, 9:21 PM
bwang reassigned this task from bwang to Jdlrobson.Jul 28 2023, 9:21 PM
bwang subscribed.
bwang renamed this task from Use Codex CSS components inside MobileFrontend to Use Codex CSS Button components inside MobileFrontend.Jul 28 2023, 9:25 PM
bwang updated the task description. (Show Details)
bwang mentioned this in T343053: Use Codex Icon components inside MobileFrontend.Jul 28 2023, 9:28 PM
gerritbot added a comment.Jul 28 2023, 9:31 PM

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

[mediawiki/skins/MinervaNeue@master] Fixes: Close label showing in reference drawer

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

bwang added a comment.Jul 28 2023, 9:32 PM

I filed 2 followups to this task:
https://phabricator.wikimedia.org/T343053
https://phabricator.wikimedia.org/T343036

gerritbot added a comment.Jul 29 2023, 12:00 AM

Change 942711 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Migrate mw-ui-button to cdx-button

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

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Jul 29 2023, 12:07 AM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.
Jdlrobson added a subscriber: Edtadros.

@bwang thanks for all your work and patience with this initiative! There is one remaining blocker for next weeks' train ("close" label shows on reference drawer close icon https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/942715) but I want to get a head start on QA so moving this to Edward.

@Edtadros I've updated T340262#9048822 to reflect bugs we've found so far. These should be captured in the QA steps but also give you an idea of the sort of things to look at. As part of this work we've also updated Pixel to cover more of the mobile site: https://pixel.wmcloud.org/reports/mobile/index.html

We've deemed minor position changes/icon changes to be improvements. At time of writing I'm seeing 21 failures, but all seem good to me.

Jdlrobson updated the task description. (Show Details)Jul 29 2023, 12:08 AM
gerritbot added a comment.Jul 31 2023, 3:05 PM

Change 942715 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fixes: Close label showing in reference drawer

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

Maintenance_bot removed a project: Patch-For-Review.Jul 31 2023, 3:11 PM
Edtadros reassigned this task from Edtadros to Jdlrobson.EditedAug 1 2023, 12:12 AM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.

Test Result - Beta

@Jdlrobson, While I am putting this in Ready for signoff, there are two issues, AC5 and AC8. They look to me like they aren't in the scope of this task or may be unrelated to any patch for this task. You are the better person to determine this.

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Check article page as anonymous user:

  • ✅ AC1: In Chrome browser, check download link in dropdown
    Screen Recording 2023-07-31 at 3.13.50 PM.mov.gif (966×714 px, 519 KB)
  • ✅ AC2: Check page issues at top of page https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain
    Screen Recording 2023-07-31 at 3.14.54 PM.mov.gif (966×714 px, 287 KB)
  • ✅ AC3: In mobile device click edit icon to show editor overlay. Check close icon in top left displays correctly without a label.
    Screen Recording 2023-07-31 at 3.15.27 PM.mov.gif (966×714 px, 668 KB)
  • ✅ AC4: Click watchstar to open up drawer at bottom of page. MAke sure the arrow is centered.
    Screen Recording 2023-07-31 at 3.16.12 PM.mov.gif (966×714 px, 345 KB)

Make sure advanced mode is disabled on the mobile site

  • ❓ AC5: Go to a mobile diff page and check the icons for bytes added and for the username and the thanks icon in the bottom right. They should match or look similar to production as in the screenshots below: https://en.m.wikipedia.org/wiki/Special:MobileDiff/1165399895
    Screenshot 2023-07-18 at 2.39.16 PM.png (500×1 px, 61 KB)
    @Jdlrobson, the elements mentioned in the AC match to production. I verified the Thank button by comparing it to production instead of the image above since it was missing. The only thing that stood out is outside of the scope of the AC. There is no space below the "EDITS" text and the bottom of the page.
    Screen Recording 2023-07-31 at 4.30.29 PM.mov.gif (1×714 px, 2 MB)
  • ✅ AC6: Check watchlist https://en.m.wikipedia.org/wiki/Special:Watchlist
    Screenshot 2023-07-18 at 2.40.18 PM.png (417×1 px, 48 KB)
    Screenshot 2023-07-31 at 4.39.41 PM.png (802×855 px, 82 KB)
  • ✅ AC7: Check history page
    Screenshot 2023-07-18 at 2.41.25 PM.png (492×1 px, 73 KB)
    Screenshot 2023-07-31 at 4.42.12 PM.png (423×712 px, 54 KB)
  • ❓ AC8: Check Growth page. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Homepage and click arrows next to "My impact". "Suggested Edits" and verify the overlay icon shows.
    Screen Recording 2023-07-31 at 4.43.47 PM.mov.gif (1×712 px, 351 KB)
    Screen Recording 2023-07-31 at 4.44.38 PM.mov.gif (1×712 px, 298 KB)
    I'm uncertain what the 'overlay icon' is, but there was an issue. The first screen capture shows the drawer that pops up to let me know the format has changed. When I close it, it closes the overlay. I am able to open the overlay after that since the drawer no longer shows.

Exploratory testing: In mobile site perform the following functions. Look for any icons/buttons that look "strange".

  • ✅ AC9: Search
    Screen Recording 2023-07-31 at 4.50.01 PM.mov.gif (1×712 px, 951 KB)
    when I clicked 'search within pages' it also looked good
  • ✅ AC10: Edit
    Screen Recording 2023-07-31 at 4.57.25 PM.mov.gif (1×712 px, 1 MB)
  • ✅ AC11: Click an image to view it in a lightbox
    Screen Recording 2023-07-31 at 4.58.38 PM.mov.gif (1×712 px, 488 KB)
  • ✅ AC12: Click read in another language
    Screen Recording 2023-07-31 at 5.01.05 PM.mov.gif (1×712 px, 391 KB)
Edtadros updated the task description. (Show Details)Aug 1 2023, 12:14 AM
Jdlrobson moved this task from Ready for Signoff to QA in Production on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Aug 1 2023, 12:23 AM
Jdlrobson added a comment.Aug 1 2023, 12:26 AM

AC5 and AC8 don't seem related to this change, but we should create new tickets if they are problems. I asked a follow up question on Slack about AC5 and reached out to the Growth team about AC8.

We just need to QA in this production (suggest Wednesday on ca.wikipedia.org)

Etonkovidova mentioned this in T343178: [wmf.20 - mobile] closing New Impact drawer closes Impact overlay.Aug 1 2023, 12:42 AM
Jdlrobson reassigned this task from Jdlrobson to Edtadros.Aug 1 2023, 4:35 PM
Edtadros reassigned this task from Edtadros to Jdlrobson.EditedAug 3 2023, 1:11 AM

Test Result - Prod

Status: Mixed
Environment: cawiki
OS: macOS Ventura
Browser: Chrome
Device: MBP, iPhone 14
Emulated Device:NA

Test Artifact(s):

QA Steps

Check article page as anonymous user:

  • ✅ AC1: In Chrome browser, check download link in dropdown
    Screen Recording 2023-08-02 at 5.02.05 PM.mov.gif (1×988 px, 954 KB)
  • ✅ AC2: Check page issues at top of page https://ca.m.wikipedia.org/wiki/Marina_Bernad%C3%B3_i_Bonada
    Screen Recording 2023-08-02 at 5.14.21 PM.mov.gif (1×988 px, 584 KB)
  • ✅ AC3: In mobile device click edit icon to show editor overlay. Check close icon in top left displays correctly without a label.
    Screen Recording 2023-08-02 at 5.16.01 PM.mov.gif (1×988 px, 1 MB)
  • ✅ AC4: Click watchstar to open up drawer at bottom of page. MAke sure the arrow is centered.
    Screen Recording 2023-08-02 at 5.16.52 PM.mov.gif (1×988 px, 1 MB)

Make sure advanced mode is disabled on the mobile site

  • ❌ AC5: Go to a mobile diff page and check the icons for bytes added and for the username and the thanks icon in the bottom right. They should match or look similar to production as in the screenshots below: https://ca.m.wikipedia.org/wiki/Especial:MobileDiff/31279935, It looks like the bytes added and surrounding text/icon are not aligned. See the red line below.//
    Screenshot 2023-08-02 at 5.23.17 PM.png (1×988 px, 103 KB)
  • ❓ AC6: Check watchlist https://ca.m.wikipedia.org/wiki/Special:Watchlist Special:Watchlist doesn't seem to work, might not have anything in it since I just started watching the pages.
    Screen Recording 2023-08-02 at 5.41.01 PM.mov.gif (1×988 px, 652 KB)
  • ✅ AC7: Check history page
    Screenshot 2023-08-02 at 5.52.32 PM.png (1×988 px, 159 KB)
  • ✅ AC8: Check Growth page. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Homepage and click arrows next to "My impact". "Suggested Edits" and verify the overlay icon shows.
    Screen Recording 2023-08-02 at 5.54.18 PM.mov.gif (1×988 px, 638 KB)
    I'm uncertain what the 'overlay icon' is, But the overlay shows as expected. I clicked around in the overlays and everything looks good.

Exploratory testing: In mobile site perform the following functions. Look for any icons/buttons that look "strange".

  • ✅ AC9: Search
    RPReplay_Final1691024394.mov.gif (1×592 px, 3 MB)
    when I clicked 'search within pages' it also looked good
  • ✅ AC10: Edit
    RPReplay_Final1691024595.mov.gif (1×592 px, 2 MB)
  • ✅ AC11: Click an image to view it in a lightbox
    RPReplay_Final1691024712.mov.gif (1×592 px, 1 MB)
  • ✅ AC12: Click read in another language
    RPReplay_Final1691024933.mov.gif (1×592 px, 2 MB)
Edtadros updated the task description. (Show Details)Aug 3 2023, 1:13 AM
Jdlrobson closed this task as Resolved.Aug 3 2023, 1:34 AM
Jdlrobson mentioned this in T117279: [EPIC] Core should provide inline diffs as well as side by side (Move InlineDifferenceEngine into core / remove MobileDiff).

❓ AC6: Check watchlist https://ca.m.wikipedia.org/wiki/Special:Watchlist Special:Watchlist doesn't seem to work, might not have anything in it since I just started watching the pages.

Mmm I can't seem to replicate this. If you can replicate this again please create a new ticket as this doesn't seem related to this change.

❌ AC5: Go to a mobile diff page and check the icons for bytes added and for the username and the thanks icon in the bottom right. They should match or look similar to production as in the screenshots below: https://ca.m.wikipedia.org/wiki/Especial:MobileDiff/31279935, It looks like the bytes added and surrounding text/icon are not aligned. See the red line below.//

This looks like an existing problem - it's identical to English Wikipedia so I'm gonna call this a pass. Given this page is being removed I've folded this into T117279 for consideration at a later date.

Screenshot 2023-08-02 at 6.32.29 PM.png (1×2 px, 341 KB)

Jdlrobson mentioned this in T343397: Wikidata descriptions in Search result overlay can overlap.Aug 3 2023, 5:41 PM
ppelberg mentioned this in T344009: Verify mobile talk pages cope with Minerva migration to Codex-based CSS.Aug 10 2023, 7:28 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits