Page MenuHomePhabricator

MoveLeadParagraphTransformInfobox re-order should apply other floated elements, e.g. images
Closed, ResolvedPublic3 Estimated Story Points

Description

Pages which start with floated elements (i.e. elements which aren't supposed to be fully above the first paragraph) should show the paragraph first on mobile.

e.g. https://en.wikipedia.org/wiki/Enriched_uranium

Currently we only look for table.infobox & div.infobox (then if they have a parent of .mw-stack or .collapsible)

Proposal

Currently we treat "infoboxes" as any element with the class infobox. With this change, infobox would be expanded to anything which contains a thumb class.

// Thumbnail images: .thumb, figure (Parsoid)
'.//*[contains(concat(" ",normalize-space(@class)," ")," thumb ")]',
'.//figure',

QA steps

Using mobile site:

QA Results - Beta

ACStatusDetails
1T258201#6411025
2T258201#6411028

QA Results - Prod

ACStatusDetails
1T258201#6420493
2T258201#6420492

Event Timeline

T258011 should be merged into this task. The wiki is using the wikibase-based generic databox template which should also be classified as needing the move.

I think that's a different issue. The template on that wiki has no identifying classes. Although the title here is "floated elements", the transformation takes places in HTML without the CSS, so it won't be based on computed CSS.

Change 613700 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] MoveLeadParagraphTransform: Hoist thumbnails

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

ovasileva triaged this task as Medium priority.Jul 21 2020, 3:22 PM

This change looks good but does seem a bit risky and could possibly have implications, so I've moved to upcoming to make sure the team chats through the implications of such a change.

cc @alexhollender @ovasileva

FYI both the mobile apps, which also implement lede paragraph reordering, apply the transform to images:

iOSAndroid
image.png (983×553 px, 159 KB)
image.png (983×454 px, 229 KB)

Edit: It looks like MCS doesn't look for infobox/thumb, but moves the paragraph up past anything that isn't a hatnote: https://github.com/wikimedia/mobileapps/blob/e858d09962aa9c0e9a0b04bdbed36c18f973aeb5/lib/mobile/MobileHTML.js

We can move towards that later, but for now moving past thumbnails seems sensible.

Change 613700 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] MoveLeadParagraphTransform: Hoist thumbnails

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

Test Result - Beta

Status: ✅ PASS
Environment: beta/enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):

QA steps

✅ AC1: Verify that the image on https://en.m.wikipedia.beta.wmflabs.org/wiki/Enriched_uranium appears below the first paragraph.

Left side of image below shows beta with the fix, right side is production without the fix (note the beta article isn't identical to the prod article, but seems close enough for verifying the fix):

Screen Shot 2020-08-25 at 10.27.58 PM.png (2×2 px, 828 KB)

Test Result - Beta

Status: ✅ PASS
Environment: beta/enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):

QA steps

✅ AC2: Exploratory testing. Try to find at least ten pages with infoboxes and images at the top of the page where text does not appear first.

Left sides of images below show beta with the fix, right side is production without the fix (note the beta articles aren't strictly identical to the prod articles, but seem close enough for verifying the fix):

Screen Shot 2020-08-25 at 10.20.21 PM.png (1×1 px, 1 MB)

Screen Shot 2020-08-25 at 10.17.15 PM.png (1×2 px, 1 MB)

Screen Shot 2020-08-25 at 10.04.26 PM.png (1×2 px, 1 MB)

Screen Shot 2020-08-25 at 10.08.04 PM.png (1×2 px, 1 MB)

Screen Shot 2020-08-25 at 10.17.53 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-25 at 10.06.14 PM.png (1×2 px, 2 MB)

Screen Shot 2020-08-25 at 10.09.21 PM.png (2×2 px, 2 MB)

Screen Shot 2020-08-25 at 10.01.58 PM.png (2×1 px, 2 MB)

^ I found 8 articles on beta which had images above text to be hoisted. I'm sure there are others but I got tired of hunting for them 😂

Test Result - Prod

Status: ❓ QUESTION
Environment: enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):

QA steps

❓ AC2: Exploratory testing. 7 of the 8 articles I tried from T258201#6411028 are now correctly hoisting text on prod. Yay! The remaining article hoists text with ?safemode=1 ( see notes by the "Domestication" screenshots below ), so I think it's ok? @Jdlrobson does that sound ok?

Screen Shot 2020-08-28 at 9.13.14 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.13.54 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.14.17 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.14.35 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.14.56 PM.png (2×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.15.12 PM.png (2×1 px, 1 MB)

The "Domestication" article failed to hoist text above the image:

Screen Shot 2020-08-28 at 9.15.43 PM.png (2×1 px, 1 MB)

However, the "Domestication" article hoisted text nicely with ?safemode=1:

Screen Shot 2020-08-28 at 9.22.34 PM.png (1×1 px, 1 MB)

Screen Shot 2020-08-28 at 9.16.01 PM.png (2×1 px, 1 MB)

Test Result - Prod

Status: ❓ QUESTION
Environment: enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):

QA steps

❓ AC1: Verify that the image on https://en.m.wikipedia.org/wiki/Enriched_uranium appears below the first paragraph

It's not working:

Screen Shot 2020-08-28 at 9.49.11 PM.png (2×1 px, 919 KB)

However, with ?safemode=1 it is working nicely:

Screen Shot 2020-08-28 at 9.49.14 PM.png (2×1 px, 928 KB)

@Jdlrobson Same question as with T258201#6420492 - since it works with safemode is it ok to mark it as PASS?

Both of the pages display correctly after purging the cached version (using ?action=purge), so that the page is rendered again by the new code.

https://en.m.wikipedia.org/wiki/Enriched_uranium
https://en.m.wikipedia.org/wiki/Domestication

BeforeAfter
17C7102D-7C6E-47F1-9F4D-C76288615242.png (1×640 px, 133 KB)
9E5E5654-67E2-4F9F-8B92-EE94D26C50CF.png (1×640 px, 148 KB)
4A1DACCF-4BE2-4A62-AD46-160C7ADC61BC.png (1×640 px, 823 KB)
57E03116-F941-4255-B671-97AB75BB4D0A.png (1×640 px, 344 KB)