1 files changed, 106 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js
new file mode 100644
index 0000000000..0378f1e702
--- /dev/null
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -0,0 +1,106 @@
+/* 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 {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getStr,
+} = require("resource://devtools/client/inspector/layout/utils/l10n.js");
+
+// Normally, we would only lazy load GridOutline, but we also lazy load
+// GridDisplaySettings and GridList because we assume the CSS grid usage is low
+// and usually will not appear on the page.
+loader.lazyGetter(this, "GridDisplaySettings", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridDisplaySettings.js")
+  );
+});
+loader.lazyGetter(this, "GridList", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridList.js")
+  );
+});
+loader.lazyGetter(this, "GridOutline", function () {
+  return createFactory(
+    require("resource://devtools/client/inspector/grids/components/GridOutline.js")
+  );
+});
+
+const Types = require("resource://devtools/client/inspector/grids/types.js");
+
+class Grid extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
+      grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+      highlighterSettings: PropTypes.shape(Types.highlighterSettings)
+        .isRequired,
+      onSetGridOverlayColor: PropTypes.func.isRequired,
+      onToggleGridHighlighter: PropTypes.func.isRequired,
+      onToggleShowGridAreas: PropTypes.func.isRequired,
+      onToggleShowGridLineNumbers: PropTypes.func.isRequired,
+      onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    if (!this.props.grids.length) {
+      return dom.div(
+        { className: "devtools-sidepanel-no-result" },
+        getStr("layout.noGridsOnThisPage")
+      );
+    }
+
+    const {
+      dispatch,
+      getSwatchColorPickerTooltip,
+      grids,
+      highlighterSettings,
+      onSetGridOverlayColor,
+      onToggleShowGridAreas,
+      onToggleGridHighlighter,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+      setSelectedNode,
+    } = this.props;
+    const highlightedGrids = grids.filter(grid => grid.highlighted);
+
+    return dom.div(
+      { id: "layout-grid-container" },
+      dom.div(
+        { className: "grid-content" },
+        GridList({
+          dispatch,
+          getSwatchColorPickerTooltip,
+          grids,
+          onSetGridOverlayColor,
+          onToggleGridHighlighter,
+          setSelectedNode,
+        }),
+        GridDisplaySettings({
+          highlighterSettings,
+          onToggleShowGridAreas,
+          onToggleShowGridLineNumbers,
+          onToggleShowInfiniteLines,
+        })
+      ),
+      highlightedGrids.length === 1
+        ? GridOutline({
+            dispatch,
+            grids,
+          })
+        : null
+    );
+  }
+}
+
+module.exports = Grid;