no media-query rules in Style-side panel
----------------------------------------
Key: CB-85
URL: https://issues.apache.org/jira/browse/CB-85
Project: Apache Callback
Issue Type: New Feature
Components: weinre
Reporter: Patrick Mueller
Assignee: Patrick Mueller
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:
{noformat}
.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. */
}
}
{noformat}
*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|https://gist.github.com/1089529].
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|https://gist.github.com/1089611].
"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.
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:
https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
