Open Bug 1130173 Opened 7 years ago Updated 3 years ago
Preview the current page in multiple window sizes at the same time
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
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.
Tying this to device profiles for emulation should be interesting. But definitely a cool feature!
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!
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
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.
Assignee: nobody → jryans
Status: NEW → ASSIGNED
Duplicate of this bug: 971692
Whiteboard: [devtools-ux] → [rdm-v2]
Assignee: jryans → nobody
Status: ASSIGNED → NEW
You need to log in before you can comment on or make changes to this bug.