Page MenuHomePhabricator
Create Task
Maniphest T215430

Help Panel: Integrate as overlay in MobileFrontend
Closed, DeclinedPublic
Actions

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

Details

SubjectRepoBranchLines +/-
Implement Help Panel as MobileFrontend Overlaymediawiki/extensions/GrowthExperimentsmaster+44 -25
WIP: Help Panel: Use MobileFrontend overlaymediawiki/extensions/GrowthExperimentsmaster+19 -52
WIP: Integrate Help Panel as overlaymediawiki/extensions/MobileFrontendmaster+91 -0
Help Panel: Another hack attempt to fix iOS scroll bug on searchmediawiki/extensions/GrowthExperimentsmaster+7 -0
Help Panel: Fix iOS scroll bugmediawiki/extensions/GrowthExperimentswmf/1.33.0-wmf.16+10 -6
Help Panel: Fix iOS scroll bugmediawiki/extensions/GrowthExperimentsmaster+10 -6
Customize query in gerrit

Related Objects

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
kostajh moved this task from Incoming to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 6 2019, 4:22 PM
gerritbot subscribed.Feb 6 2019, 5:08 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

gerritbot added a project: Patch-For-Review.Feb 6 2019, 5:08 PM
kostajh mentioned this in rEGRE99959e935afd: Help Panel: Fix iOS scroll bug.Feb 6 2019, 5:11 PM
kostajh moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 6 2019, 5:13 PM
gerritbot added a comment.Feb 6 2019, 6:37 PM

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

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

ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.17; 2019-02-12).Feb 6 2019, 7:00 PM
kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 6 2019, 7:33 PM
gerritbot added a comment.Feb 7 2019, 6:39 PM

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

kostajh mentioned this in rEGRE62be75e845d7: Help Panel: Fix iOS scroll bug.Feb 7 2019, 6:40 PM
gerritbot added a comment.Feb 7 2019, 7:25 PM

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.16; 2019-02-05); removed MW-1.33-notes (1.33.0-wmf.17; 2019-02-12).Feb 7 2019, 8:00 PM
gerritbot added a comment.Feb 7 2019, 8:53 PM

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

kostajh mentioned this in rEGRE9bbab4167789: Help Panel: Another hack attempt to fix iOS scroll bug on search.Feb 7 2019, 8:57 PM
kostajh moved this task from QA to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 8 2019, 8:16 PM
kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 11 2019, 9:03 PM
gerritbot added a comment.Feb 11 2019, 9:14 PM

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.17; 2019-02-12); removed MW-1.33-notes (1.33.0-wmf.16; 2019-02-05).Feb 11 2019, 10:02 PM
kostajh added a comment.Feb 12 2019, 2:43 PM

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.

Etonkovidova subscribed.Feb 14 2019, 12:09 AM

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:

iPhone_scroll.gif (771×461 px, 1 MB)

gerritbot added a comment.Feb 14 2019, 9:55 PM

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

gerritbot added a comment.Feb 14 2019, 9:56 PM

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

kostajh mentioned this in rEGRE57c97e938db8: WIP: Help Panel: Use MobileFrontend overlay.Feb 14 2019, 10:00 PM
kostajh mentioned this in rEGRE4593faf10afc: Help Panel: Use MobileFrontend overlay.
kostajh added subscribers: Jdlrobson, Catrope.Feb 14 2019, 10:06 PM

@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.

kostajh moved this task from QA to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 14 2019, 10:13 PM
kostajh mentioned this in rEGRE36e60cf054aa: WIP: Help Panel: Use MobileFrontend overlay.Feb 14 2019, 10:16 PM
kostajh moved this task from In Progress to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 15 2019, 7:38 PM
gerritbot added a comment.Feb 20 2019, 5:27 PM

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

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

gerritbot added a comment.Feb 20 2019, 5:27 PM

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

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

Jdlrobson added a comment.Feb 21 2019, 1:03 AM

@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)
Jdlrobson added a project: Web-Team-Backlog (Tracking).Mar 2 2019, 12:06 AM

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!

kostajh moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 4 2019, 8:40 PM
gerritbot added a comment.Mar 4 2019, 10:15 PM

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 mentioned this in rEGRE67354d12df9b: Implement Help Panel as MobileFrontend Overlay.Mar 4 2019, 10:20 PM
kostajh mentioned this in rEGREa93168b98fc5: Implement Help Panel as MobileFrontend Overlay.
kostajh mentioned this in rEGREba9d308bfb0e: Implement Help Panel as MobileFrontend Overlay.Mar 5 2019, 8:54 PM
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 mentioned this in T218593: Investigate triggering a reflow to work around iOS search scroll bug.Mar 18 2019, 3:51 PM
kostajh moved this task from In Progress to Incoming on the Growth-Team (Sprint 0 (Growth Team)) 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 edited projects, added Growth-Team; removed Growth-Team (Sprint 0 (Growth Team)).Mar 18 2019, 3:53 PM
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.

jijiki mentioned this in rEGREea779f8acbdf: Help Panel: Fix iOS scroll bug.Mar 18 2019, 4:29 PM
jijiki mentioned this in rEGRE094f6e46840e: Help Panel: Another hack attempt to fix iOS scroll bug on search.
jijiki mentioned this in rEGRE2053c8c5eab2: Help Panel: Fix iOS scroll bug.
gerritbot added a comment.Mar 21 2019, 1:45 PM

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

kostajh mentioned this in T220407: Unable to scroll notifications on iOS.Apr 8 2019, 2:58 PM
kostajh mentioned this in T222833: Mobile Homepage: Show module details in a mobile overlay.Jun 18 2019, 6:39 PM
kostajh mentioned this in T226041: Homepage and help panel: ask question dialog should be aware of back button.
Jdlrobson moved this task from Backlog to Team:Growth on the MobileFrontend board.Jul 24 2020, 2:32 AM
MBinder_WMF added a project: Growth-Team-Filtering.Apr 15 2021, 6:51 PM
Aklapper removed a project: Patch-For-Review.May 25 2021, 8:57 PM
kostajh closed this task as Declined.May 26 2021, 12:16 PM
kostajh mentioned this in T280833: [Bug] Add a link: flicker of read-only article before help panel shows up on screen on mobile.Jun 1 2021, 11:32 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL