Page MenuHomePhabricator

Mobile section loading transition broken by Parsoid
Open, LowPublic

Description

When mobile VE loads, the section expand/collapse button (v / ^) should animate to the left to hide itself. This doesn't when using Parsoid read mode (?useparsoid=1). The button just disappears suddenly.

image.png (415×450 px, 54 KB)
image.png (415×450 px, 30 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
HFan-WMF moved this task from Incoming to Backlog on the Reader Experience Team board.
HFan-WMF subscribed.

Adding Reader Growth for visibility! @Esanders do you have a sense for the priority level of this issue, and which team is best fit to address it?

This is part of the editor, so Editing can fix. It's a regression but not critical, and Parsoid read views are not widely available yet.

egardner moved this task from Incoming/Inbox to Radar on the Reader Growth Team board.

Signing off for the day, here's where I got:

  • It was necessary to install Extension:ParserMigration so that useparsoid=1 would work.
  • Reproducing behaviour was initially difficult. I found that it was necessary to set network conditions to "slow" or VE loads over the animation.
  • Chrome Dev Tools has a feature to slow down animations, also useful for reproduction.
  • I found that the transition property is set on .ve-loading .content .section-heading .indicator.
  • Parsoid's layout is slightly different: there's no .section-heading class on a parent node (but there's a section tag) and there's no .indicator class on the icon's span.
  • I verified this hypothesis by manually adding these classes to the DOM, and the animation fired.

Next up is identifying the culprit CSS or LESS file and adding new matches. This shouldn't take long.

Change #1214049 had a related patch set uploaded (by Zoe; author: Zoe):

[mediawiki/extensions/MobileFrontend@master] Animate collapse/expand icon while transitioning to VisualEditor

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

FYI you can also test by just adding the relevant class: $('html').addClass('ve-loading')

It's doing a little jump before the animation starts, I'll investigate. It's occurring with or without parsoid.

Change #1214049 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Animate collapse/expand icon while transitioning to VisualEditor

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