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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
/**
* A flex item computed style properties.
*/
const flexItemProperties = (exports.flexItemProperties = {
// The computed value of flex-basis.
"flex-basis": PropTypes.string,
// The computed value of flex-grow.
"flex-grow": PropTypes.string,
// The computed value of min-height.
"min-height": PropTypes.string,
// The computed value of min-width.
"min-width": PropTypes.string,
// The computed value of max-height.
"max-height": PropTypes.string,
// The computed value of max-width.
"max-width": PropTypes.string,
// The computed height of the flex item element.
height: PropTypes.string,
// The computed width of the flex item element.
width: PropTypes.string,
});
/**
* A flex item sizing data.
*/
const flexItemSizing = (exports.flexItemSizing = {
// The max size of the flex item in the cross axis.
crossMaxSize: PropTypes.number,
// The min size of the flex item in the cross axis.
crossMinSize: PropTypes.number,
// The size of the flex item in the main axis before the flex sizing algorithm is
// applied. This is also called the "flex base size" in the spec.
mainBaseSize: PropTypes.number,
// The value that the flex sizing algorithm "wants" to use to stretch or shrink the
// item, before clamping to the item's main min and max sizes.
mainDeltaSize: PropTypes.number,
// The max size of the flex item in the main axis.
mainMaxSize: PropTypes.number,
// The min size of the flex item in the maxin axis.
mainMinSize: PropTypes.number,
});
/**
* A flex item data.
*/
const flexItem = (exports.flexItem = {
// The actor ID of the flex item.
actorID: PropTypes.string,
// The computed style properties of the flex item.
computedStyle: PropTypes.object,
// The flex item sizing data.
flexItemSizing: PropTypes.shape(flexItemSizing),
// The NodeFront of the flex item.
nodeFront: PropTypes.object,
// The authored style properties of the flex item.
properties: PropTypes.shape(flexItemProperties),
});
/**
* A flex container computed style properties.
*/
const flexContainerProperties = (exports.flexContainerProperties = {
// The computed value of align-content.
"align-content": PropTypes.string,
// The computed value of align-items.
"align-items": PropTypes.string,
// The computed value of flex-direction.
"flex-direction": PropTypes.string,
// The computed value of flex-wrap.
"flex-wrap": PropTypes.string,
// The computed value of justify-content.
"justify-content": PropTypes.string,
});
/**
* A flex container data.
*/
const flexContainer = (exports.flexContainer = {
// The actor ID of the flex container.
actorID: PropTypes.string,
// An array of flex items belonging to the flex container.
flexItems: PropTypes.arrayOf(PropTypes.shape(flexItem)),
// Whether or not the flex container data represents the selected flex container
// or the parent flex container. This is true if the flex container data represents
// the parent flex container.
isFlexItemContainer: PropTypes.bool,
// The NodeFront actor ID of the flex item to display in the flex item sizing
// properties.
flexItemShown: PropTypes.string,
// The NodeFront of the flex container.
nodeFront: PropTypes.object,
// The computed style properties of the flex container.
properties: PropTypes.shape(flexContainerProperties),
});
/**
* The Flexbox UI state.
*/
exports.flexbox = {
// The color of the flexbox highlighter overlay.
color: PropTypes.string,
// The selected flex container.
flexContainer: PropTypes.shape(flexContainer),
// The selected flex container can also be a flex item. This object contains the
// parent flex container properties.
flexItemContainer: PropTypes.shape(flexContainer),
// Whether or not the flexbox highlighter is highlighting the flex container.
highlighted: PropTypes.bool,
};