1184710 - Synchronize inspection of viewports

Status: NEW

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

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

Once we have multiple viewports, we can synchronize inspecting and tweaking them all at the same from a single toolbox.

Since the toolbox today only understands connecting to one thing, the first step is to broadcast the commands from a toolbox to all viewports, but only process replies from one viewport.

While this sounds horribly broken, it does allow several key tools like inspector and style editor to affect all viewports without any other changes.

We'd likely disable tools that don't work in this special mode.

Current UX thinking is that this would be enabled by default, but there will be some way to disable it as well.  Disabling this would allow you to get back to a full toolbox for a single viewport.

After this step, we can improve more tools to get them working in this mode.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #0)
> Current UX thinking is that this would be enabled by default, but there will
> be some way to disable it as well.  Disabling this would allow you to get
> back to a full toolbox for a single viewport.

Are there instances you can think of where you would want a full toolbox for only one view?

I imagine that sometimes you might find a bug at certain sizes but not in others, but it might keep the UX cleaner to have the users close the windows they don't need while they're debugging that one view, and then have them reopen the other windows when they're done instead of having multiple toolboxes. Thoughts?

Comment 2

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

Sorry for missing this comment so long ago!

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #1)
> (In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #0)
> > Current UX thinking is that this would be enabled by default, but there will
> > be some way to disable it as well.  Disabling this would allow you to get
> > back to a full toolbox for a single viewport.
> 
> Are there instances you can think of where you would want a full toolbox for
> only one view?

In my mind, it's more about the shortcomings of the synchronized view: only certain tools like console and inspector would be available there, as it require some tweaks to each tool for them to still work correctly when synchronized, and there are some which would not even make since to synchronize at all.

So, there could be cases where someone wants to "re-focus" back to a single toolbox so that all tools are in accessible.  However, we could also make a decision that if you have more than one viewport on screen, they are just always synchronized, and to get out of that, you need to open a new tab or close viewports until there is only one.

It feels a bit hard to explain this "implementation detail" of sorts to the user.

> I imagine that sometimes you might find a bug at certain sizes but not in
> others, but it might keep the UX cleaner to have the users close the windows
> they don't need while they're debugging that one view, and then have them
> reopen the other windows when they're done instead of having multiple
> toolboxes. Thoughts?

Hmm, perhaps, it's hard for me say for sure. :) I think personally I would lean towards wanting to setup responsive design with the 2 - 4 viewport sizes I care about, and wouldn't want to keep close and opening them, since setting the right sizes can be cumbersome and frustrating.

So far, I had not imagined presenting multiple **toolboxes** at the same time, only viewports.  So, if you have multiple viewports but only a single toolbox, you can either have a synchronized toolbox connected to all of them, or toolbox connected to only one viewport.  It's technically possible to have multiple toolboxes available, but that sounds pretty tricky to manage and arrange as a user.