GuidedTours: Add steps for site preview

[ehg]

Closes #5120

Now that we're able to preview an iframed view of the current site by clicking on the current 'site card'…

…we want to modify the main tour to include steps to preview a site. This has the benefit of showing people their sites early on after signup.

TODO:

• Bump tour version (not here)
• Deploy in line with ABtest date/percentage change PR GuidedTours: Update MVP tour variants to 15% each #5450 (not here)
• Decide what to do if no selectedSite is available
• Fix tests
• if the wait is over 2-3 seconds ... (e.g. when no site selected)
  • end the tour
  • add a debug() message
  • and maybe a tracks/MC stat
• enable conditional branching to keep the tour working even when in-Calypso preview is disabled, e.g. next: [ { 'config( 'preview-layout' )' : 'preview' }, { 'default': 'themes'} ]
• Check mobile widths

To test:

1. Go to http://calypso.localhost:3000/?tour=main
2. Check that the steps are positioned correctly, and the preview opens and closes
3. Check that it works on mobile widths
4. Go to http://calypso.localhost:3000/stats/day?tour=main (hopefully this will force all-sites mode) — check that the tour errors gracefully
5. DISABLE_FEATURES=preview-layout make run — check http://calypso.localhost:3000/?tour=main doesn't include the preview steps

Props @lsinger @mcsf

[ehg]

From @mcsf:

Feel free to revert the changes in the selector, but:

• /stats/day/mysite.wordpress.com/?tour=main works
• /?tour=main works
• /stats/day/?tour=main DOESN'T work

The reason #2 works is that it loads the Reader first, and tapping My
Sites after that will try to take the user to a specific site (to me at
least), whereas in #3 we explicitly go to My Sites with no site
selected, thus the sidebar has no site icon.

Also:

• wait.js: my testing shows that the switch to the Preview step is only
  'delayed' once or twice, but even so I decided to implement a rapidly
  growing delay as a defensive practice (e.g., in the Menus: Alignment issue with undo link in is-info notice after deleting menu #3 above, wait
  will keep trying indefinitely, but thanks to the growing delay that
  doesn't become a perf concern).
• That said, we could also set some break condition, like a hardcoded
  maximum delay (or even a function if we feel that need) after which
  wait stops trying.

[ehg]

Rebased.

[ehg]

Works well with responsive mode in Chrome for me! Nice.

[lsinger]

Works well with responsive mode

Yeah, I was quite surprised actually.

[lsinger]

Decide what to do if no selectedSite is available

Should we maybe just skip steps if the waiting function takes too long?

[ehg]

Should we maybe just skip steps if the waiting function takes too long?

We could end the tour if the wait is over 2-3 seconds, adding a debug() message and maybe a tracks/MC stat — so we can see when it happens while developing, and in production.

[lsinger]

We could end the tour if the wait is over 2-3 seconds

Seems better. Plus maybe a notice for the user.

[ehg]

LGTM. Squash and merge!

[lsinger]

@ehg checked on Firefox and Chrome on an Android device, I checked on Safari on an iPhone. All work fine.