Bug 1338298 - part3: add open inspector link in grid listing;r=gl
MozReview-Commit-ID: HcedDTZJPfO
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -25,16 +25,17 @@ const App = createClass({
displayName: "App",
propTypes: {
boxModel: PropTypes.shape(Types.boxModel).isRequired,
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+ setSelectedNode: PropTypes.func.isRequired,
showBoxModelProperties: PropTypes.bool.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
onShowBoxModelEditor: PropTypes.func.isRequired,
onShowBoxModelHighlighter: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
onToggleShowGridLineNumbers: PropTypes.func.isRequired,
onToggleShowInfiniteLines: PropTypes.func.isRequired,
--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -16,47 +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,
+ setSelectedNode: PropTypes.func.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,
+ setSelectedNode,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
} = this.props;
return grids.length ?
dom.div(
{
id: "layout-grid-container",
},
GridList({
getSwatchColorPickerTooltip,
grids,
+ setSelectedNode,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
}),
GridDisplaySettings({
highlighterSettings,
onToggleShowGridLineNumbers,
--- a/devtools/client/inspector/layout/components/GridItem.js
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -16,16 +16,17 @@ const Types = require("../types");
module.exports = createClass({
displayName: "GridItem",
propTypes: {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grid: PropTypes.shape(Types.grid).isRequired,
+ setSelectedNode: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
@@ -82,30 +83,40 @@ module.exports = createClass({
attributesLength: attributes.length,
// nodeName is already lowerCased in Node grips
nodeName: nodeFront.nodeName.toLowerCase(),
nodeType: nodeFront.nodeType,
}
};
},
- onGridCheckboxClick() {
+ onGridCheckboxClick(e) {
+ // If the click was on the svg icon to select the node in the inspector, bail out.
+ let originalTarget = e.nativeEvent && e.nativeEvent.explicitOriginalTarget;
+ if (originalTarget && originalTarget.namespaceURI === "http://www.w3.org/2000/svg") {
+ // We should be able to cancel the click event propagation after the following reps
+ // issue is implemented : https://github.com/devtools-html/reps/issues/95 .
+ e.preventDefault();
+ return;
+ }
+
let {
grid,
onToggleGridHighlighter,
} = this.props;
onToggleGridHighlighter(grid.nodeFront);
},
render() {
let {
grid,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
+ setSelectedNode,
} = this.props;
let { nodeFront } = grid;
return dom.li(
{
key: grid.id,
className: "grid-item",
},
@@ -120,16 +131,17 @@ module.exports = createClass({
}
),
Rep(
{
defaultRep: ElementNode,
object: this.translateNodeFrontToGrip(nodeFront),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+ onInspectIconClick: () => setSelectedNode(nodeFront),
}
)
),
dom.div(
{
className: "grid-color-swatch",
style: {
backgroundColor: grid.color,
--- a/devtools/client/inspector/layout/components/GridList.js
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -14,28 +14,30 @@ const { getStr } = require("../utils/l10
module.exports = createClass({
displayName: "GridList",
propTypes: {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+ setSelectedNode: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
render() {
let {
getSwatchColorPickerTooltip,
grids,
+ setSelectedNode,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
} = this.props;
return dom.div(
{
@@ -45,16 +47,17 @@ module.exports = createClass({
{},
getStr("layout.overlayGrid")
),
dom.ul(
{},
grids.map(grid => GridItem({
getSwatchColorPickerTooltip,
grid,
+ setSelectedNode,
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleGridHighlighter,
}))
)
);
},
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -95,16 +95,25 @@ LayoutView.prototype = {
/**
* Retrieve the shared SwatchColorPicker instance.
*/
getSwatchColorPickerTooltip: () => {
return this.swatchColorPickerTooltip;
},
/**
+ * Set the inspector selection.
+ * @param {NodeFront} nodeFront
+ * The NodeFront corresponding to the new selection.
+ */
+ setSelectedNode: (nodeFront) => {
+ this.inspector.selection.setNodeFront(nodeFront, "layout-panel");
+ },
+
+ /**
* Shows the box model properties under the box model if true, otherwise, hidden by
* default.
*/
showBoxModelProperties: true,
onHideBoxModelHighlighter,
/**