Show media queries in Responsive Design View

maurusrv · March 24, 2021, 8:09pm

this is duly noted. @nchevobbe replied some directions in the mozilla chat as to how i can setup, and as im really new, will try to familiarize with the workflow first. thanks for guidance.

sebastianz · April 5, 2021, 10:27pm

For reference, @maurusrv created an issue for this to discuss its UX:

github.com/firefox-devtools/ux

Responsive Design Mode - Media Query Visualizer

opened 07:15AM - 03 Apr 21 UTC

maurusrv

# Goal Add a media query visualizer on firefox dev tools summary from the d…iscourse 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](https://discourse.mozilla.org/t/show-media-queries-in-responsive-design-view/50187) ### BugZilla [Media Query Visualizer in Responsive Design Mode](https://bugzilla.mozilla.org/show_bug.cgi?id=1031585) [Visualize the vertical lines of media queries in the viewport when on the inspector](https://bugzilla.mozilla.org/show_bug.cgi?id=1602648) ## 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

And btw., @frode, note that there’s already a feature request for showing the viewport dimensions when resizing the window.

Sebastian

Anke7 · October 6, 2022, 1:12pm

Wow, I see this discussion has been going on for a while and Chrome is going ahead. I’d like to be able to see media queries in responsive design view as well, not only to check my layouts but also to check which of my integrated framework CSS files may use other queries.

stratboy · March 29, 2023, 7:52am

Me too! I’d really like to see this function implemented.

Also, another borrowed from Edge instead: css selector profiler!