User story

As an advanced contributor, I would like to know when my workflows can be simplified

Designs

taps on Talk (or History, Desktop, etc.)	page transitions, drawer appears, taps on "Enable..."	advanced mode enabled, toast displays

This flow needs to be discussed with engineering. The main questions are:

1. is it possible to limit the amount of times we show these to people? I think the ideal logic would be that it happens the first time you tap any of the given button/hooks. Example: you tap "Talk" (for the first time since this has been enabled), the drawer appears, you press "No thanks". Next time you tap "Talk" the drawer would not appear, however if you tapped "History" it would.
2. is it possible to turn the setting on without going to the settings page?
   • If so, can we have a custom toast message, (e.g. "Advanced contributions mode is now enabled. You can turn it off in your settings.") rather than the generic "Settings were saved." message.?
3. should the drawer/dialog should appear before or after the page transitions to the intended destination (e.g. the Talk or History page)? We discussed at our offsite that appearing after you've arrived at your destination might be less intrusive/disruptive, however if we can ensure that it will only appear once it might be more effective if it appears before the page transitions (in the case of a user tapping on the "Desktop" link this would be necessary).
   • is it possible to show this drawer without dimming the screen and blocking other clicks? More like an optional little panel than a blocking dialog/modal.

Acceptance Criteria

• Display toast/modal when user performs any of the following actions on the mobile site: selecting talk link at the bottom of the page, selecting the history page link, selecting the desktop link
• Toast/modal must only display once
• Nice to have: we still show the toast that says where you can try it out/how to turn it off
• Selecting "Enable advanced mode" will turn on AMC (without requiring user to go to the settings page)
• Desktop link:
• Selecting "Enable advanced mode" will turn on AMC. It will not open the desktop version of the site
• Selecting "no thanks" will turn on the desktop version of the site
• Talk link:
• Selecting "Enable advanced mode" will turn on AMC. It will then load the talk modal
• Selecting "no thanks" will load the talk modal
• History link:
• Selecting "Enable advanced mode" will turn on AMC. It will then load the AMC history page
• Selecting "no thanks" will load the mobile history page

Open questions/concerns

• We currently lazy load the drawer. When the user selects a link and is eligible to see the drawer, what should we do while the drawer is loading?
  • Do nothing?
  • Show the drawer immediately and make use of the promisedView pattern?
  • Remove the lazy loading and eager load the drawer (will add to the initial JS payload)?
• Currently when the user selects "No thanks", the drawer will simply hide. For this task, we need the drawer to hide and also perform an action (e.g. load the talk modal). This could be relatively easy to do by adding a onHide callback param to the [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/a6299dbfda06c5305f8b68cb239817bdd986dfbf/src/mobile.startup/promoCampaign/promoCampaign.js#L91 | showIfEligible method ]] and having the client pass in that param. Something similar could be done with the "Enable advanced mode" button to perform an action, however that AC is much tricker to fulfill because of the page redirection that happens and the fact that that redirection only currently supports redirecting to page titles (hash/query params are not currently supported). I have a patch that would add support for this, but I'm not sure how robust it is.

Dev notes

The general code needed to show the drawer for a given action will probably look something like this:

1. Add new action to ACTIONS object in mobile.startup/amcOutreach/amcOutreach.js. The onLoad action has already been added here. It can be anything, but make sure the key and value are the same.
2. Export mobile.startup/amcOutreach/amcOutreach.js in mobile.startup.js so that Minerva can access it
3. When something triggers an action in Minerva (e.g. talk overlay shows), the following code will be needed:

var mobile = M.require( 'mobile.startup' );
var promoCampaign = mobile.amcOutreach.loadCampaign();
promoCampaign.showIfEligible( mobile.amcOutreach.ACTIONS.whateverNewAction );

You can check out the [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/e3646c15466db8755cdaa5f7cbc5fae511abf4d9/src/mobile.init/mobile.init.js#L140-L141 | onLoad action in mobile.init ]] as an example.

QA steps (ready now)

This is now on the beta cluster and enables all logged in users with >= 0 edits to see the drawer (the # of edits is configurable and was set to 0 to make testing easier).

This is a bit of a pain to test multiple times because the drawer should only show once per browser/action/device combo. A way to get around this is to use a new incognito mode window in chrome (iOS Safari has their own version of that at https://support.apple.com/en-us/HT203036) every time you want to see the drawer:

1. If you have enabled AMC at https://en.m.wikipedia.beta.wmflabs.org, turn it off
2. Close all previous incognito windows, launch a new incognito window, and login to https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain

Alternatively, if you are on a laptop on chrome, you can open up dev tools and in the console execute localStorage.clear(). This saves you from having to open/close tabs and log in/log out.

When user is logged in with AMC turned off, user clicks desktop link, and then dismisses it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
• Assert that the drawer remains visible when attempting to scroll.
• Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the desktop page loads.
• Go back to the mobile site by clicking the "Mobile view" link in the footer. Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

When user is logged in with AMC turned off, user clicks desktop link, and then enables it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
• Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads. The desktop site should NOT load.
• Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

When user is logged in with AMC turned off, user clicks talk button, and then dismisses it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
• Assert that the drawer remains visible when attempting to scroll.
• Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the talk overlay appears.
• Close the talk overlay and click the "Discussion button" again and assert that the drawer does NOT show but the talk overlay appears.

When user is logged in with AMC turned off, user clicks talk button, and then enables it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
• Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads and the talk overlay appears.
• Close talk overlay, click the talk button again, and assert that the drawer does NOT show but the talk overlay appears.

When user is logged in with AMC turned off, user clicks history link, and then dismisses it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
• Assert that the drawer remains visible when attempting to scroll.
• Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the non-amc history page loads.
• Go back to previous page and click history link again. Assert that the drawer does NOT show but the history page loads again.

When user is logged in with AMC turned off, user clicks history link, and then enables it

• Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
• Enable amc mode by tapping "Enable advanced mode" button. Assert that the amc history page loads
• Go back to previous page and click history link again. Assert that the drawer does NOT show but the amc history page loads.

QA Results