renderReferenceElementPreview() {
let {
referenceElement,
referenceElementType,
setSelectedNode,
onShowBoxModelHighlighterForNode,
onHideBoxModelHighlighter
} = this.props;
if (!referenceElement) {
return null;
}
return dom.div(
{
className: "reference-element"
},
dom.span({ className: "reference-element-type" }, referenceElementType),
Rep({
defaultRep: referenceElement,
mode: MODE.TINY,
object: translateNodeFrontToGrip(referenceElement),
onInspectIconClick: () => setSelectedNode(referenceElement,
{ reason: "box-model" }),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(referenceElement),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
})
);
}
render() {
const {
grid,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
} = this.props;
const { nodeFront } = grid;
return dom.li(
{},
dom.label(
{},
dom.input(
{
checked: grid.highlighted,
type: "checkbox",
value: grid.id,
onChange: this.onGridCheckboxClick,
}
),
Rep(
{
defaultRep: ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(nodeFront),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
}
)
),
dom.div(
{
className: "grid-color-swatch",
style: {
backgroundColor: grid.color,
},
title: grid.color,
}
),
// The SwatchColorPicker relies on the nextSibling of the swatch element to apply
// the selected color. This is why we use a span in display: none for now.
// Ideally we should modify the SwatchColorPickerTooltip to bypass this requirement.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
dom.span(
{
className: "grid-color-value"
},
grid.color
)
);
}
render() {
const { flexItem } = this.props;
return (
dom.button(
{
id: "flex-item-selector",
className: "devtools-button devtools-dropdown-button",
onClick: this.onShowFlexItemMenu,
},
Rep({
defaultRep: ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(flexItem.nodeFront),
})
)
);
}
onShowFlexItemMenu(event) {
const {
flexItem,
flexItems,
setSelectedNode,
} = this.props;
const menuItems = [];
for (const item of flexItems) {
const grip = translateNodeFrontToGrip(item.nodeFront);
menuItems.push({
label: getSelectorFromGrip(grip),
type: "checkbox",
checked: item === flexItem,
click: () => setSelectedNode(item.nodeFront),
});
}
showMenu(menuItems, {
button: event.target,
});
}
render() {
const {
flexbox,
onHideBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
} = this.props;
const {
actorID,
highlighted,
nodeFront,
} = flexbox;
return dom.li(
{},
dom.label(
{},
dom.input(
{
type: "checkbox",
value: actorID,
checked: highlighted,
onChange: this.onFlexboxCheckboxClick,
}
),
Rep(
{
defaultRep: ElementNode,
mode: MODE.TINY,
object: translateNodeFrontToGrip(nodeFront),
onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
}
)
)
);
}
const translateNodeFrontToGripWrapper = nodeFront => ({
...translateNodeFrontToGrip(nodeFront),
typeName: nodeFront.typeName,
});