Page MenuHomePhabricator
Create Task
Maniphest T284251

RelatedArticles should use IntersectionObserver rather than deprecated mediawiki.viewport module
Closed, ResolvedPublic
Actions

Assigned To
ovasileva
Authored By
Jdlrobson
Jun 3 2021, 8:19 PM
Tags
Referenced Files
F34762391: Screen Shot 2021-11-22 at 2.38.08 PM.png
Nov 22 2021, 10:40 PM
F34762389: Screen Shot 2021-11-22 at 2.35.04 PM.png
Nov 22 2021, 10:40 PM
F34762394: Screen Shot 2021-11-22 at 2.39.05 PM.png
Nov 22 2021, 10:40 PM
F34741496: Screen Shot 2021-11-10 at 5.38.09 PM.png
Nov 11 2021, 1:41 AM
F34741487: Screen Shot 2021-11-10 at 5.35.12 PM.png
Nov 11 2021, 1:41 AM
F34741492: Screen Shot 2021-11-10 at 5.37.18 PM.png
Nov 11 2021, 1:41 AM
F34741489: Screen Shot 2021-11-10 at 5.36.05 PM.png
Nov 11 2021, 1:41 AM
F34730133: Screen Shot 2021-11-04 at 7.09.41 AM.png
Nov 4 2021, 2:14 PM
View All 10 Files
Subscribers
Aklapper
Baalamurgan
Edtadros
Jdlrobson
TheDJ

Description

The mediawiki.viewport module was deprecated in T284179

This task encompasses updating RelatedArticles to use IntersectionObserver and remove usage of the module.

We previously did this in QuickSurveys, so we have an example of how to do this: https://gerrit.wikimedia.org/r/c/698050 , doing this in RelatedArticles will more or less copy that approach.

IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

QA

https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Related_test

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_test and verify that 3 cards show at the bottom of the page.

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_Articles_3# and drop your Internet connection offline. Scroll to the bottom of page and verify there are no cards.

Restore internet connection and refresh page. Now scroll to bottom of page and verify that you see the three cards.

QA Results - Beta

ACStatusDetails
1✅T284251#7497631
2✅T284251#7497631
3❌ ✅T284251#7497631 T284251#7500461

QA Results - Prod

ACStatusDetails
1✅T284251#7522153
2✅T284251#7522153
3✅T284251#7522153

Details

SubjectRepoBranchLines +/-
RelatedArticles should use IntersectionObserver rather than deprecated mediawiki.viewport modulemediawiki/extensions/RelatedArticlesmaster+34 -16
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Jun 3 2021, 8:19 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 3 2021, 8:19 PM
Jdlrobson triaged this task as Medium priority.Jun 3 2021, 8:19 PM
Jdlrobson mentioned this in T284179: Deprecate the mediawiki.viewport library.
Jdlrobson moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Jun 3 2021, 8:25 PM
Jdlrobson added a parent task: T284951: [EPIC] Simplify the RelatedArticles extension.Jun 14 2021, 6:27 PM
Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.Jul 16 2021, 9:15 PM
Jdlrobson added projects: patch-welcome, good first task.Aug 2 2021, 7:54 PM
Jdlrobson mentioned this in T286832: Remove use of Grunt in RelatedArticles extension.Aug 2 2021, 10:02 PM
Jdlrobson updated the task description. (Show Details)Aug 3 2021, 4:51 PM
Jdlrobson moved this task from unsed to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 10 2021, 8:51 PM
Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.
Jdlrobson moved this task from Backlog to Remove mobile Watchlist special page on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Aug 11 2021, 6:01 PM
Jdlrobson added a subscriber: Baalamurgan.Aug 24 2021, 3:40 PM

@Baalamurgan would you be interested in working on this frontend task?

Baalamurgan added a comment.Aug 24 2021, 3:41 PM

Yes totally

Jdlrobson assigned this task to Baalamurgan.Aug 24 2021, 3:43 PM

Let me know if you have any questions regarding setting up the extension, Gerrit, or about this task.

Baalamurgan added a comment.Aug 24 2021, 3:45 PM

Sure

Jdlrobson added a comment.Sep 2 2021, 9:54 PM

@Baalamurgan how are you getting on with this task?

Jdlrobson removed Baalamurgan as the assignee of this task.Oct 6 2021, 3:35 PM

@Baalamurgan I've removed you as assignee from the task to allow another volunteer to this one. If you'd still like to work on it, please let me know if you have any questions.

Baalamurgan added a comment.Oct 7 2021, 1:46 AM

No sorry, I am not interested.

gerritbot added a comment.Oct 26 2021, 8:41 PM

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

[mediawiki/extensions/RelatedArticles@master] RelatedArticles should use IntersectionObserver rather than deprecated mediawiki.viewport module

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

gerritbot added a project: Patch-For-Review.Oct 26 2021, 8:41 PM
gerritbot added a comment.Oct 29 2021, 10:13 PM

Change 734734 merged by jenkins-bot:

