Move Preview controls to edit page

https://www.drupal.org/project/same_page_preview/issues/3343006 ✨ [meta] Address accessibility concerns Active

It looks the path of least resistance is to just make sure a theme handles these controls properly

• Give the preview controls a background that contrasts from the theme so that the links are readible
• Maybe make sure the content and the preview controls don't compete for the same space.

If we went further and tried to push the controls into the dialog's header / title bar ...

...we'd likely have to create our own renderer.

I'm going to start experimenting with some concepts here as this has potential overlap with 📌 Provide a button to open preview in new page Active which I had in my queue next.

Personally, I think that moving all of the controls (except for the toggle button) into the off-canvas dialog makes the most sense conceptually. The toggle exposes the preview pane, and then everything else is acting on the iframe.

Did some dev tools prototyping of what this would look like:

I anticipate that the hard part there would be the refresh button since that is technically an action of the edit form. But if we think that is the right concept, let's find out if we can make it happen.

I'll let @shaal opine here too.

I like a 2 action approach
When the preview is open:

• The preview button at the bottom of the edit page refreshes the preview
• The preview button in the dialog refreshes the preview.

When the preview is closed:

• The preview button behaviors as if same_page_preview was not enabled. It opens the preview in a new tab.

And it would be awesome if both the refresh and new tab buttons were actually icons.

I believe this now covers most use cases for existing content, now working through some of the edge cases with the node add use case.

I'll take a peek.

I think I'm seeing some of the same edge cases in this demo of the recent work: https://www.loom.com/share/69c968c6a4cc4194832a4e1f6207d91b

Manually tested. It's looking very good. Can we merge this and handle anything additional in the next issue?

Finished the refactoring I was hoping to do and fixed a few related bugs. Thanks for keeping this one open - I think this will make the JS easier to work with in the future.

Merged. We can close this one now.