From 95e076a2f63e3f9007ab4a841757ebd0cde9852c Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Wed, 27 Nov 2019 07:07:43 +0000 Subject: [PATCH] Bug 1599135 - Load individual Rep file in inspector.r=gl. Differential Revision: https://phabricator.services.mozilla.com/D54548 --HG-- extra : moz-landing-system : lando --- .../boxmodel/components/ComputedProperty.js | 17 ++----- .../flexbox/components/FlexContainer.js | 16 +++---- .../inspector/flexbox/components/FlexItem.js | 17 +++---- .../flexbox/components/FlexItemSelector.js | 14 +++--- devtools/client/inspector/shared/moz.build | 1 + devtools/client/inspector/shared/node-reps.js | 47 +++++++++++++++++++ 6 files changed, 69 insertions(+), 43 deletions(-) create mode 100644 devtools/client/inspector/shared/node-reps.js diff --git a/devtools/client/inspector/boxmodel/components/ComputedProperty.js b/devtools/client/inspector/boxmodel/components/ComputedProperty.js index ad6045221518..351dd1795ed4 100644 --- a/devtools/client/inspector/boxmodel/components/ComputedProperty.js +++ b/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: () => diff --git a/devtools/client/inspector/flexbox/components/FlexContainer.js b/devtools/client/inspector/flexbox/components/FlexContainer.js index 48ebbf6a7a0d..03bb5922d200 100644 --- a/devtools/client/inspector/flexbox/components/FlexContainer.js +++ b/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), }), diff --git a/devtools/client/inspector/flexbox/components/FlexItem.js b/devtools/client/inspector/flexbox/components/FlexItem.js index 2807db0c6d2c..468cd088641a 100644 --- a/devtools/client/inspector/flexbox/components/FlexItem.js +++ b/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) ); } } diff --git a/devtools/client/inspector/flexbox/components/FlexItemSelector.js b/devtools/client/inspector/flexbox/components/FlexItemSelector.js index 70e49ddd55c8..03593eb89bbd 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemSelector.js +++ b/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) ); } } diff --git a/devtools/client/inspector/shared/moz.build b/devtools/client/inspector/shared/moz.build index 6a4b11cdc872..0b2ec686a739 100644 --- a/devtools/client/inspector/shared/moz.build +++ b/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', diff --git a/devtools/client/inspector/shared/node-reps.js b/devtools/client/inspector/shared/node-reps.js new file mode 100644 index 000000000000..4f3f17a61b6f --- /dev/null +++ b/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;