tor-browser

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

WorkerDetail.js (3666B)

      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  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 
     14 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     15 const Localized = createFactory(FluentReact.Localized);
     16 
     17 const {
     18  SERVICE_WORKER_FETCH_STATES,
     19 } = require("resource://devtools/client/aboutdebugging/src/constants.js");
     20 
     21 const FieldPair = createFactory(
     22  require("resource://devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.js")
     23 );
     24 
     25 const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
     26 
     27 /**
     28 * This component displays detail information for worker.
     29 */
     30 class WorkerDetail extends PureComponent {
     31  static get propTypes() {
     32    return {
     33      // Provided by wrapping the component with FluentReact.withLocalization.
     34      getString: PropTypes.func.isRequired,
     35      target: Types.debugTarget.isRequired,
     36    };
     37  }
     38 
     39  renderFetch() {
     40    const { fetch } = this.props.target.details;
     41    const isListening = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING;
     42    const localizationId = isListening
     43      ? "about-debugging-worker-fetch-listening"
     44      : "about-debugging-worker-fetch-not-listening";
     45 
     46    return Localized(
     47      {
     48        id: localizationId,
     49        attrs: {
     50          label: true,
     51          value: true,
     52        },
     53      },
     54      FieldPair({
     55        className: isListening
     56          ? "qa-worker-fetch-listening"
     57          : "qa-worker-fetch-not-listening",
     58        label: "Fetch",
     59        slug: "fetch",
     60        value: "about-debugging-worker-fetch-value",
     61      })
     62    );
     63  }
     64 
     65  renderPushService() {
     66    const { pushServiceEndpoint } = this.props.target.details;
     67 
     68    return Localized(
     69      {
     70        id: "about-debugging-worker-push-service",
     71        attrs: { label: true },
     72      },
     73      FieldPair({
     74        slug: "push-service",
     75        label: "Push Service",
     76        value: dom.span(
     77          {
     78            className: "qa-worker-push-service-value",
     79          },
     80          pushServiceEndpoint
     81        ),
     82      })
     83    );
     84  }
     85 
     86  renderScope() {
     87    const { scope } = this.props.target.details;
     88 
     89    return Localized(
     90      {
     91        id: "about-debugging-worker-scope",
     92        attrs: { label: true },
     93      },
     94      FieldPair({
     95        slug: "scope",
     96        label: "Scope",
     97        value: scope,
     98      })
     99    );
    100  }
    101 
    102  renderOrigin() {
    103    const { origin } = this.props.target.details;
    104 
    105    return Localized(
    106      {
    107        id: "about-debugging-worker-origin",
    108        attrs: { label: true },
    109      },
    110      FieldPair({
    111        slug: "origin",
    112        label: "Origin",
    113        value: origin,
    114      })
    115    );
    116  }
    117 
    118  render() {
    119    const { fetch, pushServiceEndpoint, scope, origin } =
    120      this.props.target.details;
    121 
    122    const isEmptyList =
    123      !pushServiceEndpoint && !fetch && !scope && !origin && !status;
    124 
    125    return dom.dl(
    126      {
    127        className:
    128          "debug-target-item__detail" +
    129          (isEmptyList ? " debug-target-item__detail--empty" : ""),
    130      },
    131      pushServiceEndpoint ? this.renderPushService() : null,
    132      fetch ? this.renderFetch() : null,
    133      scope ? this.renderScope() : null,
    134      origin ? this.renderOrigin() : null
    135    );
    136  }
    137 }
    138 
    139 module.exports = FluentReact.withLocalization(WorkerDetail);