Bug 1345119 - Part 1: Move functions out of grid-inspector into inspector for sharing with boxmodel. r?pbro
MozReview-Commit-ID: KlHinf9jgFX
--- 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
@@ -131,17 +131,17 @@ module.exports = createClass({
}
),
Rep(
{
defaultRep: ElementNode,
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
@@ -1930,17 +1932,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({