devtools/client/performance-new/components/panel/DevToolsPresetSelection.js

   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 /**
  12  * @typedef {Object} StateProps
  13  * @property {string} presetName
  14  * @property {number} interval
  15  * @property {string[]} threads
  16  * @property {string[]} features
  17  * @property {import("../../@types/perf").Presets} presets
  18  */
  19
  20 /**
  21  * @typedef {Object} ThunkDispatchProps
  22  * @property {typeof actions.changePreset} changePreset
  23  */
  24
  25 /**
  26  * @typedef {Object} OwnProps
  27  * @property {() => void} onEditSettingsLinkClicked
  28  */
  29
  30 /**
  31  * @typedef {ResolveThunks<ThunkDispatchProps>} DispatchProps
  32  * @typedef {StateProps & DispatchProps & OwnProps} Props
  33  * @typedef {import("../../@types/perf").State} StoreState
  34  * @typedef {import("../../@types/perf").FeatureDescription} FeatureDescription
  35  */
  36
  37 "use strict";
  38
  39 const {
  40   PureComponent,
  41   createFactory,
  42 } = require("resource://devtools/client/shared/vendor/react.js");
  43 const {
  44   div,
  45   select,
  46   option,
  47   button,
  48   ul,
  49   li,
  50   span,
  51 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
  52 const {
  53   connect,
  54 } = require("resource://devtools/client/shared/vendor/react-redux.js");
  55 const actions = require("resource://devtools/client/performance-new/store/actions.js");
  56 const selectors = require("resource://devtools/client/performance-new/store/selectors.js");
  57 const {
  58   featureDescriptions,
  59 } = require("resource://devtools/client/performance-new/shared/utils.js");
  60 const Localized = createFactory(
  61   require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
  62 );
  63
  64 /**
  65  * This component displays the preset selection for the DevTools panel. It should be
  66  * basically the same implementation as the popup, but done in React. The popup
  67  * is written using vanilla JS and browser chrome elements in order to be more
  68  * performant.
  69  *
  70  * @extends {React.PureComponent<Props>}
  71  */
  72 class DevToolsPresetSelection extends PureComponent {
  73   /** @param {Props} props */
  74   constructor(props) {
  75     super(props);
  76
  77     /**
  78      * Create an object map to easily look up feature description.
  79      * @type {{[key: string]: FeatureDescription}}
  80      */
  81     this.featureDescriptionMap = {};
  82     for (const feature of featureDescriptions) {
  83       this.featureDescriptionMap[feature.value] = feature;
  84     }
  85   }
  86
  87   /**
  88    * Handle the select change.
  89    * @param {React.ChangeEvent<HTMLSelectElement>} event
  90    */
  91   onPresetChange = event => {
  92     const { presets } = this.props;
  93     this.props.changePreset(presets, event.target.value);
  94   };
  95
  96   render() {
  97     const { presetName, presets, onEditSettingsLinkClicked } = this.props;
  98
  99     let presetDescription;
 100     const currentPreset = presets[presetName];
 101     if (currentPreset) {
 102       // Display the current preset's description.
 103       presetDescription = Localized({
 104         id: currentPreset.l10nIds.devtools.description,
 105       });
 106     } else {
 107       // Build up a display of the details of the custom preset.
 108       const { interval, threads, features } = this.props;
 109       presetDescription = div(
 110         null,
 111         ul(
 112           { className: "perf-presets-custom" },
 113           li(
 114             null,
 115             Localized(
 116               { id: "perftools-devtools-interval-label" },
 117               span({ className: "perf-presets-custom-bold" })
 118             ),
 119             " ",
 120             Localized({
 121               id: "perftools-range-interval-milliseconds",
 122               $interval: interval,
 123             })
 124           ),
 125           li(
 126             null,
 127             Localized(
 128               { id: "perftools-devtools-threads-label" },
 129               span({ className: "perf-presets-custom-bold" })
 130             ),
 131             " ",
 132             threads.join(", ")
 133           ),
 134           features.map(feature => {
 135             const description = this.featureDescriptionMap[feature];
 136             if (!description) {
 137               throw new Error(
 138                 "Could not find the feature description for " + feature
 139               );
 140             }
 141             return li(
 142               { key: feature },
 143               description ? description.name : feature
 144             );
 145           })
 146         )
 147       );
 148     }
 149
 150     return div(
 151       { className: "perf-presets" },
 152       div(
 153         { className: "perf-presets-settings" },
 154         Localized({ id: "perftools-devtools-settings-label" })
 155       ),
 156       div(
 157         { className: "perf-presets-details" },
 158         div(
 159           { className: "perf-presets-details-row" },
 160           select(
 161             {
 162               className: "perf-presets-select",
 163               onChange: this.onPresetChange,
 164               value: presetName,
 165             },
 166             Object.entries(presets).map(([name, preset]) =>
 167               Localized(
 168                 { id: preset.l10nIds.devtools.label },
 169                 option({ key: name, value: name })
 170               )
 171             ),
 172             Localized(
 173               { id: "perftools-presets-custom-label" },
 174               option({ value: "custom" })
 175             )
 176           )
 177           // The overhead component will go here.
 178         ),
 179         div(
 180           { className: "perf-presets-details-row perf-presets-description" },
 181           presetDescription
 182         ),
 183         button(
 184           {
 185             className: "perf-external-link",
 186             onClick: onEditSettingsLinkClicked,
 187           },
 188           Localized({ id: "perftools-button-edit-settings" })
 189         )
 190       )
 191     );
 192   }
 193 }
 194
 195 /**
 196  * @param {StoreState} state
 197  * @returns {StateProps}
 198  */
 199 function mapStateToProps(state) {
 200   return {
 201     presetName: selectors.getPresetName(state),
 202     presets: selectors.getPresets(state),
 203     interval: selectors.getInterval(state),
 204     threads: selectors.getThreads(state),
 205     features: selectors.getFeatures(state),
 206   };
 207 }
 208
 209 /**
 210  * @type {ThunkDispatchProps}
 211  */
 212 const mapDispatchToProps = {
 213   changePreset: actions.changePreset,
 214 };
 215
 216 module.exports = connect(
 217   mapStateToProps,
 218   mapDispatchToProps
 219 )(DevToolsPresetSelection);