Maniphest T252025

Lazy loading code should not run on talk pages (currently not showing any images in overlays)
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Amire80
	May 6 2020, 2:57 PM

Description

Go to https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg&oldid=930478870

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

The images don't appear. I only see gray rectangles. This happens in English Wikipedia and Hebrew Wikipedia, in Chrome and in Firefox.

Developer notes

The lazy load code likely doesn't need to run on talk.. So we could check namespace and disable that transform on talk pages.
Alternatively, a client side change to trigger the loading of images when an overlay is opened will do the job.

QA Results - Beta

AC	Status	Details
1	✅	T252025#6366263

QA Results - Prod

AC	Status	Details
1	✅	T252025#6390043

Details

	Subject	Repo	Branch	Lines +/-
	Force loading all lazy images on TalkSectionOverlay	mediawiki/extensions/MobileFrontend	master	+7 -3
	Use NoTransform instead of LazyImageTransform if page is Talk.	mediawiki/extensions/MobileFrontend	master	+48 -28

Customize query in gerrit

Event Timeline

Amire80 created this task.May 6 2020, 2:57 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 6 2020, 2:57 PM

Jdlrobson renamed this task from Talk pages on MobileFrontend don't show any images to Lazy loading code should not run on talk pages (currently not showing any images in overlays).May 7 2020, 11:21 PM

Jdlrobson added a project: Web-Team-Backlog.

Jdlrobson updated the task description. (Show Details)

Jdlrobson assigned this task to ovasileva.May 8 2020, 4:18 PM

Jdlrobson triaged this task as Medium priority.

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

Jdlrobson moved this task from Backlog to Team:Growth on the MobileFrontend board.Jul 24 2020, 2:37 AM

Jdlrobson moved this task from Team:Growth to Team:Editing on the MobileFrontend board.Jul 24 2020, 2:56 AM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.Jul 24 2020, 3:01 PM

ovasileva removed ovasileva as the assignee of this task.Jul 24 2020, 3:03 PM

ovasileva subscribed.

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 24 2020, 6:58 PM

Peter.ovchyn claimed this task.Jul 30 2020, 3:44 PM

Peter.ovchyn moved this task from Upcoming to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

@ovasileva, @Jdlrobson

Lazy loading works good enough for any content including provided example. I don't see any technical reason why it shouldn't work on talk pages. See example of loading images with poor connection.

Screen Recording 2020-08-03 at 14.55.05.mov2 MBDownload

Change 618048 had a related patch set uploaded (by Peter.ovchyn; owner: Peter.ovchyn):
[mediawiki/extensions/MobileFrontend@master] Use NoTransform instead of LazyImageTransform if page is Talk.

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

gerritbot added a project: Patch-For-Review.Aug 3 2020, 12:05 PM

Peter.ovchyn moved this task from Doing to Design Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Aug 3 2020, 2:11 PM

Peter.ovchyn moved this task from Design Review to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Peter.ovchyn moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Aug 3 2020, 5:14 PM

@Peter.ovchyn the issue is the images are not showing in the JavaScript overlay. Try clicking Invitation on https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg

Now I think about it, I think a better solution would be to call in src/mobile.talk.overlays/TalkSectionOverlay.js
How's your JS? :)

var lazyImages = require('mobile.startup').lazyImages
lazyImages.lazyImageLoader.loadImages(
  lazyImages.queryPlaceholders ( this.$el[0] )
)

In T252025#6357272, @Jdlrobson wrote:

@Peter.ovchyn the issue is the images are not showing in the JavaScript overlay. Try clicking Invitation on https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg

What do you mean by JavaScript overlay. Animation effect?

https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg#Invitation

Screen Shot 2020-08-03 at 12.13.43 PM.png (1×1 px, 350 KB)

Note the grey square ^

Change 618285 had a related patch set uploaded (by Peter.ovchyn; owner: Peter.ovchyn):
[mediawiki/extensions/MobileFrontend@master] Force loading all lazy images on TalkSectionOverlay

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

Change 618048 abandoned by Peter.ovchyn:
[mediawiki/extensions/MobileFrontend@master] Use NoTransform instead of LazyImageTransform if page is Talk.

Reason:
See T252025#6357272

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

Peter.ovchyn moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Aug 4 2020, 12:59 PM

Jdlrobson reassigned this task from Peter.ovchyn to Edtadros.Aug 4 2020, 4:35 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Jdlrobson added a subscriber: Peter.ovchyn.

Change 618285 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Force loading all lazy images on TalkSectionOverlay

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

ovasileva set the point value for this task to 3.Aug 4 2020, 5:28 PM

Test Result - Beta

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

Test Artifact(s):

QA steps

Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Conflict-title-0.4588026768744695-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

✅ AC1: The image should appear, not just gray rectangles.

Aug-06-2020 09-30-33.gif (846×528 px, 1 MB)

Edtadros updated the task description. (Show Details)Aug 6 2020, 4:36 PM

Test Result - Prod

Status: ✅ PASS
Environment: euwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps

Go to https://eu.m.wikipedia.org/wiki/Film_(zinema)

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

✅ AC1: The image should appear, not just gray rectangles.

Aug-17-2020 10-05-50.gif (1×640 px, 1 MB)

Edtadros updated the task description. (Show Details)Aug 17 2020, 5:08 PM

Jdrewniak claimed this task.Aug 18 2020, 5:11 PM

Reviewed QA results - all looks good. Resolving!

	F31962200: Screen Shot 2020-08-03 at 12.13.43 PM.png
	Aug 3 2020, 7:13 PM

	F31961764: Screen Recording 2020-08-03 at 14.55.05.mov
	Aug 3 2020, 12:00 PM

Lazy loading code should not run on talk pages (currently not showing any images in overlays)Closed, ResolvedPublic3 Estimated Story PointsActions

Description

Developer notes

QA Results - Beta

QA Results - Prod

Details

Event Timeline

Test Result - Beta

QA steps

Test Result - Prod

QA steps

Lazy loading code should not run on talk pages (currently not showing any images in overlays)
Closed, ResolvedPublic3 Estimated Story Points
Actions