Response Design Mode Doesn't Persist

JustinNoel

Steps to reproduce:
Open a site in Orion -> Switch to Responsive Design Mode -> Swith to any other app -> Come back to Orion -> 😢 because the previously viewed site is no longer in Responsive Design Mode

Expected behavior:
I expect that a site will remain in Responsive Design Mode when I switch to another tab and back or when I come back to Orion after backgrounding it.

Orion, OS version; hardware type:
macOS 12.6
Orion Version 0.99.120.1-beta (WebKit 614.1.20)
2017 MacBook Pro 15", 16GB RAM

Image/Video:
<Copy/paste or drag and drop to upload images or videos (up to 20MB)>

JustinNoel

I figured out the real problem. Responsive Design Mode (RDM) works just fine between applications and tabs.

The problem is that it does not persist when using Hot Module Reloading during development.

See the attached video (that didn't capture my audio 😡).

You'll see I start in RDM, switch to Firefox, come back to Orion and I'm still in RDM.

However, when I save a file in Visual Studio Code that triggers RDM, Astro reloads the page as usual, but loses RDM.

This means I have to switch back to RDM after every code change. This is too cumbersome.

Vlad

JustinNoel What is hot module reloading?

JustinNoel

Vlad Hot Module Reloading (HMR) is a common part of a web developer's tooling.

Basically, your HTML, CSS, or JavaScript files are watched for any changes during development. When the browser loads the code for the first time, some JavaScript is injected that polls the server to ask if any changes have been made. I think this might actually be via a websocket. If there are changes, the browser reloads the page to show the new changes.

Vlad

JustinNoel I am not familiar with it and I can't expect the dev team to be (web development is not what we do). Make sure you have exact steps to reproduce (in the simplest possible way).

JustinNoel

@Vlad I totally understand.

I've used a video to document how y'all can replicate the workflow that many web developers have without needing to install tons of local tools.

https://customer-2haawx7cuvbfttcn.cloudflarestream.com/13f6e6c817335b134b1cf83bd54b8ab7/watch

Here's an overview of the steps:

Login in to a Github account in a Chromium based browser.
Visit https://gitpod.io
In Gitpod, choose to Sign In with your Github account
Vist https://astro.new
Click the "Open in Gitpod" option for the first Welcome to Astro (Just the Basics). sample.
Now, it gets too complicated to explain in text. The video shows everything necessary to reproduce the problem.

I hope this helps. If not, I'd be happy to do a live session with your team so all they have to do is debug in Orion while I do all the web site stuff.

tylerlovesorion

I came here trying to figure out why Orion kept exiting Responsive Design Mode. I like that I can see multiple size screens and I was hoping that I develop my site while being able to preview the effects of CSS changes at those different screen sizes - BUT because Orion just exits RDMode every time there's a change. 🙁

I can't really use it this way sad, it would be so awesome as Safari doesn't let you see all the sizes at once but Orion got that simple part right