Details
-
New Feature
-
Status: Closed
-
Major
-
Resolution: Won't Fix
-
None
-
None
-
None
Description
from https://github.com/phonegap/weinre/issues/13
eonlepapillon opened this issue July 18, 2011
In the Element tab, in the Computed Styles / Styles side panel you don't see css rules with are defined in a media rule.
Example:
.test{
color: black; /* this one is visible in the Styles side panel */
}a
@media only screen and (min-width: 768px){
.test{
color: hotpink; /* this rule isn't visible in the Style side panel. */
}
}
pmuellr commented July 18, 2011
Will need to do some research to figure out how to find and test these.
Put a html test case here.
Note that Real Web Inspector, assuming you're running on a laptop/desktop, shows both rules in the "Matched CSS Rules", though you don't get any kind of indication that the winning rule (red) came from a media rule. Except that you do get a pointer to the css source url / line number; we can't do that in weinre.
eonlepapillon commented July 18, 2011
I put an other case here.
"we can't do that in weinre." - You can't show the winning rule or show the source url ans line number?
pmuellr commented July 18, 2011
thanks!
Just did a quick check in Real Web Inspector; put "document" in the Scripts Watch Expressions to explore it. I see the media rules are actually part of document.styleSheets.rules, they're just a different type - CSSMediaRule instead of CSSStyleRule. I'm guessing weinre ignores these.
It looks like it should be straight-forward to fix. CSSMediaRules instances have a property cssRules, which contain ... a CSSRuleList. Should probably just look for that property in all rules, and recursively add CSSStyleRule instances to the set of CSS rules we display. Or perhaps Web Inspector uses some other protocol to handle media rules, which I'm not using right now - or using incorrectly.
Seems like it would be really nice to know the actual media text (eg "only screen and (min-width: 768px)"), and place that in the display for the rule - maybe grayed, at the top, or something. Not much I can do about it in weinre, I don't think, but if you think that might be useful, post a bug on Web Inspector - http://webkit.org/new-inspector-bug
pmuellr commented July 21, 2011
> "we can't do that in weinre." - You can't show the winning rule or show the source url ans line number?
Sorry, I missed this bit in your comment before.
The source URL and line number are not available from the DOM. Real Web Inspector gets these via it's internal APIs, which I don't have access to (they aren't available). Nothing for me to show.
pmuellr commented July 21, 2011
Made an initial stab, saved in branch issue/13.
Right now, I recursively process cssrules, which means the media rules now have their nested rules processed, so the rules in media sections actually show up.
Problem is, the media rules themselves are not being taken into account, so what you see in the styles panel is that all of the media-specific rules seem to be "applicable".
Will need to do more research. Do I need to interpret the css media rules myself - I hope not. Need to check to see what Web Inspector itself is doing, though it seems likely it may be relying on some internal API.
eonlepapillon commented July 21, 2011
> "we can't do that in weinre." - You can't show the winning rule or show the source url ans line number?
>
> Sorry, I missed this bit in your comment before.
>
> The source URL and line number are not available from the DOM. Real Web Inspector gets these via
> it's internal APIs, which I don't have access to (they aren't available). Nothing for me to show.
I didn't understand what the problem was. I get it now 
.
Is there a way I can help? With the research or so? I'm a programmer, but not in Java.