Bug 1338298 - part2: highlight node on mouseover in grid listing;r=gl
MozReview-Commit-ID: 6uhDhv4lTe3
--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -16,44 +16,50 @@ const { getStr } = require("../utils/l10
module.exports = createClass({
displayName: "Grid",
propTypes: {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+ onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
+ onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
onToggleShowGridLineNumbers: PropTypes.func.isRequired,
onToggleShowInfiniteLines: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
render() {
let {
getSwatchColorPickerTooltip,
grids,
highlighterSettings,
+ onHideBoxModelHighlighter,
onSetGridOverlayColor,
+ onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
} = this.props;
return grids.length ?
dom.div(
{
id: "layout-grid-container",
},
GridList({
getSwatchColorPickerTooltip,
grids,
+ onHideBoxModelHighlighter,
onSetGridOverlayColor,
+ onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
}),
GridDisplaySettings({
highlighterSettings,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
})
)
--- a/devtools/client/inspector/layout/components/GridItem.js
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -16,17 +16,19 @@ const Types = require("../types");
module.exports = createClass({
displayName: "GridItem",
propTypes: {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grid: PropTypes.shape(Types.grid).isRequired,
+ onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
+ onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
componentDidMount() {
let tooltip = this.props.getSwatchColorPickerTooltip();
let swatchEl = findDOMNode(this).querySelector(".grid-color-swatch");
@@ -90,17 +92,21 @@ module.exports = createClass({
grid,
onToggleGridHighlighter,
} = this.props;
onToggleGridHighlighter(grid.nodeFront);
},
render() {
- let { grid } = this.props;
+ let {
+ grid,
+ onHideBoxModelHighlighter,
+ onShowBoxModelHighlighterForNode,
+ } = this.props;
let { nodeFront } = grid;
return dom.li(
{
key: grid.id,
className: "grid-item",
},
dom.label(
@@ -108,20 +114,24 @@ module.exports = createClass({
dom.input(
{
type: "checkbox",
value: grid.id,
checked: grid.highlighted,
onChange: this.onGridCheckboxClick,
}
),
- Rep({
- defaultRep: ElementNode,
- object: this.translateNodeFrontToGrip(nodeFront),
- })
+ Rep(
+ {
+ defaultRep: ElementNode,
+ object: this.translateNodeFrontToGrip(nodeFront),
+ onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+ onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+ }
+ )
),
dom.div(
{
className: "grid-color-swatch",
style: {
backgroundColor: grid.color,
},
title: grid.color,
--- a/devtools/client/inspector/layout/components/GridList.js
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -14,43 +14,49 @@ const { getStr } = require("../utils/l10
module.exports = createClass({
displayName: "GridList",
propTypes: {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+ onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
+ onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
render() {
let {
getSwatchColorPickerTooltip,
grids,
+ onHideBoxModelHighlighter,
onSetGridOverlayColor,
+ onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
} = this.props;
return dom.div(
{
className: "grid-container",
},
dom.span(
{},
getStr("layout.overlayGrid")
),
dom.ul(
{},
grids.map(grid => GridItem({
getSwatchColorPickerTooltip,
grid,
+ onHideBoxModelHighlighter,
onSetGridOverlayColor,
+ onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
}))
)
);
},
});
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -101,18 +101,16 @@ LayoutView.prototype = {
/**
* Shows the box model properties under the box model if true, otherwise, hidden by
* default.
*/
showBoxModelProperties: true,
onHideBoxModelHighlighter,
- onShowBoxModelEditor,
- onShowBoxModelHighlighter,
/**
* Handler for a change in the grid overlay color picker for a grid container.
*
* @param {NodeFront} node
* The NodeFront of the grid container element for which the grid color is
* being updated.
* @param {String} color
@@ -127,16 +125,33 @@ LayoutView.prototype = {
for (let grid of grids) {
if (grid.nodeFront === node && grid.highlighted) {
let highlighterSettings = this.getGridHighlighterSettings(node);
this.highlighters.showGridHighlighter(node, highlighterSettings);
}
}
},
+ onShowBoxModelEditor,
+ onShowBoxModelHighlighter,
+
+ /**
+ * 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);
+ },
+
/**
* Handler for a change in the input checkboxes in the GridList component.
* Toggles on/off the grid highlighter for the provided grid container element.
*
* @param {NodeFront} node
* The NodeFront of the grid container element for which the grid
* highlighter is toggled on/off for.
*/