tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

RequestListColumnTime.js (2811B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 const {
     13  getFormattedTime,
     14 } = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
     15 const {
     16  fetchNetworkUpdatePacket,
     17  getResponseTime,
     18  getStartTime,
     19  getEndTime,
     20 } = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
     21 
     22 /**
     23 * This component represents a column displaying selected
     24 * timing value. There are following possible values this
     25 * column can render:
     26 * - Start Time
     27 * - End Time
     28 * - Response Time
     29 * - Duration Time
     30 * - Latency Time
     31 */
     32 class RequestListColumnTime extends Component {
     33  static get propTypes() {
     34    return {
     35      connector: PropTypes.object.isRequired,
     36      firstRequestStartedMs: PropTypes.number.isRequired,
     37      item: PropTypes.object.isRequired,
     38      type: PropTypes.oneOf(["start", "end", "response", "duration", "latency"])
     39        .isRequired,
     40    };
     41  }
     42 
     43  componentDidMount() {
     44    const { item, connector } = this.props;
     45    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
     46  }
     47 
     48  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
     49  UNSAFE_componentWillReceiveProps(nextProps) {
     50    const { item, connector } = nextProps;
     51    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
     52  }
     53 
     54  shouldComponentUpdate(nextProps) {
     55    return this.getTime(this.props) !== this.getTime(nextProps);
     56  }
     57 
     58  getTime(props) {
     59    const { firstRequestStartedMs, item, type } = props;
     60 
     61    switch (type) {
     62      case "start":
     63        return getStartTime(item, firstRequestStartedMs);
     64      case "end":
     65        return getEndTime(item, firstRequestStartedMs);
     66      case "response":
     67        return getResponseTime(item, firstRequestStartedMs);
     68      case "duration":
     69        return item.totalTime;
     70      case "latency":
     71        return item.eventTimings ? item.eventTimings.timings.wait : undefined;
     72    }
     73 
     74    return 0;
     75  }
     76 
     77  render() {
     78    const { type } = this.props;
     79    const time = this.getTime(this.props);
     80    const formattedTime =
     81      isNaN(time) || time === undefined ? "" : getFormattedTime(time);
     82    return dom.td(
     83      {
     84        className:
     85          "requests-list-column requests-list-number-column requests-list-" +
     86          type +
     87          "-time",
     88        title: formattedTime,
     89      },
     90      formattedTime
     91    );
     92  }
     93 }
     94 
     95 module.exports = RequestListColumnTime;