1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/types.js b/devtools/client/inspector/flexbox/types.js
new file mode 100644
index 0000000000..34f45ed8ae
--- /dev/null
+++ b/devtools/client/inspector/flexbox/types.js
@@ -0,0 +1,145 @@
+/* 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
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"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,
+};