@maurusrv Hi! If you want to contribute, I’d say you should first open an issue at https://github.com/firefox-devtools/ux/ to discuss how the actual UI for this feature should look like.
Reading through the comments here and looking at the Chrome DevTools implementation, the requirements for a feature like this seem to be:
- 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
If anyone sees something I am missing, please let me know.
Once the UI is clarified, implementation will happen in https://bugzil.la/1031585.
Sebastian
PS: Some people mentioned an option for switching between different pre-defined or custom viewport sizes. This feature is related but not the same as the media query inspection feature. And it is already available through the drop down list at the top right of the RDM.