1130173 - Preview the current page in multiple window sizes at the same time

Status: NEW

(DevTools :: General, defect)

Description

[Patrick Brosset <:pbro>]

The devtools responsivedesign view is handy, but it would be also handy to have several of them at the same time, set at different sizes, and most importantly, synced together, so that any change in the "master" window would also be made on the "child" windows.

This would make it very useful when, for example, tweaking the CSS with the devtools. If you're working on a responsive site, you'd immediately see the effect of a CSS change across all your design breakpoints, without having to constantly resize the window.

Here's an edited version of a discussion that happened on IRC#developers about this:

14:13 < pbrosset> long shot: if I wanted to have the current page displayed/sync across several viewports at the same time, so I 
                      could work on my responsive design  without having to constently resize, how would I go about doing it? I mean, 
                      is there something at the platform level we could do to make such a thing possible?
14:16 < seth> pbrosset: aren't there tools that will watch the filesystem and automatically refresh the page when you change something?
14:17 < pbrosset> seth: yes there are, but I think it'd be cool to have several synced 'views' of the same page in the same browser so 
                  that if I can tweak it with the devtools and see the changes 
14:18 < dholbert> pbrosset, I don't think that's possible, at least not with a single DOM
14:19 < dholbert> pbrosset, it used to be sort-of possible (that's how we did printing at one time -- we created a second distinct 
                  "presentation" of the same document, for printing)
14:19 < pbrosset> so, copying the DOM over to other windows would be the way to go
14:19 < dholbert> pbrosset, yup, you'd need to do something like that
14:20 < dholbert> pbrosset, there might exist some tools on the web that sort of let you do this, with together.js or something similar
14:21 < dholbert> pbrosset, though... probably only if you edit it via the web tool's UI, not via your local devtools
14:22 < pbrosset> I'm thinking about something that just copies the whole state of the DOM+style over to another window as soon as any 
                  of them change
14:22 < pbrosset> the other windows would probably be non-interactive though, just outputs
14:22 < dholbert> pbrosset, yup, seems handy
14:22 <@smaug> pbrosset: so for print preview (on non-OSX and printing) we clone the document and relevant stuff, and open a new tab 
               and show the result there
14:27 <@smaug> pbrosset: so for pp we create a static clone. So no scripting running, no animated gifs, no css/smil animations
14:28 <@smaug> you probably want something where everything runs normally

Comment 1

[Patrick Brosset <:pbro>]

CCing a few devtools people. Brian and Jeff: that's something I mentioned on today's meeting. Jan: we talked about this a while back.

Putting in place a prototype using JS to copy the DOM + style over on markup mutation events and stylesheet events sounds like something not too hard.

Comment 2

[Jan Keromnes [:janx]]

Tying this to device profiles for emulation should be interesting. But definitely a cool feature!

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

I've been experimenting with something similar to this recently.

I was curious what usage model seems more natural:

A. Single browser tab, multiple responsive design "viewports" at different sizes
B. Multiple browser tabs, single responsive design "viewport" per tab (each of a different size)

Option A seems the most logical to me as it would use screen space more efficiently, and you don't have to worry about manually positioning two (or more) browser tabs to look at them simultaneously.  However, option A, does create a "multiple things inside one tab" situation, which might be confusing?

I am not concerned about what is technically harder, I just want to gather ideas on the ideal UX.

Pinging Jeff and Patrick, but anyone else is of course welcome to chime in!

Comment 4

[Jeff Griffiths (:canuckistani) (:⚡︎)]

A, because the request from users ( and it makes sense to me ) is that they want to see the design updated live in multiple viewports simultaneously. See https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/5893510-multiple-sizes-in-responsive-design-mode

Comment 5

[Patrick Brosset <:pbro>]

I like A too, but B can work too if instead of tabs we had windows that you could arrange on your screen in order to see all viewports simultaneously. But I still prefer A.

Comment 7

[Tim Nguyen :ntim]

Attachment: WIP