Bug 1432599 - Part 1: Refactor translateNodeFrontToGrip function to inspector shared utils. r=pbro

devtools/client/inspector/animation/components/AnimationTarget.js

@@ -7,6 +7,7 @@
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
@@ -46,36 +47,6 @@ class AnimationTarget extends PureComponent {
     return this.state.nodeFront !== nextState.nodeFront;
   }
 
-  /**
-   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
-   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
-   *
-   * @params  {NodeFront} nodeFront
-   *          The NodeFront for which we want to create a grip-like object.
-   * @returns {Object} a grip-like object that can be used with Reps.
-   */
-  translateNodeFrontToGrip(nodeFront) {
-    let { attributes } = nodeFront;
-
-    // The main difference between NodeFront and grips is that attributes are treated as
-    // a map in grips and as an array in NodeFronts.
-    let attributesMap = {};
-    for (let {name, value} of attributes) {
-      attributesMap[name] = value;
-    }
-
-    return {
-      actor: nodeFront.actorID,
-      preview: {
-        attributes: attributesMap,
-        attributesLength: attributes.length,
-        isConnected: true,
-        nodeName: nodeFront.nodeName.toLowerCase(),
-        nodeType: nodeFront.nodeType,
-      }
-    };
-  }
-
   async updateNodeFront(animation) {
     const { emitEventForTest, getNodeFromActor } = this.props;
 
@@ -124,7 +95,7 @@ class AnimationTarget extends PureComponent {
         {
           defaultRep: ElementNode,
           mode: MODE.TINY,
-          object: this.translateNodeFrontToGrip(nodeFront),
+          object: translateNodeFrontToGrip(nodeFront),
           onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
           onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
           onInspectIconClick: () => setSelectedNode(nodeFront, "animation-panel"),

devtools/client/inspector/boxmodel/components/ComputedProperty.js

@@ -7,6 +7,7 @@
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
@@ -27,7 +28,6 @@ class ComputedProperty extends PureComponent {
   constructor(props) {
     super(props);
     this.renderReferenceElementPreview = this.renderReferenceElementPreview.bind(this);
-    this.translateNodeFrontToGrip = this.translateNodeFrontToGrip.bind(this);
     this.onFocus = this.onFocus.bind(this);
   }
 
@@ -52,7 +52,7 @@ class ComputedProperty extends PureComponent {
       Rep({
         defaultRep: referenceElement,
         mode: MODE.TINY,
-        object: this.translateNodeFrontToGrip(referenceElement),
+        object: translateNodeFrontToGrip(referenceElement),
         onInspectIconClick: () => setSelectedNode(referenceElement, "box-model"),
         onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(referenceElement),
         onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
@@ -60,39 +60,6 @@ class ComputedProperty extends PureComponent {
     );
   }
 
-  /**
-   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
-   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The NodeFront for which we want to create a grip-like object.
-   * @return {Object} a grip-like object that can be used with Reps.
-   */
-  translateNodeFrontToGrip(nodeFront) {
-    let {
-      attributes
-    } = nodeFront;
-
-    // The main difference between NodeFront and grips is that attributes are treated as
-    // a map in grips and as an array in NodeFronts.
-    let attributesMap = {};
-    for (let { name, value } of attributes) {
-      attributesMap[name] = value;
-    }
-
-    return {
-      actor: nodeFront.actorID,
-      preview: {
-        attributes: attributesMap,
-        attributesLength: attributes.length,
-        // nodeName is already lowerCased in Node grips
-        nodeName: nodeFront.nodeName.toLowerCase(),
-        nodeType: nodeFront.nodeType,
-        isConnected: true,
-      }
-    };
-  }
-
   onFocus() {
     this.container.focus();
   }

devtools/client/inspector/grids/components/GridItem.js

@@ -8,6 +8,7 @@ const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
+const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
 // Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
@@ -32,7 +33,6 @@ class GridItem extends PureComponent {
   constructor(props) {
     super(props);
     this.setGridColor = this.setGridColor.bind(this);
-    this.translateNodeFrontToGrip = this.translateNodeFrontToGrip.bind(this);
     this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this);
     this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this);
   }
@@ -65,38 +65,6 @@ class GridItem extends PureComponent {
     this.props.onSetGridOverlayColor(this.props.grid.nodeFront, color);
   }
 
-  /**
-   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
-   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
-   *
-   * @params  {NodeFront} nodeFront
-   *          The NodeFront for which we want to create a grip-like object.
-   * @returns {Object} a grip-like object that can be used with Reps.
-   */
-  translateNodeFrontToGrip(nodeFront) {
-    let { attributes } = nodeFront;
-
-    // The main difference between NodeFront and grips is that attributes are treated as
-    // a map in grips and as an array in NodeFronts.
-    let attributesMap = {};
-    for (let {name, value} of attributes) {
-      attributesMap[name] = value;
-    }
-
-    return {
-      actor: nodeFront.actorID,
-      preview: {
-        attributes: attributesMap,
-        attributesLength: attributes.length,
-        // All the grid containers are assumed to be in the DOM tree.
-        isConnected: true,
-        // nodeName is already lowerCased in Node grips
-        nodeName: nodeFront.nodeName.toLowerCase(),
-        nodeType: nodeFront.nodeType,
-      }
-    };
-  }
-
   onGridCheckboxClick(e) {
     // If the click was on the svg icon to select the node in the inspector, bail out.
     let originalTarget = e.nativeEvent && e.nativeEvent.explicitOriginalTarget;
@@ -145,7 +113,7 @@ class GridItem extends PureComponent {
           {
             defaultRep: ElementNode,
             mode: MODE.TINY,
-            object: this.translateNodeFrontToGrip(nodeFront),
+            object: translateNodeFrontToGrip(nodeFront),
             onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
             onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
             onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),

devtools/client/inspector/shared/utils.js

@@ -14,49 +14,6 @@ const {throttle} = require("devtools/shared/throttle");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
-/**
- * Create a child element with a set of attributes.
- *
- * @param {Element} parent
- *        The parent node.
- * @param {string} tagName
- *        The tag name.
- * @param {object} attributes
- *        A set of attributes to set on the node.
- */
-function createChild(parent, tagName, attributes = {}) {
-  let elt = parent.ownerDocument.createElementNS(HTML_NS, tagName);
-  for (let attr in attributes) {
-    if (attributes.hasOwnProperty(attr)) {
-      if (attr === "textContent") {
-        elt.textContent = attributes[attr];
-      } else if (attr === "child") {
-        elt.appendChild(attributes[attr]);
-      } else {
-        elt.setAttribute(attr, attributes[attr]);
-      }
-    }
-  }
-  parent.appendChild(elt);
-  return elt;
-}
-
-exports.createChild = createChild;
-
-/**
- * Append a text node to an element.
- *
- * @param {Element} parent
- *        The parent node.
- * @param {string} text
- *        The text content for the text node.
- */
-function appendText(parent, text) {
-  parent.appendChild(parent.ownerDocument.createTextNode(text));
-}
-
-exports.appendText = appendText;
-
 /**
  * Called when a character is typed in a value editor.  This decides
  * whether to advance or not, first by checking to see if ";" was
@@ -98,7 +55,17 @@ function advanceValidate(keyCode, value, insertionPoint) {
   return false;
 }
 
-exports.advanceValidate = advanceValidate;
+/**
+ * Append a text node to an element.
+ *
+ * @param {Element} parent
+ *        The parent node.
+ * @param {string} text
+ *        The text content for the text node.
+ */
+function appendText(parent, text) {
+  parent.appendChild(parent.ownerDocument.createTextNode(text));
+}
 
 /**
  * Event handler that causes a blur on the target if the input has
@@ -115,7 +82,32 @@ function blurOnMultipleProperties(cssProperties) {
   };
 }
 
-exports.blurOnMultipleProperties = blurOnMultipleProperties;
+/**
+ * Create a child element with a set of attributes.
+ *
+ * @param {Element} parent
+ *        The parent node.
+ * @param {string} tagName
+ *        The tag name.
+ * @param {object} attributes
+ *        A set of attributes to set on the node.
+ */
+function createChild(parent, tagName, attributes = {}) {
+  let elt = parent.ownerDocument.createElementNS(HTML_NS, tagName);
+  for (let attr in attributes) {
+    if (attributes.hasOwnProperty(attr)) {
+      if (attr === "textContent") {
+        elt.textContent = attributes[attr];
+      } else if (attr === "child") {
+        elt.appendChild(attributes[attr]);
+      } else {
+        elt.setAttribute(attr, attributes[attr]);
+      }
+    }
+  }
+  parent.appendChild(elt);
+  return elt;
+}
 
 /**
  * Log the provided error to the console and return a rejected Promise for
@@ -130,5 +122,42 @@ function promiseWarn(error) {
   return promise.reject(error);
 }
 
+/**
+ * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
+ * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
+ *
+ * @params  {NodeFront} nodeFront
+ *          The NodeFront for which we want to create a grip-like object.
+ * @returns {Object} a grip-like object that can be used with Reps.
+ */
+function translateNodeFrontToGrip(nodeFront) {
+  const { attributes } = nodeFront;
+
+  // The main difference between NodeFront and grips is that attributes are treated as
+  // a map in grips and as an array in NodeFronts.
+  let attributesMap = {};
+  for (let {name, value} of attributes) {
+    attributesMap[name] = value;
+  }
+
+  return {
+    actor: nodeFront.actorID,
+    preview: {
+      attributes: attributesMap,
+      attributesLength: attributes.length,
+      // All the grid containers are assumed to be in the DOM tree.
+      isConnected: true,
+      // nodeName is already lowerCased in Node grips
+      nodeName: nodeFront.nodeName.toLowerCase(),
+      nodeType: nodeFront.nodeType,
+    }
+  };
+}
+
+exports.advanceValidate = advanceValidate;
+exports.appendText = appendText;
+exports.blurOnMultipleProperties = blurOnMultipleProperties;
+exports.createChild = createChild;
 exports.promiseWarn = promiseWarn;
 exports.throttle = throttle;
+exports.translateNodeFrontToGrip = translateNodeFrontToGrip;