Open
Bug 1031585
Opened 9 years ago
Updated 1 year ago
Media Query Visualizer in Responsive Design Mode
Categories
(DevTools :: Responsive Design Mode, enhancement, P3)
DevTools
Responsive Design Mode
Tracking
(Not tracked)
NEW
People
(Reporter: jryans, Unassigned)
References
(Blocks 1 open bug)
Details
(Whiteboard: [rdm-v2])
Attachments
(3 files)
Several tools now give a visual / interactive breakdown of the media queries used on a page: * Chrome Canary * Response Inspector extension for Chrome I'll attach screenshots. These let you see the different width ranges that will trigger CSS changes to be applied as window size changes. Canary's is also helpfully interactive: clicking on a bar sets the width to the nearest end of that range, and clicking the same bar again jumps to the other end of the range.
Reporter | ||
Comment 1•9 years ago
|
||
Reporter | ||
Comment 2•9 years ago
|
||
Reporter | ||
Comment 3•9 years ago
|
||
Actually, the Responsive Inspector extension also resizes the window if you click a range bar, although only to a single size per bar.
Comment 4•9 years ago
|
||
There are lots of nice things about it: the color scheme, etc. hate the res-zing but they don't really have a responsive design view to drive like we do ( except in Canary ) The thing I like from chrome is that the visual bars line up with the viewport sizes. The thing I *don't* like there and think is srsly weird is it is a sub-mod of the emulation feature, you can't just get it by itself.
Updated•9 years ago
|
OS: Mac OS X → All
Hardware: x86 → All
Updated•9 years ago
|
Severity: normal → enhancement
Reporter | ||
Updated•8 years ago
|
Blocks: multiple-viewports-v1
Reporter | ||
Updated•8 years ago
|
Whiteboard: [devtools-ux]
Updated•8 years ago
|
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
Updated•8 years ago
|
Blocks: emulation-devtools
Reporter | ||
Comment 5•8 years ago
|
||
We should discuss the UX of this in depth before getting too far down any particular path. The multiple viewport project is also on the horizon, which would likely impact the UX we choose here. For some additional background, I did a survey of responsive design tools and MQ inspectors a while back (needs to be updated for recent Chrome changes, etc.): https://docs.google.com/document/d/1j21pXdZOCrBgwT_LnMvkI8LG5Y47N0xpXRU-S3mVrks/edit
Comment 6•8 years ago
|
||
I've started the visual design of the media query displays here: http://jsfiddle.net/ntim/kbvva20o/ For now, this visual design just assumes a Chrome-like integration with the responsive mode. I'd have to see how the multiple viewports stuff works before actually integrating the media query stuff in it.
Comment 8•8 years ago
|
||
Unassigning until we have a concrete plan.
Assignee: ntim.bugs → nobody
Status: ASSIGNED → NEW
Reporter | ||
Updated•7 years ago
|
Whiteboard: [devtools-ux] → [rdm-v2]
Reporter | ||
Updated•7 years ago
|
No longer blocks: multiple-viewports-v1
Updated•5 years ago
|
Product: Firefox → DevTools
Updated•4 years ago
|
Priority: -- → P3
Comment 11•4 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•4 years ago
|
||
Please see some relevant discussion here: https://discourse.mozilla.org/t/show-media-queries-in-responsive-design-view/50187
Updated•4 years ago
|
Summary: Visual and interactive media queries → [meta] Media Query Visualizer in Responsive Design Mode
Comment 13•3 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?
Flags: needinfo?(nchevobbe)
Comment 14•3 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
Flags: needinfo?(nchevobbe)
Keywords: meta
Summary: [meta] Media Query Visualizer in Responsive Design Mode → Media Query Visualizer in Responsive Design Mode
Updated•1 year ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•