Bug 1684463 - [devtools] Part 1: Shorten the _createAttribute function by refactoring the collapse function. r=jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D100525

devtools/client/inspector/markup/views/element-editor.js

@@ -608,6 +608,25 @@ ElementEditor.prototype = {
     }
   },
 
+  /**
+   * Creates and returns the DOM for displaying an attribute with the following DOM
+   * structure:
+   *
+   * dom.span(
+   *   {
+   *     className: "attreditor",
+   *     "data-attr": attribute.name,
+   *     "data-value": attribute.value,
+   *   },
+   *   " ",
+   *   dom.span(
+   *     { className: "editable", tabIndex: 0 },
+   *     dom.span({ className: "attr-name theme-fg-color1" }, attribute.name),
+   *     '="',
+   *     dom.span({ className: "attr-value theme-fg-color2" }, attribute.value),
+   *     '"'
+   *   )
+   */
   _createAttribute: function(attribute, before = null) {
     const attr = this.doc.createElement("span");
     attr.dataset.attr = attribute.name;
@@ -736,27 +755,21 @@ ElementEditor.prototype = {
       attribute.value
     );
 
-    // Create links in the attribute value, and collapse long attributes if
-    // needed.
-    const collapse = value => {
-      if (value && value.match(COLLAPSE_DATA_URL_REGEX)) {
-        return truncateString(value, COLLAPSE_DATA_URL_LENGTH);
-      }
-      return this.markup.collapseAttributes
-        ? truncateString(value, this.markup.collapseAttributeLength)
-        : value;
-    };
-
     val.innerHTML = "";
+
+    // Create links in the attribute value, and truncate long attribute values if
+    // needed.
     for (const token of parsedLinksData) {
       if (token.type === "string") {
-        val.appendChild(this.doc.createTextNode(collapse(token.value)));
+        val.appendChild(
+          this.doc.createTextNode(this._truncateAttributeValue(token.value))
+        );
       } else {
         const link = this.doc.createElement("span");
         link.classList.add("link");
         link.setAttribute("data-type", token.type);
         link.setAttribute("data-link", token.value);
-        link.textContent = collapse(token.value);
+        link.textContent = this._truncateAttributeValue(token.value);
         val.appendChild(link);
       }
     }
@@ -766,6 +779,24 @@ ElementEditor.prototype = {
     return attr;
   },
 
+  /**
+   * Truncates the given attribute value if it is a base64 data URL or the
+   * collapse attributes pref is enabled.
+   *
+   * @param  {String} value
+   *         Attribute value.
+   * @return {String} truncated attribute value.
+   */
+  _truncateAttributeValue: function(value) {
+    if (value && value.match(COLLAPSE_DATA_URL_REGEX)) {
+      return truncateString(value, COLLAPSE_DATA_URL_LENGTH);
+    }
+
+    return this.markup.collapseAttributes
+      ? truncateString(value, this.markup.collapseAttributeLength)
+      : value;
+  },
+
   /**
    * Parse a user-entered attribute string and apply the resulting
    * attributes to the node. This operation is undoable.