16 files changed, 384 insertions, 0 deletions
diff --git a/devtools/client/inspector/layout/actions/index.js b/devtools/client/inspector/layout/actions/index.js
new file mode 100644
index 000000000..66735cddb
--- /dev/null
+++ b/devtools/client/inspector/layout/actions/index.js
@@ -0,0 +1,5 @@
+/* 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";
diff --git a/devtools/client/inspector/layout/actions/moz.build b/devtools/client/inspector/layout/actions/moz.build
new file mode 100644
index 000000000..568f361a5
--- /dev/null
+++ b/devtools/client/inspector/layout/actions/moz.build
@@ -0,0 +1,5 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
diff --git a/devtools/client/inspector/layout/components/Accordion.css b/devtools/client/inspector/layout/components/Accordion.css
new file mode 100644
index 000000000..4076d30fa
--- /dev/null
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -0,0 +1,42 @@
+/* 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/. */
+
+/**
+ * This file should not be modified and is a duplicate from the debugger.html project.
+ * Any changes to this file should be imported from the upstream debugger.html project.
+ */
+
+.accordion {
+  background-color: var(--theme-body-background);
+  width: 100%;
+}
+
+.accordion ._header {
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 5px;
+  transition: all 0.25s ease;
+  width: 100%;
+  -moz-user-select: none;
+}
+
+.accordion ._header:hover {
+  background-color: var(--theme-selection-color);
+}
+
+.accordion ._header:hover svg {
+  fill: var(--theme-comment-alt);
+}
+
+.accordion ._content {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  font-size: 11px;
+}
+
+.arrow {
+  vertical-align: middle;
+  display: inline-block;
+}
diff --git a/devtools/client/inspector/layout/components/Accordion.js b/devtools/client/inspector/layout/components/Accordion.js
new file mode 100644
index 000000000..d69dc3c7e
--- /dev/null
+++ b/devtools/client/inspector/layout/components/Accordion.js
@@ -0,0 +1,82 @@
+/* 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/. */
+
+/**
+ * This file should not be modified and is a duplicate from the debugger.html project.
+ * Any changes to this file should be imported from the upstream debugger.html project.
+ */
+
+"use strict";
+
+const React = require("devtools/client/shared/vendor/react");
+const { DOM: dom, PropTypes } = React;
+
+const { div, span } = dom;
+
+const Accordion = React.createClass({
+  displayName: "Accordion",
+
+  propTypes: {
+    items: PropTypes.array
+  },
+
+  getInitialState: function () {
+    return { opened: this.props.items.map(item => item.opened),
+             created: [] };
+  },
+
+  handleHeaderClick: function (i) {
+    const opened = [...this.state.opened];
+    const created = [...this.state.created];
+    const item = this.props.items[i];
+
+    opened[i] = !opened[i];
+    created[i] = true;
+
+    if (opened[i] && item.onOpened) {
+      item.onOpened();
+    }
+
+    this.setState({ opened, created });
+  },
+
+  renderContainer: function (item, i) {
+    const { opened, created } = this.state;
+    const containerClassName =
+          item.header.toLowerCase().replace(/\s/g, "-") + "-pane";
+    let arrowClassName = "arrow theme-twisty";
+    if (opened[i]) {
+      arrowClassName += " open";
+    }
+
+    return div(
+      { className: containerClassName, key: i },
+
+      div(
+        { className: "_header",
+          onClick: () => this.handleHeaderClick(i) },
+        span({ className: arrowClassName }),
+        item.header
+      ),
+
+      (created[i] || opened[i]) ?
+        div(
+          { className: "_content",
+              style: { display: opened[i] ? "block" : "none" }
+          },
+          React.createElement(item.component, item.componentProps || {})
+        ) :
+        null
+    );
+  },
+
+  render: function () {
+    return div(
+      { className: "accordion" },
+      this.props.items.map(this.renderContainer)
+    );
+  }
+});
+
+module.exports = Accordion;
diff --git a/devtools/client/inspector/layout/components/App.js b/devtools/client/inspector/layout/components/App.js
new file mode 100644
index 000000000..887175b99
--- /dev/null
+++ b/devtools/client/inspector/layout/components/App.js
@@ -0,0 +1,35 @@
+/* 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 { getStr } = require("../utils/l10n");
+const { DOM: dom, createClass, createFactory } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+const Accordion = createFactory(require("./Accordion"));
+const Grid = createFactory(require("./Grid"));
+
+const App = createClass({
+
+  displayName: "App",
+
+  render() {
+    return dom.div(
+      {
+        id: "layoutview-container",
+      },
+      Accordion({
+        items: [
+          { header: getStr("layout.header"),
+            component: Grid,
+            opened: true }
+        ]
+      })
+    );
+  },
+
+});
+
+module.exports = connect(state => state)(App);
diff --git a/devtools/client/inspector/layout/components/Grid.js b/devtools/client/inspector/layout/components/Grid.js
new file mode 100644
index 000000000..8081ce9ef
--- /dev/null
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -0,0 +1,30 @@
+/* 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 { getStr } = require("../utils/l10n");
+const { DOM: dom, createClass } = require("devtools/client/shared/vendor/react");
+
+const Grid = createClass({
+
+  displayName: "Grid",
+
+  render() {
+    return dom.div(
+      {
+        id: "layoutview-grid-container",
+      },
+      dom.div(
+        {
+          className: "layoutview-no-grids"
+        },
+        getStr("layout.noGrids")
+      )
+    );
+  },
+
+});
+
+module.exports = Grid;
diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build
new file mode 100644
index 000000000..0ae19f4f6
--- /dev/null
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -0,0 +1,12 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'Accordion.css',
+    'Accordion.js',
+    'App.js',
+    'Grid.js',
+)
diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js
new file mode 100644
index 000000000..cf0955b27
--- /dev/null
+++ b/devtools/client/inspector/layout/layout.js
@@ -0,0 +1,55 @@
+/* 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 Services = require("Services");
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
+
+const App = createFactory(require("./components/App"));
+const Store = require("./store");
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const INSPECTOR_L10N =
+      new LocalizationHelper("devtools/client/locales/inspector.properties");
+
+function LayoutView(inspector, window) {
+  this.inspector = inspector;
+  this.document = window.document;
+  this.store = null;
+
+  this.init();
+}
+
+LayoutView.prototype = {
+
+  init() {
+    let store = this.store = Store();
+    let provider = createElement(Provider, {
+      store,
+      id: "layoutview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+      key: "layoutview",
+    }, App());
+
+    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+
+    this.inspector.addSidebarTab(
+      "layoutview",
+      INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+      provider,
+      defaultTab == "layoutview"
+    );
+  },
+
+  destroy() {
+    this.inspector = null;
+    this.document = null;
+    this.store = null;
+  },
+};
+
+exports.LayoutView = LayoutView;
+
diff --git a/devtools/client/inspector/layout/moz.build b/devtools/client/inspector/layout/moz.build
new file mode 100644
index 000000000..8575deedf
--- /dev/null
+++ b/devtools/client/inspector/layout/moz.build
@@ -0,0 +1,18 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DIRS += [
+    'actions',
+    'components',
+    'reducers',
+    'utils',
+]
+
+DevToolsModules(
+    'layout.js',
+    'store.js',
+    'types.js',
+)
diff --git a/devtools/client/inspector/layout/reducers/grids.js b/devtools/client/inspector/layout/reducers/grids.js
new file mode 100644
index 000000000..3a1c26fd4
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/grids.js
@@ -0,0 +1,21 @@
+/* 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 INITIAL_GRIDS = {
+
+};
+
+let reducers = {
+
+};
+
+module.exports = function (grids = INITIAL_GRIDS, action) {
+  let reducer = reducers[action.type];
+  if (!reducer) {
+    return grids;
+  }
+  return reducer(grids, action);
+};
diff --git a/devtools/client/inspector/layout/reducers/index.js b/devtools/client/inspector/layout/reducers/index.js
new file mode 100644
index 000000000..3fed406d7
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/index.js
@@ -0,0 +1,7 @@
+/* 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";
+
+exports.grids = require("./grids");
diff --git a/devtools/client/inspector/layout/reducers/moz.build b/devtools/client/inspector/layout/reducers/moz.build
new file mode 100644
index 000000000..7c6955914
--- /dev/null
+++ b/devtools/client/inspector/layout/reducers/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'grids.js',
+    'index.js',
+)
diff --git a/devtools/client/inspector/layout/store.js b/devtools/client/inspector/layout/store.js
new file mode 100644
index 000000000..5069dda26
--- /dev/null
+++ b/devtools/client/inspector/layout/store.js
@@ -0,0 +1,33 @@
+/* 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 { combineReducers } = require("devtools/client/shared/vendor/redux");
+const createStore = require("devtools/client/shared/redux/create-store");
+const reducers = require("./reducers/index");
+const flags = require("devtools/shared/flags");
+
+module.exports = function () {
+  let shouldLog = false;
+  let history;
+
+  // If testing, store the action history in an array
+  // we'll later attach to the store
+  if (flags.testing) {
+    history = [];
+    shouldLog = true;
+  }
+
+  let store = createStore({
+    log: shouldLog,
+    history
+  })(combineReducers(reducers), {});
+
+  if (history) {
+    store.history = history;
+  }
+
+  return store;
+};
diff --git a/devtools/client/inspector/layout/types.js b/devtools/client/inspector/layout/types.js
new file mode 100644
index 000000000..66735cddb
--- /dev/null
+++ b/devtools/client/inspector/layout/types.js
@@ -0,0 +1,5 @@
+/* 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";
diff --git a/devtools/client/inspector/layout/utils/l10n.js b/devtools/client/inspector/layout/utils/l10n.js
new file mode 100644
index 000000000..96ab21768
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/l10n.js
@@ -0,0 +1,15 @@
+/* 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 { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/layout.properties");
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+  getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
+  numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
+};
diff --git a/devtools/client/inspector/layout/utils/moz.build b/devtools/client/inspector/layout/utils/moz.build
new file mode 100644
index 000000000..e3053b63f
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'l10n.js',
+)