Show information about media query in Styles Panel

[fbugissues]

Originally reported on Google Code with ID 5196

Currently there is no possibility to view the media query of a CSS-Element in the Styles
Panel.
I suggest to add this information to the file and line number data.

Please see the attached files for further description.

Reported by annapittl87 on 2012-01-31 21:15:46

---

- _Attachment: vorschlag.png
_ - _Attachment: vorschlag_neu.png
_

[fbugissues]

Test Case

Reported by annapittl87 on 2012-01-31 21:18:49

---

- _Attachment: [issue5329.html](https://storage.googleapis.com/google-code-attachments/fbug/issue-5196/comment-3/issue5329.html)_

[fbugissues]

This is related to issue 1856 and issue 3195.
Note, that there is not that much space to display the @media line under the source
link. Maybe the display shown in comment 5 of issue 1856 could also be used for the
Style side panel?

Sebastian

Reported by sebastianzartner@gmx.de on 2012-02-01 06:43:19

• Status changed: Triaged
• Labels added: Type-Enhancement, css, Test-case-available, 1.9.1

[fbugissues]

Hi,
Thanks, I found #1717 during my research for the new issue. Anyway not #3056.
#1717 has a similar approach, but what I suggest and miss is the quick availability
of viewing the corresponding media query which is applied when inspecting an element.
#3056 suggests to add the possibility to switch between media types. Actually i do
not request to switch between them (but i like #3056 of course ;-).

What i suggest here is the possibility to have a quick overview on which media query
type is applied.

@media screen and (min-width: 480px)
@media screen and (min-width: 600px)
@media screen and (min-width: 800px)
...

Reported by annapittl87 on 2012-02-01 07:21:07

[fbugissues]

> Thanks, I found #1717 during my research for the new issue. Anyway not #3056.
Issue 3195 is mentioned in comment 6 of issue 1856.

> Actually i do not request to switch between them
I know. Issue 3195 and this one do not depend on each other. Just wanted to mention
it, because it's also related to media queries.

> What i suggest here is the possibility to have a quick overview on which media query

> type is applied.
That's clear. We just need to create an appropriate UI for that.

Sebastian

Reported by sebastianzartner@gmx.de on 2012-02-01 09:04:44

[fbugissues]

Yeah, right. I know my screenshot does not show a satisfying solution to that.
I think it would be ok to have the text being trimmed and show the whole media query
as hover.
What about that?

Reported by annapittl87 on 2012-02-01 09:09:53

[fbugissues]

Sounds fine to me.

Reported by sebastianzartner@gmx.de on 2012-02-01 11:44:40

[fbugissues]

Reported by sebastianzartner on 2012-08-01 13:22:49

• Labels added: style
• Labels removed: css

[fbugissues]

I would like to see the media queries displayed in the css section inline with the selectors
they effect so that you can see the difference with what has been overwritten, e.g.,
the original body css with appropriately crossed out declarations and then the new
one, @media screen and (min-width: 768px) body.

body

@media screen and (min-width: 768px) body

Either that or at least group rules under shared media query headings. As long as you
can compare the original declarations with the new ones you will have the same troubleshooting
functionality we do with selectors. You don't always just need to know what the current
css is, but also what it was before the media query was activated. What was the change.

Reported by gregory.houston on 2012-08-26 05:48:59

[fbugissues]

by "css section" in my comment above I am referring to the style panel.

Reported by gregory.houston on 2012-08-26 05:55:08

[fbugissues]

Please note that the styles inside a media query are already displayed correctly within
the Style side panel. The only information that is still missing is the media query
itself.

Also the rules are sorted descending by specificity. This order must be kept. I.e.
rules can't be grouped by media query but the media query affecting a rule must be
displayed for each one individually. See the screenshot of the built-in dev tools for
comparison.

Furthermore size changes of a page must be recognized automatically in order to update
the Style side panel contents according to applying media queries. Though that might
be covered in another issue.

Also to have a clear test case for this:
1. Open Firebug on http://www.initializr.com/try
2. Switch to the HTML panel and there to the Style side panel
3. Resize the page to a width higher than 768 pixels

=> The rule "#main aside" incl. its media query "only screen and (min-width: 768px)"
should be shown.

Sebastian

Reported by sebastianzartner on 2012-08-27 05:44:04

---

- _Attachment: [mediaQueriesInBuiltInDevTools.jpg](https://storage.googleapis.com/google-code-attachments/fbug/issue-5196/comment-12/mediaQueriesInBuiltInDevTools.jpg)_

[fbugissues]

Reported by sebastianzartner on 2013-05-24 06:53:10

• Labels added: priority-high