tor-browser

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

ColumnData.js (1831B)


      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  L10N,
     14 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     15 const {
     16  limitTooltipLength,
     17 } = require("resource://devtools/client/netmonitor/src/utils/tooltips.js");
     18 
     19 /**
     20 * Renders the "Data" column of a message.
     21 */
     22 class ColumnData extends Component {
     23  static get propTypes() {
     24    return {
     25      item: PropTypes.object.isRequired,
     26      connector: PropTypes.object.isRequired,
     27    };
     28  }
     29 
     30  render() {
     31    const { type, payload } = this.props.item;
     32    // type could be undefined for sse channel.
     33    const typeLabel = type ? L10N.getStr(`netmonitor.ws.type.${type}`) : null;
     34 
     35    // If payload is a LongStringActor object, we show the first 1000 characters
     36    const displayedPayload = payload.initial ? payload.initial : payload;
     37 
     38    const frameTypeImg = type
     39      ? dom.img({
     40          alt: typeLabel,
     41          className: `message-list-type-icon message-list-type-icon-${type}`,
     42          src: `chrome://devtools/content/netmonitor/src/assets/icons/arrow-up.svg`,
     43        })
     44      : null;
     45 
     46    let title = limitTooltipLength(displayedPayload);
     47    title = type ? typeLabel + " " + title : title;
     48 
     49    return dom.td(
     50      {
     51        className: "message-list-column message-list-payload",
     52        title,
     53      },
     54      frameTypeImg,
     55      " " + displayedPayload
     56    );
     57  }
     58 }
     59 
     60 module.exports = ColumnData;