1031585 - Media Query Visualizer in Responsive Design Mode

Status: NEW

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

Description

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

Several tools now give a visual / interactive breakdown of the media queries used on a page:

* Chrome Canary
* Response Inspector extension for Chrome

I'll attach screenshots.

These let you see the different width ranges that will trigger CSS changes to be applied as window size changes.

Canary's is also helpfully interactive: clicking on a bar sets the width to the nearest end of that range, and clicking the same bar again jumps to the other end of the range.

Comment 1

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

Attachment: Chrome 38 Screenshot

Comment 2

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

Attachment: Chrome Responsive Inspector extension

Comment 3

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

Actually, the Responsive Inspector extension also resizes the window if you click a range bar, although only to a single size per bar.

Comment 4

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

There are lots of nice things about it: the color scheme, etc. hate the res-zing but they don't really have a responsive design view to drive like we do ( except in Canary )

The thing I like from chrome is that the visual bars line up with the viewport sizes. The thing I *don't* like there and think is srsly weird is it is a sub-mod of the emulation feature, you can't just get it by itself.

Comment 5

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

We should discuss the UX of this in depth before getting too far down any particular path.  The multiple viewport project is also on the horizon, which would likely impact the UX we choose here.

For some additional background, I did a survey of responsive design tools and MQ inspectors a while back (needs to be updated for recent Chrome changes, etc.):

https://docs.google.com/document/d/1j21pXdZOCrBgwT_LnMvkI8LG5Y47N0xpXRU-S3mVrks/edit

Comment 6

[Tim Nguyen :ntim]

I've started the visual design of the media query displays here: http://jsfiddle.net/ntim/kbvva20o/

For now, this visual design just assumes a Chrome-like integration with the responsive mode. I'd have to see how the multiple viewports stuff works before actually integrating the media query stuff in it.

Comment 8

[Tim Nguyen :ntim]

Unassigning until we have a concrete plan.

Comment 11

[Razvan Caliman [:rcaliman]]

Attachment: media query visualization in Chrome DevTools - Responsive Design.jpg

For reference, I attached a screenshot of Chrome's existing approach to visualizing media queries:

• gray bars = preset dimensions (phone / tablet / laptop, etc)
• color bars = media queries picked-up from the applied stylesheets

A video about how to enable media query visualization in Chrome:
https://www.youtube.com/watch?v=dPU5xGty0tE

Comment 12

[Patrick Brosset <:pbro>]

Please see some relevant discussion here: https://discourse.mozilla.org/t/show-media-queries-in-responsive-design-view/50187

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

The meta keyword is there, the bug doesn't depend on other bugs and there is no activity for 12 months.
:nchevobbe, maybe it's time to close this bug?

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

let's keep this without the meta keyword.
If we ever get to this, we might create blockers and re-set this as a meta

Comment 15

[Victoria Wang [:victoria]]

Attachment: Mockup from 2020

Just attaching a design from 2020 that I still like :)

It was an attempt to design a clearer visualization with labels and outlines that make it look more like the edge of a page. From figma: https://www.figma.com/file/HJisuhuhx3T9cDRVO6jYHN/media-queries?type=design&node-id=1-7&mode=design&t=u67oVgOCHcKmT7rQ-0

More UX discussion in this ticket.

Comment 16

[Sebastian Zartner [:sebo]]

And when you mention your mockup (which I also still like :-) ), I want to point out my [notes about UI and UX again](https://github.com/firefox-devtools/ux/issues/135#issuecomment-813674528, as well. Just so they don't get lost, I copied them over.

Viewport resizing

As mentioned by several people on Discourse, it should be possible to quickly test edge cases. I.e. there should be an easy way to resize not just to the exact media query value but also one or a few pixels beyond it.

This could be done by allowing the author to click on different sides of the lines drawn within the bars. And, of course, there should be some indication on what will happen when hovering the sides.

Example:

You have a media query of (max-width: 1000px). Then the visualization would be a line at 500px from the center. Clicking at the right side of the line would resize the viewport to 1001px, clicking on the left side would resize it to 1000px. Hovering on one of the sides would indicate that the media query is (max-width: 1000px) (or (width <= 1000px)) and that clicking will cause the viewport to be resized to 1001px or 1000px, respectively.

List of all media queries

It can be quite hard to visually display all media queries. As mentioned in my previous comment, this is already done within the Media Queries side bar (which also includes media queries other than size queries like prefers-color-scheme, btw.).

Chrome's DevTools do this via a context menu option. This might be an option though isn't very discoverable. A better way to do that would probably be a button that shown when hovering the media query area. And clicking that button would open a sticky tooltip with all the related media queries.

Breakpoints visulization

Victoria's mockup already does a good job in visualizing the different breakpoints and areas covered by the media queries. There obviously need to be three bars for min, min-max, and max constraints. And authors should immediately understand what each of them means (which is covered in the mockups by the "min", "min-max", and "max" keywords). And hovering the areas should show the constraints.

There's one UX issue in regard of breakpoints that are close together. In those cases the areas on the bar are very small. One way to make it easier to inspect those breakpoints would be an option to display all breakpoints separately, meaning one bar would be displayed for each breakpoint.
This would also allow to display more information for each bar like the media query and the number of places within the code where that media query is used.
Downside of this is, if there are many breakpoints defined for the page, this also takes a lot of vertical space.

Also, the bars should be high enough to make it easy to click on them. The height in the mockups might be a little bit to small.

Highlight matching breakpoints

Not much to say about this other than that the whole areas they enclose should be highlighted and be distinguishable enough from the ones that don't match, of course.

Jump to source code

As mentioned above, this could be done via a tooltip listing the media queries within the style sheets. Each link should consist of the URL, line number, and row number of the media query. Clicking an entry jumps its definition within the Style Editor.

Cycle through breakpoints

I'm not sure whether "cycling through" breakpoints means to switch from one breakpoint to the next. If so, one way to do that would be to display two toggle buttons besides each bar, one for resizing the viewport to the next breakpoint, one to the previous breakpoint.

Question then is, whether they should also cycle through the edge cases as mentioned in "Viewport resizing" or if there should be an extra option for that.

Cycle through pre-determined widths

Again the question about "cycling through". Though I guess here it rather means allowing to switch between mobile, tablet, and desktop sizes like Chrome's DevTools do it.

The possibility to actually cycle through those different sizes could still be provided, of course.

Link with Media Queries sidebar

As mentioned earlier, the Style Editor already has a Media Queries side panel. The Media Query Visualizer is not meant to replace this feature but to complement it, as that panel lists also media queries unrelated to the viewport width.

It just needs to be ensured that both work together nicely.

Sebastian