Bug 1878457 - Part 1: ESMify performance-new modules. r=julienw,profiler-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D200558

Author: arai-a

devtools/client/performance-new/@types/gecko.d.ts

@@ -26,12 +26,12 @@ declare namespace MockedExports {
     "resource:///modules/CustomizableUI.sys.mjs": typeof import("resource:///modules/CustomizableUI.sys.mjs");
     "resource:///modules/CustomizableWidgets.sys.mjs": typeof import("resource:///modules/CustomizableWidgets.sys.mjs");
     "resource://devtools/shared/loader/Loader.sys.mjs": typeof import("resource://devtools/shared/loader/Loader.sys.mjs");
-    "resource://devtools/client/performance-new/shared/background.jsm.js": typeof import("resource://devtools/client/performance-new/shared/background.jsm.js");
-    "resource://devtools/client/performance-new/shared/symbolication.jsm.js": typeof import("resource://devtools/client/performance-new/shared/symbolication.jsm.js");
+    "resource://devtools/client/performance-new/shared/background.sys.mjs": typeof import("resource://devtools/client/performance-new/shared/background.sys.mjs");
+    "resource://devtools/client/performance-new/shared/symbolication.sys.mjs": typeof import("resource://devtools/client/performance-new/shared/symbolication.sys.mjs");
     "resource://devtools/shared/loader/browser-loader.js": any;
-    "resource://devtools/client/performance-new/popup/menu-button.jsm.js": typeof import("resource://devtools/client/performance-new/popup/menu-button.jsm.js");
-    "resource://devtools/client/performance-new/shared/typescript-lazy-load.jsm.js": typeof import("resource://devtools/client/performance-new/shared/typescript-lazy-load.jsm.js");
-    "resource://devtools/client/performance-new/popup/logic.jsm.js": typeof import("resource://devtools/client/performance-new/popup/logic.jsm.js");
+    "resource://devtools/client/performance-new/popup/menu-button.sys.mjs": typeof import("resource://devtools/client/performance-new/popup/menu-button.sys.mjs");
+    "resource://devtools/client/performance-new/shared/typescript-lazy-load.sys.mjs": typeof import("resource://devtools/client/performance-new/shared/typescript-lazy-load.sys.mjs");
+    "resource://devtools/client/performance-new/popup/logic.sys.mjs": typeof import("resource://devtools/client/performance-new/popup/logic.sys.mjs");
     "resource:///modules/PanelMultiView.sys.mjs": typeof import("resource:///modules/PanelMultiView.sys.mjs");
   }
 
@@ -339,13 +339,13 @@ declare module "resource://gre/modules/AppConstants.sys.mjs" {
   export = MockedExports.AppConstantsSYSMJS;
 }
 
