Page MenuHomePhabricator

Infobox relocation ends up messing up paragraphs placing
Closed, ResolvedPublic3 Story Points

Description

Second paragraph in desktop version ends up first in mobile version due to some unexpected placement of a template with .infobox. Compare:

https://ru.wikipedia.org/wiki/RLV-TD
https://ru.m.wikipedia.org/wiki/RLV-TD

Developer notes

This issue is easy to replicate and an easy to understand test case has been provided:
https://gerrit.wikimedia.org/r/417399 Test case: Don't rearrange paragraphs when infobox does not need to be moved

It appears we re-order paragraphs when the infobox is at the end of the section. We should aim to fix this ASAP. Seems pretty serious.

We know this is impacting Russian sites, but may be impacting many other wikis.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : wmf/1.31.0-wmf.24Move infobox only when it's first non-empty sibling
mediawiki/extensions/MobileFrontend : masterMove infobox only when it's first non-empty sibling

Event Timeline

stjn created this task.Mar 3 2018, 2:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 3 2018, 2:06 PM
MBH added a subscriber: MBH.Mar 3 2018, 2:14 PM
ovasileva triaged this task as Medium priority.Mar 5 2018, 12:15 PM
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: Jdlrobson.

Eek. That's not good!
Let me write a test case today.

Thanks for the bug report!

Jdlrobson raised the priority of this task from Medium to High.Mar 8 2018, 4:33 PM

Change 417399 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Test case: Don't rearrange paragraphs when infobox does not need to be moved

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Russian-Sites.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: ovasileva.

@ovasileva FYI. Possibly even unbreak now.

phuedx added a subscriber: phuedx.EditedMar 9 2018, 6:42 AM

@Jdlrobson I agree with UBN! Content is still visible and the users can still interact with the article but we're fundamentally changing it by (accidentally) reordering paragraphs /cc @ovasileva

Jdlrobson raised the priority of this task from High to Unbreak Now!.Mar 9 2018, 9:05 PM

Being bold.. :)

Restricted Application added subscribers: Liuxinyu970226, TerraCodes. · View Herald TranscriptMar 9 2018, 9:05 PM
stjn added a comment.Mar 9 2018, 9:46 PM

Wild idea on how to make this stop for eternity: if we are already using the flexbox for some parts of styling (I’ve seen that infoboxes are using flexbox etc.), there is an option of using it for this. If we wrap the preamble text without an infobox in a container and wrap entire zero-level section in another container, we can use flexbox ordering features for this. Showing in inline styles for example (but of course it should be in MobileFrontend styles).

<div style="display: flex; flex-direction: column;">
	<table class="infobox" style="order: 2;">...</table>
	<div style="order: 1;">...</div>
</div>

Was this an option that the team has considered? It seems like it has a wide browser support (and no related flexbox bugs) and users that use mobile version on higher resolutions may benefit if the change would be entirely visual and applied only to mobile devices (vs tablet, desktop etc.).

Sorry to chime in on this if you have tried it and deemed not good enough for whatever reason. And sorry because this is not directly related to this task, but I thought it was good food for thought for a more bulletproof solution in general regarding this.

Being bold.. :)

UBN sounds good.

prssanna lowered the priority of this task from Unbreak Now! to Needs Triage.Mar 12 2018, 9:52 AM
ovasileva triaged this task as Unbreak Now! priority.Mar 12 2018, 11:56 AM
ovasileva set the point value for this task to 3.Mar 12 2018, 5:14 PM
pmiazga claimed this task.Mar 12 2018, 5:15 PM
Jdlrobson added a subscriber: Nirzar.

When @Nirzar is done with reading web staging I can point it at Russian Wikipedia to test this change.
Until then this cannot be QAed.

Change 417399 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Move infobox only when it's first non-empty sibling

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

pmiazga removed pmiazga as the assignee of this task.Mar 13 2018, 5:04 PM
pmiazga added a subscriber: pmiazga.
Jdlrobson reassigned this task from Jdlrobson to ABorbaWMF.Mar 13 2018, 5:20 PM

I've let Anthony know that we'd like to SWAT this later today so we can get some QA done.

Works for me on staging:

ABorbaWMF reassigned this task from ABorbaWMF to ovasileva.Mar 13 2018, 7:46 PM
ABorbaWMF added a subscriber: ABorbaWMF.

Change 419269 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@wmf/1.31.0-wmf.24] Move infobox only when it's first non-empty sibling

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

@stjn yup flexbox would be the ideal way to handle this, but it involves changing fundamentally how people edit content on wiki. The first paragraph would need to be part of the same flex container:

<div class='flex">
<table class="infobox"><p></p>
</div>

Looks like we've got a fix for this. I will try to get it to go out in a couple of hours during the SWAT window.

Change 419269 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@wmf/1.31.0-wmf.24] Move infobox only when it's first non-empty sibling

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

Mentioned in SAL (#wikimedia-operations) [2018-03-13T23:46:54Z] <reedy@tin> Synchronized php-1.31.0-wmf.24/extensions/MobileFrontend/: T188825 (duration: 01m 18s)

The article in the description is fixed.
Not seeing any issues in logstash so pretty sure this is resolved.
Thanks for the report @stjn !

Jdlrobson lowered the priority of this task from Unbreak Now! to Medium.Mar 14 2018, 12:04 AM
ovasileva closed this task as Resolved.Mar 14 2018, 10:05 AM

looks good on production.