Bug 1345119 - Part 1: Move functions out of grid-inspector into inspector for sharing with boxmodel. r=pbro
authorStanford Lockhart <lockhart@cs.dal.ca>
Fri, 17 Mar 2017 22:58:11 -0300
changeset 349604 e84425b5ccef
parent 349603 6088c6885dd9
child 349605 03e81669e18c
push id88463
push usergabriel.luong@gmail.com
push dateSat, 25 Mar 2017 22:23:20 +0000
treeherdermozilla-inbound@23d64298e8c6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1345119
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1345119 - Part 1: Move functions out of grid-inspector into inspector for sharing with boxmodel. r=pbro MozReview-Commit-ID: KlHinf9jgFX
devtools/client/framework/selection.js
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/inspector.js
devtools/client/inspector/layout/components/App.js
devtools/client/inspector/layout/layout.js
--- a/devtools/client/framework/selection.js
+++ b/devtools/client/framework/selection.js
@@ -52,16 +52,17 @@ var EventEmitter = require("devtools/sha
 /**
  * A Selection object. Hold a reference to a node.
  * Includes some helpers, fire some helpful events.
  */
 function Selection(walker) {
   EventEmitter.decorate(this);
 
   this._onMutations = this._onMutations.bind(this);
+  this.setNodeFront = this.setNodeFront.bind(this);
   this.setWalker(walker);
 }
 
 exports.Selection = Selection;
 
 Selection.prototype = {
   _walker: null,
 
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -132,17 +132,17 @@ module.exports = createClass({
         ),
         Rep(
           {
             defaultRep: ElementNode,
             mode: MODE.TINY,
             object: this.translateNodeFrontToGrip(nodeFront),
             onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
             onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-            onInspectIconClick: () => setSelectedNode(nodeFront),
+            onInspectIconClick: () => setSelectedNode(nodeFront, "layout-panel"),
           }
         )
       ),
       dom.div(
         {
           className: "grid-color-swatch",
           style: {
             backgroundColor: grid.color,
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -37,25 +37,22 @@ const GRID_COLORS = [
 function GridInspector(inspector, window) {
   this.document = window.document;
   this.highlighters = inspector.highlighters;
   this.inspector = inspector;
   this.store = inspector.store;
   this.walker = this.inspector.walker;
 
   this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
-  this.setSelectedNode = this.setSelectedNode.bind(this);
   this.updateGridPanel = this.updateGridPanel.bind(this);
 
   this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
   this.onHighlighterChange = this.onHighlighterChange.bind(this);
   this.onMarkupMutation = this.onMarkupMutation.bind(this);
   this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
-  this.onShowBoxModelHighlighterForNode =
-    this.onShowBoxModelHighlighterForNode.bind(this);
   this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
   this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
   this.onSidebarSelect = this.onSidebarSelect.bind(this);
   this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
   this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
   this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
 
   this.init();
@@ -113,19 +110,17 @@ GridInspector.prototype = {
     this.store = null;
     this.swatchColorPickerTooltip = null;
     this.walker = null;
   },
 
   getComponentProps() {
     return {
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
-      setSelectedNode: this.setSelectedNode,
       onSetGridOverlayColor: this.onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight: this.onShowGridAreaHighlight,
       onShowGridCellHighlight: this.onShowGridCellHighlight,
       onToggleGridHighlighter: this.onToggleGridHighlighter,
       onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
     };
   },
 
@@ -218,26 +213,16 @@ GridInspector.prototype = {
     let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
     let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
 
     dispatch(updateShowGridLineNumbers(showGridLineNumbers));
     dispatch(updateShowInfiniteLines(showInfinteLines));
   },
 
   /**
-   * Set the inspector selection.
-   *
-   * @param {NodeFront} nodeFront
-   *        The NodeFront corresponding to the new selection.
-   */
-  setSelectedNode(nodeFront) {
-    this.inspector.selection.setNodeFront(nodeFront, "layout-panel");
-  },
-
-  /**
    * Updates the grid panel by dispatching the new grid data. This is called when the
    * layout view becomes visible or the view needs to be updated with new grid data.
    *
    * @param  {Array|null} gridFronts
    *         Optional array of all GridFront in the current page.
    */
   updateGridPanel: Task.async(function* (gridFronts) {
     // Stop refreshing if the inspector or store is already destroyed.
@@ -328,30 +313,16 @@ GridInspector.prototype = {
       if (grid.nodeFront === node && grid.highlighted) {
         let highlighterSettings = this.getGridHighlighterSettings(node);
         this.highlighters.showGridHighlighter(node, highlighterSettings);
       }
     }
   },
 
   /**
-   * Shows the box-model highlighter on the element corresponding to the provided
-   * NodeFront.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The node to highlight.
-   * @param  {Object} options
-   *         Options passed to the highlighter actor.
-   */
-  onShowBoxModelHighlighterForNode(nodeFront, options) {
-    let toolbox = this.inspector.toolbox;
-    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
-  },
-
-  /**
    * Highlights the grid area in the CSS Grid Highlighter for the given grid.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element for which the grid
    *         highlighter is highlighted for.
    * @param  {String} gridAreaName
    *         The name of the grid area for which the grid highlighter
    *         is highlighted for.
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -108,16 +108,18 @@ function Inspector(toolbox) {
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onDetached = this.onDetached.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
   this.onSidebarShown = this.onSidebarShown.bind(this);
   this.onSidebarHidden = this.onSidebarHidden.bind(this);
+  this.onShowBoxModelHighlighterForNode =
+    this.onShowBoxModelHighlighterForNode.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
   this._detectingActorFeatures = this._detectActorFeatures();
 }
 
 Inspector.prototype = {
   /**
    * open is effectively an asynchronous constructor
@@ -1945,17 +1947,42 @@ Inspector.prototype = {
    * This method is here for the benefit of copying links.
    */
   copyAttributeLink: function (link) {
     // When the inspector menu was setup on click (see _getNodeLinkMenuItems), we
     // already checked that resolveRelativeURL existed.
     this.inspector.resolveRelativeURL(link, this.selection.nodeFront).then(url => {
       clipboardHelper.copyString(url);
     }, console.error);
-  }
+  },
+
+  /**
+   * Returns an object containing the shared handler functions used in the box
+   * model and grid React components.
+   */
+  getCommonComponentProps() {
+    return {
+      setSelectedNode: this.selection.setNodeFront,
+      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
+    };
+  },
+
+  /**
+   * Shows the box-model highlighter on the element corresponding to the provided
+   * NodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to highlight.
+   * @param  {Object} options
+   *         Options passed to the highlighter actor.
+   */
+  onShowBoxModelHighlighterForNode(nodeFront, options) {
+    let toolbox = this.toolbox;
+    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+  },
 };
 
 /**
  * Create a fake toolbox when running the inspector standalone, either in a chrome tab or
  * in a content tab.
  *
  * @param {Target} target to debug
  * @param {Function} createThreadClient
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -35,16 +35,17 @@ const App = createClass({
     highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
     setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     showGridOutline: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
+    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -28,27 +28,30 @@ function LayoutView(inspector, window) {
 LayoutView.prototype = {
 
   init() {
     if (!this.inspector) {
       return;
     }
 
     let {
+      setSelectedNode,
+      onShowBoxModelHighlighterForNode,
+    } = this.inspector.getCommonComponentProps();
+
+    let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
     } = this.inspector.boxmodel.getComponentProps();
 
     let {
       getSwatchColorPickerTooltip,
-      setSelectedNode,
       onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.inspector.gridInspector.getComponentProps();
 
     let app = App({