tor-browser

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

StatusBar.js (4025B)

      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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const {
     13  connect,
     14 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     15 const { PluralForm } = require("resource://devtools/shared/plural-form.js");
     16 const {
     17  getDisplayedMessagesSummary,
     18 } = require("resource://devtools/client/netmonitor/src/selectors/index.js");
     19 const {
     20  getFormattedSize,
     21  getFormattedTime,
     22 } = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
     23 const {
     24  L10N,
     25 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     26 const {
     27  propertiesEqual,
     28 } = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
     29 
     30 const {
     31  CHANNEL_TYPE,
     32 } = require("resource://devtools/client/netmonitor/src/constants.js");
     33 
     34 const { div, footer } = dom;
     35 
     36 const MESSAGE_COUNT_EMPTY = L10N.getStr(
     37  "networkMenu.ws.summary.framesCountEmpty"
     38 );
     39 const TOOLTIP_MESSAGE_COUNT = L10N.getStr(
     40  "networkMenu.ws.summary.tooltip.framesCount"
     41 );
     42 const TOOLTIP_MESSAGE_TOTAL_SIZE = L10N.getStr(
     43  "networkMenu.ws.summary.tooltip.framesTotalSize"
     44 );
     45 const TOOLTIP_MESSAGE_TOTAL_TIME = L10N.getStr(
     46  "networkMenu.ws.summary.tooltip.framesTotalTime"
     47 );
     48 
     49 const UPDATED_MSG_SUMMARY_PROPS = ["count", "totalMs", "totalSize"];
     50 
     51 /**
     52 * Displays the summary of message count, total size and total time since the first message.
     53 */
     54 class StatusBar extends Component {
     55  static get propTypes() {
     56    return {
     57      channelType: PropTypes.string,
     58      summary: PropTypes.object.isRequired,
     59    };
     60  }
     61 
     62  shouldComponentUpdate(nextProps) {
     63    const { summary, channelType } = this.props;
     64    return (
     65      channelType !== nextProps.channelType ||
     66      !propertiesEqual(UPDATED_MSG_SUMMARY_PROPS, summary, nextProps.summary)
     67    );
     68  }
     69 
     70  render() {
     71    const { summary, channelType } = this.props;
     72    const { count, totalMs, sentSize, receivedSize, totalSize } = summary;
     73 
     74    const countText =
     75      count === 0
     76        ? MESSAGE_COUNT_EMPTY
     77        : PluralForm.get(
     78            count,
     79            L10N.getStr("networkMenu.ws.summary.framesCount2")
     80          ).replace("#1", count);
     81    const totalSizeText = getFormattedSize(totalSize);
     82    const sentSizeText = getFormattedSize(sentSize);
     83    const receivedText = getFormattedSize(receivedSize);
     84    const totalMillisText = getFormattedTime(totalMs);
     85 
     86    // channelType might be null in which case it's better to just show
     87    // total size than showing all three sizes.
     88    const summaryText =
     89      channelType === CHANNEL_TYPE.WEB_SOCKET
     90        ? L10N.getFormatStr(
     91            "networkMenu.ws.summary.label.framesTranferredSize",
     92            totalSizeText,
     93            sentSizeText,
     94            receivedText
     95          )
     96        : `${totalSizeText} total`;
     97 
     98    return footer(
     99      { className: "devtools-toolbar devtools-toolbar-bottom" },
    100      div(
    101        {
    102          className: "status-bar-label message-network-summary-count",
    103          title: TOOLTIP_MESSAGE_COUNT,
    104        },
    105        countText
    106      ),
    107      count !== 0 &&
    108        div(
    109          {
    110            className: "status-bar-label message-network-summary-total-size",
    111            title: TOOLTIP_MESSAGE_TOTAL_SIZE,
    112          },
    113          summaryText
    114        ),
    115      count !== 0 &&
    116        div(
    117          {
    118            className: "status-bar-label message-network-summary-total-millis",
    119            title: TOOLTIP_MESSAGE_TOTAL_TIME,
    120          },
    121          totalMillisText
    122        )
    123    );
    124  }
    125 }
    126 
    127 module.exports = connect(state => ({
    128  channelType: state.messages.currentChannelType,
    129  summary: getDisplayedMessagesSummary(state),
    130 }))(StatusBar);