first stab at handling css media rules
diff --git a/weinre.web/demo/weinre-demo-min.html b/weinre.web/demo/weinre-demo-min.html
index 95532ee..70f9199 100644
--- a/weinre.web/demo/weinre-demo-min.html
+++ b/weinre.web/demo/weinre-demo-min.html
@@ -27,6 +27,12 @@
<h1 style="color:red">this is a red h1</h1>
<p>Some text, <i>some italic text</i>, and <b>some bold text</b>.
+<p>You are using a
+<span class="size-test size-small">small</span>
+<span class="size-test size-medium">medium</span>
+<span class="size-test size-large">large</span>
+display.
+
<div id="metrics">a div</div>
<input id="button-clear-output" type="button" value="clear output">
diff --git a/weinre.web/demo/weinre-demo-pieces.html b/weinre.web/demo/weinre-demo-pieces.html
index 51b261f..a4a1bd2 100644
--- a/weinre.web/demo/weinre-demo-pieces.html
+++ b/weinre.web/demo/weinre-demo-pieces.html
@@ -63,6 +63,12 @@
<h1 style="color:red">this is a red h1</h1>
<p>Some text, <i>some italic text</i>, and <b>some bold text</b>.
+<p>You are using a
+<span class="size-test size-small">small</span>
+<span class="size-test size-medium">medium</span>
+<span class="size-test size-large">large</span>
+display.
+
<div id="metrics">a div</div>
<input id="button-clear-output" type="button" value="clear output">
diff --git a/weinre.web/demo/weinre-demo.css b/weinre.web/demo/weinre-demo.css
index ec6d164..5a08a00 100644
--- a/weinre.web/demo/weinre-demo.css
+++ b/weinre.web/demo/weinre-demo.css
@@ -25,4 +25,26 @@
#button {
font-size: 150%;
+}
+
+.size-test {
+ display: none;
+}
+
+@media only screen and (min-width: 800px) {
+ .size-large {
+ display: inline;
+ }
+}
+
+@media only screen and (min-width: 400px) and (max-width: 799px) {
+ .size-medium {
+ display: inline;
+ }
+}
+
+@media only screen and (max-width: 399px) {
+ .size-small {
+ display: inline;
+ }
}
\ No newline at end of file
diff --git a/weinre.web/demo/weinre-demo.html b/weinre.web/demo/weinre-demo.html
index 5c93023..b9cea09 100644
--- a/weinre.web/demo/weinre-demo.html
+++ b/weinre.web/demo/weinre-demo.html
@@ -26,6 +26,12 @@
<h1 style="color:red">this is a red h1</h1>
<p>Some text, <i>some italic text</i>, and <b>some bold text</b>.
+<p>You are using a
+<span class="size-test size-small">small</span>
+<span class="size-test size-medium">medium</span>
+<span class="size-test size-large">large</span>
+display.
+
<div id="metrics">a div</div>
<input id="button-clear-output" type="button" value="clear output">
diff --git a/weinre.web/modules/weinre/target/CSSStore.scoop b/weinre.web/modules/weinre/target/CSSStore.scoop
index 5d7575a..ceb5b91 100644
--- a/weinre.web/modules/weinre/target/CSSStore.scoop
+++ b/weinre.web/modules/weinre/target/CSSStore.scoop
@@ -41,6 +41,25 @@
return styleObject
//-----------------------------------------------------------------------------
+method _addRule(node, cssRule, bucket)
+
+ if (_elementMatchesSelector(node, cssRule.selectorText)) {
+ var object = {}
+
+ object.ruleId = this._getStyleRuleId(cssRule)
+ object.selectorText = cssRule.selectorText
+ object.style = this._buildMirrorForStyle(cssRule.style, true)
+ bucket.push(object)
+ }
+
+ if (cssRule.cssRules) {
+ for (var i=0; i<cssRule.cssRules.length; i++) {
+ this._addRule(node, cssRule.cssRules[i], bucket)
+ }
+ }
+
+
+//-----------------------------------------------------------------------------
method getMatchedCSSRules(node)
var result = []
@@ -50,16 +69,7 @@
if (!styleSheet.cssRules) continue
for (var j=0; j<styleSheet.cssRules.length; j++) {
- var cssRule = styleSheet.cssRules[j]
-
- if (!_elementMatchesSelector(node, cssRule.selectorText)) continue
-
- var object = {}
-
- object.ruleId = this._getStyleRuleId(cssRule)
- object.selectorText = cssRule.selectorText
- object.style = this._buildMirrorForStyle(cssRule.style, true)
- result.push(object)
+ this._addRule(node, styleSheet.cssRules[j], result)
}
}
