summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/net/components/headers-tab.js
blob: 2eca3fd2fd2a30eb1b6d32d2a9eb8a5f3fd11616 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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;