1 files changed, 82 insertions, 0 deletions
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;