1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/webconsole/net/components/headers-tab.js b/devtools/client/webconsole/net/components/headers-tab.js
new file mode 100644
index 000000000..2eca3fd2f
--- /dev/null
+++ b/devtools/client/webconsole/net/components/headers-tab.js
@@ -0,0 +1,79 @@
+/* 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 NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
+const Spinner = React.createFactory(require("./spinner"));
+
+// Shortcuts
+const DOM = React.DOM;
+const PropTypes = React.PropTypes;
+
+/**
+ * This template represents 'Headers' tab displayed when the user
+ * expands network log in the Console panel. It's responsible for rendering
+ * request and response HTTP headers.
+ */
+var HeadersTab = React.createClass({
+  propTypes: {
+    actions: PropTypes.shape({
+      requestData: PropTypes.func.isRequired
+    }),
+    data: PropTypes.object.isRequired,
+  },
+
+  displayName: "HeadersTab",
+
+  componentDidMount() {
+    let { actions, data } = this.props;
+    let requestHeaders = data.request.headers;
+    let responseHeaders = data.response.headers;
+
+    // Request headers if they are not available yet.
+    // TODO: use async action objects as soon as Redux is in place
+    if (!requestHeaders) {
+      actions.requestData("requestHeaders");
+    }
+
+    if (!responseHeaders) {
+      actions.requestData("responseHeaders");
+    }
+  },
+
+  render() {
+    let { data } = this.props;
+    let requestHeaders = data.request.headers;
+    let responseHeaders = data.response.headers;
+
+    // TODO: Another groups to implement:
+    // 1) Cached Headers
+    // 2) Headers from upload stream
+    let groups = [{
+      key: "responseHeaders",
+      name: Locale.$STR("responseHeaders"),
+      params: responseHeaders
+    }, {
+      key: "requestHeaders",
+      name: Locale.$STR("requestHeaders"),
+      params: requestHeaders
+    }];
+
+    // If response headers are not available yet, display a spinner
+    if (!responseHeaders || !responseHeaders.length) {
+      groups[0].content = Spinner();
+    }
+
+    return (
+      DOM.div({className: "headersTabBox"},
+        DOM.div({className: "panelContent"},
+          NetInfoGroupList({groups: groups})
+        )
+      )
+    );
+  }
+});
+
+// Exports from this module
+module.exports = HeadersTab;