Page MenuHomePhabricator

Help Panel: Integrate as overlay in MobileFrontend
Open, NormalPublic

Description

The help panel in GrowthExperiments works on mobile by detaching and appending the overlay. This was done to get around phantom text inputs and scroll issues. This more or less worked until we added search, and now scrolling help panel search results on iOS safari is pretty badly broken, there are also issues with scrolling the home and question review panels.

Rather than fighting against MobileFrontend's overlay system, it would instead be better to integrate the help panel as a proper overlay that MobileFrontend knows about and can load without issue.

Proposed changes:

  1. Use two separate call to action modules for desktop and mobile
  2. Drop ProcessDialog and WindowManager for mobile.
    1. Refactor help panel code so it's more modular and can be reused outside the process dialog
  3. Use onBeforeExit (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/493756/) to avoid warnings about switching to help panel if the user has added text in the editor

Event Timeline

kostajh created this task.Feb 6 2019, 4:22 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 6 2019, 4:22 PM

Change 488501 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Fix iOS scroll bug

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

Change 488501 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Fix iOS scroll bug

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

Change 488988 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@wmf/1.33.0-wmf.16] Help Panel: Fix iOS scroll bug

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

Change 488988 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.33.0-wmf.16] Help Panel: Fix iOS scroll bug

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

Change 489016 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Another hack attempt to fix iOS scroll bug on search

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

Change 489016 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Another hack attempt to fix iOS scroll bug on search

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

Sadly, this doesn't fix the problem. On first search, the scroll is reliably stuck. It's possible that the latest patch makes it easier to "unstick" the search scroll but I'm not totally confident about that, since I've seen lots of inconsistent behavior with this one.

The scroll will work if after the search results get displayed, a device would be turned horizontally (if the search was done in a vertical position) and then returned to a vertical position:

Change 490777 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/MobileFrontend@master] WIP: Integrate Help Panel as overlay

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

Change 490778 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Use MobileFrontend overlay

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

@Jdlrobson @Catrope above are rough drafts at integrating the GrowthExperiments Help Panel as an overlay in MobileFrontend. Motivation for doing so:

  1. Stop fighting the MobileFrontend overlay and VE overlay system on mobile; instead hacking around it, integrate closely with it
  2. Simplify the GrowthExperiments cta.js code to be desktop specific (although it does at this point still load for both desktop/mobile; we'd need to update RL modules so that different CTA and Help Panel styles load for desktop/mobile)
  3. Fix the %#@ iOS scroll bug. It really appears to be fixed when going this route.

Problems with current approach:

  1. While the help panel loads (styles need adjustment) correctly, after you've closed it, the previous overlay needs to be restored. Wasn't sure of the best way to do this; either storing the current overlay then trying to restore with replaceCurrent() or implementing a hook for when the help panel is closed and then restoring whichever editor was active. Both approaches are semi-implemented in a totally broken way in the patch at the moment, just putting them there for comment.
  2. this patch makes assumptions that the help panel will only show in editing context, but in the near future it will load in viewing mode for some namespaces too. However we can deal with that another day.
  3. @Jdlrobson mentioned that the overlay system might get overhauled in the near future, so perhaps we should wait to see what happens with that?

I'm curious if I should continue down this route, or if it's going to be more trouble than it's worth. My sense is that this seems to be the right direction but I could use some guidance on how to integrate properly with MobileFrontend.

Change 490777 abandoned by Kosta Harlan:
WIP: Integrate Help Panel as overlay

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

Change 490778 abandoned by Kosta Harlan:
WIP: Help Panel: Use MobileFrontend overlay

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

@Jdlrobson mentioned that the overlay system might get overhauled in the near future, so perhaps we should wait to see what happens with that?

It's on my TODO list to investigate what a modern overlay manager would look at.
Right now we're focusing on simplifying the Overlay's themselves (see https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/471334/ and https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/490635/17)

I think following this approach for the editor would help you. For instance maybe the HelpPanel is a child of the editor's Overlay that is hidden and shown as needed?

kostajh renamed this task from Help Panel: Fix iOS scroll bug on search results to Help Panel: Integrate as overlay in MobileFrontend.Mar 1 2019, 10:11 PM
kostajh added a project: MobileFrontend.
kostajh updated the task description. (Show Details)

I've been deep in the overlay world today and yesterday working on https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/493742/1/resources/skins.minerva.talk/init.js

I think you can take that example (and all associated patchsets of an example of how you can play nicely with Mobilefrontend OverlayManager!

I think once these patches land I will be able to help cleanup the editor code and help make this panel you are attempting to add much more effortless!

Change 494367 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Implement Help Panel as MobileFrontend Overlay

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

kostajh updated the task description. (Show Details)Mar 5 2019, 9:34 PM
kostajh updated the task description. (Show Details)Mar 5 2019, 10:28 PM
kostajh moved this task from In Progress to Incoming on the Growth-Team (Current Sprint) board.

@Catrope and I discussed this on Friday. We agreed that it makes sense to wait on this until the dust settles on the changes to the overlay system in MobileFrontend, as well as the iOS scrolling fixes that are making their way through MobileFrontend and VisualEditor.

Actionable items for this task are:

kostajh moved this task from Inbox to Revisit on the Growth-Team board.Mar 18 2019, 3:55 PM

Also worth thinking about: the overlay system in MobileFrontend invites different design paradigms than what one would provide in desktop. As just one example, compare the talk overlay system (tap on "Discussion" at the footer of an article with active discussions) to see how that differs from desktop. Our current approach with help panel is to basically shrink the contents down to fit in the smaller viewport size, but if we are going to rebuild the help panel as a MobileFrontend overlay we should consider revisiting the design, and utilizing the components and design patterns offered by that extension and the Minerva skin.

Change 494367 abandoned by Kosta Harlan:
Implement Help Panel as MobileFrontend Overlay

Reason:
will come back to this when the overlay refactoring work is done in MF

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