-declare module "resource://devtools/client/performance-new/shared/background.jsm.js" {
-  import * as Background from "devtools/client/performance-new/shared/background.jsm.js";
+declare module "resource://devtools/client/performance-new/shared/background.sys.mjs" {
+  import * as Background from "devtools/client/performance-new/shared/background.sys.mjs";
   export = Background;
 }
 
-declare module "resource://devtools/client/performance-new/shared/symbolication.jsm.js" {
-  import * as PerfSymbolication from "devtools/client/performance-new/shared/symbolication.jsm.js";
+declare module "resource://devtools/client/performance-new/shared/symbolication.sys.mjs" {
+  import * as PerfSymbolication from "devtools/client/performance-new/shared/symbolication.sys.mjs";
   export = PerfSymbolication;
 }
 

devtools/client/performance-new/popup/logic.jsm.js renamed to devtools/client/performance-new/popup/logic.sys.mjs

@@ -2,7 +2,6 @@
  * 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
-"use strict";
 
 /**
  * This file controls the logic of the profiler popup view.
@@ -309,21 +308,9 @@ function addPopupEventHandlers(state, elements, view) {
  * @param {State} panelState
  * @param {XULElement} panelview
  */
-function initializePopup(panelState, panelview) {
+export function initializePopup(panelState, panelview) {
   const panelElements = selectElementsInPanelview(panelview);
   const panelviewControllers = createViewControllers(panelState, panelElements);
   addPopupEventHandlers(panelState, panelElements, panelviewControllers);
   initializeView(panelState, panelElements, panelviewControllers);
 }
-
-// Provide an exports object for the JSM to be properly read by TypeScript.
-/** @type {any} */
-var module = {};
-
-module.exports = {
-  initializePopup,
-};
-
-// Object.keys() confuses the linting which expects a static array expression.
-// eslint-disable-next-line
-var EXPORTED_SYMBOLS = Object.keys(module.exports);

devtools/client/performance-new/popup/menu-button.jsm.js renamed to devtools/client/performance-new/popup/menu-button.sys.mjs

@@ -2,17 +2,12 @@
  * 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
-"use strict";
 
 /**
  * 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.
  */
 
-// Provide an exports object for the JSM to be properly read by TypeScript.
-/** @type {any} */
-var exports = {};
-
 const { createLazyLoaders } = ChromeUtils.import(
   "resource://devtools/client/performance-new/shared/typescript-lazy-load.jsm.js"
 );
@@ -112,7 +107,7 @@ function initialize(toggleProfilerKeyShortcuts) {
   /**
    * This is mutable state that will be shared between panel displays.
    *
-   * @type {import("devtools/client/performance-new/popup/logic.jsm.js").State}
+   * @type {import("devtools/client/performance-new/popup/logic.sys.mjs").State}
    */
   const panelState = {
     cleanup: [],
@@ -318,16 +313,10 @@ function initialize(toggleProfilerKeyShortcuts) {
   CustomizableWidgets.push(item);
 }
 
-const ProfilerMenuButton = {
+export const ProfilerMenuButton = {
   initialize,
   addToNavbar,
   isInNavbar,
   openPopup,
   remove,
 };
-
-exports.ProfilerMenuButton = ProfilerMenuButton;
-
-// Object.keys() confuses the linting which expects a static array expression.
-// eslint-disable-next-line
-var EXPORTED_SYMBOLS = Object.keys(exports);

devtools/client/performance-new/popup/moz.build

@@ -4,8 +4,8 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    "logic.jsm.js",
-    "menu-button.jsm.js",
+    "logic.sys.mjs",
+    "menu-button.sys.mjs",
 )
 
 with Files("**"):

devtools/client/performance-new/shared/typescript-lazy-load.jsm.js renamed to devtools/client/performance-new/shared/#typescript-lazy-load.jsm.js#

@@ -2,7 +2,6 @@
  * 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
-"use strict";
 
 /**
  * This file contains all of the background logic for controlling the state and
@@ -122,7 +121,7 @@ const lazy = createLazyLoaders({
 // https://github.com/mozilla-mobile/firefox-android/blob/1d177e7e78d027e8ab32cedf0fc68316787d7454/fenix/app/src/main/java/org/mozilla/fenix/perf/ProfilerUtils.kt
 
 /** @type {Presets} */
-const presets = {
+export const presets = {
   "web-developer": {
     entries: 128 * 1024 * 1024,
     interval: 1,
@@ -311,7 +310,7 @@ const presets = {
  * @param {PageContext} pageContext
  * @return {ProfilerViewMode | undefined}
  */
-function getProfilerViewModeForCurrentPreset(pageContext) {
+export function getProfilerViewModeForCurrentPreset(pageContext) {
   const prefPostfix = getPrefPostfix(pageContext);
   const presetName = Services.prefs.getCharPref(PRESET_PREF + prefPostfix);
 
@@ -334,7 +333,7 @@ function getProfilerViewModeForCurrentPreset(pageContext) {
  * @param {PageContext} pageContext
  * @return {Promise<void>}
  */
-async function captureProfile(pageContext) {
+export async function captureProfile(pageContext) {
   if (!Services.profiler.IsActive()) {
     // The profiler is not active, ignore.
     return;
@@ -397,7 +396,7 @@ async function captureProfile(pageContext) {
  * popup.
  * @param {PageContext} pageContext
  */
-function startProfiler(pageContext) {
+export function startProfiler(pageContext) {
   const { entries, interval, features, threads, duration } =
     getRecordingSettings(pageContext, Services.profiler.GetFeatures());
 
@@ -420,7 +419,7 @@ function startProfiler(pageContext) {
  * using the shortcut keys to capture a profile.
  * @type {() => void}
  */
-function stopProfiler() {
+export function stopProfiler() {
   Services.profiler.StopProfiler();
 }
 
@@ -430,7 +429,7 @@ function stopProfiler() {
  * @param {PageContext} pageContext
  * @return {void}
  */
-function toggleProfiler(pageContext) {
+export function toggleProfiler(pageContext) {
   if (Services.profiler.IsPaused()) {
     // The profiler is currently paused, which means that the user is already
     // attempting to capture a profile. Ignore this request.
@@ -446,7 +445,7 @@ function toggleProfiler(pageContext) {
 /**
  * @param {PageContext} pageContext
  */
-function restartProfiler(pageContext) {
+export function restartProfiler(pageContext) {
   stopProfiler();
   startProfiler(pageContext);
 }
@@ -528,7 +527,7 @@ function getObjdirPrefValue() {
  * @param {string[]} supportedFeatures
  * @returns {RecordingSettings}
  */
-function getRecordingSettings(pageContext, supportedFeatures) {
+export function getRecordingSettings(pageContext, supportedFeatures) {
   const objdirs = getObjdirPrefValue();
   const prefPostfix = getPrefPostfix(pageContext);
   const presetName = Services.prefs.getCharPref(PRESET_PREF + prefPostfix);
@@ -616,7 +615,7 @@ function getRecordingSettingsFromPrefs(
  * @param {PageContext} pageContext
  * @param {RecordingSettings} prefs
  */
-function setRecordingSettings(pageContext, prefs) {
+export function setRecordingSettings(pageContext, prefs) {
   const prefPostfix = getPrefPostfix(pageContext);
   Services.prefs.setCharPref(PRESET_PREF + prefPostfix, prefs.presetName);
   Services.prefs.setIntPref(ENTRIES_PREF + prefPostfix, prefs.entries);
@@ -637,13 +636,13 @@ function setRecordingSettings(pageContext, prefs) {
   setObjdirPrefValue(prefs.objdirs);
 }
 
-const platform = AppConstants.platform;
+export const platform = AppConstants.platform;
 
 /**
  * Revert the recording prefs for both local and remote profiling.
  * @return {void}
  */
-function revertRecordingSettings() {
+export function revertRecordingSettings() {
   for (const prefPostfix of ["", ".remote"]) {
     Services.prefs.clearUserPref(PRESET_PREF + prefPostfix);
     Services.prefs.clearUserPref(ENTRIES_PREF + prefPostfix);
@@ -664,7 +663,7 @@ function revertRecordingSettings() {
  * @param {string[]} supportedFeatures
  * @return {void}
  */
-function changePreset(pageContext, presetName, supportedFeatures) {
+export function changePreset(pageContext, presetName, supportedFeatures) {
   const prefPostfix = getPrefPostfix(pageContext);
   const objdirs = getObjdirPrefValue();
   let recordingSettings = getRecordingSettingsFromPreset(
@@ -689,7 +688,7 @@ function changePreset(pageContext, presetName, supportedFeatures) {
  * @param {PrefObserver} observer
  * @return {void}
  */
-function addPrefObserver(observer) {
+export function addPrefObserver(observer) {
   Services.prefs.addObserver(PREF_PREFIX, observer);
 }
 
@@ -698,7 +697,7 @@ function addPrefObserver(observer) {
  * @param {PrefObserver} observer
  * @return {void}
  */
-function removePrefObserver(observer) {
+export function removePrefObserver(observer) {
   Services.prefs.removeObserver(PREF_PREFIX, observer);
 }
 
@@ -867,7 +866,7 @@ function getSymbolicationServiceForBrowser(browser) {
  * @param {any} message
  * @param {MockedExports.WebChannelTarget} target
  */
-async function handleWebChannelMessage(channel, id, message, target) {
+export async function handleWebChannelMessage(channel, id, message, target) {
   if (typeof message !== "object" || typeof message.type !== "string") {
     console.error(
       "An malformed message was received by the profiler's WebChannel handler.",
@@ -918,7 +917,7 @@ async function handleWebChannelMessage(channel, id, message, target) {
  *   method should obtain a symbol table for the requested binary and resolve the
  *   returned promise with it.
  */
-function registerProfileCaptureForBrowser(
+export function registerProfileCaptureForBrowser(
   browser,
   profileCaptureResult,
   symbolicationService
@@ -928,30 +927,3 @@ function registerProfileCaptureForBrowser(
     symbolicationService,
   });
 }
-
-// Provide a fake module.exports for the JSM to be properly read by TypeScript.
-/** @type {any} */
-var module = { exports: {} };
-
-module.exports = {
-  presets,
-  captureProfile,
-  startProfiler,
-  stopProfiler,
-  restartProfiler,
-  toggleProfiler,
-  platform,
-  getRecordingSettings,
-  setRecordingSettings,
-  revertRecordingSettings,
-  changePreset,
-  handleWebChannelMessage,
-  registerProfileCaptureForBrowser,
-  addPrefObserver,
-  removePrefObserver,
-  getProfilerViewModeForCurrentPreset,
-};
-
-// Object.keys() confuses the linting which expects a static array expression.
-// eslint-disable-next-line
-var EXPORTED_SYMBOLS = Object.keys(module.exports);

devtools/client/performance-new/shared/background.jsm.js renamed to devtools/client/performance-new/shared/background.sys.mjs

@@ -4,12 +4,12 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    "background.jsm.js",
+    "background.sys.mjs",
     "browser.js",
     "profiler_get_symbols.js",
-    "symbolication.jsm.js",
+    "symbolication.sys.mjs",
     "symbolication.worker.js",
-    "typescript-lazy-load.jsm.js",
+    "typescript-lazy-load.sys.mjs",
     "utils.js",
 )
 

devtools/client/performance-new/shared/moz.build

@@ -2,7 +2,6 @@
  * 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
-"use strict";
 
 /** @type {any} */
 const lazy = {};
@@ -346,7 +345,11 @@ class LocalSymbolicationServiceWithRemoteSymbolTableFallback {
  *   tables from remote targets
  * @return {SymbolicationService}
  */
-function createLocalSymbolicationService(sharedLibraries, objdirs, perfFront) {
+export function createLocalSymbolicationService(
+  sharedLibraries,
+  objdirs,
+  perfFront
+) {
   const service = new LocalSymbolicationService(sharedLibraries, objdirs);
   if (perfFront) {
     return new LocalSymbolicationServiceWithRemoteSymbolTableFallback(
@@ -357,15 +360,3 @@ function createLocalSymbolicationService(sharedLibraries, objdirs, perfFront) {
   }
   return service;
 }
-
-// Provide an exports object for the JSM to be properly read by TypeScript.
-/** @type {any} */
-var module = {};
-
-module.exports = {
-  createLocalSymbolicationService,
-};
-
-// Object.keys() confuses the linting which expects a static array expression.
-// eslint-disable-next-line
-var EXPORTED_SYMBOLS = Object.keys(module.exports);

devtools/client/performance-new/shared/symbolication.jsm.js renamed to devtools/client/performance-new/shared/symbolication.sys.mjs

@@ -0,0 +1,42 @@
+/* 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
+
+/**
+ * TypeScript can't understand the lazyRequireGetter mechanism, due to how it defines
+ * properties as a getter. This function, instead provides lazy loading in a
+ * TypeScript-friendly manner. It applies the lazy load memoization to each property
+ * of the provided object.
+ *
+ * Example usage:
+ *
+ * const lazy = createLazyLoaders({
+ *   moduleA: () => require("module/a"),
+ *   moduleB: () => require("module/b"),
+ * });
+ *
+ * Later:
+ *
+ * const moduleA = lazy.moduleA();
+ * const { objectInModuleB } = lazy.moduleB();
+ *
+ * @template {{ [key: string]: any }} T
+ * @param {T} definition - An object where each property has a function that loads a module.
+ * @returns {T} - The load memoized version of T.
+ */
+export function createLazyLoaders(definition) {
+  /** @type {any} */
+  const result = {};
+  for (const [key, callback] of Object.entries(definition)) {
+    /** @type {any} */
+    let cache;
+    result[key] = () => {
+      if (cache === undefined) {
+        cache = callback();
+      }
+      return cache;
+    };
+  }
+  return result;
+}