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

@@ -57,6 +57,7 @@ function Selection(walker) {
   EventEmitter.decorate(this);
 
   this._onMutations = this._onMutations.bind(this);
+  this.setNodeFront = this.setNodeFront.bind(this);
   this.setWalker(walker);
 }
 

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

@@ -137,7 +137,7 @@ module.exports = createClass({
             object: this.translateNodeFrontToGrip(nodeFront),
             onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
             onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-            onInspectIconClick: () => setSelectedNode(nodeFront),
+            onInspectIconClick: () => setSelectedNode(nodeFront, "layout-panel"),
           }
         )
       ),

devtools/client/inspector/grids/grid-inspector.js

@@ -42,15 +42,12 @@ function GridInspector(inspector, window) {
   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);
@@ -118,9 +115,7 @@ GridInspector.prototype = {
   getComponentProps() {
     return {
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
-      setSelectedNode: this.setSelectedNode,
       onSetGridOverlayColor: this.onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight: this.onShowGridAreaHighlight,
       onShowGridCellHighlight: this.onShowGridCellHighlight,
       onToggleGridHighlighter: this.onToggleGridHighlighter,
@@ -222,16 +217,6 @@ GridInspector.prototype = {
     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.
@@ -332,20 +317,6 @@ GridInspector.prototype = {
     }
   },
 
-  /**
-   * 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.
    *

devtools/client/inspector/inspector.js

@@ -113,6 +113,8 @@ function Inspector(toolbox) {
   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();
@@ -1950,7 +1952,32 @@ Inspector.prototype = {
     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);
+  },
 };
 
 /**

devtools/client/inspector/layout/components/App.js

@@ -40,6 +40,7 @@ const App = createClass({
     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,

devtools/client/inspector/layout/layout.js

@@ -32,6 +32,11 @@ LayoutView.prototype = {
       return;
     }
 
+    let {
+      setSelectedNode,
+      onShowBoxModelHighlighterForNode,
+    } = this.inspector.getCommonComponentProps();
+
     let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
@@ -41,9 +46,7 @@ LayoutView.prototype = {
 
     let {
       getSwatchColorPickerTooltip,
-      setSelectedNode,
       onSetGridOverlayColor,
-      onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onToggleGridHighlighter,