Responsive Design Mode - Media Query Visualizer

[maurusrv]

Goal

Add a media query visualizer on firefox dev tools

summary from the discourse link

    Visualization of media query breakpoints
        Display spanning areas between breakpoints
        Highlight currently matching media queries
        Provide hints for displayed media queries
    Allow resizing to media query breakpoints
    Allow resizing to edge cases (i.e. media query breakpoint +/- 1px)
    Link breakpoints to media queries in Style Editor
    Synchronize this feature with the media query sidebar within the Style Editor

Bug / Request Documentation

Discourse

Show media queries in Responsive Design View

BugZilla

Media Query Visualizer in Responsive Design Mode
Visualize the vertical lines of media queries in the viewport when on the inspector

Implementation Plan from @nchevobbe

1. Add a new component (e.g. MediaQueryVisualizer) rendered below the Toolbar component
2. check how the style editor retrieves the list of media query (and react to any changes in media queries) https://searchfox.org/mozilla-central/rev/cc4a17cea338fe236626d838ca96e9bf6a775675/devtools/client/styleeditor/StyleEditorUI.jsm#1244-1248

• the function is called when media queries changed (and I think we also get an initial call with the existing media queries)
• this function is called because we do this: https://searchfox.org/mozilla-central/rev/cc4a17cea338fe236626d838ca96e9bf6a775675/devtools/client/styleeditor/StyleEditorUI.jsm#152-158
• so we would have to do something similar in https://searchfox.org/mozilla-central/rev/cc4a17cea338fe236626d838ca96e9bf6a775675/devtools/client/responsive/ui.js#406-409

3. one thing we might do early is add a preference that would be set to false so we can start adding work without making it visible until we have something we're happy with (i.e. something like https://searchfox.org/mozilla-central/rev/368607c4cd5be547021945e4ae60e8eb4365b3c4/browser/app/profile/firefox.js#2461)
   we'd need to create a decicated bug for that, that would block https://bugzilla.mozilla.org/show_bug.cgi?id=1031585

References

• we're using React to build the RDM UI, and things are defined here https://searchfox.org/mozilla-central/rev/cc4a17cea338fe236626d838ca96e9bf6a775675/devtools/client/responsive/components/App.js#398-435

Note

hi, let me know if this is the wrong place for documenting the current discussions and initial implementation plan for this feature. just wanted to put it in one place and make the conversation going. as suggested by @nchevobbe i will try checking the points under Implementation Plan and see how to work through it. thanks! -@maurusrv

[violasong]

Hi, thanks for filing this! Just for reference, here's a mockup I worked on last year. The goal was to try and make this more understandable at first glance than Chrome's version - thus the labels, only outlining half, and making it look more like the edge of a page. (figma file - feel free to clone)

I also did a survey to ask: "If Firefox were to have a media query tool, what would be the most important features?" Results:

[SebastianZ]

@violasong Thank you for providing the mockups and information! Can you also share the link to the survey results? And can you explain what the rank distribution means?

And just for reference, the Media Queries side panel within the Style Editor already covers listing all media queries (of the selected style sheet), resizing the viewport to match a certain breakpoint, highlighting breakpoints that match current viewport width, and jumping to breakpoint code in CSS source. And the RDM already allows to select between pre-determined viewport sizes.

That doesn't mean, though, that those features shouldn't be part of the media query visualizer. Having some more visual way for those features would definitely make them more discoverable and useful.

Sebastian

[violasong]

And can you explain what the rank distribution means?

It was a card sort question where users could choose up to 5 options and sort them in order of most useful. The bars on the right show higher rankings and the bars on the left show lower rankings. (For example, N/A was always the #1 ranking of those who chose that, so it only has a dark bar on the right)

I'm not sure about sharing the full results at the moment 🤔 (in the past, when DevTools had active PM/UX, sometimes we would want to be a bit careful about this) but here was the one other pertinent data point about this feature:

Do you currently use Chrome's Media Query tool?

[SebastianZ]

Just a bit of UI input regarding the different points of the survey and the feature list from Discourse:

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

[SebastianZ]

Thanks you for the explanation, @violasong! And I can understand the hesitation of sharing the full data.

Regarding Chrome's Media Query tool, I guess the large number of people not using it is mainly due to the feature being disabled by default and also because its UI is quite hard to understand.

Of course it's hard to say how many authors would actually use this feature if implemented in the Firefox DevTools (and whether the cost-benefit calculation is worth it). Though there is obviously a need for it, as the different requests over the years show. And with a good UX (and being enabled by default), I believe many website authors would use this feature frequently.

Sebastian

[violasong]

I discovered more goodies from the archives!

• This competitive review from 2015 by J. Ryan (Also mentioned on Bugzilla. The first screenshot has the stacked bars idea you mentioned)

• This recent GSoC proposal (which didn't get accepted) from our teammate Brad

CCing @tigleym and @martinbalfanz in case they have any extra info to add :)

[stratboy]

Yes of course, this feature would be absolutely useful!

[Ashvith10]

I would love to see this feature in Firefox, it is really difficult to toggle between different media queries. Is there any plugin at least for the time being to add this functionality?

[NickWoodward]

Yeah, I mean this is an absolute deal breaker for me. Being able to quickly resize over both sides of a breakpoint is essential

[MrKuzio]

How are things going with this feature? Any updates?

[violasong]

This project isn't in active development, but if there are any further activities they'll be posted on bugzilla.

[NickWoodward]

appreciate the feedback, but feel that's a mistake. this feature is single handedly why i won't develop with firefox.