Bug 1222737 - Fix missing colons and semi-colons in renders of pasted computed rules; r?pbro draft
authorMatt R <matthieu.rigolot@gmail.com>
Mon, 24 Apr 2017 13:10:14 +0100
changeset 569304 d7533230764039f5b71caa73f0b6d60f00f4025f
parent 569138 0b77ed3f26c5335503bc16e85b8c067382e7bb1e
child 569305 3c9a1af3d179561e6035e16f8fd697845a87c2b2
push id56139
push userbmo:matthieu.rigolot@gmail.com
push dateThu, 27 Apr 2017 10:08:21 +0000
reviewerspbro
bugs1222737
milestone55.0a1
Bug 1222737 - Fix missing colons and semi-colons in renders of pasted computed rules; r?pbro MozReview-Commit-ID: DIjiKKwhvCJ
devtools/client/inspector/computed/computed.js
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -736,48 +736,24 @@ CssComputedView.prototype = {
 
   /**
    * Copy the current selection to the clipboard
    */
   copySelection: function () {
     try {
       let win = this.styleWindow;
       let text = win.getSelection().toString().trim();
-      // isPropertyPresent is set when a property name is spotted and
-      // we assume that the next line will be a property value.
-      let isPropertyPresent = false;
-      // Tidy up block headings by moving CSS property names and their
-      // values onto the same line and inserting a colon between them.
       let textArray = text.split(/[\r\n]+/);
-      let result = "";
 
-      // Parse text array to output string.
-      if (textArray.length > 1) {
-        for (let prop of textArray) {
-          if (CssComputedView.propertyNames.indexOf(prop) !== -1) {
-            // Property name found so setting isPropertyPresent to true
-            isPropertyPresent = true;
-            // Property name
-            result += prop;
-          } else if (isPropertyPresent === true) {
-            // Since isPropertyPresent is true so we assume that this is
-            // a property value and we append it to result preceeded by
-            // a :.
-            result += ": " + prop + ";\n";
-            isPropertyPresent = false;
-          } else {
-            // since isPropertyPresent is not set, we assume this is
-            // normal text and we append it to result without any :.
-            result += prop + "\n";
-          }
-        }
-      } else {
-        // Short text fragment.
-        result = textArray[0];
-      }
+      // Strip extra line breaks and format them correctly
+      let result = textArray.reduce(function (acc, curr, i) {
+        return ((i + 1) % 3 == 0 && i < textArray.length - 1)
+          ? acc + curr + "\n"
+          : acc + curr;
+      }, "");
 
       clipboardHelper.copyString(result);
     } catch (e) {
       console.error(e);
     }
   },
 
   /**
@@ -1025,32 +1001,46 @@ PropertyView.prototype = {
     this.nameNode.setAttribute("tabindex", "");
     // Avoid english text (css properties) from being altered
     // by RTL mode
     this.nameNode.setAttribute("dir", "ltr");
     this.nameNode.textContent = this.nameNode.title = this.name;
     // Make it hand over the focus to the container
     this.onFocus = () => this.element.focus();
     this.nameNode.addEventListener("click", this.onFocus);
+
+    // Build the style name ":" separator
+    let nameSeparator = doc.createElementNS(HTML_NS, "span");
+    nameSeparator.setAttribute("class", "visually-hidden");
+    nameSeparator.textContent = ":";
+    this.nameNode.appendChild(nameSeparator);
+
     nameContainer.appendChild(this.nameNode);
 
     let valueContainer = doc.createElementNS(HTML_NS, "div");
     valueContainer.className = "property-value-container";
     this.element.appendChild(valueContainer);
 
     // Build the style value element
     this.valueNode = doc.createElementNS(HTML_NS, "div");
     this.valueNode.setAttribute("class", "property-value theme-fg-color1");
     // Reset its tabindex attribute otherwise, if an ellipsis is applied
     // it will be reachable via TABing
     this.valueNode.setAttribute("tabindex", "");
     this.valueNode.setAttribute("dir", "ltr");
     // Make it hand over the focus to the container
     this.valueNode.addEventListener("click", this.onFocus);
+
+    // Build the style value ";" separator
+    let valueSeparator = doc.createElementNS(HTML_NS, "span");
+    valueSeparator.setAttribute("class", "visually-hidden");
+    valueSeparator.textContent = ";";
+
     valueContainer.appendChild(this.valueNode);
+    valueContainer.appendChild(valueSeparator);
 
     return this.element;
   },
 
   buildSelectorContainer: function () {
     let doc = this.tree.styleDocument;
     let element = doc.createElementNS(HTML_NS, "div");
     element.setAttribute("class", this.propertyContentClassName);