Bug 1195357 - make stringifyProperty escape text for CSS comment; r=pbrosset

devtools/client/styleinspector/rule-view.js

@@ -26,6 +26,7 @@ const {
   throttle
 } = require("devtools/client/styleinspector/utils");
 const {
+  escapeCSSComment,
   parseDeclarations,
   parseSingleValue,
   parsePseudoClassesAndAttributes,
@@ -1117,7 +1118,7 @@ TextProperty.prototype = {
 
     // Comment out property declarations that are not enabled
     if (!this.enabled) {
-      declaration = "/* " + declaration + " */";
+      declaration = "/* " + escapeCSSComment(declaration) + " */";
     }
 
     return declaration;

devtools/client/styleinspector/test/browser_ruleview_copy_styles.js

@@ -103,6 +103,7 @@ add_task(function*() {
                        "\tbackground-color: #00F;[\\r\\n]+" +
                        "\tfont-size: 12px;[\\r\\n]+" +
                        "\tborder-color: #00F !important;[\\r\\n]+" +
+                       "\t--var: \"\\*/\";[\\r\\n]+" +
                        "}",
       hidden: {
         copyLocation: true,
@@ -144,7 +145,7 @@ add_task(function*() {
     },
     {
       setup: function*() {
-        yield disableProperty(view);
+        yield disableProperty(view, 0);
       },
       desc: "Test Copy Rule with Disabled Property",
       node: ruleEditor.rule.textProps[2].editor.nameSpan,
@@ -154,6 +155,30 @@ add_task(function*() {
                        "\tbackground-color: #00F;[\\r\\n]+" +
                        "\tfont-size: 12px;[\\r\\n]+" +
                        "\tborder-color: #00F !important;[\\r\\n]+" +
+                       "\t--var: \"\\*/\";[\\r\\n]+" +
+                       "}",
+      hidden: {
+        copyLocation: true,
+        copyPropertyDeclaration: false,
+        copyPropertyName: false,
+        copyPropertyValue: true,
+        copySelector: true,
+        copyRule: false
+      }
+    },
+    {
+      setup: function*() {
+        yield disableProperty(view, 4);
+      },
+      desc: "Test Copy Rule with Disabled Property with Comment",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItem: contextmenu.menuitemCopyRule,
+      expectedPattern: "#testid {[\\r\\n]+" +
+                       "\t\/\\* color: #F00; \\*\/[\\r\\n]+" +
+                       "\tbackground-color: #00F;[\\r\\n]+" +
+                       "\tfont-size: 12px;[\\r\\n]+" +
+                       "\tborder-color: #00F !important;[\\r\\n]+" +
+                       "\t/\\* --var: \"\\*\\\\\/\"; \\*\/[\\r\\n]+" +
                        "}",
       hidden: {
         copyLocation: true,
@@ -241,9 +266,9 @@ function* checkCopyStyle(view, node, menuItem, expectedPattern, hidden) {
   view._contextmenu._menupopup.hidePopup();
 }
 
-function* disableProperty(view) {
+function* disableProperty(view, index) {
   let ruleEditor = getRuleViewRuleEditor(view, 1);
-  let propEditor = ruleEditor.rule.textProps[0].editor;
+  let propEditor = ruleEditor.rule.textProps[index].editor;
 
   info("Disabling a property");
   propEditor.enable.click();

devtools/client/styleinspector/test/doc_copystyles.css

@@ -7,4 +7,5 @@ html, body, #testid {
   background-color: #00F;
   font-size: 12px;
   border-color: #00F !important;
+  --var: "*/";
 }