[mediawiki/extensions/RelatedArticles@master] RelatedArticles should use IntersectionObserver rather than deprecated mediawiki.viewport module

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

Jdlrobson assigned this task to Edtadros.Oct 29 2021, 10:45 PM
Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Needs Prioritization (Tech)).
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Analysis to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.7; 2021-11-02).Oct 29 2021, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Oct 29 2021, 11:11 PM
Edtadros removed Edtadros as the assignee of this task.Nov 4 2021, 2:14 PM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_test and verify that 3 cards show at the bottom of the page.

Screen Shot 2021-11-04 at 7.08.19 AM.png (1×1 px, 314 KB)

✅ AC2: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_Articles_3# and drop your Internet connection offline. Scroll to the bottom of page and verify there are no cards.

Screen Shot 2021-11-04 at 7.09.41 AM.png (1×1 px, 325 KB)

❌ AC3: Restore internet connection and refresh page. Now scroll to bottom of page and verify that you see the three cards.

Screen Shot 2021-11-04 at 7.11.12 AM.png (1×1 px, 366 KB)

Edtadros updated the task description. (Show Details)Nov 4 2021, 2:15 PM
TheDJ subscribed.EditedNov 4 2021, 3:01 PM

BTW, I recently encountered two details I wasn't familiar with:

"ResizeObserver & IntersectionObserver need to be manually disconnected, else they leak memory through their callback. This happens in all browsers."
https://twitter.com/jaffathecake/status/1405437361643790337

IntersectionObserver is supported in the latest versions of iOS Safari, *but* it can be disabled. For older devices running the latest iOS, it is disabled by default to improve performance.
https://twitter.com/OliverJAsh/status/1456231452870418437

Both seem like edges that could probably affect us. ping @Jdlrobson

Jdlrobson raised the priority of this task from Medium to High.Nov 4 2021, 3:52 PM
Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Thanks for flagging @TheDJ
Regarding iOS this is a known issue. RelatedArticles is not a critical piece of software.

@Edtadros looks like you've found a bug. Looking and bumping priority...

Jdlrobson assigned this task to Edtadros.Nov 5 2021, 12:35 AM
Jdlrobson mentioned this in T295103: [Spike] Review implications of IntersectionObserver usage.
Jdlrobson moved this task from Doing to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Ready for another round of QA.

Opened T295103 to investigate the issues TheDj has flagged.

ovasileva lowered the priority of this task from High to Medium.Nov 10 2021, 1:57 PM
Edtadros reassigned this task from Edtadros to Jdlrobson.Nov 11 2021, 1:41 AM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_test and verify that 3 cards show at the bottom of the page.

Screen Shot 2021-11-10 at 5.35.12 PM.png (1×972 px, 308 KB)

✅ AC2: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_Articles_3# and drop your Internet connection offline. Scroll to the bottom of page and verify there are no cards.

Screen Shot 2021-11-10 at 5.36.05 PM.png (1×972 px, 264 KB)

❌ AC3: Restore internet connection and refresh page. Now scroll to bottom of page and verify that you see the three cards.

Screen Shot 2021-11-10 at 5.37.18 PM.png (1×972 px, 264 KB)

I was getting to the bottom of the page by using the "end" button, so I figured I'd try using the scroll wheel on my mouse. I refreshed and scrolled down. I was only able to see two cards. I tried this multiple times to see if I could get three but I wasn't able to.

Screen Shot 2021-11-10 at 5.38.09 PM.png (1×972 px, 267 KB)

Edtadros updated the task description. (Show Details)Nov 11 2021, 1:48 AM
Jdlrobson reassigned this task from Jdlrobson to Edtadros.Nov 12 2021, 3:39 PM
Jdlrobson moved this task from Needs More Work to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

1-3 cards = Pass. This is an artifact of the testing environment

QutieBot added a project: QTE-TestingOverview.Nov 17 2021, 5:42 PM
QutieBot moved this task from Inbox to Edward on the QTE-TestingOverview board.
Edtadros updated the task description. (Show Details)Nov 22 2021, 10:31 PM
Edtadros reassigned this task from Edtadros to ovasileva.Nov 22 2021, 10:40 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Visit https://en.m.wikipedia.org/wiki/Stepan_Nechayev and verify that 3 cards show at the bottom of the page.

Screen Shot 2021-11-22 at 2.35.04 PM.png (761×745 px, 170 KB)

✅ AC2: Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Related_Articles_3# and drop your Internet connection offline. Scroll to the bottom of page and verify there are no cards.

Screen Shot 2021-11-22 at 2.38.08 PM.png (761×740 px, 118 KB)

✅ AC3: Restore internet connection and refresh page. Now scroll to bottom of page and verify that you see the three cards.

Screen Shot 2021-11-22 at 2.39.05 PM.png (759×742 px, 170 KB)

Edtadros updated the task description. (Show Details)Nov 22 2021, 10:41 PM
Jdlrobson mentioned this in T296701: "Related articles" missing from mobile site.Nov 30 2021, 6:10 PM
ovasileva closed this task as Resolved.Dec 9 2021, 10:27 AM

All done here!

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