Bug 1599135 - Load individual Rep file in inspector.r=gl.

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

--HG--
extra : moz-landing-system : lando

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

@@ -9,18 +9,10 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
-loader.lazyGetter(this, "Rep", function() {
-  return require("devtools/client/shared/components/reps/reps").REPS.Rep;
-});
-loader.lazyGetter(this, "MODE", function() {
-  return require("devtools/client/shared/components/reps/reps").MODE;
-});
-
 loader.lazyRequireGetter(
   this,
-  "translateNodeFrontToGrip",
-  "devtools/client/inspector/shared/utils",
-  true
+  "getNodeRep",
+  "devtools/client/inspector/shared/node-reps"
 );
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
@@ -74,10 +66,7 @@ class ComputedProperty extends PureComponent {
         },
         referenceElementType
       ),
-      Rep({
-        defaultRep: referenceElement,
-        mode: MODE.TINY,
-        object: translateNodeFrontToGrip(referenceElement),
+      getNodeRep(referenceElement, {
         onInspectIconClick: () =>
           setSelectedNode(referenceElement, { reason: "box-model" }),
         onDOMNodeMouseOver: () =>

devtools/client/inspector/flexbox/components/FlexContainer.js

@@ -13,13 +13,12 @@ const {
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const {
-  translateNodeFrontToGrip,
-} = require("devtools/client/inspector/shared/utils");
 
-const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-const { Rep } = REPS;
-const ElementNode = REPS.ElementNode;
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "devtools/client/inspector/shared/node-reps"
+);
 
 const Types = require("../types");
 
@@ -84,10 +83,7 @@ class FlexContainer extends PureComponent {
       null,
       dom.div(
         { className: "flex-header-container-label" },
-        Rep({
-          defaultRep: ElementNode,
-          mode: MODE.TINY,
-          object: translateNodeFrontToGrip(nodeFront),
+        getNodeRep(nodeFront, {
           onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
           onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
         }),

devtools/client/inspector/flexbox/components/FlexItem.js

@@ -7,13 +7,12 @@
 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;
-const ElementNode = REPS.ElementNode;
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "devtools/client/inspector/shared/node-reps"
+);
 
 const Types = require("../types");
 
@@ -53,11 +52,7 @@ class FlexItem extends PureComponent {
         onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
       },
       dom.span({ className: "flex-item-index" }, index),
-      Rep({
-        defaultRep: ElementNode,
-        mode: MODE.TINY,
-        object: translateNodeFrontToGrip(nodeFront),
-      })
+      getNodeRep(nodeFront)
     );
   }
 }

devtools/client/inspector/flexbox/components/FlexItemSelector.js

@@ -12,9 +12,11 @@ const {
   translateNodeFrontToGrip,
 } = require("devtools/client/inspector/shared/utils");
 
-const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-const { Rep } = REPS;
-const ElementNode = REPS.ElementNode;
+loader.lazyRequireGetter(
+  this,
+  "getNodeRep",
+  "devtools/client/inspector/shared/node-reps"
+);
 
 const Types = require("../types");
 
@@ -69,11 +71,7 @@ class FlexItemSelector extends PureComponent {
         className: "devtools-button devtools-dropdown-button",
         onClick: this.onShowFlexItemMenu,
       },
-      Rep({
-        defaultRep: ElementNode,
-        mode: MODE.TINY,
-        object: translateNodeFrontToGrip(flexItem.nodeFront),
-      })
+      getNodeRep(flexItem.nodeFront)
     );
   }
 }

devtools/client/inspector/shared/moz.build

@@ -6,6 +6,7 @@
 
 DevToolsModules(
     'highlighters-overlay.js',
+    'node-reps.js',
     'node-types.js',
     'reflow-tracker.js',
     'style-change-tracker.js',

devtools/client/inspector/shared/node-reps.js

@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+loader.lazyGetter(this, "MODE", function() {
+  return require("devtools/client/debugger/packages/devtools-reps/src/reps/constants")
+    .MODE;
+});
+
+loader.lazyGetter(this, "ElementNode", function() {
+  return require("devtools/client/debugger/packages/devtools-reps/src/reps/element-node");
+});
+
+loader.lazyGetter(this, "TextNode", function() {
+  return require("devtools/client/debugger/packages/devtools-reps/src/reps/text-node");
+});
+
+loader.lazyRequireGetter(
+  this,
+  "translateNodeFrontToGrip",
+  "devtools/client/inspector/shared/utils",
+  true
+);
+
+/**
+ * Creates either an ElementNode or a TextNode rep given a nodeFront. By default the
+ * rep is created in TINY mode.
+ *
+ * @param {NodeFront} nodeFront
+ *        The node front to create the element for.
+ * @param {Object} props
+ *        Props to pass to the rep.
+ */
+function getNodeRep(nodeFront, props = {}) {
+  const object = translateNodeFrontToGrip(nodeFront);
+  const { rep } = ElementNode.supportsObject(object) ? ElementNode : TextNode;
+
+  return rep({
+    object,
+    mode: MODE.TINY,
+    ...props,
+  });
+}
+
+module.exports = getNodeRep;