Infobox does not get moved behind the lead paragraph if it's a DIV element
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Esanders
	Mar 11 2019, 7:09 PM

Description

ar.wiki uses classes such as infbox_v2 and infobox_v3, so it isn't picked up by MobileFrontend's CSS and breaks the layout:

e.g.
https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)
https://ar.m.wikipedia.org/wiki/%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84 (the infobox's width should be constrained and not full-width)

Screenshot 2019-03-11 at 19.05.48.png (669×376 px, 186 KB)

QA steps

Verify that paragraphs can be shifted above infoboxes on beta cluster (https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Divinfobox&venotify=created)
Wait for the change to roll out into production (5th or 6th February) and confirm the bug fix on Arabic Wikipedia on the test URIs

QA Results

AC	Status	Details
1	✅	T218056#5893787
2	✅	T218056#5860641

Details

	Subject	Repo	Branch	Lines +/-
	Allow infoboxes that are not table elements	mediawiki/extensions/MobileFrontend	master	+10 -1

Customize query in gerrit

Related Objects

Mentioned In: T245160: [Bug] Many MobileFormatter lead paragraph transform alerts starting on Feb 11, 2020
Mentioned Here: T242447: Bug: Lead paragraph move transform fails to work on some pages with coordinates

Event Timeline

Esanders created this task.Mar 11 2019, 7:09 PM

Restricted Application added subscribers: alaa, Aklapper. · View Herald TranscriptMar 11 2019, 7:09 PM

@CKoerner_WMF , would be great to get a TemplateStyles solution here and/or point Arabic Wiki to https://www.mediawiki.org/wiki/Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis#Use_standardized_class_names_in_HTML_markup_for_components_in_templates_across_projects !

• Niedzielski updated the task description. (Show Details)Apr 25 2019, 5:13 PM

Hello @Jdlrobson and @CKoerner_WMF, is there any update? or thing(s) that we (Arabic Wikipedia) can help in it?

Im pretty sure i explained this to ar.wp before... The proper way to fix this is to generate html with TWO classes, like class=“infobox infobox_v2”. And make sure that any visual changes in v2 override the visual changes of infobox.

What @TheDJ says. Please add the infobox class to the element. The community needs to fix this. We can't help.
Output should look like this:

<div class="infobox infobox_v3" style="max-width:300px"><div

Jdlrobson renamed this task from Infobox not detected on Arabic Wikipedia to Infobox does not get moved behind the lead paragraph as HTML element outputted by Arabic infobox template does not include the infobox class.Jul 1 2019, 5:54 PM

alaa added a subscriber: ASammour.Jul 4 2019, 4:39 PM

Arwiki_Screenshot_2019-07-05.png (647×505 px, 155 KB)

It's done for most templates, I changed class=“infobox_v2” to class=“infobox infobox_v2”.

Thank you Mr.Ibrahem 🙏 for the other templates e.g. the one used by https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) is there an open request?

Jdlrobson removed a project: MobileFrontend.Jul 8 2019, 9:10 PM

In T218056#5315187, @Jdlrobson wrote:

Thank you Mr.Ibrahem 🙏 for the other templates e.g. the one used by https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) is there an open request?

In arwiki we are using two kind of templates (1 & 2), so on 4 July I sent to Mr.Ibrahem and he fixed the first kind, and now I sent to user:وهراني to fix the other kind (your example).

CKoerner_WMF unsubscribed.Dec 12 2019, 4:12 PM

I think both were fixed.

Ordering still seems wrong on https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) but I think this is on us now though.

This seems to be because the element with class infobox is a div and I was surprised to see our lead paragraph logic does not work on non-table elements
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/includes/transforms/MoveLeadParagraphTransform.php#L66

Patch submitted (I'm looking at a similar issue as we speak => T242447)

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.Jan 27 2020, 1:08 PM

Change 567441 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Allow infoboxes that are not table elements

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

gerritbot added a project: Patch-For-Review.Jan 27 2020, 1:11 PM

Change 567441 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Allow infoboxes that are not table elements

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.18; 2020-02-04).Jan 27 2020, 11:00 PM

Jdlrobson reassigned this task from TheDJ to Edtadros.Jan 28 2020, 1:08 AM

Jdlrobson moved this task from Upcoming to Needs QA on the Web-Team-Backlog (Kanbanana-2019-20-Q3) board.

Jdlrobson updated the task description. (Show Details)Jan 28 2020, 1:26 AM

ovasileva triaged this task as Medium priority.Feb 4 2020, 6:09 PM

Test Result

Status: ❌ FAIL
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, iPad

Test Artifact(s):

❌ AC1: https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)

ar.m.wikipedia.org_wiki_%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85)(iPhone X).png (2×1 px, 1 MB)

Note: The infobox also has no gap between the line separator of the menu.

✅ AC2: https://ar.m.wikipedia.org/wiki/%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84 (the infobox's width should be constrained and not full-width)

ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPad).png (2×1 px, 272 KB)

ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPhone X).png (2×1 px, 216 KB)

Edtadros updated the task description. (Show Details)Feb 7 2020, 8:35 PM

I believe the train with the fix got blocked last week so when the train does roll out this bug should be rechecked.

Moving back to needs QA as train is today

ovasileva mentioned this in T245160: [Bug] Many MobileFormatter lead paragraph transform alerts starting on Feb 11, 2020.Feb 17 2020, 2:21 PM

This should be live now.

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

✅ AC1: https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)

Edtadros updated the task description. (Show Details)Feb 18 2020, 5:28 PM

looks good!

Meno25 removed a project: Patch-For-Review.Mar 14 2022, 8:39 AM

Meno25 removed subscribers: • FShbib, • Jar, Meno25.Jan 14 2023, 10:13 PM

	F31621396: ar.m.wikipedia.org_wiki_%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85)(iPhone X).png
	Feb 18 2020, 5:27 PM

	F31554787: ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPad).png
	Feb 7 2020, 8:34 PM

	F31554786: ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPhone X).png
	Feb 7 2020, 8:34 PM

	F31554774: ar.m.wikipedia.org_wiki_%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85)(iPhone X).png
	Feb 7 2020, 8:34 PM

	F29692115: Arwiki_Screenshot_2019-07-05.png
	Jul 6 2019, 10:08 PM

	F28368653: Screenshot 2019-03-11 at 19.05.48.png
	Mar 11 2019, 7:09 PM

Infobox does not get moved behind the lead paragraph if it's a DIV elementClosed, ResolvedPublicActions

Description

QA steps

QA Results

Details

Related Objects

Event Timeline

Test Result

Test Result

Infobox does not get moved behind the lead paragraph if it's a DIV element
Closed, ResolvedPublic
Actions