Show media queries in Responsive Design View

It would be useful to be able to display media queries in a similar way to Chrome. It really speeds up development, well it does for me, to be able to see any quickly toggle between them.

5 Likes

I’d love for us to add this too! Thanks for starting the discussion.
We actually have had this on file for years here : https://bugzilla.mozilla.org/show_bug.cgi?id=1031585 (and here too: https://bugzilla.mozilla.org/show_bug.cgi?id=1602648)

But knowing how laser focused we need to be (being a small team), it has never scored high enough on the importance scale that we got to dedicate time to do it.

In order to help move it forward, it would be awesome to start a discussion here with people around the following topics:

  • Why do you need this tool / what problems are you trying to solve with this tool?
  • Are there any problems with how Chrome DevTools does it?
3 Likes

If you use the style editor, there’s this feature that I added 3 years ago:

But yeah, it would be quite nice if this was visualised directly in the responsive design view.

1 Like

I like that it visualizes the breakpoints defined in CSS, but personally I have no use for the resize-on-click feature. Usually breakpoints are defined in-between common screen widths, so if a breakpoint is at 900px I probably want to test 768, 800px and 1024px instead, not a 900px width.

I would be more interested of having a visual “quick jump” for predefined widths (or viewport width+height) that lets me cycle between predefined sizes, regardless of what the site’s CSS defined.

I wonder if others feel differently.

1 Like

Jumping to the breakpoint size would be useful to me – but mostly by way of checking the sizes directly before and after the break. I always like to check the edge cases. I don’t rely on common sizes for my MQs, but I will sometimes check them from the existing “responsive” dropdown list.

I like that chrome provides a visualization of the sizes, so I can see the breakpoints as I resize my responsive frame – but I wish that interacted the queries themselves. Tying that to the existing media sidebar, so Tim’s example would work in either direction, would be pretty handy.

4 Likes

Being more a js than css developer I must admit that I never really knew what these lines mean in Chrome. I thought some kind of viewport, and I think when clicking on them and then having a viewport of say 900px was not really helpful. So I did not really use it.

But reading this now I see a point of having the declared breakpoints visible. This could be really handy. I often look up the declared breakpoints from my variables.scss.

Looks like I never really understood what the feature does in Chrome :upside_down_face: But if done right (good description, maybe onboarding), maybe just having meaning title mouseover description, then I see the point.

I would like to:

  • See visually the breakpoints defined for a page / site (so I do not have to search in the (foreign) source code). Definitely print out the values on mouseover or some other way (maybe inline on the line itself)
  • Still 90% test rather on real device viewports like Florens said
  • Sometimes, maybe 5% use case, test “unreal” edge case viewports like Miriam points out.

Thank you all for taking the time to share your experience and workflows.

What I’m hearing so far is the following:

  • Visualizing the breakpoints is a must have.
    • They should, however, be easy to understand at a glance.
    • Be clickable (to resize the viewport), as this is useful to some.
    • Perhaps link to the CSS in DevTools so people see where they’re coming from.
  • Being able to jump through common screen sizes is useful to some. Making sure our Responsive mode does have them pre-defined (or lets people define them) is good.

So, all in all, what Chrome DevTools does is good. It allows most of those things.

Sounds like replicating what’s in Chrome and improving from there would be the right thing to do for Firefox.

3 Likes

Yes indeed. Working from the Chrome implementation would be a good idea.

hello everyone
I was looking for contributing to a gsoc 2020 proposal related to responsive design mode of mozilla where goal of the project is to make a toggleable media query visualiser
I believe I can get this done
But the problem is that I do not know how to get this done in the Mozilla RDM codebase
Can anyone here please help me out with the same
If anyone can send me the solution to my email at:
ayushshanker23@gmail.com
It would be of great help

I second that this would be useful. The visual representation of media queries and clicking to toggle between them.

1 Like

Something that’s not directly connected to showing media queries, but would be useful when working with them, is to show viewport dimensions when dragging DevTools section to be smaller/bigger (like in Chrome).

Skjermbilde 2020-03-02 kl. 16.06.39

I think replicating Chrome’s implementation would be the right start too.
I made some mocks taking in the ideas from this discussion that I think would be a great help to boost workflow.


1 Like

For practically anyone who writes more css than JS, this feature is very important.
I also like the implementation of the styles in the filter to see the mediaquery but this practicality that exists in chrome helps a lot in speed for css development

1 Like