Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 674 insertions, 0 deletions

diff --git a/devtools/client/performance-new/components/aboutprofiling/Settings.js b/devtools/client/performance-new/components/aboutprofiling/Settings.js
new file mode 100644
index 0000000000..3afe3a2d94
--- /dev/null
+++ b/devtools/client/performance-new/components/aboutprofiling/Settings.js
@@ -0,0 +1,674 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @ts-check
+
+/**
+ * @typedef {Object} StateProps
+ * @property {number} interval
+ * @property {number} entries
+ * @property {string[]} features
+ * @property {string[]} threads
+ * @property {string} threadsString
+ * @property {string[]} objdirs
+ * @property {string[]} supportedFeatures
+ */
+
+/**
+ * @typedef {Object} ThunkDispatchProps
+ * @property {typeof actions.changeInterval} changeInterval
+ * @property {typeof actions.changeEntries} changeEntries
+ * @property {typeof actions.changeFeatures} changeFeatures
+ * @property {typeof actions.changeThreads} changeThreads
+ * @property {typeof actions.changeObjdirs} changeObjdirs
+ */
+
+/**
+ * @typedef {ResolveThunks<ThunkDispatchProps>} DispatchProps
+ */
+
+/**
+ * @typedef {Object} State
+ * @property {null | string} temporaryThreadText
+ */
+
+/**
+ * @typedef {import("../../@types/perf").State} StoreState
+ * @typedef {import("../../@types/perf").FeatureDescription} FeatureDescription
+ *
+ * @typedef {StateProps & DispatchProps} Props
+ */
+
+/**
+ * @template P
+ * @typedef {import("react-redux").ResolveThunks<P>} ResolveThunks<P>
+ */
+
+/**
+ * @template InjectedProps
+ * @template NeededProps
+ * @typedef {import("react-redux")
+ *    .InferableComponentEnhancerWithProps<InjectedProps, NeededProps>
+ * } InferableComponentEnhancerWithProps<InjectedProps, NeededProps>
+ */
+"use strict";
+
+const {
+  PureComponent,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  div,
+  label,
+  input,
+  h1,
+  h2,
+  h3,
+  section,
+  p,
+  span,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Range = createFactory(
+  require("resource://devtools/client/performance-new/components/aboutprofiling/Range.js")
+);
+const DirectoryPicker = createFactory(
+  require("resource://devtools/client/performance-new/components/aboutprofiling/DirectoryPicker.js")
+);
+const {
+  makeLinear10Scale,
+  makePowerOf2Scale,
+  formatFileSize,
+  featureDescriptions,
+} = require("resource://devtools/client/performance-new/shared/utils.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+const actions = require("resource://devtools/client/performance-new/store/actions.js");
+const selectors = require("resource://devtools/client/performance-new/store/selectors.js");
+const {
+  openFilePickerForObjdir,
+} = require("resource://devtools/client/performance-new/shared/browser.js");
+const Localized = createFactory(
+  require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
+);
+
+// The Gecko Profiler interprets the "entries" setting as 8 bytes per entry.
+const PROFILE_ENTRY_SIZE = 8;
+
+/**
+ * @typedef {{ name: string, id: string, l10nId: string }} ThreadColumn
+ */
+
+/** @type {Array<ThreadColumn[]>} */
+const threadColumns = [
+  [
+    {
+      name: "GeckoMain",
+      id: "gecko-main",
+      // The l10nId take the form `perf-thread-${id}`, but isn't done programmatically
+      // so that it is easy to search in the codebase.
+      l10nId: "perftools-thread-gecko-main",
+    },
+    {
+      name: "Compositor",
+      id: "compositor",
+      l10nId: "perftools-thread-compositor",
+    },
+    {
+      name: "DOM Worker",
+      id: "dom-worker",
+      l10nId: "perftools-thread-dom-worker",
+    },
+    {
+      name: "Renderer",
+      id: "renderer",
+      l10nId: "perftools-thread-renderer",
+    },
+  ],
+  [
+    {
+      name: "RenderBackend",
+      id: "render-backend",
+      l10nId: "perftools-thread-render-backend",
+    },
+    {
+      name: "Timer",
+      id: "timer",
+      l10nId: "perftools-thread-timer",
+    },
+    {
+      name: "StyleThread",
+      id: "style-thread",
+      l10nId: "perftools-thread-style-thread",
+    },
+    {
+      name: "Socket Thread",
+      id: "socket-thread",
+      l10nId: "perftools-thread-socket-thread",
+    },
+  ],
+  [
+    {
+      name: "StreamTrans",
+      id: "stream-trans",
+      l10nId: "pref-thread-stream-trans",
+    },
+    {
+      name: "ImgDecoder",
+      id: "img-decoder",
+      l10nId: "perftools-thread-img-decoder",
+    },
+    {
+      name: "DNS Resolver",
+      id: "dns-resolver",
+      l10nId: "perftools-thread-dns-resolver",
+    },
+    {
+      // Threads that are part of XPCOM's TaskController thread pool.
+      name: "TaskController",
+      id: "task-controller",
+      l10nId: "perftools-thread-task-controller",
+    },
+  ],
+];
+
+/** @type {Array<ThreadColumn[]>} */
+const jvmThreadColumns = [
+  [
+    {
+      name: "Gecko",
+      id: "gecko",
+      l10nId: "perftools-thread-jvm-gecko",
+    },
+    {
+      name: "Nimbus",
+      id: "nimbus",
+      l10nId: "perftools-thread-jvm-nimbus",
+    },
+  ],
+  [
+    {
+      name: "DefaultDispatcher",
+      id: "default-dispatcher",
+      l10nId: "perftools-thread-jvm-default-dispatcher",
+    },
+    {
+      name: "Glean",
+      id: "glean",
+      l10nId: "perftools-thread-jvm-glean",
+    },
+  ],
+  [
+    {
+      name: "arch_disk_io",
+      id: "arch-disk-io",
+      l10nId: "perftools-thread-jvm-arch-disk-io",
+    },
+    {
+      name: "pool-",
+      id: "pool",
+      l10nId: "perftools-thread-jvm-pool",
+    },
+  ],
+];
+
+/**
+ * This component manages the settings for recording a performance profile.
+ * @extends {React.PureComponent<Props, State>}
+ */
+class Settings extends PureComponent {
+  /**
+   * @param {Props} props
+   */
+  constructor(props) {
+    super(props);
+    /** @type {State} */
+    this.state = {
+      // Allow the textbox to have a temporary tracked value.
+      temporaryThreadText: null,
+    };
+
+    this._intervalExponentialScale = makeLinear10Scale(0.01, 100);
+    this._entriesExponentialScale = makePowerOf2Scale(
+      128 * 1024,
+      256 * 1024 * 1024
+    );
+  }
+
+  /**
+   * Handle the checkbox change.
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  _handleThreadCheckboxChange = event => {
+    const { threads, changeThreads } = this.props;
+    const { checked, value } = event.target;
+
+    if (checked) {
+      if (!threads.includes(value)) {
+        changeThreads([...threads, value]);
+      }
+    } else {
+      changeThreads(threads.filter(thread => thread !== value));
+    }
+  };
+
+  /**
+   * Handle the checkbox change.
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  _handleFeaturesCheckboxChange = event => {
+    const { features, changeFeatures } = this.props;
+    const { checked, value } = event.target;
+
+    if (checked) {
+      if (!features.includes(value)) {
+        changeFeatures([value, ...features]);
+      }
+    } else {
+      changeFeatures(features.filter(feature => feature !== value));
+    }
+  };
+
+  _handleAddObjdir = () => {
+    const { objdirs, changeObjdirs } = this.props;
+    openFilePickerForObjdir(window, objdirs, changeObjdirs);
+  };
+
+  /**
+   * @param {number} index
+   * @return {void}
+   */
+  _handleRemoveObjdir = index => {
+    const { objdirs, changeObjdirs } = this.props;
+    const newObjdirs = [...objdirs];
+    newObjdirs.splice(index, 1);
+    changeObjdirs(newObjdirs);
+  };
+
+  /**
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  _setThreadTextFromInput = event => {
+    this.setState({ temporaryThreadText: event.target.value });
+  };
+
+  /**
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  _handleThreadTextCleanup = event => {
+    this.setState({ temporaryThreadText: null });
+    this.props.changeThreads(_threadTextToList(event.target.value));
+  };
+
+  /**
+   * @param {ThreadColumn[]} threadDisplay
+   * @param {number} index
+   * @return {React.ReactNode}
+   */
+  _renderThreadsColumns(threadDisplay, index) {
+    const { threads } = this.props;
+    const areAllThreadsIncluded = threads.includes("*");
+    return div(
+      { className: "perf-settings-thread-column", key: index },
+      threadDisplay.map(({ name, id, l10nId }) =>
+        Localized(
+          // The title is localized with a description of the thread.
+          { id: l10nId, attrs: { title: true }, key: name },
+          label(
+            {
+              className: `perf-settings-checkbox-label perf-settings-thread-label toggle-container-with-text ${
+                areAllThreadsIncluded
+                  ? "perf-settings-checkbox-label-disabled"
+                  : ""
+              }`,
+            },
+            input({
+              className: "perf-settings-checkbox",
+              id: `perf-settings-thread-checkbox-${id}`,
+              type: "checkbox",
+              // Do not localize the value, this is used internally by the profiler.
+              value: name,
+              checked: threads.includes(name),
+              disabled: areAllThreadsIncluded,
+              onChange: this._handleThreadCheckboxChange,
+            }),
+            span(null, name)
+          )
+        )
+      )
+    );
+  }
+  _renderThreads() {
+    const { temporaryThreadText } = this.state;
+    const { threads } = this.props;
+
+    return renderSection(
+      "perf-settings-threads-summary",
+      Localized({ id: "perftools-heading-threads" }, "Threads"),
+      div(
+        null,
+        div(
+          { className: "perf-settings-thread-columns" },
+          threadColumns.map((threadDisplay, index) =>
+            this._renderThreadsColumns(threadDisplay, index)
+          )
+        ),
+        this._renderJvmThreads(),
+        div(
+          {
+            className: "perf-settings-checkbox-label perf-settings-all-threads",
+          },
+          label(
+            {
+              className: "toggle-container-with-text",
+            },
+            input({
+              id: "perf-settings-thread-checkbox-all-threads",
+              type: "checkbox",
+              value: "*",
+              checked: threads.includes("*"),
+              onChange: this._handleThreadCheckboxChange,
+            }),
+            Localized({ id: "perftools-record-all-registered-threads" })
+          )
+        ),
+        div(
+          { className: "perf-settings-row" },
+          Localized(
+            { id: "perftools-tools-threads-input-label" },
+            label(
+              { className: "perf-settings-text-label" },
+              div(
+                null,
+                Localized(
+                  { id: "perftools-custom-threads-label" },
+                  "Add custom threads by name:"
+                )
+              ),
+              input({
+                className: "perf-settings-text-input",
+                id: "perftools-settings-thread-text",
+                type: "text",
+                value:
+                  temporaryThreadText === null
+                    ? threads.join(",")
+                    : temporaryThreadText,
+                onBlur: this._handleThreadTextCleanup,
+                onFocus: this._setThreadTextFromInput,
+                onChange: this._setThreadTextFromInput,
+              })
+            )
+          )
+        )
+      )
+    );
+  }
+
+  _renderJvmThreads() {
+    if (!this.props.supportedFeatures.includes("java")) {
+      return null;
+    }
+
+    return [
+      h2(
+        null,
+        Localized({ id: "perftools-heading-threads-jvm" }, "JVM Threads")
+      ),
+      div(
+        { className: "perf-settings-thread-columns" },
+        jvmThreadColumns.map((threadDisplay, index) =>
+          this._renderThreadsColumns(threadDisplay, index)
+        )
+      ),
+    ];
+  }
+
+  /**
+   * @param {React.ReactNode} sectionTitle
+   * @param {FeatureDescription[]} features
+   * @param {boolean} isSupported
+   */
+  _renderFeatureSection(sectionTitle, features, isSupported) {
+    if (features.length === 0) {
+      return null;
+    }
+
+    // Note: This area is not localized. This area is pretty deep in the UI, and is mostly
+    // geared towards Firefox engineers. It may not be worth localizing. This decision
+    // can be tracked in Bug 1682333.
+
+    return div(
+      null,
+      h3(null, sectionTitle),
+      features.map(featureDescription => {
+        const { name, value, title, disabledReason } = featureDescription;
+        const extraClassName = isSupported
+          ? ""
+          : "perf-settings-checkbox-label-disabled";
+        return label(
+          {
+            className: `perf-settings-checkbox-label perf-toggle-label ${extraClassName}`,
+            key: value,
+          },
+          input({
+            id: `perf-settings-feature-checkbox-${value}`,
+            type: "checkbox",
+            value,
+            checked: isSupported && this.props.features.includes(value),
+            onChange: this._handleFeaturesCheckboxChange,
+            disabled: !isSupported,
+          }),
+          div(
+            { className: "perf-toggle-text-label" },
+            !isSupported && featureDescription.experimental
+              ? // Note when unsupported features are experimental.
+                `${name} (Experimental)`
+              : name
+          ),
+          div(
+            { className: "perf-toggle-description" },
+            title,
+            !isSupported && disabledReason
+              ? div(
+                  { className: "perf-settings-feature-disabled-reason" },
+                  disabledReason
+                )
+              : null
+          )
+        );
+      })
+    );
+  }
+
+  _renderFeatures() {
+    const { supportedFeatures } = this.props;
+
+    // Divvy up the features into their respective groups.
+    const recommended = [];
+    const supported = [];
+    const unsupported = [];
+    const experimental = [];
+
+    for (const feature of featureDescriptions) {
+      if (supportedFeatures.includes(feature.value)) {
+        if (feature.experimental) {
+          experimental.push(feature);
+        } else if (feature.recommended) {
+          recommended.push(feature);
+        } else {
+          supported.push(feature);
+        }
+      } else {
+        unsupported.push(feature);
+      }
+    }
+
+    return div(
+      { className: "perf-settings-sections" },
+      div(
+        null,
+        this._renderFeatureSection(
+          Localized(
+            { id: "perftools-heading-features-default" },
+            "Features (Recommended on by default)"
+          ),
+          recommended,
+          true
+        ),
+        this._renderFeatureSection(
+          Localized({ id: "perftools-heading-features" }, "Features"),
+          supported,
+          true
+        ),
+        this._renderFeatureSection(
+          Localized(
+            { id: "perftools-heading-features-experimental" },
+            "Experimental"
+          ),
+          experimental,
+          true
+        ),
+        this._renderFeatureSection(
+          Localized(
+            { id: "perftools-heading-features-disabled" },
+            "Disabled Features"
+          ),
+          unsupported,
+          false
+        )
+      )
+    );
+  }
+
+  _renderLocalBuildSection() {
+    const { objdirs } = this.props;
+    return renderSection(
+      "perf-settings-local-build-summary",
+      Localized({ id: "perftools-heading-local-build" }),
+      div(
+        null,
+        p(null, Localized({ id: "perftools-description-local-build" })),
+        DirectoryPicker({
+          dirs: objdirs,
+          onAdd: this._handleAddObjdir,
+          onRemove: this._handleRemoveObjdir,
+        })
+      )
+    );
+  }
+
+  render() {
+    return section(
+      { className: "perf-settings" },
+      h1(null, Localized({ id: "perftools-heading-settings" })),
+      h2(
+        { className: "perf-settings-title" },
+        Localized({ id: "perftools-heading-buffer" })
+      ),
+      Range({
+        label: Localized({ id: "perftools-range-interval-label" }),
+        value: this.props.interval,
+        id: "perf-range-interval",
+        scale: this._intervalExponentialScale,
+        display: _intervalTextDisplay,
+        onChange: this.props.changeInterval,
+      }),
+      Range({
+        label: Localized({ id: "perftools-range-entries-label" }),
+        value: this.props.entries,
+        id: "perf-range-entries",
+        scale: this._entriesExponentialScale,
+        display: _entriesTextDisplay,
+        onChange: this.props.changeEntries,
+      }),
+      this._renderThreads(),
+      this._renderFeatures(),
+      this._renderLocalBuildSection()
+    );
+  }
+}
+
+/**
+ * Clean up the thread list string into a list of values.
+ * @param {string} threads - Comma separated values.
+ * @return {string[]}
+ */
+function _threadTextToList(threads) {
+  return (
+    threads
+      // Split on commas
+      .split(",")
+      // Clean up any extraneous whitespace
+      .map(string => string.trim())
+      // Filter out any blank strings
+      .filter(string => string)
+  );
+}
+
+/**
+ * Format the interval number for display.
+ * @param {number} value
+ * @return {React.ReactNode}
+ */
+function _intervalTextDisplay(value) {
+  return Localized({
+    id: "perftools-range-interval-milliseconds",
+    $interval: value,
+  });
+}
+
+/**
+ * Format the entries number for display.
+ * @param {number} value
+ * @return {string}
+ */
+function _entriesTextDisplay(value) {
+  return formatFileSize(value * PROFILE_ENTRY_SIZE);
+}
+
+/**
+ * Renders a section for about:profiling.
+ *
+ * @param {string} id Unused.
+ * @param {React.ReactNode} title
+ * @param {React.ReactNode} children
+ * @returns React.ReactNode
+ */
+function renderSection(id, title, children) {
+  return div(
+    { className: "perf-settings-sections" },
+    div(null, h2(null, title), children)
+  );
+}
+
+/**
+ * @param {StoreState} state
+ * @returns {StateProps}
+ */
+function mapStateToProps(state) {
+  return {
+    interval: selectors.getInterval(state),
+    entries: selectors.getEntries(state),
+    features: selectors.getFeatures(state),
+    threads: selectors.getThreads(state),
+    threadsString: selectors.getThreadsString(state),
+    objdirs: selectors.getObjdirs(state),
+    supportedFeatures: selectors.getSupportedFeatures(state),
+  };
+}
+
+/** @type {ThunkDispatchProps} */
+const mapDispatchToProps = {
+  changeInterval: actions.changeInterval,
+  changeEntries: actions.changeEntries,
+  changeFeatures: actions.changeFeatures,
+  changeThreads: actions.changeThreads,
+  changeObjdirs: actions.changeObjdirs,
+};
+
+const SettingsConnected = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Settings);
+
+module.exports = SettingsConnected;