Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
const {
createFactory,
PureComponent,
const ComputedProperty = createFactory(
);
const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
class BoxModelProperties extends PureComponent {
static get propTypes() {
return {
boxModel: PropTypes.shape(Types.boxModel).isRequired,
dispatch: PropTypes.func.isRequired,
setSelectedNode: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
this.state = {
isOpen: true,
};
this.getReferenceElement = this.getReferenceElement.bind(this);
this.onToggleExpander = this.onToggleExpander.bind(this);
}
/**
* Various properties can display a reference element. E.g. position displays an offset
* parent if its value is other than fixed or static. Or z-index displays a stacking
* context, etc.
* This returns the right element if there needs to be one, and one was passed in the
* props.
*
* @return {Object} An object with 2 properties:
* - referenceElement {NodeFront}
* - referenceElementType {String}
*/
getReferenceElement(propertyName) {
const value = this.props.boxModel.layout[propertyName];
if (
propertyName === "position" &&
value !== "static" &&
value !== "fixed" &&
this.props.boxModel.offsetParent
) {
return {
referenceElement: this.props.boxModel.offsetParent,
referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
};
}
return {};
}
onToggleExpander(event) {
this.setState({
isOpen: !this.state.isOpen,
});
event.stopPropagation();
}
render() {
const { boxModel, dispatch, setSelectedNode } = this.props;
const { layout } = boxModel;
const layoutInfo = [
"box-sizing",
"display",
"float",
"line-height",
"position",
"z-index",
];
const properties = layoutInfo.map(info => {
const { referenceElement, referenceElementType } =
this.getReferenceElement(info);
return ComputedProperty({
dispatch,
key: info,
name: info,
referenceElement,
referenceElementType,
setSelectedNode,
value: layout[info],
});
});
return dom.div(
{ className: "layout-properties" },
dom.div(
{
className: "layout-properties-header",
role: "heading",
"aria-level": "3",
onDoubleClick: this.onToggleExpander,
},
dom.span({
className: "layout-properties-expander theme-twisty",
open: this.state.isOpen,
role: "button",
"aria-label": BOXMODEL_L10N.getStr(
this.state.isOpen
? "boxmodel.propertiesHideLabel"
: "boxmodel.propertiesShowLabel"
),
onClick: this.onToggleExpander,
}),
BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
),
dom.div(
{
className: "layout-properties-wrapper devtools-monospace",
hidden: !this.state.isOpen,
role: "table",
},
properties
)
);
}
}
module.exports = BoxModelProperties;