tor-browser

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

ChromeDebugToolbar.js (3381B)

      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 file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 const {
      7  PureComponent,
      8  createFactory,
      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 
     13 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     14 const Localized = createFactory(FluentReact.Localized);
     15 
     16 const MODE_PREF = "devtools.browsertoolbox.scope";
     17 
     18 const MODE_VALUES = {
     19  PARENT_PROCESS: "parent-process",
     20  EVERYTHING: "everything",
     21 };
     22 
     23 const MODE_DATA = {
     24  [MODE_VALUES.PARENT_PROCESS]: {
     25    containerL10nId: "toolbox-mode-parent-process-container",
     26    labelL10nId: "toolbox-mode-parent-process-label",
     27    subLabelL10nId: "toolbox-mode-parent-process-sub-label",
     28  },
     29  [MODE_VALUES.EVERYTHING]: {
     30    containerL10nId: "toolbox-mode-everything-container",
     31    labelL10nId: "toolbox-mode-everything-label",
     32    subLabelL10nId: "toolbox-mode-everything-sub-label",
     33  },
     34 };
     35 
     36 /**
     37 * Toolbar displayed on top of the regular toolbar in the Browser Toolbox and Browser Console,
     38 * displaying chrome-debugging-specific options.
     39 */
     40 class ChromeDebugToolbar extends PureComponent {
     41  static get propTypes() {
     42    return {
     43      isBrowserConsole: PropTypes.bool,
     44    };
     45  }
     46 
     47  constructor(props) {
     48    super(props);
     49 
     50    this.state = {
     51      mode: Services.prefs.getCharPref(MODE_PREF),
     52    };
     53 
     54    this.onModePrefChanged = this.onModePrefChanged.bind(this);
     55    Services.prefs.addObserver(MODE_PREF, this.onModePrefChanged);
     56  }
     57 
     58  componentWillUnmount() {
     59    Services.prefs.removeObserver(MODE_PREF, this.onModePrefChanged);
     60  }
     61 
     62  onModePrefChanged() {
     63    this.setState({
     64      mode: Services.prefs.getCharPref(MODE_PREF),
     65    });
     66  }
     67 
     68  renderModeItem(value) {
     69    const { containerL10nId, labelL10nId, subLabelL10nId } = MODE_DATA[value];
     70 
     71    const checked = this.state.mode == value;
     72    return Localized(
     73      {
     74        id: containerL10nId,
     75        attrs: { title: true },
     76      },
     77      dom.label(
     78        {
     79          className: checked ? "selected" : null,
     80        },
     81        dom.input({
     82          type: `radio`,
     83          name: `chrome-debug-mode`,
     84          value,
     85          checked: checked || null,
     86          onChange: () => {
     87            Services.prefs.setCharPref(MODE_PREF, value);
     88          },
     89        }),
     90        Localized({ id: labelL10nId }, dom.span({ className: "mode__label" })),
     91        Localized(
     92          { id: subLabelL10nId },
     93          dom.span({ className: "mode__sublabel" })
     94        )
     95      )
     96    );
     97  }
     98 
     99  render() {
    100    return dom.header(
    101      {
    102        className: "chrome-debug-toolbar",
    103      },
    104      dom.section(
    105        {
    106          className: "chrome-debug-toolbar__modes",
    107        },
    108        Localized(
    109          {
    110            id: this.props.isBrowserConsole
    111              ? "toolbox-mode-browser-console-label"
    112              : "toolbox-mode-browser-toolbox-label",
    113          },
    114          dom.h3({})
    115        ),
    116        this.renderModeItem(MODE_VALUES.PARENT_PROCESS),
    117        this.renderModeItem(MODE_VALUES.EVERYTHING)
    118      )
    119    );
    120  }
    121 }
    122 
    123 module.exports = ChromeDebugToolbar;