1 files changed, 136 insertions, 0 deletions
diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js
new file mode 100644
index 0000000000..b44dc29c2a
--- /dev/null
+++ b/devtools/client/inspector/layout/layout.js
@@ -0,0 +1,136 @@
+/* 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,
+  createElement,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  Provider,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const FlexboxInspector = require("resource://devtools/client/inspector/flexbox/flexbox.js");
+const GridInspector = require("resource://devtools/client/inspector/grids/grid-inspector.js");
+
+const LayoutApp = createFactory(
+  require("resource://devtools/client/inspector/layout/components/LayoutApp.js")
+);
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+
+loader.lazyRequireGetter(
+  this,
+  "SwatchColorPickerTooltip",
+  "resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js"
+);
+
+class LayoutView {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
+
+    this.init();
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    const { setSelectedNode } = this.inspector.getCommonComponentProps();
+
+    const {
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+      onToggleGeometryEditor,
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
+
+    this.flexboxInspector = new FlexboxInspector(
+      this.inspector,
+      this.inspector.panelWin
+    );
+    const { onSetFlexboxOverlayColor } =
+      this.flexboxInspector.getComponentProps();
+
+    this.gridInspector = new GridInspector(
+      this.inspector,
+      this.inspector.panelWin
+    );
+    const {
+      onSetGridOverlayColor,
+      onToggleGridHighlighter,
+      onToggleShowGridAreas,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+    } = this.gridInspector.getComponentProps();
+
+    const layoutApp = LayoutApp({
+      getSwatchColorPickerTooltip: () => this.swatchColorPickerTooltip,
+      onSetFlexboxOverlayColor,
+      onSetGridOverlayColor,
+      onShowBoxModelEditor,
+      onShowRulePreviewTooltip,
+      onToggleGeometryEditor,
+      onToggleGridHighlighter,
+      onToggleShowGridAreas,
+      onToggleShowGridLineNumbers,
+      onToggleShowInfiniteLines,
+      setSelectedNode,
+      /**
+       * Shows the box model properties under the box model if true, otherwise, hidden by
+       * default.
+       */
+      showBoxModelProperties: true,
+    });
+
+    const provider = createElement(
+      Provider,
+      {
+        id: "layoutview",
+        key: "layoutview",
+        store: this.store,
+        title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
+      },
+      layoutApp
+    );
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = provider;
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed. Cleans up references.
+   */
+  destroy() {
+    if (this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip.destroy();
+      this._swatchColorPickerTooltip = null;
+    }
+
+    this.flexboxInspector.destroy();
+    this.gridInspector.destroy();
+
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+  }
+
+  get swatchColorPickerTooltip() {
+    if (!this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
+        this.inspector.toolbox.doc,
+        this.inspector
+      );
+    }
+
+    return this._swatchColorPickerTooltip;
+  }
+}
+
+module.exports = LayoutView;