Note on the designs:
Illustration and copy might be subject to change but will fit within the same dimensions

@nayoub Can you attach the SVG for the image here?

Yes, thanks @Samwilson. Here's the .svg illustration:

Change 799258 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Realtime Preview onboarding popup

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

@nayoub Thanks! Sorry, I just realised we need an RTL version as well.

I experimented with using MediaWiki-extensions-GuidedTour to produce this, because as @dmaza pointed out in Slack it is designed for this sort of thing.

The single-popup tour I made looks like this:

It seems it'd be possible to customize the HTML of the small sentence text to include an image, but it'd be below the 'Realtime Preview' header. That might be fine, but a bigger blocker is the fact that GuidedTour doesn't allow for a user to dismiss it (T52847).

So I'll finish polishing the above patch (get it to remember the popup state) and it'll be good to go.

Change 799686 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Add guided tour for Realtime Preview

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

Change 799686 abandoned by Samwilson:

[mediawiki/extensions/WikiEditor@master] Add guided tour for Realtime Preview

Reason:

GuidedTour doesn't yet do what we need.

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

Hi @Samwilson, here's the svg for RTL version of the illustration:

Great, thanks! I've added it to the above patch.

looks good :)

Change 799258 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime Preview onboarding popup

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

• The pulsating UI should disappear after the user expands the popover, and either:
  • Clicks outside of the explanation popover
  • Clicks again on the preview button

By "disappear" I assume we mean it won't appear next time you edit a page. In that case, this does not work for these two actions. It only works if you click "Okay, got it". @NRodriguez Is that OK?

@nayoub The illustration is different to the one we are using in the Beta features page. Is that OK?

Acceptance Criteria

• The pulsating UI should appear upon first exposure to the functionality

Yes.

• The pulsating UI should disappear after the user expands the popover, and either:
  • Clicks outside of the explanation popover
  • Clicks "okay got it"
  • Clicks again on the preview button

See comments above (T294589#7982342). I am moving this along so @NRodriguez and @nayoub can answer in their own time.

When you click "Okay, got it" it sets a variable in the browser's local storage. If you want to see the pulsating UI again, just use the browser's devtools to delete that variable as shown in this screenshot:

• The preview box should open after the user clicks on Preview

Yes. Doing so will also open the Realtime Preview pane at the same time.

• The pulsating ui explanation modal should close IF the user clicks anywhere outside of it

Yes. But it does not disappear permanently and can be reopened.

I have tested skins Vector 2022, Vector Legacy, Minerva, MonoBook and Timeless. I also tested an RTL language in all those skins.

I mostly tested on Firefox, but briefly tested on Chromium and Safari 14 and 15.

Note that I can only test this on enwiki beta (no other beta wikis). I did not test its interaction with gadgets.