incubator-callback-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Patrick Mueller (Created) (JIRA)" <j...@apache.org>
Subject [jira] [Created] (CB-85) no media-query rules in Style-side panel
Date Tue, 29 Nov 2011 17:43:40 GMT
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

        

Mime
View raw message