Bug 1788783 -Converted Picture in Picture JSM modules to ESMs. r=kpatenio

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

browser/base/content/browser.js

@@ -17,6 +17,7 @@ ChromeUtils.defineESModuleGetters(this, {
   BrowserSearchTelemetry: "resource:///modules/BrowserSearchTelemetry.sys.mjs",
   FirefoxViewNotificationManager:
     "resource:///modules/firefox-view-notification-manager.sys.mjs",
+  PictureInPicture: "resource://gre/modules/PictureInPicture.sys.mjs",
   PlacesTransactions: "resource://gre/modules/PlacesTransactions.sys.mjs",
   PlacesUIUtils: "resource:///modules/PlacesUIUtils.sys.mjs",
   PlacesUtils: "resource://gre/modules/PlacesUtils.sys.mjs",
@@ -68,7 +69,6 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   PageThumbs: "resource://gre/modules/PageThumbs.jsm",
   PanelMultiView: "resource:///modules/PanelMultiView.jsm",
   PanelView: "resource:///modules/PanelMultiView.jsm",
-  PictureInPicture: "resource://gre/modules/PictureInPicture.jsm",
   PluralForm: "resource://gre/modules/PluralForm.jsm",
   Pocket: "chrome://pocket/content/Pocket.jsm",
   PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.jsm",

browser/base/content/tabbrowser.js

@@ -27,10 +27,10 @@
       ChromeUtils.defineESModuleGetters(this, {
         UrlbarProviderOpenTabs:
           "resource:///modules/UrlbarProviderOpenTabs.sys.mjs",
+        PictureInPicture: "resource://gre/modules/PictureInPicture.sys.mjs",
       });
       XPCOMUtils.defineLazyModuleGetters(this, {
         E10SUtils: "resource://gre/modules/E10SUtils.jsm",
-        PictureInPicture: "resource://gre/modules/PictureInPicture.jsm",
       });
       XPCOMUtils.defineLazyServiceGetters(this, {
         MacSharingService: [

browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js

@@ -9,7 +9,7 @@
 let AVAILABLE_PIP_OVERRIDES;
 
 {
-  // See PictureInPictureControls.jsm for these values.
+  // See PictureInPictureControls.sys.mjs for these values.
   // eslint-disable-next-line no-unused-vars
   const TOGGLE_POLICIES = browser.pictureInPictureChild.getPolicies();
 

browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.js

@@ -6,17 +6,10 @@
 
 /* global AppConstants, ChromeUtils, ExtensionAPI, Services */
 
-ChromeUtils.defineModuleGetter(
+ChromeUtils.defineESModuleGetters(this, {
-  this,
+  KEYBOARD_CONTROLS: "resource://gre/modules/PictureInPictureControls.sys.mjs",
-  "KEYBOARD_CONTROLS",
+  TOGGLE_POLICIES: "resource://gre/modules/PictureInPictureControls.sys.mjs",
-  "resource://gre/modules/PictureInPictureControls.jsm"
+});
-);
-
-ChromeUtils.defineModuleGetter(
-  this,
-  "TOGGLE_POLICIES",
-  "resource://gre/modules/PictureInPictureControls.jsm"
-);
 
 const TOGGLE_ENABLED_PREF =
   "media.videocontrols.picture-in-picture.video-toggle.enabled";

browser/extensions/pictureinpicture/tests/browser/browser_mock_wrapper.js

@@ -5,11 +5,9 @@
 
 /* import-globals-from ../../../../../toolkit/components/pictureinpicture/tests/head.js */
 
-ChromeUtils.defineModuleGetter(
+ChromeUtils.defineESModuleGetters(this, {
-  this,
+  TOGGLE_POLICIES: "resource://gre/modules/PictureInPictureControls.sys.mjs",
-  "TOGGLE_POLICIES",
+});
-  "resource://gre/modules/PictureInPictureControls.jsm"
-);
 
 const TEST_URL =
   getRootDirectory(gTestPath).replace(

browser/modules/AsyncTabSwitcher.jsm

@@ -10,12 +10,14 @@ var EXPORTED_SYMBOLS = ["AsyncTabSwitcher"];
 const { XPCOMUtils } = ChromeUtils.importESModule(
   "resource://gre/modules/XPCOMUtils.sys.mjs"
 );
+
 const { AppConstants } = ChromeUtils.import(
   "resource://gre/modules/AppConstants.jsm"
 );
 const lazy = {};
-XPCOMUtils.defineLazyModuleGetters(lazy, {
+
-  PictureInPicture: "resource://gre/modules/PictureInPicture.jsm",
+ChromeUtils.defineESModuleGetters(lazy, {
+  PictureInPicture: "resource://gre/modules/PictureInPicture.sys.mjs",
 });
 
 XPCOMUtils.defineLazyPreferenceGetter(

toolkit/actors/PictureInPictureChild.sys.mjs

@@ -4,12 +4,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-var EXPORTED_SYMBOLS = [
-  "PictureInPictureChild",
-  "PictureInPictureToggleChild",
-  "PictureInPictureLauncherChild",
-];
-
 const lazy = {};
 
 ChromeUtils.defineModuleGetter(
@@ -17,21 +11,12 @@ ChromeUtils.defineModuleGetter(
   "DeferredTask",
   "resource://gre/modules/DeferredTask.jsm"
 );
-ChromeUtils.defineModuleGetter(
+ChromeUtils.defineESModuleGetters(lazy, {
-  lazy,
+  KEYBOARD_CONTROLS: "resource://gre/modules/PictureInPictureControls.sys.mjs",
-  "KEYBOARD_CONTROLS",
+  TOGGLE_POLICIES: "resource://gre/modules/PictureInPictureControls.sys.mjs",
-  "resource://gre/modules/PictureInPictureControls.jsm"
+  TOGGLE_POLICY_STRINGS:
-);
+    "resource://gre/modules/PictureInPictureControls.sys.mjs",
-ChromeUtils.defineModuleGetter(
+});
-  lazy,
-  "TOGGLE_POLICIES",
-  "resource://gre/modules/PictureInPictureControls.jsm"
-);
-ChromeUtils.defineModuleGetter(
-  lazy,
-  "TOGGLE_POLICY_STRINGS",
-  "resource://gre/modules/PictureInPictureControls.jsm"
-);
 ChromeUtils.defineModuleGetter(
   lazy,
   "Rect",
@@ -47,9 +32,7 @@ const { WebVTT } = ChromeUtils.import("resource://gre/modules/vtt.jsm");
 const { setTimeout, clearTimeout } = ChromeUtils.import(
   "resource://gre/modules/Timer.jsm"
 );
-const { XPCOMUtils } = ChromeUtils.importESModule(
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
-  "resource://gre/modules/XPCOMUtils.sys.mjs"
-);
 
 XPCOMUtils.defineLazyModuleGetters(lazy, {
   NimbusFeatures: "resource://nimbus/ExperimentAPI.jsm",
@@ -136,7 +119,7 @@ function applyWrapper(pipChild, originatingVideo) {
   );
 }
 
-class PictureInPictureLauncherChild extends JSWindowActorChild {
+export class PictureInPictureLauncherChild extends JSWindowActorChild {
   handleEvent(event) {
     switch (event.type) {
       case "MozTogglePictureInPicture": {
@@ -242,7 +225,7 @@ class PictureInPictureLauncherChild extends JSWindowActorChild {
  * Picture-in-Picture toggle over top of <video> elements that the mouse is
  * hovering.
  */
-class PictureInPictureToggleChild extends JSWindowActorChild {
+export class PictureInPictureToggleChild extends JSWindowActorChild {
   constructor() {
     super();
     // We need to maintain some state about various things related to the
@@ -1298,7 +1281,7 @@ class PictureInPictureToggleChild extends JSWindowActorChild {
   }
 }
 
-class PictureInPictureChild extends JSWindowActorChild {
+export class PictureInPictureChild extends JSWindowActorChild {
   #subtitlesEnabled = false;
   // A weak reference to this PiP window's video element
   weakVideo = null;

toolkit/actors/moz.build

@@ -16,7 +16,7 @@ with Files("Finder*.jsm"):
 with Files("KeyPressEventModelCheckerChild.jsm"):
     BUG_COMPONENT = ("Core", "DOM: Events")
 
-with Files("PictureInPictureChild.jsm"):
+with Files("PictureInPictureChild.sys.mjs"):
     BUG_COMPONENT = ("Toolkit", "Picture-in-Picture")
 
 SPHINX_TREES["actors"] = "docs"
@@ -61,7 +61,7 @@ FINAL_TARGET_FILES.actors += [
     "InlineSpellCheckerChild.jsm",
     "InlineSpellCheckerParent.jsm",
     "KeyPressEventModelCheckerChild.jsm",
-    "PictureInPictureChild.jsm",
+    "PictureInPictureChild.sys.mjs",
     "PopupBlockingChild.jsm",
     "PopupBlockingParent.jsm",
     "PrintingChild.jsm",

toolkit/components/pictureinpicture/PictureInPicture.sys.mjs

@@ -4,20 +4,12 @@
 
 "use strict";
 
-var EXPORTED_SYMBOLS = [
-  "PictureInPicture",
-  "PictureInPictureParent",
-  "PictureInPictureToggleParent",
-  "PictureInPictureLauncherParent",
-];
-
 const { AppConstants } = ChromeUtils.import(
   "resource://gre/modules/AppConstants.jsm"
 );
 
-const { XPCOMUtils } = ChromeUtils.importESModule(
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
-  "resource://gre/modules/XPCOMUtils.sys.mjs"
+
-);
 const lazy = {};
 XPCOMUtils.defineLazyServiceGetters(lazy, {
   WindowsUIUtils: ["@mozilla.org/windows-ui-utils;1", "nsIWindowsUIUtils"],
@@ -59,7 +51,7 @@ let gCurrentPlayerCount = 0;
  */
 let gNextWindowID = 0;
 
-class PictureInPictureLauncherParent extends JSWindowActorParent {
+export class PictureInPictureLauncherParent extends JSWindowActorParent {
   receiveMessage(aMessage) {
     switch (aMessage.name) {
       case "PictureInPicture:Request": {
@@ -71,7 +63,7 @@ class PictureInPictureLauncherParent extends JSWindowActorParent {
   }
 }
 
-class PictureInPictureToggleParent extends JSWindowActorParent {
+export class PictureInPictureToggleParent extends JSWindowActorParent {
   receiveMessage(aMessage) {
     let browsingContext = aMessage.target.browsingContext;
     let browser = browsingContext.top.embedderElement;
@@ -89,7 +81,7 @@ class PictureInPictureToggleParent extends JSWindowActorParent {
  * This module is responsible for creating a Picture in Picture window to host
  * a clone of a video element running in web content.
  */
-class PictureInPictureParent extends JSWindowActorParent {
+export class PictureInPictureParent extends JSWindowActorParent {
   receiveMessage(aMessage) {
     switch (aMessage.name) {
       case "PictureInPicture:Resize": {
@@ -155,7 +147,7 @@ class PictureInPictureParent extends JSWindowActorParent {
  * This module is responsible for creating a Picture in Picture window to host
  * a clone of a video element running in web content.
  */
-var PictureInPicture = {
+export var PictureInPicture = {
   // Maps PictureInPictureParent actors to their corresponding PiP player windows
   weakPipToWin: new WeakMap(),
 

toolkit/components/pictureinpicture/PictureInPictureControls.sys.mjs

@@ -5,14 +5,8 @@
 
 "use strict";
 
-var EXPORTED_SYMBOLS = [
-  "KEYBOARD_CONTROLS",
-  "TOGGLE_POLICIES",
-  "TOGGLE_POLICY_STRINGS",
-];
-
 // These denote which keyboard controls to show for a qualified video element.
-const KEYBOARD_CONTROLS = {
+export const KEYBOARD_CONTROLS = {
   NONE: 0,
   PLAY_PAUSE: 1 << 0,
   MUTE_UNMUTE: 1 << 1,
@@ -23,7 +17,7 @@ const KEYBOARD_CONTROLS = {
 
 // These are the possible toggle positions along the right side of
 // a qualified video element.
-const TOGGLE_POLICIES = {
+export const TOGGLE_POLICIES = {
   DEFAULT: 1,
   HIDDEN: 2,
   TOP: 3,
@@ -35,7 +29,7 @@ const TOGGLE_POLICIES = {
 // These strings are used in the videocontrols.css stylesheet as
 // toggle policy attribute values for setting rules on the position
 // of the toggle.
-const TOGGLE_POLICY_STRINGS = {
+export const TOGGLE_POLICY_STRINGS = {
   [TOGGLE_POLICIES.DEFAULT]: "default",
   [TOGGLE_POLICIES.HIDDEN]: "hidden",
   [TOGGLE_POLICIES.TOP]: "top",

toolkit/components/pictureinpicture/content/player.js

@@ -2,8 +2,8 @@
  * 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/. */
 
-const { PictureInPicture } = ChromeUtils.import(
+const { PictureInPicture } = ChromeUtils.importESModule(
-  "resource://gre/modules/PictureInPicture.jsm"
+  "resource://gre/modules/PictureInPicture.sys.mjs"
 );
 const { ShortcutUtils } = ChromeUtils.import(
   "resource://gre/modules/ShortcutUtils.jsm"

toolkit/components/pictureinpicture/docs/index.rst

@@ -93,7 +93,7 @@ for the ``UAWidgetSetupOrChange`` event. This is considered being "registered".
 ``docState``
 ============
 
-``PictureInPictureChild.jsm`` contains a ``WeakMap`` mapping ``document``'s to various information
+``PictureInPictureChild.sys.mjs`` contains a ``WeakMap`` mapping ``document``'s to various information
 that ``PictureInPictureToggleChild`` wants to retain for the lifetime of that ``document``. For
 example, whether or not we're in the midst of handling the user clicking down on their pointer
 device. Any state that needs to be remembered should be added to the ``docState`` ``WeakMap``.
@@ -138,12 +138,12 @@ to a player window instance. It creates an always-on-top window, and sets up a n
 (which will be in the same process, and have its own ``PictureInPictureChild``). Creating this window also causes the new ``PictureInPictureChild`` to be created.
 This instance will monitor the originating ``<video>`` for changes, and to receive commands from the player window if the user wants to control the ``<video>``.
 
-PictureInPicture.jsm
+PictureInPicture.sys.mjs
-====================
+========================
 
-This module runs in the parent process, and is also the scope where all ``PictureInPictureParent`` instances reside. ``PictureInPicture.jsm``'s job is to send and receive messages from ``PictureInPictureChild`` instances, and to react appropriately.
+This module runs in the parent process, and is also the scope where all ``PictureInPictureParent`` instances reside. ``PictureInPicture.sys.mjs``'s job is to send and receive messages from ``PictureInPictureChild`` instances, and to react appropriately.
 
-Critically, ``PictureInPicture.jsm`` is responsible for opening up the always-on-top player window, and passing the relevant information about the ``<video>`` to be displayed to it.
+Critically, ``PictureInPicture.sys.mjs`` is responsible for opening up the always-on-top player window, and passing the relevant information about the ``<video>`` to be displayed to it.
 
 
 The Picture-in-Picture player window
@@ -200,7 +200,7 @@ A site-specific video wrapper allows for the creation of custom scripts that the
 
 ``PictureInPictureChildVideoWrapper`` and ``videoWrapperScriptPath``
 --------------------------------------------------------------------
-``PictureInPictureChildVideoWrapper`` is a special class that represents a video wrapper. It is defined in ``PictureInPictureChild.jsm`` and maps to a ``videoWrapperScriptPath``, which is the path of the custom wrapper script to use.
+``PictureInPictureChildVideoWrapper`` is a special class that represents a video wrapper. It is defined in ``PictureInPictureChild.sys.mjs`` and maps to a ``videoWrapperScriptPath``, which is the path of the custom wrapper script to use.
 ``videoWrapperScriptPath`` is defined in `browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js <https://searchfox.org/mozilla-central/source/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js>`_ for a domain,
 and custom wrapper scripts are defined in `browser/extensions/pictureinpicture/video-wrappers <https://searchfox.org/mozilla-central/source/browser/extensions/pictureinpicture/video-wrappers>`_.
 
@@ -295,7 +295,7 @@ we can create a new one by calling ``#callWrapperMethod()``. Below is an example
 
 .. code-block:: js
 
-    // class PictureInPictureChildVideoWrapper in PictureInPictureChild.jsm
+    // class PictureInPictureChildVideoWrapper in PictureInPictureChild.sys.mjs
     setMuted(video, shouldMute) {
         return this.#callWrapperMethod({
             name: "setMuted",
@@ -323,13 +323,13 @@ The fallback function only executes if a wrapper script fails or if the method i
 
 Using the new video control method
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-Once the new method is defined, it can be used throughout ``PictureInPictureChild.jsm``. In the current example, we call
+Once the new method is defined, it can be used throughout ``PictureInPictureChild.sys.mjs``. In the current example, we call
 ``PictureInPictureChildVideoWrapper.setMuted()`` to mute or unmute a video. ``this.videoWrapper`` is an instance of
 ``PictureInPictureChildVideoWrapper``:
 
 .. code-block:: js
 
-    // class PictureInPictureChild in PictureInPictureChild.jsm
+    // class PictureInPictureChild in PictureInPictureChild.sys.mjs
     mute() {
         let video = this.getWeakVideo();
         if (video && this.videoWrapper) {
@@ -380,6 +380,6 @@ API References
    picture-in-picture-api
    player-api
 
-``toolkit/actors/PictureInPictureChild.jsm``
+``toolkit/actors/PictureInPictureChild.sys.mjs``
 --------------------------------------------
 * :ref:`picture_in_picture_child_video_wrapper_api`

toolkit/components/pictureinpicture/moz.build

@@ -12,8 +12,8 @@ SPHINX_TREES["pictureinpicture"] = "docs"
 JAR_MANIFESTS += ["jar.mn"]
 
 EXTRA_JS_MODULES += [
-    "PictureInPicture.jsm",
+    "PictureInPicture.sys.mjs",
-    "PictureInPictureControls.jsm",
+    "PictureInPictureControls.sys.mjs",
 ]
 
 BROWSER_CHROME_MANIFESTS += [

toolkit/components/pictureinpicture/tests/head.js

@@ -3,8 +3,8 @@
 
 "use strict";
 
-const { TOGGLE_POLICIES } = ChromeUtils.import(
+const { TOGGLE_POLICIES } = ChromeUtils.importESModule(
-  "resource://gre/modules/PictureInPictureControls.jsm"
+  "resource://gre/modules/PictureInPictureControls.sys.mjs"
 );
 
 const TEST_ROOT = getRootDirectory(gTestPath).replace(
@@ -298,7 +298,7 @@ async function toggleOpacityReachesThreshold(
  * @param {String} videoID The ID of the video element that we expect the toggle
  * to appear on.
  * @param {Number} policy Optional argument. If policy is defined, then it should
- * be one of the values in the TOGGLE_POLICIES from PictureInPictureControls.jsm.
+ * be one of the values in the TOGGLE_POLICIES from PictureInPictureControls.sys.mjs.
  * If undefined, this function will ensure no policy attribute is set.
  *
  * @return Promise
@@ -325,8 +325,8 @@ async function assertTogglePolicy(
     }, "Waiting for the hovering state to be set on the video.");
 
     if (policy) {
-      const { TOGGLE_POLICY_STRINGS } = ChromeUtils.import(
+      const { TOGGLE_POLICY_STRINGS } = ChromeUtils.importESModule(
-        "resource://gre/modules/PictureInPictureControls.jsm"
+        "resource://gre/modules/PictureInPictureControls.sys.mjs"
       );
       let policyAttr = toggle.getAttribute("policy");
       Assert.equal(
@@ -434,8 +434,8 @@ async function prepareForToggleClick(browser, videoID) {
       // mousemove events. We don't exactly know when that IntersectionObserver
       // will fire, so we poll a special testing function that will tell us when
       // the video that we care about is being tracked.
-      let { PictureInPictureToggleChild } = ChromeUtils.import(
+      let { PictureInPictureToggleChild } = ChromeUtils.importESModule(
-        "resource://gre/actors/PictureInPictureChild.jsm"
+        "resource://gre/actors/PictureInPictureChild.sys.mjs"
       );
       await ContentTaskUtils.waitForCondition(
         () => {
@@ -533,7 +533,7 @@ async function getToggleClientRect(
  * in this region will not result in the window opening.
  *
  * If policy is defined, then it should be one of the values in the
- * TOGGLE_POLICIES from PictureInPictureControls.jsm.
+ * TOGGLE_POLICIES from PictureInPictureControls.sys.mjs.
  *
  * See the documentation for the DEFAULT_TOGGLE_STYLES object for a sense
  * of what styleRules is expected to be. If left undefined, styleRules will
@@ -585,7 +585,7 @@ async function testToggle(testURL, expectations, prepFn = async () => {}) {
  * @param {Boolean} canToggle True if we expect the toggle to be visible and
  * clickable by the mouse for the associated video.
  * @param {Number} policy Optional argument. If policy is defined, then it should
- * be one of the values in the TOGGLE_POLICIES from PictureInPictureControls.jsm.
+ * be one of the values in the TOGGLE_POLICIES from PictureInPictureControls.sys.mjs.
  * @param {Object} toggleStyles Optional argument. See the documentation for the
  * DEFAULT_TOGGLE_STYLES object for a sense of what styleRules is expected to be.
  *

toolkit/content/widgets/videocontrols.js

@@ -109,7 +109,7 @@ this.VideoControlsWidget = class {
     this.impl.onPrefChange(prefName, prefValue);
   }
 
-  // If you change this, also change SEEK_TIME_SECS in PictureInPictureChild.jsm
+  // If you change this, also change SEEK_TIME_SECS in PictureInPictureChild.sys.mjs
   static SEEK_TIME_SECS = 5;
 
   static isPictureInPictureVideo(someVideo) {

toolkit/modules/ActorManagerParent.jsm

@@ -332,10 +332,10 @@ let JSWINDOWACTORS = {
 
   PictureInPictureLauncher: {
     parent: {
-      moduleURI: "resource://gre/modules/PictureInPicture.jsm",
+      esModuleURI: "resource://gre/modules/PictureInPicture.sys.mjs",
     },
     child: {
-      moduleURI: "resource://gre/actors/PictureInPictureChild.jsm",
+      esModuleURI: "resource://gre/actors/PictureInPictureChild.sys.mjs",
       events: {
         MozTogglePictureInPicture: { capture: true },
       },
@@ -346,10 +346,10 @@ let JSWINDOWACTORS = {
 
   PictureInPicture: {
     parent: {
-      moduleURI: "resource://gre/modules/PictureInPicture.jsm",
+      esModuleURI: "resource://gre/modules/PictureInPicture.sys.mjs",
     },
     child: {
-      moduleURI: "resource://gre/actors/PictureInPictureChild.jsm",
+      esModuleURI: "resource://gre/actors/PictureInPictureChild.sys.mjs",
     },
 
     allFrames: true,
@@ -357,10 +357,10 @@ let JSWINDOWACTORS = {
 
   PictureInPictureToggle: {
     parent: {
-      moduleURI: "resource://gre/modules/PictureInPicture.jsm",
+      esModuleURI: "resource://gre/modules/PictureInPicture.sys.mjs",
     },
     child: {
-      moduleURI: "resource://gre/actors/PictureInPictureChild.jsm",
+      esModuleURI: "resource://gre/actors/PictureInPictureChild.sys.mjs",
       events: {
         UAWidgetSetupOrChange: {},
         contextmenu: { capture: true },