1 files changed, 80 insertions, 0 deletions
diff --git a/devtools/client/webconsole/net/components/net-info-group.js b/devtools/client/webconsole/net/components/net-info-group.js
new file mode 100644
index 000000000..d9794652e
--- /dev/null
+++ b/devtools/client/webconsole/net/components/net-info-group.js
@@ -0,0 +1,80 @@
+/* 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 React = require("devtools/client/shared/vendor/react");
+const NetInfoParams = React.createFactory(require("./net-info-params"));
+
+// Shortcuts
+const DOM = React.DOM;
+const PropTypes = React.PropTypes;
+
+/**
+ * This template represents a group of data within a tab. For example,
+ * Headers tab has two groups 'Request Headers' and 'Response Headers'
+ * The Response tab can also have two groups 'Raw Data' and 'JSON'
+ */
+var NetInfoGroup = React.createClass({
+  propTypes: {
+    type: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    params: PropTypes.array,
+    content: PropTypes.element,
+    open: PropTypes.bool
+  },
+
+  displayName: "NetInfoGroup",
+
+  getDefaultProps() {
+    return {
+      open: true,
+    };
+  },
+
+  getInitialState() {
+    return {
+      open: this.props.open,
+    };
+  },
+
+  onToggle(event) {
+    this.setState({
+      open: !this.state.open
+    });
+  },
+
+  render() {
+    let content = this.props.content;
+
+    if (!content && this.props.params) {
+      content = NetInfoParams({
+        params: this.props.params
+      });
+    }
+
+    let open = this.state.open;
+    let className = open ? "opened" : "";
+
+    return (
+      DOM.div({className: "netInfoGroup" + " " + className + " " +
+        this.props.type},
+        DOM.span({
+          className: "netInfoGroupTwisty",
+          onClick: this.onToggle
+        }),
+        DOM.span({
+          className: "netInfoGroupTitle",
+          onClick: this.onToggle},
+          this.props.name
+        ),
+        DOM.div({className: "netInfoGroupContent"},
+          content
+        )
+      )
+    );
+  }
+});
+
+// Exports from this module
+module.exports = NetInfoGroup;