[SCM] WebKit Debian packaging branch, debian/experimental, updated. upstream/1.3.3-9427-gc2be6fc
apavlov at chromium.org
apavlov at chromium.org
Wed Dec 22 15:54:38 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit daa4ac47f1dbaeadcee02d01ef3e1c66ebc19f19
Author: apavlov at chromium.org <apavlov at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Tue Nov 16 15:25:39 2010 +0000
2010-11-15 Alexander Pavlov <apavlov at chromium.org>
Reviewed by Pavel Feldman.
Web Inspector: Migrate frontend to the new CSS editing/retrieval API
https://bugs.webkit.org/show_bug.cgi?id=49492
Test: inspector/styles-new-API.html
WebCore:
* inspector/front-end/AuditRules.js:
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.selectorsCallback):
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.routine):
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback):
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun.styleSheetCallback):
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun.allStylesCallback):
(WebInspector.AuditRules.UnusedCssRule.prototype.doRun):
(WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun):
(WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.receivedImages):
* inspector/front-end/CSSStyleModel.js:
(WebInspector.CSSStyleModel.prototype.getStylesAsync):
(WebInspector.CSSStyleModel.prototype.getComputedStyleAsync):
(WebInspector.CSSStyleModel.prototype.getInlineStyleAsync):
(WebInspector.CSSStyleModel.prototype.setRuleSelector):
(WebInspector.CSSStyleModel.prototype.setRuleSelector.callback):
(WebInspector.CSSStyleModel.prototype.addRule):
(WebInspector.CSSStyleModel.prototype.addRule.callback):
(WebInspector.CSSStyleDeclaration):
(WebInspector.CSSStyleDeclaration.prototype.propertyAt):
(WebInspector.CSSStyleDeclaration.prototype.pastLastSourcePropertyIndex):
(WebInspector.CSSStyleDeclaration.prototype.newBlankProperty):
(WebInspector.CSSStyleDeclaration.prototype.insertPropertyAt):
(WebInspector.CSSStyleDeclaration.prototype.appendProperty):
(WebInspector.CSSRule):
(WebInspector.CSSProperty.prototype.get propertyText):
(WebInspector.CSSProperty.prototype.setText):
(WebInspector.CSSProperty.prototype.setDisabled):
(WebInspector.CSSStyleSheet):
(WebInspector.CSSStyleSheet.createForId):
(WebInspector.CSSStyleSheet.prototype.getText):
(WebInspector.CSSStyleSheet.prototype.setText):
* inspector/front-end/Settings.js:
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection.prototype.onpopulate):
(WebInspector.StylePropertiesSection.prototype.addNewBlankProperty):
(WebInspector.StylePropertiesSection.prototype._debugShowStyle.removeStyleBox):
(WebInspector.StylePropertiesSection.prototype._debugShowStyle):
(WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted):
(WebInspector.StylePropertyTreeElement.prototype):
(WebInspector.StylePropertyTreeElement.prototype.):
* inspector/front-end/inspector.css:
(.styles-section .properties li.not-parsed-ok):
(.styles-section .properties li.not-parsed-ok::before):
(.styles-section .properties .inactive):
LayoutTests:
* inspector/audits-panel-functional-expected.txt:
* inspector/elements-panel-styles-expected.txt:
* inspector/resources/styles-new-API.css: Added.
(html):
(body):
(/* comment before selector */body.main1/* comment after selector */):
(body.main2):
(body::after):
(h1):
* inspector/styles-new-API-expected.txt: Added.
* inspector/styles-new-API.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@72096 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 31fcb30..0436d2e 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,22 @@
+2010-11-15 Alexander Pavlov <apavlov at chromium.org>
+
+ Reviewed by Pavel Feldman.
+
+ Web Inspector: Migrate frontend to the new CSS editing/retrieval API
+ https://bugs.webkit.org/show_bug.cgi?id=49492
+
+ * inspector/audits-panel-functional-expected.txt:
+ * inspector/elements-panel-styles-expected.txt:
+ * inspector/resources/styles-new-API.css: Added.
+ (html):
+ (body):
+ (/* comment before selector */body.main1/* comment after selector */):
+ (body.main2):
+ (body::after):
+ (h1):
+ * inspector/styles-new-API-expected.txt: Added.
+ * inspector/styles-new-API.html: Added.
+
2010-11-16 Sheriff Bot <webkit.review.bot at gmail.com>
Unreviewed, rolling out r72082.
diff --git a/LayoutTests/inspector/audits-panel-functional-expected.txt b/LayoutTests/inspector/audits-panel-functional-expected.txt
index efb946b..57e0450 100644
--- a/LayoutTests/inspector/audits-panel-functional-expected.txt
+++ b/LayoutTests/inspector/audits-panel-functional-expected.txt
@@ -22,15 +22,15 @@ Tests audit rules.
should be moved to the document head in
audits-panel-functional.html
Remove unused CSS rules (4)
- 100% of CSS (estimated) is not used by the current page.
- Inline block #1: 100% (estimated) is not used by the current page.
+ 141B (100%) of CSS is not used by the current page.
+ Inline block #1: 29B (100%) is not used by the current page.
.unused
audits-style1.css
- : 100% (estimated) is not used by the current page.
+ : 43B (100%) is not used by the current page.
.some-style
- Inline block #2: 100% (estimated) is not used by the current page.
+ Inline block #2: 26B (100%) is not used by the current page.
.violation
audits-style1.css
- : 100% (estimated) is not used by the current page.
+ : 43B (100%) is not used by the current page.
.some-style
diff --git a/LayoutTests/inspector/elements-panel-styles-expected.txt b/LayoutTests/inspector/elements-panel-styles-expected.txt
index 4dcea84..32c6fce 100644
--- a/LayoutTests/inspector/elements-panel-styles-expected.txt
+++ b/LayoutTests/inspector/elements-panel-styles-expected.txt
@@ -28,12 +28,12 @@ display: none;
[expanded] .foo { (elements-panel-styles.css:33)
[expanded] .foo, .foo::before { (elements-panel-styles.css:15)
+content: "[before Foo]";
color: blue;
-content: '[before Foo]';
[expanded] .foo { (elements-panel-styles.css:10)
/-- overloaded --/ color: black;
-margin: 10px 0px 2px;
+margin: 10px 0 2px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 2px;
@@ -59,18 +59,18 @@ font-size: 14px;
color: red;
[expanded] .foo, .foo::before { (elements-panel-styles.css:15)
+content: "[before Foo]";
/-- overloaded --/ color: blue;
-content: '[before Foo]';
======== Pseudo ::after element ========
[expanded] .foo::after { (elements-panel-styles.css:28)
-content: '[after Foo 2]';
font-family: courier;
+content: "[after Foo 2]";
[expanded] .foo::after { (elements-panel-styles.css:24)
+/-- overloaded --/ content: "[after Foo]";
color: green;
-/-- overloaded --/ content: '[after Foo]';
diff --git a/LayoutTests/inspector/resources/styles-new-API.css b/LayoutTests/inspector/resources/styles-new-API.css
new file mode 100644
index 0000000..7b7b8e3
--- /dev/null
+++ b/LayoutTests/inspector/resources/styles-new-API.css
@@ -0,0 +1,26 @@
+html {
+ font-weight: 400;
+}
+
+body {
+ font-size: 12px;
+ foo: bar !
+
+ important /* !important property not recognized by WebCore */;
+ height: 100% !important;
+ colorz: "!important";
+ important:!important;
+ color: "badcolor" ! important /* good property with strange value */;
+}
+
+/* comment before selector */body.main1/* comment after selector */{/* comment */color: #F00BAA;zoo:moo /* not an !important unrecognized property */}/* comment */
+
+body.main2{background: green /* value !important comment */ !important /* no semicolon, very !important */}
+
+body::after {
+ content: "After body";
+}
+
+h1 {
+ height : 100% ; border: 1px solid; border-width: 2px; background-color : #33FF33; googles: abra; foo: .bar; -moz-goog: 1***; border-width: 0px;
+}
diff --git a/LayoutTests/inspector/styles-new-API-expected.txt b/LayoutTests/inspector/styles-new-API-expected.txt
new file mode 100644
index 0000000..8b6de00
--- /dev/null
+++ b/LayoutTests/inspector/styles-new-API-expected.txt
@@ -0,0 +1,341 @@
+Tests that InspectorCSSAgent API methods work as expected.
+
+H1
+
+
+=== Computed style property count for body ===
+OK
+
+=== Matched rules for body ===
+
+rule
+body: [user-agent]
+['display':'block'] @[undefined-undefined] style
+['margin-top':'8px'] @[undefined-undefined] style
+['margin-right':'8px'] @[undefined-undefined] style
+['margin-bottom':'8px'] @[undefined-undefined] style
+['margin-left':'8px'] @[undefined-undefined] style
+
+rule
+body: []
+['font-size':'12px'] @[5-21] active
+['foo':'bar !
+
+ important /* !important property not recognized by WebCore */' is-important non-parsed] @[26-104] active
+['height':'100% !important' is-important] @[109-133] active
+['colorz':'"!important"' non-parsed] @[138-159] active
+['important':'!important' non-parsed] @[164-185] active
+['color':'"badcolor" ! important /* good property with strange value */' is-important] @[190-259] active
+
+rule
+body.main1: []
+['color':'#F00BAA'] @[13-28] active
+['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[28-81] active
+
+rule
+body.main2: []
+['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[0-95] active
+['background-image':'initial' is-important] @[undefined-undefined] style
+['background-repeat-x':'initial' is-important] @[undefined-undefined] style
+['background-repeat-y':'initial' is-important] @[undefined-undefined] style
+['background-attachment':'initial' is-important] @[undefined-undefined] style
+['background-position-x':'initial' is-important] @[undefined-undefined] style
+['background-position-y':'initial' is-important] @[undefined-undefined] style
+['background-origin':'initial' is-important] @[undefined-undefined] style
+['background-clip':'initial' is-important] @[undefined-undefined] style
+['background-color':'green' is-important] @[undefined-undefined] style
+
+rule
+body.mainpage: []
+['text-decoration':'none'] @[5-27] active
+['badproperty':'1badvalue1' non-parsed] @[107-131] active
+
+=== Pseudo rules for body ===
+PseudoId=4
+
+rule
+body::after: []
+['content':'"After body"'] @[5-27] active
+
+=== Inherited styles for body ===
+Level=1
+
+rule
+html: [user-agent]
+['display':'block'] @[undefined-undefined] style
+
+rule
+html: []
+['font-weight':'400'] @[5-22] active
+
+=== Inline style for body ===
+
+style
+raw style
+['font-weight':'normal'] @[0-20] active
+['width':'85%'] @[21-31] active
+
+=== Attribute styles for table ===
+Attribute: width
+
+style
+raw style
+['width':'50%'] @[undefined-undefined] style
+
+=== All stylesheets ===
+
+StyleSheet: 'html {
+ font-weight: 400;
+}
+
+body {
+ font-size: 12px;
+ foo: bar !
+
+ important /* !important property not recognized by WebCore */;
+ height: 100% !important;
+ colorz: "!important";
+ important:!important;
+ color: "badcolor" ! important /* good property with strange value */;
+}
+
+/* comment before selector */body.main1/* comment after selector */{/* comment */color: #F00BAA;zoo:moo /* not an !important unrecognized property */}/* comment */
+
+body.main2{background: green /* value !important comment */ !important /* no semicolon, very !important */}
+
+body::after {
+ content: "After body";
+}
+
+h1 {
+ height : 100% ; border: 1px solid; border-width: 2px; background-color : #33FF33; googles: abra; foo: .bar; -moz-goog: 1***; border-width: 0px;
+}
+'
+
+rule
+html: []
+['font-weight':'400'] @[5-22] active
+
+rule
+body: []
+['font-size':'12px'] @[5-21] active
+['foo':'bar !
+
+ important /* !important property not recognized by WebCore */' is-important non-parsed] @[26-104] active
+['height':'100% !important' is-important] @[109-133] active
+['colorz':'"!important"' non-parsed] @[138-159] active
+['important':'!important' non-parsed] @[164-185] active
+['color':'"badcolor" ! important /* good property with strange value */' is-important] @[190-259] active
+
+rule
+body.main1: []
+['color':'#F00BAA'] @[13-28] active
+['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[28-81] active
+
+rule
+body.main2: []
+['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[0-95] active
+['background-image':'initial' is-important] @[undefined-undefined] style
+['background-repeat-x':'initial' is-important] @[undefined-undefined] style
+['background-repeat-y':'initial' is-important] @[undefined-undefined] style
+['background-attachment':'initial' is-important] @[undefined-undefined] style
+['background-position-x':'initial' is-important] @[undefined-undefined] style
+['background-position-y':'initial' is-important] @[undefined-undefined] style
+['background-origin':'initial' is-important] @[undefined-undefined] style
+['background-clip':'initial' is-important] @[undefined-undefined] style
+['background-color':'green' is-important] @[undefined-undefined] style
+
+rule
+body::after: []
+['content':'"After body"'] @[5-27] active
+
+rule
+h1: []
+['height':'100%'] @[5-20] active
+['border':'1px solid'] @[21-39] active
+['border-width':'2px'] @[40-58] inactive
+['background-color':'#33FF33'] @[59-86] active
+['googles':'abra' non-parsed] @[87-101] active
+['foo':'.bar' non-parsed] @[102-112] active
+['-moz-goog':'1***' non-parsed] @[113-129] active
+['border-width':'0px'] @[130-148] active
+['border-top-style':'solid'] @[undefined-undefined] style
+['border-right-style':'solid'] @[undefined-undefined] style
+['border-bottom-style':'solid'] @[undefined-undefined] style
+['border-left-style':'solid'] @[undefined-undefined] style
+['border-color':'initial'] @[undefined-undefined] style
+['border-top-width':'0px'] @[undefined-undefined] style
+['border-right-width':'0px'] @[undefined-undefined] style
+['border-bottom-width':'0px'] @[undefined-undefined] style
+['border-left-width':'0px'] @[undefined-undefined] style
+
+StyleSheet: '
+
+/* An inline stylesheet */
+body.mainpage {
+ text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
+ badproperty: 1badvalue1;
+}
+
+'
+
+rule
+body.mainpage: []
+['text-decoration':'none'] @[5-27] active
+['badproperty':'1badvalue1' non-parsed] @[107-131] active
+
+=== Last stylesheet patched ===
+
+StyleSheet: 'body.mainpage { text-decoration: strikethrough; badproperty: 2badvalue2;}body { text-align: justify;}'
+
+rule
+body.mainpage: []
+['text-decoration':'strikethrough'] @[4-35] active
+['badproperty':'2badvalue2' non-parsed] @[39-63] active
+
+rule
+body: []
+['text-align':'justify'] @[4-24] active
+
+=== After selector set ===
+
+StyleSheet: 'html *, body[foo="bar"] { text-decoration: strikethrough; badproperty: 2badvalue2;}body { text-align: justify;}'
+
+rule
+html *, body[foo="bar"]: []
+['text-decoration':'strikethrough'] @[4-35] active
+['badproperty':'2badvalue2' non-parsed] @[39-63] active
+
+rule
+body: []
+['text-align':'justify'] @[4-24] active
+
+=== After style text set ===
+
+StyleSheet: 'html *, body[foo="bar"] { color: white; background: black;}body { text-align: justify;}'
+
+rule
+html *, body[foo="bar"]: []
+['color':'white'] @[8-21] active
+['background':'black'] @[22-40] active
+['background-image':'initial'] @[undefined-undefined] style
+['background-repeat-x':'initial'] @[undefined-undefined] style
+['background-repeat-y':'initial'] @[undefined-undefined] style
+['background-attachment':'initial'] @[undefined-undefined] style
+['background-position-x':'initial'] @[undefined-undefined] style
+['background-position-y':'initial'] @[undefined-undefined] style
+['background-origin':'initial'] @[undefined-undefined] style
+['background-clip':'initial'] @[undefined-undefined] style
+['background-color':'black'] @[undefined-undefined] style
+
+rule
+body: []
+['text-align':'justify'] @[4-24] active
+
+=== Matched rules after rule added ===
+
+rule
+body: [user-agent]
+['display':'block'] @[undefined-undefined] style
+['margin-top':'8px'] @[undefined-undefined] style
+['margin-right':'8px'] @[undefined-undefined] style
+['margin-bottom':'8px'] @[undefined-undefined] style
+['margin-left':'8px'] @[undefined-undefined] style
+
+rule
+body: []
+['font-size':'12px'] @[5-21] active
+['foo':'bar !
+
+ important /* !important property not recognized by WebCore */' is-important non-parsed] @[26-104] active
+['height':'100% !important' is-important] @[109-133] active
+['colorz':'"!important"' non-parsed] @[138-159] active
+['important':'!important' non-parsed] @[164-185] active
+['color':'"badcolor" ! important /* good property with strange value */' is-important] @[190-259] active
+
+rule
+html *, body[foo="bar"]: []
+['color':'white'] @[8-21] active
+['background':'black'] @[22-40] active
+['background-image':'initial'] @[undefined-undefined] style
+['background-repeat-x':'initial'] @[undefined-undefined] style
+['background-repeat-y':'initial'] @[undefined-undefined] style
+['background-attachment':'initial'] @[undefined-undefined] style
+['background-position-x':'initial'] @[undefined-undefined] style
+['background-position-y':'initial'] @[undefined-undefined] style
+['background-origin':'initial'] @[undefined-undefined] style
+['background-clip':'initial'] @[undefined-undefined] style
+['background-color':'black'] @[undefined-undefined] style
+
+rule
+body: []
+['text-align':'justify'] @[4-24] active
+
+rule
+body: [inspector]
+['font-family':'serif'] @[0-19] active
+
+rule
+body.main1: []
+['color':'#F00BAA'] @[13-28] active
+['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[28-81] active
+
+rule
+body.main2: []
+['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[0-95] active
+['background-image':'initial' is-important] @[undefined-undefined] style
+['background-repeat-x':'initial' is-important] @[undefined-undefined] style
+['background-repeat-y':'initial' is-important] @[undefined-undefined] style
+['background-attachment':'initial' is-important] @[undefined-undefined] style
+['background-position-x':'initial' is-important] @[undefined-undefined] style
+['background-position-y':'initial' is-important] @[undefined-undefined] style
+['background-origin':'initial' is-important] @[undefined-undefined] style
+['background-clip':'initial' is-important] @[undefined-undefined] style
+['background-color':'green' is-important] @[undefined-undefined] style
+
+=== After two properties disabled, one property added, one property removed ===
+
+style
+raw style
+[text='height : 100% ;'] disabled
+['border':'1px solid'] @[6-24] active
+['border-width':'2px'] @[25-43] active
+['googles':'abra' non-parsed] @[45-59] active
+['foo':'.bar' non-parsed] @[60-70] active
+['-moz-goog':'1***' non-parsed] @[71-87] active
+['font-size':'12px'] @[88-104] active
+[text='border-width: 0px;'] disabled
+[text='font-size: 14px;'] disabled
+['border-top-style':'solid'] @[undefined-undefined] style
+['border-right-style':'solid'] @[undefined-undefined] style
+['border-bottom-style':'solid'] @[undefined-undefined] style
+['border-left-style':'solid'] @[undefined-undefined] style
+['border-color':'initial'] @[undefined-undefined] style
+['border-top-width':'2px'] @[undefined-undefined] style
+['border-right-width':'2px'] @[undefined-undefined] style
+['border-bottom-width':'2px'] @[undefined-undefined] style
+['border-left-width':'2px'] @[undefined-undefined] style
+
+=== After property enabled ===
+
+style
+raw style
+[text='height : 100% ;'] disabled
+['border':'1px solid'] @[6-24] active
+['border-width':'2px'] @[25-43] active
+['googles':'abra' non-parsed] @[45-59] active
+['foo':'.bar' non-parsed] @[60-70] active
+['-moz-goog':'1***' non-parsed] @[71-87] active
+['font-size':'12px'] @[88-104] inactive
+[text='border-width: 0px;'] disabled
+['font-size':'14px'] @[105-121] active
+['border-top-style':'solid'] @[undefined-undefined] style
+['border-right-style':'solid'] @[undefined-undefined] style
+['border-bottom-style':'solid'] @[undefined-undefined] style
+['border-left-style':'solid'] @[undefined-undefined] style
+['border-color':'initial'] @[undefined-undefined] style
+['border-top-width':'2px'] @[undefined-undefined] style
+['border-right-width':'2px'] @[undefined-undefined] style
+['border-bottom-width':'2px'] @[undefined-undefined] style
+['border-left-width':'2px'] @[undefined-undefined] style
+
diff --git a/LayoutTests/inspector/styles-new-API.html b/LayoutTests/inspector/styles-new-API.html
new file mode 100644
index 0000000..9d0725b
--- /dev/null
+++ b/LayoutTests/inspector/styles-new-API.html
@@ -0,0 +1,299 @@
+<html>
+<head>
+
+<link rel="stylesheet" href="resources/styles-new-API.css" -->
+
+<script src="../http/tests/inspector/inspector-test.js"></script>
+<script src="elements-tests.js"></script>
+<script>
+
+function doit()
+{
+ function callback(result)
+ {
+ dumpArray(result);
+ notifyDone();
+ }
+ evaluateInWebInspector("frontend_runTest", callback);
+}
+
+
+// Frontend functions.
+
+function frontend_runTest(testController)
+{
+ testController.waitUntilDone();
+ frontend_expandDOMSubtree(WebInspector.domAgent.document);
+ testController.runAfterPendingDispatches(function() {
+
+ function tableStylesCallback(testController, styles)
+ {
+ testController.results.push("");
+ testController.results.push("=== Attribute styles for table ===");
+ for (var attr in styles.styleAttributes) {
+ testController.results.push("Attribute: " + attr);
+ frontend_dumpRuleOrStyle(testController, styles.styleAttributes[attr]);
+ }
+
+ frontend_testStyleSheets(testController);
+ }
+
+ function stylesCallback(testController, styles)
+ {
+ testController.results.push("");
+ testController.results.push("=== Computed style property count for body ===");
+ var propCount = styles.computedStyle.cssProperties.length;
+ testController.results.push(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");
+
+ testController.results.push("");
+ testController.results.push("=== Matched rules for body ===");
+ frontend_dumpRulesArray(testController, styles.matchedCSSRules);
+
+ testController.results.push("");
+ testController.results.push("=== Pseudo rules for body ===");
+ for (var i = 0; i < styles.pseudoElements.length; ++i) {
+ testController.results.push("PseudoId=" + styles.pseudoElements[i].pseudoId);
+ frontend_dumpRulesArray(testController, styles.pseudoElements[i].rules);
+ }
+
+ testController.results.push("");
+ testController.results.push("=== Inherited styles for body ===");
+ for (var i = 0; i < styles.inherited.length; ++i) {
+ testController.results.push("Level=" + (i + 1));
+ frontend_dumpRuleOrStyle(testController, styles.inherited[i].inlineStyle);
+ frontend_dumpRulesArray(testController, styles.inherited[i].matchedCSSRules);
+ }
+
+ testController.results.push("");
+ testController.results.push("=== Inline style for body ===");
+ frontend_dumpRuleOrStyle(testController, styles.inlineStyle);
+
+ InspectorBackend.getStylesForNode2(frontend_nodeForId("thetable").id, tableStylesCallback.bind(null, testController));
+ }
+
+ InspectorBackend.getStylesForNode2(WebInspector.domAgent.document.body.id, stylesCallback.bind(null, testController));
+ });
+}
+
+function frontend_testStyleSheets(testController)
+{
+var newStyleSheetText =
+"body.mainpage {\
+ text-decoration: strikethrough;\
+ badproperty: 2badvalue2;\
+}\
+\
+body {\
+ text-align: justify;\
+}\
+";
+
+ function patchStyleSheet(testController, styleSheet)
+ {
+ testController.results.push("");
+ testController.results.push("=== Last stylesheet patched ===");
+ InspectorBackend.setStyleSheetText2(styleSheet.styleSheetId, newStyleSheetText,
+ frontend_loadAndDumpStyleSheet.bind(null, testController, styleSheet.styleSheetId, frontend_changeSelector.bind(null, testController)));
+ }
+
+ function styleSheetIdsLoaded(testController, ids)
+ {
+ testController.results.push("");
+ testController.results.push("=== All stylesheets ===");
+ for (var i = 0; i < ids.length; ++i)
+ frontend_loadAndDumpStyleSheet(testController, ids[i], (i < ids.length - 1) ? null : patchStyleSheet.bind(null, testController));
+ }
+ InspectorBackend.getAllStyles2(styleSheetIdsLoaded.bind(null, testController));
+}
+
+function frontend_changeSelector(testController, styleSheet)
+{
+ function didSetSelector(testController, rule)
+ {
+ testController.results.push("");
+ testController.results.push("=== After selector set ===");
+ frontend_loadAndDumpStyleSheet(testController, frontend_parentStyleSheetId(rule.ruleId), frontend_setStyleText.bind(null, testController));
+ }
+
+ InspectorBackend.setRuleSelector2(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector.bind(null, testController));
+}
+
+function frontend_parentStyleSheetId(ruleOrStyleId)
+{
+ return ruleOrStyleId.substring(0, ruleOrStyleId.indexOf(':'));
+}
+
+
+function frontend_setStyleText(testController, styleSheet)
+{
+ function didSetStyleText(testController, style)
+ {
+ testController.results.push("");
+ testController.results.push("=== After style text set ===");
+ frontend_loadAndDumpStyleSheet(testController, frontend_parentStyleSheetId(style.styleId), frontend_addRule.bind(null, testController));
+ }
+
+ InspectorBackend.setPropertyText2(styleSheet.rules[0].style.styleId, 0, "", true);
+ InspectorBackend.setPropertyText2(styleSheet.rules[0].style.styleId, 0, "", true);
+ InspectorBackend.setPropertyText2(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetStyleText.bind(null, testController));
+}
+
+function frontend_addRule(testController)
+{
+ function didGetStyles(testController, styles)
+ {
+ testController.results.push("");
+ testController.results.push("=== Matched rules after rule added ===");
+ frontend_dumpRulesArray(testController, styles.matchedCSSRules);
+ frontend_disableProperty(testController);
+ }
+
+ function didSetStyleText(testController, style)
+ {
+ InspectorBackend.getStylesForNode2(WebInspector.domAgent.document.body.id, didGetStyles.bind(null, testController));
+ }
+
+ function ruleAdded(testController, rule)
+ {
+ InspectorBackend.setPropertyText2(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText.bind(null, testController));
+ }
+
+ InspectorBackend.addRule2(WebInspector.domAgent.document.body.id, "body", ruleAdded.bind(null, testController));
+}
+
+function frontend_disableProperty(testController)
+{
+ function didDisableProperty(testController, style)
+ {
+ testController.results.push("");
+ testController.results.push("=== After two properties disabled, one property added, one property removed ===");
+ frontend_dumpRuleOrStyle(testController, style);
+ frontend_enableProperty(testController, style.styleId);
+ }
+
+ function stylesCallback(testController, styles)
+ {
+ // height : 100% ;
+ // border: 1px solid;
+ // border-width: 2px;
+ // background-color : #33FF33;
+ // googles: abra;
+ // foo: .bar;
+ // -moz-goog: 1***;
+ // border-width: 0px;
+
+ var style = styles.matchedCSSRules[1].style;
+ InspectorBackend.toggleProperty2(style.styleId, 0, true); // height: 100%
+ InspectorBackend.toggleProperty2(style.styleId, 7, true); // border-width: 0px
+ InspectorBackend.setPropertyText2(style.styleId, 7, "font-size: 12px;", false);
+ InspectorBackend.setPropertyText2(style.styleId, 9, "font-size: 14px;", false);
+ InspectorBackend.toggleProperty2(style.styleId, 9, true); // font-size: 14px
+ // height : 100% ; [d]
+ // border: 1px solid;
+ // border-width: 2px;
+ // background-color : #33FF33;
+ // googles: abra;
+ // foo: .bar;
+ // -moz-goog: 1***;
+ // font-size: 12px;
+ // border-width: 0px; [d]
+ // font-size: 14px; [d]
+
+ InspectorBackend.setPropertyText2(style.styleId, 3, "", true, didDisableProperty.bind(null, testController));
+ }
+
+ var toggleElement = frontend_nodeForId("toggle");
+ InspectorBackend.getStylesForNode2(toggleElement.id, stylesCallback.bind(null, testController));
+}
+
+function frontend_enableProperty(testController, styleId)
+{
+ function didEnableProperty(testController, style)
+ {
+ testController.results.push("");
+ testController.results.push("=== After property enabled ===");
+ frontend_dumpRuleOrStyle(testController, style);
+ testController.notifyDone(testController.results);
+ }
+
+ InspectorBackend.toggleProperty2(styleId, 6, false);
+ InspectorBackend.toggleProperty2(styleId, 8, false, didEnableProperty.bind(null, testController));
+}
+
+// Data dumping
+
+function frontend_dumpRulesArray(testController, rules)
+{
+ if (!rules)
+ return;
+ for (var i = 0; i < rules.length; ++i)
+ frontend_dumpRuleOrStyle(testController, rules[i]);
+}
+
+function frontend_dumpRuleOrStyle(testController, ruleOrStyle)
+{
+ if (!ruleOrStyle)
+ return;
+ var isRule = !!(ruleOrStyle.style);
+ var style = isRule ? ruleOrStyle.style : ruleOrStyle;
+ testController.results.push("");
+ testController.results.push(isRule ? "rule" : "style");
+ testController.results.push((isRule ? (ruleOrStyle.selectorText + ": [" + ruleOrStyle.origin + "]") : "raw style"));
+ for (var i = 0; i < style.cssProperties.length; ++i) {
+ var property = style.cssProperties[i];
+ if (property.status !== "disabled")
+ testController.results.push("['" + property.name + "':'" + property.value + "'" + (property.priority === "important" ? " is-important" : "") + (property.parsedOk ? "" : " non-parsed") +"] @[" + property.startOffset + "-" + property.endOffset + "] " + property.status);
+ else
+ testController.results.push("[text='" + property.text + "'] " + property.status);
+ }
+}
+
+
+function frontend_loadAndDumpStyleSheet(testController, styleSheetId, continuation)
+{
+ function styleSheetLoaded(testController, styleSheet)
+ {
+ testController.results.push("");
+ testController.results.push("StyleSheet: '" + styleSheet.text + "'");
+ for (var i = 0; i < styleSheet.rules.length; ++i)
+ frontend_dumpRuleOrStyle(testController, styleSheet.rules[i]);
+ if (continuation)
+ continuation(styleSheet);
+ }
+
+ InspectorBackend.getStyleSheet2(styleSheetId, styleSheetLoaded.bind(null, testController));
+}
+
+/*
+Covered API methods:
+ - getStylesForNode2
+ - getAllStyles2
+ - getStyleSheet2
+ - setStyleSheetText2
+ - setStyleData2
+ - setRuleSelector2
+ - addRule2
+*/
+
+</script>
+
+<style>
+
+/* An inline stylesheet */
+body.mainpage {
+ text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
+ badproperty: 1badvalue1;
+}
+
+</style>
+</head>
+
+<body class="main1 main2 mainpage" onload="onload()" style="font-weight: normal; width: 85%">
+<p>
+Tests that InspectorCSSAgent API methods work as expected.
+</p>
+<table width=50% id="thetable">
+</table>
+<h1 id="toggle">H1</h1>
+</body>
+</html>
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index fec85cc..5609560 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,57 @@
+2010-11-15 Alexander Pavlov <apavlov at chromium.org>
+
+ Reviewed by Pavel Feldman.
+
+ Web Inspector: Migrate frontend to the new CSS editing/retrieval API
+ https://bugs.webkit.org/show_bug.cgi?id=49492
+
+ Test: inspector/styles-new-API.html
+
+ * inspector/front-end/AuditRules.js:
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.selectorsCallback):
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.routine):
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback):
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.styleSheetCallback):
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.allStylesCallback):
+ (WebInspector.AuditRules.UnusedCssRule.prototype.doRun):
+ (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun):
+ (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun.receivedImages):
+ * inspector/front-end/CSSStyleModel.js:
+ (WebInspector.CSSStyleModel.prototype.getStylesAsync):
+ (WebInspector.CSSStyleModel.prototype.getComputedStyleAsync):
+ (WebInspector.CSSStyleModel.prototype.getInlineStyleAsync):
+ (WebInspector.CSSStyleModel.prototype.setRuleSelector):
+ (WebInspector.CSSStyleModel.prototype.setRuleSelector.callback):
+ (WebInspector.CSSStyleModel.prototype.addRule):
+ (WebInspector.CSSStyleModel.prototype.addRule.callback):
+ (WebInspector.CSSStyleDeclaration):
+ (WebInspector.CSSStyleDeclaration.prototype.propertyAt):
+ (WebInspector.CSSStyleDeclaration.prototype.pastLastSourcePropertyIndex):
+ (WebInspector.CSSStyleDeclaration.prototype.newBlankProperty):
+ (WebInspector.CSSStyleDeclaration.prototype.insertPropertyAt):
+ (WebInspector.CSSStyleDeclaration.prototype.appendProperty):
+ (WebInspector.CSSRule):
+ (WebInspector.CSSProperty.prototype.get propertyText):
+ (WebInspector.CSSProperty.prototype.setText):
+ (WebInspector.CSSProperty.prototype.setDisabled):
+ (WebInspector.CSSStyleSheet):
+ (WebInspector.CSSStyleSheet.createForId):
+ (WebInspector.CSSStyleSheet.prototype.getText):
+ (WebInspector.CSSStyleSheet.prototype.setText):
+ * inspector/front-end/Settings.js:
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylePropertiesSection.prototype.onpopulate):
+ (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty):
+ (WebInspector.StylePropertiesSection.prototype._debugShowStyle.removeStyleBox):
+ (WebInspector.StylePropertiesSection.prototype._debugShowStyle):
+ (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted):
+ (WebInspector.StylePropertyTreeElement.prototype):
+ (WebInspector.StylePropertyTreeElement.prototype.):
+ * inspector/front-end/inspector.css:
+ (.styles-section .properties li.not-parsed-ok):
+ (.styles-section .properties li.not-parsed-ok::before):
+ (.styles-section .properties .inactive):
+
2010-11-16 Sheriff Bot <webkit.review.bot at gmail.com>
Unreviewed, rolling out r72082.
diff --git a/WebCore/inspector/InspectorStyleSheet.cpp b/WebCore/inspector/InspectorStyleSheet.cpp
index ef20675..ad32d5a 100644
--- a/WebCore/inspector/InspectorStyleSheet.cpp
+++ b/WebCore/inspector/InspectorStyleSheet.cpp
@@ -141,11 +141,16 @@ bool InspectorStyle::setPropertyText(unsigned index, const String& propertyText,
if (propertyText.stripWhiteSpace().length()) {
RefPtr<CSSMutableStyleDeclaration> tempMutableStyle = CSSMutableStyleDeclaration::create();
- tempMutableStyle->parseDeclaration(propertyText);
- CSSStyleDeclaration* tempStyle = static_cast<CSSStyleDeclaration*>(tempMutableStyle.get());
+ CSSParser p;
+ RefPtr<CSSStyleSourceData> sourceData = CSSStyleSourceData::create();
+ p.parseDeclaration(tempMutableStyle.get(), propertyText + " -webkit-boguz-propertee: none", &sourceData);
+ Vector<CSSPropertySourceData>& propertyData = sourceData->propertyData;
+ unsigned propertyCount = propertyData.size();
+ if (!propertyCount)
+ return false;
- // Bail out early if the property text did not parse.
- if (!tempStyle->length())
+ // Check for a proper propertyText termination (the parser could at least restore to the PROPERTY_NAME state).
+ if (propertyData.at(propertyCount - 1).name != "-webkit-boguz-propertee")
return false;
}
diff --git a/WebCore/inspector/front-end/AuditRules.js b/WebCore/inspector/front-end/AuditRules.js
index 515ce8e..b78bc96 100644
--- a/WebCore/inspector/front-end/AuditRules.js
+++ b/WebCore/inspector/front-end/AuditRules.js
@@ -277,6 +277,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
doRun: function(resources, result, callback)
{
var self = this;
+
function evalCallback(styleSheets) {
if (!styleSheets.length)
return callback(null);
@@ -287,11 +288,11 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
for (var i = 0; i < styleSheets.length; ++i) {
var styleSheet = styleSheets[i];
for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
- var rule = styleSheet.rules[curRule];
- if (rule.selectorText.match(pseudoSelectorRegexp))
+ var selectorText = styleSheet.rules[curRule].selectorText;
+ if (selectorText.match(pseudoSelectorRegexp) || testedSelectors[selectorText])
continue;
- selectors.push(rule.selectorText);
- testedSelectors[rule.selectorText] = 1;
+ selectors.push(selectorText);
+ testedSelectors[selectorText] = 1;
}
}
@@ -309,8 +310,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
var unusedRules = [];
for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
var rule = styleSheet.rules[curRule];
- // FIXME: replace this by an exact computation once source ranges are available
- var textLength = rule.style.cssText ? rule.style.cssText.length + rule.selectorText.length : 0;
+ // Exact computation whenever source ranges are available.
+ var textLength = (rule.selectorRange && rule.style.properties.endOffset) ? rule.style.properties.endOffset - rule.selectorRange.start + 1 : 0;
+ if (!textLength && rule.style.cssText)
+ textLength = rule.style.cssText.length + rule.selectorText.length;
stylesheetSize += textLength;
if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
continue;
@@ -327,7 +330,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
var pctUnused = Math.round(100 * unusedStylesheetSize / stylesheetSize);
if (!summary)
summary = result.addChild("", true);
- var entry = summary.addChild(String.sprintf("%s: %d%% (estimated) is not used by the current page.", url, pctUnused));
+ var entry = summary.addChild(String.sprintf("%s: %s (%d%%) is not used by the current page.", url, Number.bytesToString(unusedStylesheetSize), pctUnused));
for (var j = 0; j < unusedRules.length; ++j)
entry.addSnippet(unusedRules[j]);
@@ -339,7 +342,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
return callback(null);
var totalUnusedPercent = Math.round(100 * totalUnusedStylesheetSize / totalStylesheetSize);
- summary.value = String.sprintf("%d%% of CSS (estimated) is not used by the current page.", totalUnusedPercent);
+ summary.value = String.sprintf("%s (%d%%) of CSS is not used by the current page.", Number.bytesToString(totalUnusedStylesheetSize), totalUnusedPercent);
callback(result);
}
@@ -349,11 +352,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
var result = {};
for (var i = 0; i < selectorArray.length; ++i) {
try {
- var nodes = document.querySelectorAll(selectorArray[i]);
- if (nodes && nodes.length)
+ if (document.querySelector(selectorArray[i]))
result[selectorArray[i]] = true;
} catch(e) {
- // ignore and mark as unused
+ // Ignore and mark as unused.
}
}
return result;
@@ -362,16 +364,24 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
WebInspector.AuditRules.evaluateInTargetWindow(routine, [selectors], selectorsCallback.bind(null, callback, styleSheets, testedSelectors));
}
- function routine()
+ function styleSheetCallback(styleSheets, continuation, styleSheet)
{
- var styleSheets = document.styleSheets;
- if (!styleSheets)
- return false;
+ if (styleSheet)
+ styleSheets.push(styleSheet);
+ if (continuation)
+ continuation(styleSheets);
+ }
- return routineResult;
+ function allStylesCallback(styleSheetIds)
+ {
+ if (!styleSheetIds || !styleSheetIds.length)
+ return evalCallback([]);
+ var styleSheets = [];
+ for (var i = 0; i < styleSheetIds.length; ++i)
+ WebInspector.CSSStyleSheet.createForId(styleSheetIds[i], styleSheetCallback.bind(null, styleSheets, i == styleSheetIds.length - 1 ? evalCallback : null));
}
- InspectorBackend.getAllStyles(evalCallback);
+ InspectorBackend.getAllStyles2(allStylesCallback);
}
}
@@ -658,7 +668,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
if (completeSrc)
src = completeSrc;
- const computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(styles.computedStyle);
+ const computedStyle = styles.computedStyle;
if (computedStyle.getPropertyValue("position") === "absolute") {
if (!context.imagesLeft)
doneCallback(context);
@@ -669,7 +679,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
var heightFound = "height" in styles.styleAttributes;
for (var i = styles.matchedCSSRules.length - 1; i >= 0 && !(widthFound && heightFound); --i) {
- var style = WebInspector.CSSRule.parsePayload(styles.matchedCSSRules[i]).style;
+ var style = styles.matchedCSSRules[i].style;
if (style.getPropertyValue("width") !== "")
widthFound = true;
if (style.getPropertyValue("height") !== "")
@@ -693,7 +703,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
return callback(null);
var context = {imagesLeft: imageIds.length, urlToNoDimensionCount: {}};
for (var i = imageIds.length - 1; i >= 0; --i)
- InspectorBackend.getStyles(imageIds[i], true, imageStylesReady.bind(this, imageIds[i], context));
+ WebInspector.cssModel.getStylesAsync(imageIds[i], imageStylesReady.bind(this, imageIds[i], context));
}
function pushImageNodes()
diff --git a/WebCore/inspector/front-end/CSSStyleModel.js b/WebCore/inspector/front-end/CSSStyleModel.js
index 0a7dabb..c3429fd 100644
--- a/WebCore/inspector/front-end/CSSStyleModel.js
+++ b/WebCore/inspector/front-end/CSSStyleModel.js
@@ -83,7 +83,7 @@ WebInspector.CSSStyleModel.prototype = {
userCallback(result);
}
- InspectorBackend.getStyles(nodeId, false, callback.bind(null, userCallback));
+ InspectorBackend.getStylesForNode2(nodeId, callback.bind(null, userCallback));
},
getComputedStyleAsync: function(nodeId, userCallback)
@@ -96,7 +96,7 @@ WebInspector.CSSStyleModel.prototype = {
userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
}
- InspectorBackend.getComputedStyle(nodeId, callback.bind(null, userCallback));
+ InspectorBackend.getComputedStyleForNode2(nodeId, callback.bind(null, userCallback));
},
getInlineStyleAsync: function(nodeId, userCallback)
@@ -109,42 +109,46 @@ WebInspector.CSSStyleModel.prototype = {
userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
}
- InspectorBackend.getInlineStyle(nodeId, callback.bind(null, userCallback));
+ InspectorBackend.getInlineStyleForNode2(nodeId, callback.bind(null, userCallback));
},
- setRuleSelector: function(ruleId, newContent, nodeId, successCallback, failureCallback)
+ setRuleSelector: function(ruleId, nodeId, newSelector, successCallback, failureCallback)
{
- function callback(newRulePayload, doesAffectSelectedNode)
+ function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds)
{
- if (!newRulePayload)
+ var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0);
+ successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode);
+ }
+
+ function callback(nodeId, successCallback, failureCallback, newSelector, rulePayload)
+ {
+ if (!rulePayload)
failureCallback();
else
- successCallback(WebInspector.CSSRule.parsePayload(newRulePayload), doesAffectSelectedNode);
+ InspectorBackend.querySelectorAll(nodeId, newSelector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload));
}
- InspectorBackend.setRuleSelector(ruleId, newContent, nodeId, callback);
+ InspectorBackend.setRuleSelector2(ruleId, newSelector, callback.bind(null, nodeId, successCallback, failureCallback));
},
- addRule: function(nodeId, newContent, successCallback, failureCallback)
+ addRule: function(nodeId, selector, successCallback, failureCallback)
{
- function callback(rule, doesAffectSelectedNode)
+ function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds)
+ {
+ var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0);
+ successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode);
+ }
+
+ function callback(successCallback, failureCallback, selector, rulePayload)
{
- if (!rule) {
+ if (!rulePayload) {
// Invalid syntax for a selector
failureCallback();
- } else {
- var styleRule = WebInspector.CSSRule.parsePayload(rule);
- styleRule.rule = rule;
- successCallback(styleRule, doesAffectSelectedNode);
- }
+ } else
+ InspectorBackend.querySelectorAll(nodeId, selector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload));
}
- InspectorBackend.addRule(newContent, nodeId, callback);
- },
-
- setCSSText: function(styleId, cssText)
- {
- InspectorBackend.setStyleText(styleId, cssText);
+ InspectorBackend.addRule2(nodeId, selector, callback.bind(null, successCallback, failureCallback, selector));
}
}
@@ -183,6 +187,8 @@ WebInspector.CSSStyleDeclaration = function(payload)
++propertyIndex;
}
this.length = propertyIndex;
+ if ("cssText" in payload)
+ this.cssText = payload.cssText;
}
WebInspector.CSSStyleDeclaration.parsePayload = function(payload)
@@ -277,23 +283,45 @@ WebInspector.CSSStyleDeclaration.prototype = {
return longhands ? this.getPropertyPriority(longhands[0]) : null;
},
- appendProperty: function(propertyName, propertyValue, userCallback)
+ propertyAt: function(index)
{
- function setPropertyCallback(userCallback, success, stylePayload)
+ return (index < this.allProperties.length) ? this.allProperties[index] : null;
+ },
+
+ pastLastSourcePropertyIndex: function()
+ {
+ for (var i = this.allProperties.length - 1; i >= 0; --i) {
+ var property = this.allProperties[i];
+ if (property.active || property.disabled)
+ return i + 1;
+ }
+ return 0;
+ },
+
+ newBlankProperty: function()
+ {
+ return new WebInspector.CSSProperty(this, this.pastLastSourcePropertyIndex(), "", "", "", "active", true, false, false, "");
+ },
+
+ insertPropertyAt: function(index, name, value, userCallback)
+ {
+ function callback(userCallback, payload)
{
- if (!success)
+ if (!userCallback)
+ return;
+
+ if (!payload)
userCallback(null);
else
- userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
+ userCallback(WebInspector.CSSStyleDeclaration.parsePayload(payload));
}
- // FIXME(apavlov): this should be migrated to the new InspectorCSSAgent API once it is enabled.
- InspectorBackend.applyStyleText(this.id, propertyName + ": " + propertyValue + ";", propertyName, setPropertyCallback.bind(this, userCallback));
+ InspectorBackend.setPropertyText2(this.id, index, name + ": " + value + ";", false, callback.bind(null, userCallback));
},
- propertyAt: function(index)
+ appendProperty: function(name, value, userCallback)
{
- return (index < this.allProperties.length) ? this.allProperties[index] : null;
+ this.insertPropertyAt(this.allProperties.length, name, value, userCallback);
}
}
@@ -306,6 +334,7 @@ WebInspector.CSSRule = function(payload)
this.origin = payload.origin;
this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style);
this.style.parentRule = this;
+ this.selectorRange = payload.selectorRange;
}
WebInspector.CSSRule.parsePayload = function(payload)
@@ -362,6 +391,8 @@ WebInspector.CSSProperty.prototype = {
if (this.text !== undefined)
return this.text;
+ if (this.name === "")
+ return "";
return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";";
},
@@ -393,11 +424,14 @@ WebInspector.CSSProperty.prototype = {
// Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText.
setText: function(propertyText, userCallback)
{
- function callback(userCallback, success, stylePayload)
+ function callback(userCallback, stylePayload)
{
+ if (stylePayload)
+ this.text = propertyText;
+
if (!userCallback)
return;
- if (!success)
+ if (!stylePayload)
userCallback(null);
else {
var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
@@ -407,7 +441,9 @@ WebInspector.CSSProperty.prototype = {
if (!this.ownerStyle)
throw "No ownerStyle for property";
- InspectorBackend.applyStyleText(this.ownerStyle.id, propertyText, this.name, callback.bind(this, userCallback));
+
+ // An index past all the properties adds a new property to the style.
+ InspectorBackend.setPropertyText2(this.ownerStyle.id, this.index, propertyText, this.index < this.ownerStyle.pastLastSourcePropertyIndex(), callback.bind(this, userCallback));
},
setValue: function(newValue, userCallback)
@@ -434,6 +470,57 @@ WebInspector.CSSProperty.prototype = {
userCallback(style);
}
}
- InspectorBackend.toggleStyleEnabled(this.ownerStyle.id, this.name, disabled, callback.bind(this, userCallback));
+
+ InspectorBackend.toggleProperty2(this.ownerStyle.id, this.index, disabled, callback.bind(this, userCallback));
+ }
+}
+
+WebInspector.CSSStyleSheet = function(payload)
+{
+ this.id = payload.styleSheetId;
+ this.sourceURL = payload.sourceURL;
+ this.title = payload.title;
+ this.disabled = payload.disabled;
+ this.rules = [];
+ this.styles = {};
+ for (var i = 0; i < payload.rules.length; ++i) {
+ var rule = WebInspector.CSSRule.parsePayload(payload.rules[i]);
+ this.rules.push(rule);
+ if (rule.style)
+ this.styles[rule.style.id] = rule.style;
+ }
+ if ("text" in payload)
+ this._text = payload.text;
+}
+
+WebInspector.CSSStyleSheet.createForId = function(styleSheetId, userCallback)
+{
+ function callback(userCallback, styleSheetPayload)
+ {
+ if (!styleSheetPayload)
+ userCallback(null);
+ else
+ userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload));
+ }
+ InspectorBackend.getStyleSheet2(styleSheetId, callback.bind(this, userCallback));
+}
+
+WebInspector.CSSStyleSheet.prototype = {
+ getText: function()
+ {
+ return this._text;
+ },
+
+ setText: function(newText, userCallback)
+ {
+ function callback(userCallback, styleSheetPayload)
+ {
+ if (!styleSheetPayload)
+ userCallback(null);
+ else
+ userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload));
+ }
+
+ InspectorBackend.setStyleSheetText2(this.id, newText, callback.bind(this, userCallback));
}
}
diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js
index 4fd0c83..1acc2e0 100644
--- a/WebCore/inspector/front-end/Settings.js
+++ b/WebCore/inspector/front-end/Settings.js
@@ -46,7 +46,8 @@ var Preferences = {
nativeInstrumentationEnabled: false,
resourceExportEnabled: false,
fileSystemEnabled: false,
- useDataURLForResourceImageIcons: true
+ useDataURLForResourceImageIcons: true,
+ debugMode: false
}
WebInspector.Settings = function()
diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js
index d239391..98a96d3 100644
--- a/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -589,6 +589,8 @@ WebInspector.StylePropertiesSection = function(styleRule, editable, isInherited,
this._selectorElement = document.createElement("span");
this._selectorElement.textContent = styleRule.selectorText;
this.titleElement.appendChild(this._selectorElement);
+ if (Preferences.debugMode)
+ this._selectorElement.addEventListener("click", this._debugShowStyle.bind(this), false);
var openBrace = document.createElement("span");
openBrace.textContent = " {";
@@ -719,11 +721,6 @@ WebInspector.StylePropertiesSection.prototype = {
onpopulate: function()
{
- function sorter(a, b)
- {
- return a.name.localeCompare(b.name);
- }
-
var style = this.styleRule.style;
var handledProperties = {};
@@ -734,8 +731,6 @@ WebInspector.StylePropertiesSection.prototype = {
for (var i = 0; i < allProperties.length; ++i)
this.uniqueProperties.push(allProperties[i]);
- this.uniqueProperties.sort(sorter);
-
// Collect all shorthand names.
for (var i = 0; i < this.uniqueProperties.length; ++i) {
var property = this.uniqueProperties[i];
@@ -745,6 +740,7 @@ WebInspector.StylePropertiesSection.prototype = {
shorthandNames[property.shorthand] = true;
}
+ // Collect all shorthand names.
for (var i = 0; i < this.uniqueProperties.length; ++i) {
var property = this.uniqueProperties[i];
var disabled = property.disabled;
@@ -783,10 +779,10 @@ WebInspector.StylePropertiesSection.prototype = {
return null;
},
- addNewBlankProperty: function()
+ addNewBlankProperty: function(optionalIndex)
{
var style = this.styleRule.style;
- var property = new WebInspector.CSSProperty(style, style.allProperties.length, "", "", "", "style", true, false, false, undefined);
+ var property = style.newBlankProperty();
var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, false, false);
this.propertiesTreeOutline.appendChild(item);
item.listItemElement.textContent = "";
@@ -794,6 +790,39 @@ WebInspector.StylePropertiesSection.prototype = {
return item;
},
+ _debugShowStyle: function(anchor)
+ {
+ var boundHandler;
+ function removeStyleBox(element, event)
+ {
+ if (event.target === element) {
+ event.stopPropagation();
+ return;
+ }
+ document.body.removeChild(element);
+ document.getElementById("main").removeEventListener("mousedown", boundHandler, true);
+ }
+
+ if (!event.shiftKey)
+ return;
+
+ var container = document.createElement("div");
+ var element = document.createElement("span");
+ container.appendChild(element);
+ element.style.background = "yellow";
+ element.style.display = "inline-block";
+ container.style.cssText = "z-index: 2000000; position: absolute; top: 50px; left: 50px; white-space: pre; overflow: auto; background: white; font-family: monospace; font-size: 12px; border: 1px solid black; opacity: 0.85; -webkit-user-select: text; padding: 2px;";
+ container.style.width = (document.body.offsetWidth - 100) + "px";
+ container.style.height = (document.body.offsetHeight - 100) + "px";
+ document.body.appendChild(container);
+ if (this.rule)
+ element.textContent = this.rule.selectorText + " {" + ((this.styleRule.style.cssText !== undefined) ? this.styleRule.style.cssText : "<no cssText>") + "}";
+ else
+ element.textContent = this.styleRule.style.cssText;
+ boundHandler = removeStyleBox.bind(null, container);
+ document.getElementById("main").addEventListener("mousedown", boundHandler, true);
+ },
+
_handleEmptySpaceDoubleClick: function(event)
{
if (event.target.hasStyleClass("header")) {
@@ -885,7 +914,8 @@ WebInspector.StylePropertiesSection.prototype = {
moveToNextIfNeeded.call(self);
}
- WebInspector.cssModel.setRuleSelector(this.rule.id, newContent, this.pane.node.id, successCallback, moveToNextIfNeeded.bind(this));
+ var focusedNode = WebInspector.panels.elements.focusedDOMNode;
+ WebInspector.cssModel.setRuleSelector(this.rule.id, focusedNode ? focusedNode.id : 0, newContent, successCallback, moveToNextIfNeeded.bind(this));
},
editingSelectorCancelled: function()
@@ -1302,6 +1332,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
this.listItemElement.appendChild(document.createTextNode(";"));
+ if (!this.parsedOk)
+ this.listItemElement.addStyleClass("not-parsed-ok");
+ if (this.property.inactive)
+ this.listItemElement.addStyleClass("inactive");
+
this.tooltip = this.property.propertyText;
},
@@ -1348,6 +1383,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
else
this.listItemElement.removeStyleClass("implicit");
+ this.selectable = !this.inherited;
if (this.inherited)
this.listItemElement.addStyleClass("inherited");
else
@@ -1478,6 +1514,28 @@ WebInspector.StylePropertyTreeElement.prototype = {
if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement))
return;
+ // If there are several properties in the text, do not handle increments/decrements.
+ var text = event.target.textContent.trim();
+ var openQuote;
+ var wasEscape = false;
+ // Exclude the last character from the check since it is allowed to be ";".
+ for (var i = 0; i < text.length - 1; ++i) {
+ var ch = text.charAt(i);
+ if (ch === "\\") {
+ wasEscape = true;
+ continue;
+ }
+ if (ch === ";" && !openQuote)
+ return; // Do not handle name/value shifts if the property is compound.
+ if ((ch === "'" || ch === "\"") && !wasEscape) {
+ if (!openQuote)
+ openQuote = ch;
+ else if (ch === openQuote)
+ openQuote = null;
+ }
+ wasEscape = false;
+ }
+
const styleValueDelimeters = " \t\n\"':;,/()";
var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement);
var wordString = wordRange.toString();
@@ -1555,16 +1613,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
event.preventDefault();
- if (!this.originalCSSText) {
+ if (!("originalPropertyText" in this)) {
// Remember the rule's original CSS text, so it can be restored
// if the editing is canceled and before each apply.
- this.originalCSSText = this.style.styleTextWithShorthands();
- } else {
- // Restore the original CSS text before applying user changes. This is needed to prevent
- // new properties from sticking around if the user adds one, then removes it.
- WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText);
+ this.originalPropertyText = this.property.propertyText;
}
-
this.applyStyleText(this.listItemElement.textContent);
},
@@ -1575,23 +1628,19 @@ WebInspector.StylePropertyTreeElement.prototype = {
this.expand();
this.listItemElement.removeEventListener("keydown", context.keyDownListener, false);
this.listItemElement.removeEventListener("keypress", context.keyPressListener, false);
- delete this.originalCSSText;
+ delete this.originalPropertyText;
},
editingCancelled: function(element, context)
{
- if (this._newProperty)
- this.treeOutline.removeChild(this);
- else if (this.originalCSSText) {
- WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText);
-
- if (this.treeOutline.section && this.treeOutline.section.pane)
- this.treeOutline.section.pane.dispatchEventToListeners("style edited");
-
- this.updateAll();
- } else
- this.updateTitle();
-
+ if ("originalPropertyText" in this)
+ this.applyStyleText(this.originalPropertyText, true);
+ else {
+ if (this._newProperty)
+ this.treeOutline.removeChild(this);
+ else
+ this.updateTitle();
+ }
this.editingEnded(context);
},
@@ -1601,7 +1650,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
// Determine where to move to before making changes
var newProperty, moveToPropertyName, moveToSelector;
- var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling);
+ var moveTo = this;
+ do {
+ moveTo = (moveDirection === "forward" ? moveTo.nextSibling : moveTo.previousSibling);
+ } while(moveTo && !moveTo.selectable);
+
if (moveTo)
moveToPropertyName = moveTo.name;
else if (moveDirection === "forward")
@@ -1631,6 +1684,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
// User has made a change then tabbed, wiping all the original treeElements,
// recalculate the new treeElement for the same property we were going to edit next
+ // FIXME(apavlov): this will not work for multiple same-named properties in a style
+ // (the first one will always be returned).
if (moveTo && !moveTo.parent) {
var treeElement = section.findTreeElementWithName(moveToPropertyName);
if (treeElement)
@@ -1664,9 +1719,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
this.parent.removeChild(this);
section.afterUpdate();
return;
- } else {
+ } else
delete section._afterUpdate;
- }
}
function callback(newStyle)
@@ -1684,13 +1738,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
return;
}
- if (!styleTextLength) {
- // Do remove ourselves from UI when the property removal is confirmed.
- this.parent.removeChild(this);
- } else {
- this.style = newStyle;
- this._styleRule.style = this.style;
- }
+ this.style = newStyle;
+ this.property = newStyle.propertyAt(this.property.index);
+ this._styleRule.style = this.style;
if (section && section.pane)
section.pane.dispatchEventToListeners("style edited");
@@ -1699,6 +1749,10 @@ WebInspector.StylePropertyTreeElement.prototype = {
this.updateAll(true);
}
+ // Append a ";" if the new text does not end in ";".
+ // FIXME: this does not handle trailing comments.
+ if (styleText.length && !/;\s*$/.test(styleText))
+ styleText += ";";
this.property.setText(styleText, callback.bind(this));
}
}
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index ab331d5..29f2385 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -4222,6 +4222,7 @@ a.worker-item {
cursor: pointer;
text-decoration: none;
}
+
.styles-section {
padding: 2px 2px 4px 4px;
min-height: 18px;
@@ -4239,6 +4240,28 @@ a.worker-item {
background-color: rgb(240, 240, 240);
}
+.styles-section .properties li.not-parsed-ok {
+ margin-left: 0px;
+}
+
+.styles-section .properties li.not-parsed-ok::before {
+ content: url(Images/warningIcon.png);
+ opacity: 0.75;
+ float: left;
+ width: 8px;
+ height: 8px;
+ margin-top: 0;
+ padding-right: 5px;
+ vertical-align: sub;
+ -webkit-user-select: none;
+ cursor: default;
+}
+
+.styles-section .properties .inactive {
+ opacity: 0.75;
+ background-color: rgb(212, 212, 212);
+}
+
.styles-section .header {
white-space: nowrap;
-webkit-background-origin: padding;
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list