mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 01:35:35 +00:00
Bug 1495775 - Flex items should be highlighted when hovered over in the flex item list. r=pbro
This commit is contained in:
parent
5b7da2a429
commit
65571e884a
@ -7,15 +7,11 @@
|
||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
|
||||
|
||||
loader.lazyGetter(this, "Rep", function() {
|
||||
return require("devtools/client/shared/components/reps/reps").REPS.Rep;
|
||||
});
|
||||
loader.lazyGetter(this, "MODE", function() {
|
||||
return require("devtools/client/shared/components/reps/reps").MODE;
|
||||
});
|
||||
|
||||
loader.lazyRequireGetter(this, "translateNodeFrontToGrip", "devtools/client/inspector/shared/utils", true);
|
||||
const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
|
||||
const { Rep } = REPS;
|
||||
const ElementNode = REPS.ElementNode;
|
||||
|
||||
const Types = require("../types");
|
||||
|
||||
@ -23,22 +19,35 @@ class FlexItem extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
flexItem: PropTypes.shape(Types.flexItem).isRequired,
|
||||
onHideBoxModelHighlighter: PropTypes.func.isRequired,
|
||||
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
|
||||
setSelectedNode: PropTypes.func.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { nodeFront } = this.props.flexItem;
|
||||
const {
|
||||
flexItem,
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelHighlighterForNode,
|
||||
setSelectedNode,
|
||||
} = this.props;
|
||||
const { nodeFront } = flexItem;
|
||||
|
||||
return (
|
||||
dom.li({},
|
||||
dom.button(
|
||||
{
|
||||
className: "devtools-button devtools-monospace",
|
||||
onClick: () => this.props.setSelectedNode(nodeFront),
|
||||
onClick: () => {
|
||||
setSelectedNode(nodeFront);
|
||||
onHideBoxModelHighlighter();
|
||||
},
|
||||
onMouseOut: () => onHideBoxModelHighlighter(),
|
||||
onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
|
||||
},
|
||||
Rep({
|
||||
defaultRep: Rep.ElementNode,
|
||||
defaultRep: ElementNode,
|
||||
mode: MODE.TINY,
|
||||
object: translateNodeFrontToGrip(nodeFront),
|
||||
})
|
||||
|
@ -16,6 +16,8 @@ class FlexItemList extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
flexItems: PropTypes.arrayOf(PropTypes.shape(Types.flexItem)).isRequired,
|
||||
onHideBoxModelHighlighter: PropTypes.func.isRequired,
|
||||
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
|
||||
setSelectedNode: PropTypes.func.isRequired,
|
||||
};
|
||||
}
|
||||
@ -23,6 +25,8 @@ class FlexItemList extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
flexItems,
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelHighlighterForNode,
|
||||
setSelectedNode,
|
||||
} = this.props;
|
||||
|
||||
@ -32,6 +36,8 @@ class FlexItemList extends PureComponent {
|
||||
flexItems.map(flexItem => FlexItem({
|
||||
key: flexItem.actorID,
|
||||
flexItem,
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelHighlighterForNode,
|
||||
setSelectedNode,
|
||||
}))
|
||||
)
|
||||
|
@ -59,11 +59,17 @@ class Flexbox extends PureComponent {
|
||||
}
|
||||
|
||||
renderFlexItemList() {
|
||||
const { setSelectedNode } = this.props;
|
||||
const {
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelHighlighterForNode,
|
||||
setSelectedNode,
|
||||
} = this.props;
|
||||
const { flexItems } = this.props.flexContainer;
|
||||
|
||||
return FlexItemList({
|
||||
flexItems,
|
||||
onHideBoxModelHighlighter,
|
||||
onShowBoxModelHighlighterForNode,
|
||||
setSelectedNode,
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user