Media Query Visualizer in Responsive Design Mode
Categories
(DevTools :: Responsive Design Mode, enhancement, P3)
Tracking
(Not tracked)
People
(Reporter: jryans, Unassigned)
References
(Blocks 1 open bug)
Details
(Whiteboard: [rdm-v2])
Attachments
(4 files)
Reporter | ||
Comment 1•11 years ago
|
||
Reporter | ||
Comment 2•11 years ago
|
||
Reporter | ||
Comment 3•11 years ago
|
||
Comment 4•11 years ago
|
||
Updated•10 years ago
|
Updated•10 years ago
|
Reporter | ||
Updated•10 years ago
|
Reporter | ||
Updated•10 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Reporter | ||
Comment 5•9 years ago
|
||
Comment 6•9 years ago
|
||
Comment 8•9 years ago
|
||
Reporter | ||
Updated•8 years ago
|
Reporter | ||
Updated•8 years ago
|
Updated•7 years ago
|
Updated•6 years ago
|
Comment 11•5 years ago
|
||
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•5 years ago
|
||
Please see some relevant discussion here: https://discourse.mozilla.org/t/show-media-queries-in-responsive-design-view/50187
Updated•5 years ago
|
Comment 13•4 years ago
|
||
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•4 years ago
|
||
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
Updated•3 years ago
|
Comment 15•1 year ago
|
||
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•1 year ago
|
||
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
Description
•