You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cordova.apache.org by "Patrick Mueller (Created) (JIRA)" <ji...@apache.org> on 2011/11/29 18:43:40 UTC
[jira] [Created] (CB-85) no media-query rules in Style-side panel
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
[jira] [Commented] (CB-85) no media-query rules in Style-side panel
Posted by "Bruce Bowman (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/CB-85?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13481697#comment-13481697 ]
Bruce Bowman commented on CB-85:
--------------------------------
Patrick - In Amsterdam, you and I were talking about this issue, I think with Brian Leroux, and he had a suggestion for you that you seemed to think was promising. Do you remember that? We still have people reporting this "bug" when using weinre with Adobe Edge Inspect (Shadow) so still interested in seeing some progress on getting it fixed.
Thanks!
Bruce
Edge Inspect product manger
> no media-query rules in Style-side panel
> ----------------------------------------
>
> Key: CB-85
> URL: https://issues.apache.org/jira/browse/CB-85
> Project: Apache Cordova
> 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
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] [Commented] (CB-85) no media-query rules in Style-side panel
Posted by "Patrick Mueller (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/CB-85?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13481714#comment-13481714 ]
Patrick Mueller commented on CB-85:
-----------------------------------
Perfect timing. Brian recently started a new thread on the dev list titled "capabilities api" - which mentions the thing which sounded interesting - the matchMedia() function. This could be used to help identify WHICH media query wrapped css rules are "active" for a given element.
Not sure what the Web Inspector API looks like for this - it may be that we can put all this in the target, or it may be that we need to create a new API where the client starts asking the target which media rules are active or something.
The first case (can all be done on the target) will be MUCH, MUCH easier to implement compared to the second case. Since the second case involves making changes to the Web Inspector client - you don't want to go there if you can help it.
[1] https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia
> no media-query rules in Style-side panel
> ----------------------------------------
>
> Key: CB-85
> URL: https://issues.apache.org/jira/browse/CB-85
> Project: Apache Cordova
> 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
For more information on JIRA, see: http://www.atlassian.com/software/jira