From fcb13d2ea2dcfddc29a9b6ee9027ae7973ba3181 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 14 Oct 2016 20:31:04 -0400
Subject: [PATCH] Bug 1308227 - Add a CSS Grid accordion container to the
 layout panel r=jdescottes

MozReview-Commit-ID: ElJnsdJYXA

--HG--
extra : rebase_source : 6aa2e2955c3152530ca5c27e4360097962de5426
---
 devtools/client/inspector/inspector.xhtml     |  4 +-
 .../inspector/layout/components/Accordion.css | 42 ++++++++++
 .../inspector/layout/components/Accordion.js  | 82 +++++++++++++++++++
 .../client/inspector/layout/components/App.js | 19 ++++-
 .../inspector/layout/components/Grid.js       | 30 +++++++
 .../inspector/layout/components/moz.build     |  3 +
 devtools/client/inspector/layout/layout.js    |  2 +-
 devtools/client/inspector/layout/moz.build    |  1 +
 .../client/inspector/layout/utils/l10n.js     | 15 ++++
 .../client/inspector/layout/utils/moz.build   |  9 ++
 devtools/client/jar.mn                        |  1 +
 .../client/locales/en-US/layout.properties    | 15 ++++
 .../client/shared/components/tabs/tabbar.css  |  2 +-
 devtools/client/themes/inspector.css          |  4 +
 devtools/client/themes/layout.css             | 27 ++++++
 15 files changed, 249 insertions(+), 7 deletions(-)
 create mode 100644 devtools/client/inspector/layout/components/Accordion.css
 create mode 100644 devtools/client/inspector/layout/components/Accordion.js
 create mode 100644 devtools/client/inspector/layout/components/Grid.js
 create mode 100644 devtools/client/inspector/layout/utils/l10n.js
 create mode 100644 devtools/client/inspector/layout/utils/moz.build
 create mode 100644 devtools/client/locales/en-US/layout.properties
 create mode 100644 devtools/client/themes/layout.css

diff --git a/devtools/client/inspector/inspector.xhtml b/devtools/client/inspector/inspector.xhtml
index 9b09684d358c..97910711772c 100644
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
@@ -23,6 +24,7 @@
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/side-panel.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"></script>
@@ -187,7 +189,7 @@
 
       <div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel"
            data-localization-bundle="devtools/locale/inspector.properties">
-        <div id="layout-root"></div>
+        <div id="layoutview-container"></div>
       </div>
 
       <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
diff --git a/devtools/client/inspector/layout/components/Accordion.css b/devtools/client/inspector/layout/components/Accordion.css
new file mode 100644
index 000000000000..4076d30fa28b
--- /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 000000000000..d69dc3c7ed76
--- /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
index 4d1454a8fd08..3b3fe5995880 100644
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -4,18 +4,29 @@
 
 "use strict";
 
-const { createClass, DOM: dom } = require("devtools/client/shared/vendor/react");
+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");
 
-let App = createClass({
+const Accordion = createFactory(require("./Accordion"));
+const Grid = createFactory(require("./Grid"));
+
+const App = createClass({
 
   displayName: "App",
 
   render() {
     return dom.div(
       {
-        id: "app",
-      }
+        id: "layoutview-container-focusable",
+      },
+      Accordion({
+        items: [
+          { header: getStr("layout.header"),
+            component: Grid,
+            opened: true }
+        ]
+      })
     );
   },
 
diff --git a/devtools/client/inspector/layout/components/Grid.js b/devtools/client/inspector/layout/components/Grid.js
new file mode 100644
index 000000000000..8081ce9efa09
--- /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
index 1821a18a88ad..0ae19f4f6e46 100644
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -5,5 +5,8 @@
 # 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
index d28464d53d4f..04bc35a1ad96 100644
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -23,7 +23,7 @@ LayoutViewTool.prototype = {
 
     let store = this.store = Store();
     let provider = React.createElement(ReactRedux.Provider, { store }, App());
-    ReactDOM.render(provider, this.document.querySelector("#layout-root"));
+    ReactDOM.render(provider, this.document.querySelector("#layoutview-container"));
   },
 
   destroy() {
diff --git a/devtools/client/inspector/layout/moz.build b/devtools/client/inspector/layout/moz.build
index 8bbcad9a5c16..8575deedfb74 100644
--- a/devtools/client/inspector/layout/moz.build
+++ b/devtools/client/inspector/layout/moz.build
@@ -8,6 +8,7 @@ DIRS += [
     'actions',
     'components',
     'reducers',
+    'utils',
 ]
 
 DevToolsModules(
diff --git a/devtools/client/inspector/layout/utils/l10n.js b/devtools/client/inspector/layout/utils/l10n.js
new file mode 100644
index 000000000000..362fe015070b
--- /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/locale/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 000000000000..e3053b63fab6
--- /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',
+)
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 1e352cc774d9..6790aacbab96 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -299,6 +299,7 @@ devtools.jar:
     skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
     skin/fonts.css (themes/fonts.css)
     skin/computed.css (themes/computed.css)
+    skin/layout.css (themes/layout.css)
     skin/images/arrow-e.png (themes/images/arrow-e.png)
     skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
     skin/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css)
diff --git a/devtools/client/locales/en-US/layout.properties b/devtools/client/locales/en-US/layout.properties
new file mode 100644
index 000000000000..af93881c276e
--- /dev/null
+++ b/devtools/client/locales/en-US/layout.properties
@@ -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/.
+
+# LOCALIZATION NOTE This file contains the Layout Inspector strings.
+# The Layout Inspector is a panel accessible in the Inspector sidebar.
+# The Layout Inspector may need to be enabled in about:config by setting
+# devtools.layoutview.enabled to true.
+
+# LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
+layout.header=Grid
+
+# LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid
+# containers to display.
+layout.noGrids=No grids
diff --git a/devtools/client/shared/components/tabs/tabbar.css b/devtools/client/shared/components/tabs/tabbar.css
index e6fb9b790ca4..a9a8071ab97b 100644
--- a/devtools/client/shared/components/tabs/tabbar.css
+++ b/devtools/client/shared/components/tabs/tabbar.css
@@ -8,7 +8,7 @@
 }
 
 .tabs .tabs-navigation {
-  height: 23px;
+  height: 24px;
 }
 
 .tabs .tabs-menu-item:first-child {
diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css
index 94740814013a..b009e4e16810 100644
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -19,6 +19,10 @@
   --breadcrumbs-border-color: #454d5d;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 /* Make sure to hide scroll bars for the parent window */
 window {
   overflow: hidden;
diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css
new file mode 100644
index 000000000000..a7cf3c8b4909
--- /dev/null
+++ b/devtools/client/themes/layout.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+#sidebar-panel-layoutview {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#layoutview-container {
+  height: 100%;
+  overflow: auto;
+}
+
+#layoutview-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+.layoutview-no-grids {
+  font-style: italic;
+  text-align: center;
+  padding: 0.5em;
+}