#6800 Page Editor Walkthrough Modal

[mnholtz]

What does this PR do?

• Closes Page Editor walkthrough modal #6800
• Adds a Page Editor walkthrough modal with instructions for opening the Page Editor on the current page. This modal can be triggered from links in the Quickbar and the Mod Launcher footer.
• Also adds PageEditorWalkthroughModalView and PageEditorWalkthroughModalClose events

Demo

• Demo of the feature in draft is here: https://www.loom.com/share/ed5a86a64c5848cdb4431082c4c06eb3

• Final demo: https://www.loom.com/share/0460d74a100346faac50a43e6ac21803

Checklist

• Add tests
• Designate a primary reviewer @grahamlangford

[twschiller]

The modal approach is looking good.

• For the vertical height, you likely want to make the modal body scroll, but not the header/footer
• @BrandonPxBx: let's make sure to update the UX to refer to Chrome DevTools correctly/consistently. They are the "Chrome DevTools"/"DevTools": https://developer.chrome.com/docs/devtools/
• Let's make sure to run the copy through a grammar checker. E.g., "it's magic" should not have an apostrophe

Is there a reason we're using images for the shortcuts keys vs. using our Shortcut Keys component?:

pixiebrix-extension/src/sidebar/activateRecipe/ActivateModPanel.tsx

Line 117 in dd463f1

const ShortcutKeys: React.FC<{ shortcut: string | null }> = ({ shortcut }) => {

@BrandonPxBx a simpler shortcut is F12. Did we want to include that shortcut as well?

[grahamlangford]

QQ: Did you run the svgs through an optimizer?

[mnholtz]

@grahamlangford was having trouble getting typescript to recognize the webp format, so due to time constraints I'm going to use png's in place of the hefty svgs, see https://github.com/pixiebrix/pixiebrix-extension/actions/runs/6897518554/job/18765844476

Happy to discuss things I tried later if you'd like to dig in; I checked the tsconfig and experimented with webpage config as well

[twschiller]

Conditionally approved: see comment on splitting out the context script vs. walkthrough code: https://github.com/pixiebrix/pixiebrix-extension/pull/6894/files#r1396636873

[github-actions]

When the PR is merged, the first loom link found on this PR will be posted to #sprint-demo on Slack. Do not edit this comment manually.

[fregante]

This promise/controller setup should be reviewed, I see several issues with it:

1. modal can't throw because we control it, and it only calls .resolve, so no need for try/catch
2. The controller and the promise are doing the same thing (closing the modal), so they should be merged (e.g. registerWalkthroughModal should return the signal)
3. If showModal is managing the modal, why are its registration and abort not also handled by it?
4. AbortControllers aren't meant to be passed around, there should be one controller that allows for listening via the signal

I think this should look like:

- const controller = new AbortController();
- const modal = registerWalkthroughModal();
- showModal({ url: frameSource, controller });
- try {
-   await modal;
- } finally {
-   reportEvent(Events.PAGE_EDITOR_WALKTHROUGH_MODAL_CLOSE);
-   controller.abort();
- }
+ await showModal({ url: frameSource });
+ reportEvent(Events.PAGE_EDITOR_WALKTHROUGH_MODAL_CLOSE);