Make the screenshots web page highlight the Screenshots page action button

[Fischer-L]

The corresponding bug on Bugzilla: Bug 1393668

Photon Onboarding tour have one Screenshots tour. That tour will lead user to the screenshots web page[1] so we would like to have the web page can highlight the Screenshots page action button to introduce users where they could find this screenshots feature.

Please see Bug 1393668 comment 9 [2] for how to highlight the Screenshots page action button in the web page.

One thing we have to consider is what is the appropriate timing and flow to do the highlight so that users would know what we are delivering and not being confused, as Bug 1393668 comment 1, 3, 4 and 6 [3][4][5][6].

[1] https://screenshots.firefox.com
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c9
[3] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c1
[4] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c3
[5] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c4
[6] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c6

[Fischer-L]

The bug 1371538[1] would make the Photon Onboarding Screenshots tour open https://screenshots.firefox.com/#hello.
Why open to the screenshots#hello page is because

• before the Screenshots page action highlight gets implemented, at least we could provide more useful tutorial to users in stead of nothing but one web page.
• per the comment[2], it seems an appropriate place to do the highlight job.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1371538
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1393668#c4

[johngruen]

@Fischer-L The work here is as follows:

We need to implement a UI tour trigger from https://sceenshots.firefox.com/#tour, and the onboarding team needs to send users to that URL from the primary onboarding tour. Our onboarding will then occur independently based on whether a user has previously been through our onboarding.

Is this something you can implement for us?

[ianb]

Note the code that handles #hello is here – I'm guessing code for #tour would go in the same place. If we want to force a user into onboarding (regardless of previous Screenshots use) then we might need some other code, but that's probably easiest to do in a followup.

[Fischer-L]

@johngruen

Which part do you mean us to help on?
For the Photon Firefox side, The bug 1371538 [1] will let Photon Screenshots tour send users to https://sceenshots.firefox.com/#tour.
For the screenshots website, that would be great if the screenshots team could help out. Guess you would be more familiar with the website code and our resource is a bit tight now because of some recent Photon Onboarding specs change.

Please let us know if any question to discuss, thanks
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1371538

[johngruen]

@Fischer-L can you provide an example of anther site that triggers the page action. Also i think this patch (https://bugzilla.mozilla.org/show_bug.cgi?id=1371543) will need to land before we can implement. I believe Gijs is on PTO this week, so you might ask someone else to review for you to expedite the process.

[johngruen]

@Fischer-L Additionally since the uiTour is triggerable from specific domains, how do you recommend testing from a local instance. can we whitelist localhost through a config pref or something?

[Fischer-L]

@johngruen

• Yes, we can set some prefs to test on localhost. Please see [1] for details.
• About the example site, AFAIK, no site triggers the page action now. But we could do a quick simulation.
  • Please visit https://support.mozilla.org/en-US/ on Nightly
  • Then open the web console.
  • Run Mozilla.UITour.showHighlight("pageAction-copyURL") in the console to highlight the copyURL page action
  • Run Mozilla.UITour.hideHighlight() in the console to hide the highlight

And yes Gijs is out until 9/1. Since the UITour part about page action has been co-worked and reviewed with Gijs, would like to wait a bit.

[1] http://bedrock.readthedocs.io/en/latest/uitour.html#local-development

[ianb]

@Fischer-L: can you confirm that this change to our homepage is correct? My reading of your patch is that showHighlight("screenshots") is the right name for this.

[Fischer-L]

@ianb Yes, showHighlight("screenshots") is right and we need to include the UITour-lib.js [1] in the web page. Simply download the UITour-lib.js from the central and do like <script src="https://sceenshots.firefox.com/js/UITour-lib.js> would work. Of course, we could minimize/concatenate the UITour-lib.js with other js files.

[1] http://searchfox.org/mozilla-central/source/browser/components/uitour/UITour-lib.js

[ianb]

Note, fixed in #3449, though not yet deployed (will be deployed in the version after 18)

[Fischer-L]

@ianb Now UITour supports https://screenshots.firefox.com on Nightly. Just tried to manually trigger show highlight on the Screenshots. Thanks for your help.