tor-browser

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

Presets.js (4353B)

      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 // @ts-check
      5 
      6 /**
      7 * @template P
      8 * @typedef {import("react-redux").ResolveThunks<P>} ResolveThunks<P>
      9 */
     10 
     11 "use strict";
     12 const {
     13  PureComponent,
     14  createElement,
     15  createFactory,
     16  Fragment,
     17 } = require("resource://devtools/client/shared/vendor/react.mjs");
     18 const {
     19  div,
     20  label,
     21  input,
     22 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     23 const selectors = require("resource://devtools/client/performance-new/store/selectors.js");
     24 const actions = require("resource://devtools/client/performance-new/store/actions.js");
     25 const {
     26  connect,
     27 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     28 
     29 const Localized = createFactory(
     30  require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
     31 );
     32 
     33 /**
     34 * @typedef {object} PresetProps
     35 * @property {string} presetName
     36 * @property {boolean} selected
     37 * @property {import("../../@types/perf").PresetDefinition | null} preset
     38 * @property {(presetName: string) => void} onChange
     39 */
     40 
     41 /**
     42 * Switch between various profiler presets, which will override the individualized
     43 * settings for the profiler.
     44 *
     45 * @augments {React.PureComponent<PresetProps>}
     46 */
     47 class Preset extends PureComponent {
     48  /**
     49   * Handle the checkbox change.
     50   *
     51   * @param {React.ChangeEvent<HTMLInputElement>} event
     52   */
     53  onChange = event => {
     54    this.props.onChange(event.target.value);
     55  };
     56 
     57  render() {
     58    const { preset, presetName, selected } = this.props;
     59    const presetLabelAndDescription = preset
     60      ? createElement(
     61          Fragment,
     62          null,
     63          Localized(
     64            { id: preset.l10nIds.devtools.label },
     65            div({ className: "perf-toggle-text-label" })
     66          ),
     67          Localized(
     68            { id: preset.l10nIds.devtools.description },
     69            div({ className: "perf-toggle-description" })
     70          )
     71        )
     72      : Localized(
     73          { id: "perftools-presets-custom-label" },
     74          div({ className: "perf-toggle-text-label" }, "Custom")
     75        );
     76 
     77    return label(
     78      { className: "perf-toggle-label" },
     79      input({
     80        className: "perf-presets-radio-button",
     81        type: "radio",
     82        name: "presets",
     83        value: presetName,
     84        checked: selected,
     85        onChange: this.onChange,
     86      }),
     87      presetLabelAndDescription
     88    );
     89  }
     90 }
     91 
     92 /**
     93 * @typedef {object} StateProps
     94 * @property {string} selectedPresetName
     95 * @property {import("../../@types/perf").Presets} presets
     96 */
     97 
     98 /**
     99 * @typedef {object} ThunkDispatchProps
    100 * @property {typeof actions.changePreset} changePreset
    101 */
    102 
    103 /**
    104 * @typedef {ResolveThunks<ThunkDispatchProps>} DispatchProps
    105 * @typedef {StateProps & DispatchProps} Props
    106 * @typedef {import("../../@types/perf").State} StoreState
    107 */
    108 
    109 /**
    110 * Switch between various profiler presets, which will override the individualized
    111 * settings for the profiler.
    112 *
    113 * @augments {React.PureComponent<Props>}
    114 */
    115 class Presets extends PureComponent {
    116  /**
    117   * Handle the checkbox change.
    118   *
    119   * @param {string} presetName
    120   */
    121  onChange = presetName => {
    122    const { presets } = this.props;
    123    this.props.changePreset(presets, presetName);
    124  };
    125 
    126  render() {
    127    const { presets, selectedPresetName } = this.props;
    128 
    129    return div(
    130      { className: "perf-presets" },
    131      Object.entries(presets).map(([presetName, preset]) =>
    132        createElement(Preset, {
    133          key: presetName,
    134          presetName,
    135          preset,
    136          selected: presetName === selectedPresetName,
    137          onChange: this.onChange,
    138        })
    139      ),
    140      createElement(Preset, {
    141        key: "custom",
    142        presetName: "custom",
    143        selected: selectedPresetName == "custom",
    144        preset: null,
    145        onChange: this.onChange,
    146      })
    147    );
    148  }
    149 }
    150 
    151 /**
    152 * @param {StoreState} state
    153 * @returns {StateProps}
    154 */
    155 function mapStateToProps(state) {
    156  return {
    157    selectedPresetName: selectors.getPresetName(state),
    158    presets: selectors.getPresets(state),
    159  };
    160 }
    161 
    162 /**
    163 * @type {ThunkDispatchProps}
    164 */
    165 const mapDispatchToProps = {
    166  changePreset: actions.changePreset,
    167 };
    168 
    169 module.exports = connect(mapStateToProps, mapDispatchToProps)(Presets);