1602648 - Visualize the vertical lines of media queries in the viewport when on the inspector

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Karl Dubost💡 :karlcow]

We can currently visualize

• Flexbox
• Grid

This is wonderful and very useful. It would be cool to be able in the inspector to visualize the vertical lines of the media queries (just on request).

1. The inspector would know there are media-queries in the CSS.
2. The inspector could draw vertical lines (once an option/button is selected), the same way we show grids.

Issues:

• Clutter with a lot of different styles of visualizations

Rationale:

It might be useful for designers to be able to see

• when/where the full page is behaving when reaching one of these lines by resizing
• visualize the position of the line moving when the media query is edited in the CSS
• helps to understand that the rules active in the inspector pertain to a certain media query

It could be useful for webcompat to be able to discover

• a breaking layout when a box is bigger than the intended mediaquery and pushes everything around.

(Not a priority)

Comment 1

[Patrick Brosset <:pbro>]

Hey Martin, we have a media-query visualization bug in our roadmap already, don't we? If so, do you think this is the same as this one?
In any case, I wanted to make sure you had this on your radar.

Comment 2

[Martin Balfanz [:mbalfanz]]

The problem that this bug is trying to solve is the same, but the approach is a bit different. Other bugs like bug 1031585 were more looking into a Chrome-like solution where media queries are displayed in a way to quickly resize the viewport.

I think both are interesting and should be explored more. And yes, feedback about this is recurring so we have it on the roadmap (bug 1491881).

Comment 3

[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 4

[Patrick Brosset <:pbro>]

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