Adding upstream version 124.0.1.upstream/124.0.1

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

4 files changed, 649 insertions, 0 deletions

diff --git a/devtools/client/performance-new/popup/README.md b/devtools/client/performance-new/popup/README.md
new file mode 100644
index 0000000000..78ef8e54c7
--- /dev/null
+++ b/devtools/client/performance-new/popup/README.md
@@ -0,0 +1,3 @@
+# Profiler Popup
+
+This directory collects the code that powers the profiler popup. See devtools/client/performance-new/README.md for more information.
diff --git a/devtools/client/performance-new/popup/logic.sys.mjs b/devtools/client/performance-new/popup/logic.sys.mjs
new file mode 100644
index 0000000000..174163d54b
--- /dev/null
+++ b/devtools/client/performance-new/popup/logic.sys.mjs
@@ -0,0 +1,314 @@
+/* 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
+
+/**
+ * This file controls the logic of the profiler popup view.
+ */
+
+/**
+ * @typedef {ReturnType<typeof selectElementsInPanelview>} Elements
+ * @typedef {ReturnType<typeof createViewControllers>} ViewController
+ */
+
+/**
+ * @typedef {Object} State - The mutable state of the popup.
+ * @property {Array<() => void>} cleanup - Functions to cleanup once the view is hidden.
+ * @property {boolean} isInfoCollapsed
+ */
+
+import { createLazyLoaders } from "resource://devtools/client/performance-new/shared/typescript-lazy-load.sys.mjs";
+
+const lazy = createLazyLoaders({
+  PanelMultiView: () =>
+    ChromeUtils.importESModule("resource:///modules/PanelMultiView.sys.mjs"),
+  Background: () =>
+    ChromeUtils.importESModule(
+      "resource://devtools/client/performance-new/shared/background.sys.mjs"
+    ),
+});
+
+/**
+ * This function collects all of the selection of the elements inside of the panel.
+ *
+ * @param {XULElement} panelview
+ */
+function selectElementsInPanelview(panelview) {
+  const document = panelview.ownerDocument;
+  /**
+   * Get an element or throw an error if it's not found. This is more friendly
+   * for TypeScript.
+   *
+   * @param {string} id
+   * @return {HTMLElement}
+   */
+  function getElementById(id) {
+    /** @type {HTMLElement | null} */
+    // @ts-ignore - Bug 1674368
+    const { PanelMultiView } = lazy.PanelMultiView();
+    const element = PanelMultiView.getViewNode(document, id);
+    if (!element) {
+      throw new Error(`Could not find the element from the ID "${id}"`);
+    }
+    return element;
+  }
+
+  // Forcefully cast the window to the type ChromeWindow.
+  /** @type {any} */
+  const chromeWindowAny = document.defaultView;
+  /** @type {ChromeWindow} */
+  const chromeWindow = chromeWindowAny;
+
+  return {
+    document,
+    panelview,
+    window: chromeWindow,
+    inactive: getElementById("PanelUI-profiler-inactive"),
+    active: getElementById("PanelUI-profiler-active"),
+    presetDescription: getElementById("PanelUI-profiler-content-description"),
+    presetsEditSettings: getElementById(
+      "PanelUI-profiler-content-edit-settings"
+    ),
+    presetsMenuList: /** @type {MenuListElement} */ (
+      getElementById("PanelUI-profiler-presets")
+    ),
+    header: getElementById("PanelUI-profiler-header"),
+    info: getElementById("PanelUI-profiler-info"),
+    menupopup: getElementById("PanelUI-profiler-presets-menupopup"),
+    infoButton: getElementById("PanelUI-profiler-info-button"),
+    learnMore: getElementById("PanelUI-profiler-learn-more"),
+    startRecording: getElementById("PanelUI-profiler-startRecording"),
+    stopAndDiscard: getElementById("PanelUI-profiler-stopAndDiscard"),
+    stopAndCapture: getElementById("PanelUI-profiler-stopAndCapture"),
+    settingsSection: getElementById("PanelUI-profiler-content-settings"),
+    contentRecording: getElementById("PanelUI-profiler-content-recording"),
+  };
+}
+
+/**
+ * This function returns an interface that can be used to control the view of the
+ * panel based on the current mutable State.
+ *
+ * @param {State} state
+ * @param {Elements} elements
+ */
+function createViewControllers(state, elements) {
+  return {
+    updateInfoCollapse() {
+      const { header, info, infoButton } = elements;
+      header.setAttribute(
+        "isinfocollapsed",
+        state.isInfoCollapsed ? "true" : "false"
+      );
+      // @ts-ignore - Bug 1674368
+      infoButton.checked = !state.isInfoCollapsed;
+
+      if (state.isInfoCollapsed) {
+        const { height } = info.getBoundingClientRect();
+        info.style.marginBlockEnd = `-${height}px`;
+      } else {
+        info.style.marginBlockEnd = "0";
+      }
+    },
+
+    updatePresets() {
+      const { presets, getRecordingSettings } = lazy.Background();
+      const { presetName } = getRecordingSettings(
+        "aboutprofiling",
+        Services.profiler.GetFeatures()
+      );
+      const preset = presets[presetName];
+      if (preset) {
+        elements.presetDescription.style.display = "block";
+        elements.document.l10n.setAttributes(
+          elements.presetDescription,
+          preset.l10nIds.popup.description
+        );
+        elements.presetsMenuList.value = presetName;
+      } else {
+        elements.presetDescription.style.display = "none";
+        // We don't remove the l10n-id attribute as the element is hidden anyway.
+        // It will be updated again when it's displayed next time.
+        elements.presetsMenuList.value = "custom";
+      }
+    },
+
+    updateProfilerState() {
+      if (Services.profiler.IsActive()) {
+        elements.inactive.hidden = true;
+        elements.active.hidden = false;
+        elements.settingsSection.hidden = true;
+        elements.contentRecording.hidden = false;
+      } else {
+        elements.inactive.hidden = false;
+        elements.active.hidden = true;
+        elements.settingsSection.hidden = false;
+        elements.contentRecording.hidden = true;
+      }
+    },
+
+    createPresetsList() {
+      // Check the DOM if the presets were built or not. We can't cache this value
+      // in the `State` object, as the `State` object will be removed if the
+      // button is removed from the toolbar, but the DOM changes will still persist.
+      if (elements.menupopup.getAttribute("presetsbuilt") === "true") {
+        // The presets were already built.
+        return;
+      }
+
+      const { presets } = lazy.Background();
+      const currentPreset = Services.prefs.getCharPref(
+        "devtools.performance.recording.preset"
+      );
+
+      const menuitems = Object.entries(presets).map(([id, preset]) => {
+        const { document, presetsMenuList } = elements;
+        const menuitem = document.createXULElement("menuitem");
+        document.l10n.setAttributes(menuitem, preset.l10nIds.popup.label);
+        menuitem.setAttribute("value", id);
+        if (id === currentPreset) {
+          presetsMenuList.setAttribute("value", id);
+        }
+        return menuitem;
+      });
+
+      elements.menupopup.prepend(...menuitems);
+      elements.menupopup.setAttribute("presetsbuilt", "true");
+    },
+
+    hidePopup() {
+      const panel = elements.panelview.closest("panel");
+      if (!panel) {
+        throw new Error("Could not find the panel from the panelview.");
+      }
+      /** @type {any} */ (panel).hidePopup();
+    },
+  };
+}
+
+/**
+ * Perform all of the business logic to present the popup view once it is open.
+ *
+ * @param {State} state
+ * @param {Elements} elements
+ * @param {ViewController} view
+ */
+function initializeView(state, elements, view) {
+  view.createPresetsList();
+
+  state.cleanup.push(() => {
+    // The UI should be collapsed by default for the next time the popup
+    // is open.
+    state.isInfoCollapsed = true;
+    view.updateInfoCollapse();
+  });
+
+  // Turn off all animations while initializing the popup.
+  elements.header.setAttribute("animationready", "false");
+
+  elements.window.requestAnimationFrame(() => {
+    // Allow the elements to layout once, the updateInfoCollapse implementation measures
+    // the size of the container. It needs to wait a second before the bounding box
+    // returns an actual size.
+    view.updateInfoCollapse();
+    view.updateProfilerState();
+    view.updatePresets();
+
+    // Now wait for another rAF, and turn the animations back on.
+    elements.window.requestAnimationFrame(() => {
+      elements.header.setAttribute("animationready", "true");
+    });
+  });
+}
+
+/**
+ * This function is in charge of settings all of the events handlers for the view.
+ * The handlers must also add themselves to the `state.cleanup` for them to be
+ * properly cleaned up once the view is destroyed.
+ *
+ * @param {State} state
+ * @param {Elements} elements
+ * @param {ViewController} view
+ */
+function addPopupEventHandlers(state, elements, view) {
+  const { changePreset, startProfiler, stopProfiler, captureProfile } =
+    lazy.Background();
+
+  /**
+   * Adds a handler that automatically is removed once the panel is hidden.
+   *
+   * @param {HTMLElement} element
+   * @param {string} type
+   * @param {(event: Event) => void} handler
+   */
+  function addHandler(element, type, handler) {
+    element.addEventListener(type, handler);
+    state.cleanup.push(() => {
+      element.removeEventListener(type, handler);
+    });
+  }
+
+  addHandler(elements.infoButton, "click", event => {
+    // Any button command event in the popup will cause it to close. Prevent this
+    // from happening on click.
+    event.preventDefault();
+
+    state.isInfoCollapsed = !state.isInfoCollapsed;
+    view.updateInfoCollapse();
+  });
+
+  addHandler(elements.startRecording, "click", () => {
+    startProfiler("aboutprofiling");
+  });
+
+  addHandler(elements.stopAndDiscard, "click", () => {
+    stopProfiler();
+  });
+
+  addHandler(elements.stopAndCapture, "click", () => {
+    captureProfile("aboutprofiling");
+    view.hidePopup();
+  });
+
+  addHandler(elements.learnMore, "click", () => {
+    elements.window.openWebLinkIn("https://profiler.firefox.com/docs/", "tab");
+    view.hidePopup();
+  });
+
+  addHandler(elements.presetsMenuList, "command", () => {
+    changePreset(
+      "aboutprofiling",
+      elements.presetsMenuList.value,
+      Services.profiler.GetFeatures()
+    );
+    view.updatePresets();
+  });
+
+  addHandler(elements.presetsEditSettings, "click", () => {
+    elements.window.openTrustedLinkIn("about:profiling", "tab");
+    view.hidePopup();
+  });
+
+  // Update the view when the profiler starts/stops.
+  // These are all events that can affect the current state of the profiler.
+  const events = ["profiler-started", "profiler-stopped"];
+  for (const event of events) {
+    Services.obs.addObserver(view.updateProfilerState, event);
+    state.cleanup.push(() => {
+      Services.obs.removeObserver(view.updateProfilerState, event);
+    });
+  }
+}
+
+/**
+ * Initialize everything needed for the popup to work fine.
+ * @param {State} panelState
+ * @param {XULElement} panelview
+ */
+export function initializePopup(panelState, panelview) {
+  const panelElements = selectElementsInPanelview(panelview);
+  const panelviewControllers = createViewControllers(panelState, panelElements);
+  addPopupEventHandlers(panelState, panelElements, panelviewControllers);
+  initializeView(panelState, panelElements, panelviewControllers);
+}
diff --git a/devtools/client/performance-new/popup/menu-button.sys.mjs b/devtools/client/performance-new/popup/menu-button.sys.mjs
new file mode 100644
index 0000000000..f1aee09af4
--- /dev/null
+++ b/devtools/client/performance-new/popup/menu-button.sys.mjs
@@ -0,0 +1,320 @@
+/* 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
+
+/**
+ * This file controls the enabling and disabling of the menu button for the profiler.
+ * Care should be taken to keep it minimal as it can be run with browser initialization.
+ */
+
+import { createLazyLoaders } from "resource://devtools/client/performance-new/shared/typescript-lazy-load.sys.mjs";
+
+const lazy = createLazyLoaders({
+  CustomizableUI: () =>
+    ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs"),
+  CustomizableWidgets: () =>
+    ChromeUtils.importESModule(
+      "resource:///modules/CustomizableWidgets.sys.mjs"
+    ),
+  PopupLogic: () =>
+    ChromeUtils.importESModule(
+      "resource://devtools/client/performance-new/popup/logic.sys.mjs"
+    ),
+  Background: () =>
+    ChromeUtils.importESModule(
+      "resource://devtools/client/performance-new/shared/background.sys.mjs"
+    ),
+});
+
+const WIDGET_ID = "profiler-button";
+
+/**
+ * Add the profiler button to the navbar.
+ *
+ * @param {ChromeDocument} document  The browser's document.
+ * @return {void}
+ */
+function addToNavbar(document) {
+  const { CustomizableUI } = lazy.CustomizableUI();
+
+  CustomizableUI.addWidgetToArea(WIDGET_ID, CustomizableUI.AREA_NAVBAR);
+}
+
+/**
+ * Remove the widget and place it in the customization palette. This will also
+ * disable the shortcuts.
+ *
+ * @return {void}
+ */
+function remove() {
+  const { CustomizableUI } = lazy.CustomizableUI();
+  CustomizableUI.removeWidgetFromArea(WIDGET_ID);
+}
+
+/**
+ * See if the profiler menu button is in the navbar, or other active areas. The
+ * placement is null when it's inactive in the customization palette.
+ *
+ * @return {boolean}
+ */
+function isInNavbar() {
+  const { CustomizableUI } = lazy.CustomizableUI();
+  return Boolean(CustomizableUI.getPlacementOfWidget("profiler-button"));
+}
+
+/**
+ * Opens the popup for the profiler.
+ * @param {Document} document
+ */
+function openPopup(document) {
+  // First find the button.
+  /** @type {HTMLButtonElement | null} */
+  const button = document.querySelector("#profiler-button");
+  if (!button) {
+    throw new Error("Could not find the profiler button.");
+  }
+
+  // Sending a click event anywhere on the button could start the profiler
+  // instead of opening the popup. Sending a command event on a view widget
+  // will make CustomizableUI show the view.
+  const cmdEvent = document.createEvent("xulcommandevent");
+  // @ts-ignore - Bug 1674368
+  cmdEvent.initCommandEvent("command", true, true, button.ownerGlobal);
+  button.dispatchEvent(cmdEvent);
+}
+
+/**
+ * This function creates the widget definition for the CustomizableUI. It should
+ * only be run if the profiler button is enabled.
+ * @param {(isEnabled: boolean) => void} toggleProfilerKeyShortcuts
+ * @return {void}
+ */
+function initialize(toggleProfilerKeyShortcuts) {
+  const { CustomizableUI } = lazy.CustomizableUI();
+  const { CustomizableWidgets } = lazy.CustomizableWidgets();
+
+  const widget = CustomizableUI.getWidget(WIDGET_ID);
+  if (widget && widget.provider == CustomizableUI.PROVIDER_API) {
+    // This widget has already been created.
+    return;
+  }
+
+  const viewId = "PanelUI-profiler";
+
+  /**
+   * This is mutable state that will be shared between panel displays.
+   *
+   * @type {import("devtools/client/performance-new/popup/logic.sys.mjs").State}
+   */
+  const panelState = {
+    cleanup: [],
+    isInfoCollapsed: true,
+  };
+
+  /**
+   * Handle when the customization changes for the button. This event is not
+   * very specific, and fires for any CustomizableUI widget. This event is
+   * pretty rare to fire, and only affects users of the profiler button,
+   * so it shouldn't have much overhead even if it runs a lot.
+   */
+  function handleCustomizationChange() {
+    const isEnabled = isInNavbar();
+    toggleProfilerKeyShortcuts(isEnabled);
+
+    if (!isEnabled) {
+      // The profiler menu button is no longer in the navbar, make sure that the
+      // "intro-displayed" preference is reset.
+      /** @type {import("../@types/perf").PerformancePref["PopupIntroDisplayed"]} */
+      const popupIntroDisplayedPref =
+        "devtools.performance.popup.intro-displayed";
+      Services.prefs.setBoolPref(popupIntroDisplayedPref, false);
+
+      // We stop the profiler when the button is removed for normal users,
+      // but we try to avoid interfering with profiling of automated tests.
+      if (
+        Services.profiler.IsActive() &&
+        (!Cu.isInAutomation || !Services.env.exists("MOZ_PROFILER_STARTUP"))
+      ) {
+        Services.profiler.StopProfiler();
+      }
+    }
+  }
+
+  const item = {
+    id: WIDGET_ID,
+    type: "button-and-view",
+    viewId,
+    l10nId: "profiler-popup-button-idle",
+
+    onViewShowing:
+      /**
+       * @type {(event: {
+       *   target: ChromeHTMLElement | XULElement,
+       *   detail: {
+       *     addBlocker: (blocker: Promise<void>) => void
+       *   }
+       * }) => void}
+       */
+      event => {
+        try {
+          // The popup logic is stored in a separate script so it doesn't have
+          // to be parsed at browser startup, and will only be lazily loaded
+          // when the popup is viewed.
+          const { initializePopup } = lazy.PopupLogic();
+
+          initializePopup(panelState, event.target);
+        } catch (error) {
+          // Surface any errors better in the console.
+          console.error(error);
+        }
+      },
+
+    /**
+     * @type {(event: { target: ChromeHTMLElement | XULElement }) => void}
+     */
+    onViewHiding(event) {
+      // Clean-up the view. This removes all of the event listeners.
+      for (const fn of panelState.cleanup) {
+        fn();
+      }
+      panelState.cleanup = [];
+    },
+
+    /**
+     * Perform any general initialization for this widget. This is called once per
+     * browser window.
+     *
+     * @type {(document: HTMLDocument) => void}
+     */
+    onBeforeCreated: document => {
+      /** @type {import("../@types/perf").PerformancePref["PopupIntroDisplayed"]} */
+      const popupIntroDisplayedPref =
+        "devtools.performance.popup.intro-displayed";
+
+      // Determine the state of the popup's info being collapsed BEFORE the view
+      // is shown, and update the collapsed state. This way the transition animation
+      // isn't run.
+      panelState.isInfoCollapsed = Services.prefs.getBoolPref(
+        popupIntroDisplayedPref
+      );
+      if (!panelState.isInfoCollapsed) {
+        // We have displayed the intro, don't show it again by default.
+        Services.prefs.setBoolPref(popupIntroDisplayedPref, true);
+      }
+
+      // Handle customization event changes. If the profiler is no longer in the
+      // navbar, then reset the popup intro preference.
+      const window = document.defaultView;
+      if (window) {
+        /** @type {any} */ (window).gNavToolbox.addEventListener(
+          "customizationchange",
+          handleCustomizationChange
+        );
+      }
+
+      toggleProfilerKeyShortcuts(isInNavbar());
+    },
+
+    /**
+     * This method is used when we need to operate upon the button element itself.
+     * This is called once per browser window.
+     *
+     * @type {(node: ChromeHTMLElement) => void}
+     */
+    onCreated: node => {
+      const document = node.ownerDocument;
+      const window = document?.defaultView;
+      if (!document || !window) {
+        console.error(
+          "Unable to find the document or the window of the profiler toolbar item."
+        );
+        return;
+      }
+
+      const firstButton = node.firstElementChild;
+      if (!firstButton) {
+        console.error(
+          "Unable to find the button element inside the profiler toolbar item."
+        );
+        return;
+      }
+
+      // Assign the null-checked button element to a new variable so that
+      // TypeScript doesn't require additional null checks in the functions
+      // below.
+      const buttonElement = firstButton;
+
+      // This class is needed to show the subview arrow when our button
+      // is in the overflow menu.
+      buttonElement.classList.add("subviewbutton-nav");
+
+      function setButtonActive() {
+        document.l10n.setAttributes(
+          buttonElement,
+          "profiler-popup-button-recording"
+        );
+        buttonElement.classList.toggle("profiler-active", true);
+        buttonElement.classList.toggle("profiler-paused", false);
+      }
+      function setButtonPaused() {
+        document.l10n.setAttributes(
+          buttonElement,
+          "profiler-popup-button-capturing"
+        );
+        buttonElement.classList.toggle("profiler-active", false);
+        buttonElement.classList.toggle("profiler-paused", true);
+      }
+      function setButtonInactive() {
+        document.l10n.setAttributes(
+          buttonElement,
+          "profiler-popup-button-idle"
+        );
+        buttonElement.classList.toggle("profiler-active", false);
+        buttonElement.classList.toggle("profiler-paused", false);
+      }
+
+      if (Services.profiler.IsPaused()) {
+        setButtonPaused();
+      }
+      if (Services.profiler.IsActive()) {
+        setButtonActive();
+      }
+
+      Services.obs.addObserver(setButtonActive, "profiler-started");
+      Services.obs.addObserver(setButtonInactive, "profiler-stopped");
+      Services.obs.addObserver(setButtonPaused, "profiler-paused");
+
+      window.addEventListener("unload", () => {
+        Services.obs.removeObserver(setButtonActive, "profiler-started");
+        Services.obs.removeObserver(setButtonInactive, "profiler-stopped");
+        Services.obs.removeObserver(setButtonPaused, "profiler-paused");
+      });
+    },
+
+    // @ts-ignore - Bug 1674368
+    onCommand: event => {
+      if (Services.profiler.IsPaused()) {
+        // A profile is already being captured, ignore this event.
+        return;
+      }
+      const { startProfiler, captureProfile } = lazy.Background();
+      if (Services.profiler.IsActive()) {
+        captureProfile("aboutprofiling");
+      } else {
+        startProfiler("aboutprofiling");
+      }
+    },
+  };
+
+  CustomizableUI.createWidget(item);
+  CustomizableWidgets.push(item);
+}
+
+export const ProfilerMenuButton = {
+  initialize,
+  addToNavbar,
+  isInNavbar,
+  openPopup,
+  remove,
+};
diff --git a/devtools/client/performance-new/popup/moz.build b/devtools/client/performance-new/popup/moz.build
new file mode 100644
index 0000000000..ed9f4c2a2d
--- /dev/null
+++ b/devtools/client/performance-new/popup/moz.build
@@ -0,0 +1,12 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    "logic.sys.mjs",
+    "menu-button.sys.mjs",
+)
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Performance Tools (Profiler/Timeline)")