tor-browser

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

ServiceWorkerAction.js (3710B)

      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 const {
     14  connect,
     15 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     16 
     17 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     18 const Localized = createFactory(FluentReact.Localized);
     19 
     20 const {
     21  getCurrentRuntimeDetails,
     22 } = require("resource://devtools/client/aboutdebugging/src/modules/runtimes-state-helper.js");
     23 
     24 const InspectAction = createFactory(
     25  require("resource://devtools/client/aboutdebugging/src/components/debugtarget/InspectAction.js")
     26 );
     27 
     28 const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
     29 const {
     30  SERVICE_WORKER_STATUSES,
     31 } = require("resource://devtools/client/aboutdebugging/src/constants.js");
     32 
     33 /**
     34 * This component displays buttons for service worker.
     35 */
     36 class ServiceWorkerAction extends PureComponent {
     37  static get propTypes() {
     38    return {
     39      dispatch: PropTypes.func.isRequired,
     40      // Provided by redux state
     41      runtimeDetails: Types.runtimeDetails.isRequired,
     42      target: Types.debugTarget.isRequired,
     43    };
     44  }
     45 
     46  _renderInspectAction() {
     47    const { status } = this.props.target.details;
     48    const shallRenderInspectAction =
     49      status === SERVICE_WORKER_STATUSES.RUNNING ||
     50      status === SERVICE_WORKER_STATUSES.REGISTERING;
     51 
     52    if (!shallRenderInspectAction) {
     53      return null;
     54    }
     55 
     56    const { canDebugServiceWorkers } = this.props.runtimeDetails;
     57    return Localized(
     58      {
     59        id: "about-debugging-worker-inspect-action-disabled",
     60        attrs: {
     61          // Show an explanatory title only if the action is disabled.
     62          title: !canDebugServiceWorkers,
     63        },
     64      },
     65      InspectAction({
     66        disabled: !canDebugServiceWorkers,
     67        dispatch: this.props.dispatch,
     68        target: this.props.target,
     69      })
     70    );
     71  }
     72 
     73  _getStatusLocalizationId(status) {
     74    switch (status) {
     75      case SERVICE_WORKER_STATUSES.REGISTERING.toLowerCase():
     76        return "about-debugging-worker-status-registering";
     77      case SERVICE_WORKER_STATUSES.RUNNING.toLowerCase():
     78        return "about-debugging-worker-status-running";
     79      case SERVICE_WORKER_STATUSES.STOPPED.toLowerCase():
     80        return "about-debugging-worker-status-stopped";
     81      default:
     82        // Assume status is stopped for unknown status value.
     83        return "about-debugging-worker-status-stopped";
     84    }
     85  }
     86 
     87  _renderStatus() {
     88    const status = this.props.target.details.status.toLowerCase();
     89    const statusClassName =
     90      status === SERVICE_WORKER_STATUSES.RUNNING.toLowerCase()
     91        ? "service-worker-action__status--running"
     92        : "";
     93 
     94    return Localized(
     95      {
     96        id: this._getStatusLocalizationId(status),
     97      },
     98      dom.span(
     99        {
    100          className: `service-worker-action__status qa-worker-status ${statusClassName}`,
    101        },
    102        status
    103      )
    104    );
    105  }
    106 
    107  render() {
    108    return dom.div(
    109      {
    110        className: "service-worker-action",
    111      },
    112      this._renderStatus(),
    113      this._renderInspectAction()
    114    );
    115  }
    116 }
    117 
    118 const mapStateToProps = state => {
    119  return {
    120    runtimeDetails: getCurrentRuntimeDetails(state.runtimes),
    121  };
    122 };
    123 
    124 module.exports = connect(mapStateToProps)(ServiceWorkerAction);