Web Inspector: "Copy Rule" menu item does not propagate comments properly
https://bugs.webkit.org/show_bug.cgi?id=201095
Reviewed by Joseph Pecoraro.
Source/WebInspectorUI:
* UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.prototype.commentOut):
(WI.CSSProperty.prototype.get formattedText):
Wrap the `text` in `/* ${text} */` if the `WI.CSSProperty` isn't `enabled` (e.g. commented out).
LayoutTests:
* inspector/css/generateCSSRuleString.html:
* inspector/css/generateCSSRuleString-expected.txt:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@249089 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 05646b9..a2ca6ff 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,13 @@
+2019-08-24 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: "Copy Rule" menu item does not propagate comments properly
+ https://bugs.webkit.org/show_bug.cgi?id=201095
+
+ Reviewed by Joseph Pecoraro.
+
+ * inspector/css/generateCSSRuleString.html:
+ * inspector/css/generateCSSRuleString-expected.txt:
+
2019-08-23 Devin Rousso <drousso@apple.com>
Web Inspector: create additional command line api functions for other console methods
diff --git a/LayoutTests/inspector/css/generateCSSRuleString-expected.txt b/LayoutTests/inspector/css/generateCSSRuleString-expected.txt
index d377974..ae9e058 100644
--- a/LayoutTests/inspector/css/generateCSSRuleString-expected.txt
+++ b/LayoutTests/inspector/css/generateCSSRuleString-expected.txt
@@ -4,38 +4,84 @@
== Running test suite: CSS.generateCSSRuleString
-- Running test case: CSS.generateCSSRuleString.InlineStyle
#test-node {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
+}
+
+-- Running test case: CSS.generateCSSRuleString.InlineStyle.WithCommentedProperty
+#test-node {
+ a: 1;
+ /* b: 2; */
+ c: 3;
}
-- Running test case: CSS.generateCSSRuleString.MatchedRules
@media only screen and (min-width: 0px) {
@media only screen and (min-height: 0px) {
body > div#test-node {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
}
}
}
@media only screen and (min-width: 0px) {
body > #test-node {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
}
}
body > div {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
}
body > * {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
}
* {
- a-b: 1;
- c-d: 2;
+ a: 1;
+ b: 2;
+ c: 3;
}
address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
display: block;
}
+-- Running test case: CSS.generateCSSRuleString.MatchedRules.WithCommentedProperties
+@media only screen and (min-width: 0px) {
+ @media only screen and (min-height: 0px) {
+ body > div#test-node {
+ a: 1;
+ /* b: 2; */
+ c: 3;
+ }
+ }
+}
+@media only screen and (min-width: 0px) {
+ body > #test-node {
+ a: 1;
+ /* b: 2; */
+ c: 3;
+ }
+}
+body > div {
+ a: 1;
+ /* b: 2; */
+ c: 3;
+}
+body > * {
+ a: 1;
+ /* b: 2; */
+ c: 3;
+}
+* {
+ a: 1;
+ /* b: 2; */
+ c: 3;
+}
+
diff --git a/LayoutTests/inspector/css/generateCSSRuleString.html b/LayoutTests/inspector/css/generateCSSRuleString.html
index f87624d..dbb55b3 100644
--- a/LayoutTests/inspector/css/generateCSSRuleString.html
+++ b/LayoutTests/inspector/css/generateCSSRuleString.html
@@ -2,11 +2,11 @@
<html>
<head>
<style>
-*{a-b:1;c-d:2}
-body>*{a-b:1;c-d:2}
-@media all {body>div{a-b:1;c-d:2}}
-@media only screen and (min-width:0px) {body>#test-node{a-b:1;c-d:2}}
-@media only screen and (min-width:0px) {@media only screen and (min-height:0px) {body>div#test-node{a-b:1;c-d:2}}}
+*{a:1;b:2;c:3}
+body>*{a:1;b:2;c:3}
+@media all {body>div{a:1;b:2;c:3}}
+@media only screen and (min-width:0px) {body>#test-node{a:1;b:2;c:3}}
+@media only screen and (min-width:0px) {@media only screen and (min-height:0px) {body>div#test-node{a:1;b:2;c:3}}}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
@@ -24,6 +24,15 @@
});
suite.addTestCase({
+ name: "CSS.generateCSSRuleString.InlineStyle.WithCommentedProperty",
+ description: "Check the formatting of the generated inline style string if a property is commented out.",
+ test() {
+ nodeStyles.inlineStyle.properties[1].commentOut(true);
+ InspectorTest.log(nodeStyles.inlineStyle.generateCSSRuleString());
+ },
+ });
+
+ suite.addTestCase({
name: "CSS.generateCSSRuleString.MatchedRules",
description: "Check the formatting of the generated string for all matched CSS rules.",
test() {
@@ -32,6 +41,20 @@
}
});
+ suite.addTestCase({
+ name: "CSS.generateCSSRuleString.MatchedRules.WithCommentedProperties",
+ description: "Check the formatting of the generated string for all matched CSS rules if a property is commented out in each.",
+ test() {
+ for (let rule of nodeStyles.matchedRules) {
+ if (!rule.style.editable)
+ continue;
+
+ rule.style.properties[1].commentOut(true);
+ InspectorTest.log(rule.style.generateCSSRuleString());
+ }
+ }
+ });
+
WI.domManager.requestDocument((documentNode) => {
WI.domManager.querySelector(documentNode.id, "#test-node", async (contentNodeId) => {
if (!contentNodeId) {
@@ -53,6 +76,6 @@
</head>
<body onload="runTest()">
<p>Testing that generated CSS rule strings have proper formatting.</p>
- <div id="test-node" style="a-b:1;c-d:2"></div>
+ <div id="test-node" style="a:1;b:2;c:3"></div>
</body>
</html>
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index d04a694..bc7787f 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,15 @@
+2019-08-24 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: "Copy Rule" menu item does not propagate comments properly
+ https://bugs.webkit.org/show_bug.cgi?id=201095
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype.commentOut):
+ (WI.CSSProperty.prototype.get formattedText):
+ Wrap the `text` in `/* ${text} */` if the `WI.CSSProperty` isn't `enabled` (e.g. commented out).
+
2019-08-23 Devin Rousso <drousso@apple.com>
Web Inspector: create additional command line api functions for other console methods
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
index 4f8f0df..d812d81 100644
--- a/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
@@ -149,6 +149,7 @@
commentOut(disabled)
{
+ console.assert(this.editable);
if (this._enabled === !disabled)
return;
@@ -181,7 +182,10 @@
if (!this._name)
return "";
- return `${this._name}: ${this._rawValue};`;
+ let text = `${this._name}: ${this._rawValue};`;
+ if (!this._enabled)
+ text = "/* " + text + " */";
+ return text;
}
get modified()
