Bug 1505304 - [devtools] Make watchTargets take a single object param. r=ochameau.

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

devtools/client/accessibility/accessibility-proxy.js

@@ -411,12 +411,12 @@ class AccessibilityProxy {
   }
 
   async initialize() {
-    await this.commands.targetCommand.watchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable,
-      this.onTargetDestroyed,
-      this.onTargetSelected
-    );
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+      onSelected: this.onTargetSelected,
+      onDestroyed: this.onTargetDestroyed,
+    });
     await this.commands.resourceCommand.watchResources(
       [this.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
       {
@@ -429,12 +429,12 @@ class AccessibilityProxy {
   }
 
   destroy() {
-    this.commands.targetCommand.unwatchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable,
-      this.onTargetDestroyed,
-      this.onTargetSelected
-    );
+    this.commands.targetCommand.unwatchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+      onSelected: this.onTargetSelected,
+      onDestroyed: this.onTargetDestroyed,
+    });
     this.commands.resourceCommand.unwatchResources(
       [this.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
       { onAvailable: this.onResourceAvailable }

devtools/client/debugger/src/client/firefox.js

@@ -66,11 +66,11 @@ export async function onConnect(_commands, _resourceCommand, _actions, store) {
     targetFront.isWebExtension
   );
 
-  await targetCommand.watchTargets(
-    targetCommand.ALL_TYPES,
-    onTargetAvailable,
-    onTargetDestroyed
-  );
+  await targetCommand.watchTargets({
+    types: targetCommand.ALL_TYPES,
+    onAvailable: onTargetAvailable,
+    onDestroyed: onTargetDestroyed,
+  });
 
   // Use independant listeners for SOURCE and THREAD_STATE in order to ease
   // doing batching and notify about a set of SOURCE's in one redux action.
@@ -92,11 +92,11 @@ export async function onConnect(_commands, _resourceCommand, _actions, store) {
 }
 
 export function onDisconnect() {
-  targetCommand.unwatchTargets(
-    targetCommand.ALL_TYPES,
-    onTargetAvailable,
-    onTargetDestroyed
-  );
+  targetCommand.unwatchTargets({
+    types: targetCommand.ALL_TYPES,
+    onAvailable: onTargetAvailable,
+    onDestroyed: onTargetDestroyed,
+  });
   resourceCommand.unwatchResources([resourceCommand.TYPES.SOURCE], {
     onAvailable: onSourceAvailable,
   });

devtools/client/dom/panel.js

@@ -64,12 +64,11 @@ DomPanel.prototype = {
     // onTargetAvailable is mandatory when calling watchTargets
     this._onTargetAvailable = () => {};
     this._onTargetSelected = this._onTargetSelected.bind(this);
-    await this._commands.targetCommand.watchTargets(
-      [this._commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      null,
-      this._onTargetSelected
-    );
+    await this._commands.targetCommand.watchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+    });
 
     this.onResourceAvailable = this.onResourceAvailable.bind(this);
     await this._commands.resourceCommand.watchResources(
@@ -102,12 +101,11 @@ DomPanel.prototype = {
     }
     this._destroyed = true;
 
-    this._commands.targetCommand.unwatchTargets(
-      [this._commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      null,
-      this._onTargetSelected
-    );
+    this._commands.targetCommand.unwatchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+    });
     this._commands.resourceCommand.unwatchResources(
       [this._commands.resourceCommand.TYPES.DOCUMENT_EVENT],
       { onAvailable: this.onResourceAvailable }

devtools/client/framework/toolbox.js

@@ -900,12 +900,12 @@ Toolbox.prototype = {
       // and we are registering the first target listener, which means
       // Toolbox._onTargetAvailable will be called first, before any other
       // onTargetAvailable listener that might be registered on targetCommand.
-      await this.commands.targetCommand.watchTargets(
-        this.commands.targetCommand.ALL_TYPES,
-        this._onTargetAvailable,
-        this._onTargetDestroyed,
-        this._onTargetSelected
-      );
+      await this.commands.targetCommand.watchTargets({
+        types: this.commands.targetCommand.ALL_TYPES,
+        onAvailable: this._onTargetAvailable,
+        onSelected: this._onTargetSelected,
+        onDestroyed: this._onTargetDestroyed,
+      });
 
       const onResourcesWatched = this.resourceCommand.watchResources(
         [
@@ -3964,12 +3964,12 @@ Toolbox.prototype = {
     // Reset preferences set by the toolbox
     outstanding.push(this.resetPreference());
 
-    this.commands.targetCommand.unwatchTargets(
-      this.commands.targetCommand.ALL_TYPES,
-      this._onTargetAvailable,
-      this._onTargetDestroyed,
-      this._onTargetSelected
-    );
+    this.commands.targetCommand.unwatchTargets({
+      types: this.commands.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+      onDestroyed: this._onTargetDestroyed,
+    });
     this.resourceCommand.unwatchResources(
       [
         this.resourceCommand.TYPES.CONSOLE_MESSAGE,

devtools/client/inspector/animation/animation.js

@@ -147,10 +147,10 @@ class AnimationInspector {
   }
 
   async initListeners() {
-    await this.inspector.commands.targetCommand.watchTargets(
-      [this.inspector.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable
-    );
+    await this.inspector.commands.targetCommand.watchTargets({
+      types: [this.inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
 
     this.inspector.on("new-root", this.onNavigate);
     this.inspector.selection.on("new-node-front", this.update);

devtools/client/inspector/inspector.js

@@ -206,12 +206,12 @@ Inspector.prototype = {
     // iframe if it had already been initialized.
     this.setupSplitter();
 
-    await this.commands.targetCommand.watchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      this._onTargetDestroyed,
-      this._onTargetSelected
-    );
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+      onDestroyed: this._onTargetDestroyed,
+    });
 
     await this.toolbox.resourceCommand.watchResources(
       [
@@ -1730,12 +1730,12 @@ Inspector.prototype = {
     this.searchboxShortcuts.destroy();
     this.searchboxShortcuts = null;
 
-    this.commands.targetCommand.unwatchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      this._onTargetDestroyed,
-      this._onTargetSelected
-    );
+    this.commands.targetCommand.unwatchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onSelected: this._onTargetSelected,
+      onDestroyed: this._onTargetDestroyed,
+    });
     const { resourceCommand } = this.toolbox;
     resourceCommand.unwatchResources(
       [

devtools/client/inspector/node-picker.js

@@ -155,10 +155,10 @@ class NodePicker extends EventEmitter {
 
     this.emit("picker-starting");
 
-    this.targetCommand.watchTargets(
-      this.targetCommand.ALL_TYPES,
-      this._onTargetAvailable
-    );
+    this.targetCommand.watchTargets({
+      types: this.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+    });
 
     this.emit("picker-started");
   }
@@ -181,10 +181,10 @@ class NodePicker extends EventEmitter {
     this.isPicking = false;
     this.doFocus = false;
 
-    this.targetCommand.unwatchTargets(
-      this.targetCommand.ALL_TYPES,
-      this._onTargetAvailable
-    );
+    this.targetCommand.unwatchTargets({
+      types: this.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+    });
 
     for (const inspectorFront of this._currentInspectorFronts) {
       await this._onInspectorFrontDestroyed(inspectorFront, {

devtools/client/inspector/shared/walker-event-listener.js

@@ -32,11 +32,11 @@ class WalkerEventListener {
    * Clean up function.
    */
   destroy() {
-    this._inspector.commands.targetCommand.unwatchTargets(
-      [this._inspector.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      this._onTargetDestroyed
-    );
+    this._inspector.commands.targetCommand.unwatchTargets({
+      types: [this._inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
 
     const targets = this._inspector.commands.targetCommand.getAllTargets([
       this._inspector.commands.targetCommand.TYPES.FRAME,
@@ -52,11 +52,11 @@ class WalkerEventListener {
   }
 
   _init() {
-    this._inspector.commands.targetCommand.watchTargets(
-      [this._inspector.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      this._onTargetDestroyed
-    );
+    this._inspector.commands.targetCommand.watchTargets({
+      types: [this._inspector.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
   }
 
   async _onTargetAvailable({ targetFront }) {

devtools/client/memory/panel.js

@@ -34,10 +34,10 @@ MemoryPanel.prototype = {
 
     await this.initializer.initialize(this._commands);
 
-    await this._commands.targetCommand.watchTargets(
-      [this._commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable
-    );
+    await this._commands.targetCommand.watchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+    });
 
     return this;
   },
@@ -59,10 +59,10 @@ MemoryPanel.prototype = {
     }
     this._destroyed = true;
 
-    this._commands.targetCommand.unwatchTargets(
-      [this._commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable
-    );
+    this._commands.targetCommand.unwatchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+    });
 
     this.initializer.destroy();
 

devtools/client/netmonitor/src/connector/index.js

@@ -93,10 +93,10 @@ class Connector {
       owner: this.owner,
     });
 
-    await this.commands.targetCommand.watchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable
-    );
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
 
     const { TYPES } = this.toolbox.resourceCommand;
     const targetResources = [
@@ -141,10 +141,10 @@ class Connector {
 
     this._destroyed = true;
 
-    this.commands.targetCommand.unwatchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable
-    );
+    this.commands.targetCommand.unwatchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
 
     const { TYPES } = this.toolbox.resourceCommand;
     this.toolbox.resourceCommand.unwatchResources(

devtools/client/performance/panel.js

@@ -50,10 +50,10 @@ PerformancePanel.prototype = {
     // the `watchTargets` function.
     // So this `await` waits for initialization with current target, happening
     // in `_onTargetAvailable`.
-    await this.commands.targetCommand.watchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable
-    );
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+    });
 
     // Fire this once incase we have an in-progress recording (console profile)
     // that caused this start up, and no state change yet, so we can highlight the
@@ -88,10 +88,10 @@ PerformancePanel.prototype = {
       this._checkRecordingStatus
     );
 
-    this.commands.targetCommand.unwatchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable
-    );
+    this.commands.targetCommand.unwatchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+    });
     await PerformanceController.destroy();
     await PerformanceView.destroy();
     PerformanceController.disableFrontEventListeners();

devtools/client/responsive/ui.js

@@ -320,10 +320,10 @@ class ResponsiveUI {
       // any resource & target anymore, the JSWindowActors will be unregistered
       // which will trigger an early destruction of the RDM target, before we
       // could finalize the cleanup.
-      this.commands.targetCommand.unwatchTargets(
-        [this.commands.targetCommand.TYPES.FRAME],
-        this.onTargetAvailable
-      );
+      this.commands.targetCommand.unwatchTargets({
+        types: [this.commands.targetCommand.TYPES.FRAME],
+        onAvailable: this.onTargetAvailable,
+      });
 
       this.resourceCommand.unwatchResources(
         [this.resourceCommand.TYPES.NETWORK_EVENT],
@@ -367,10 +367,10 @@ class ResponsiveUI {
 
     await this.commands.targetCommand.startListening();
 
-    await this.commands.targetCommand.watchTargets(
-      [this.commands.targetCommand.TYPES.FRAME],
-      this.onTargetAvailable
-    );
+    await this.commands.targetCommand.watchTargets({
+      types: [this.commands.targetCommand.TYPES.FRAME],
+      onAvailable: this.onTargetAvailable,
+    });
 
     // To support network throttling the resource command
     // needs to be watching for network resources.

devtools/client/storage/ui.js

@@ -267,7 +267,7 @@ class StorageUI {
   }
 
   async init() {
-    // This is a distionarry of arrays, keyed by storage key
+    // This is a distionary of arrays, keyed by storage key
     // - Keys are storage keys, available on each storage resource, via ${resource.resourceKey}
     //   and are typically "Cache", "cookies", "indexedDB", "localStorage", ...
     // - Values are arrays of storage fronts. This isn't the deprecated global storage front (target.getFront(storage), only used by legacy listener),
@@ -276,11 +276,11 @@ class StorageUI {
 
     this._onTargetAvailable = this._onTargetAvailable.bind(this);
     this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
-    await this._commands.targetCommand.watchTargets(
-      [this._commands.targetCommand.TYPES.FRAME],
-      this._onTargetAvailable,
-      this._onTargetDestroyed
-    );
+    await this._commands.targetCommand.watchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
 
     this._onResourceListAvailable = this._onResourceListAvailable.bind(this);
 

devtools/client/webconsole/test/browser/browser_console_devtools_loader_exception.js

@@ -71,14 +71,17 @@ add_task(async function() {
     : new Promise(resolve => {
         const onAvailable = ({ targetFront }) => {
           if (targetFront.url.includes("view-source:")) {
-            targetCommand.unwatchTargets(
-              [targetCommand.TYPES.FRAME],
-              onAvailable
-            );
+            targetCommand.unwatchTargets({
+              types: [targetCommand.TYPES.FRAME],
+              onAvailable,
+            });
             resolve();
           }
         };
-        targetCommand.watchTargets([targetCommand.TYPES.FRAME], onAvailable);
+        targetCommand.watchTargets({
+          types: [targetCommand.TYPES.FRAME],
+          onAvailable,
+        });
       });
 
   const onTabOpen = BrowserTestUtils.waitForNewTab(

devtools/client/webconsole/test/browser/browser_jsterm_hide_when_devtools_chrome_enabled_false.js

@@ -187,10 +187,16 @@ function waitForSourceMapWorker(hud) {
         !seenWorkerTargets.has(targetFront)
       ) {
         seenWorkerTargets.add(targetFront);
-        targetCommand.unwatchTargets([targetCommand.TYPES.WORKER], onAvailable);
+        targetCommand.unwatchTargets({
+          types: [targetCommand.TYPES.WORKER],
+          onAvailable,
+        });
         resolve();
       }
     };
-    targetCommand.watchTargets([targetCommand.TYPES.WORKER], onAvailable);
+    targetCommand.watchTargets({
+      types: [targetCommand.TYPES.WORKER],
+      onAvailable,
+    });
   });
 }

devtools/client/webconsole/webconsole-ui.js

@@ -208,11 +208,11 @@ class WebConsoleUI {
     }
 
     // Stop listening for targets
-    this.hud.commands.targetCommand.unwatchTargets(
-      this.hud.commands.targetCommand.ALL_TYPES,
-      this._onTargetAvailable,
-      this._onTargetDestroy
-    );
+    this.hud.commands.targetCommand.unwatchTargets({
+      types: this.hud.commands.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroy,
+    });
 
     const resourceCommand = this.hud.resourceCommand;
     resourceCommand.unwatchResources(
@@ -344,11 +344,11 @@ class WebConsoleUI {
     // - workers, for similar reason. When we open a toolbox
     // for just a worker, the top level target is a worker target.
     // - processes, as we want to spawn additional proxies for them.
-    await commands.targetCommand.watchTargets(
-      commands.targetCommand.ALL_TYPES,
-      this._onTargetAvailable,
-      this._onTargetDestroy
-    );
+    await commands.targetCommand.watchTargets({
+      types: this.hud.commands.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroy,
+    });
 
     const resourceCommand = commands.resourceCommand;
     await resourceCommand.watchResources(

devtools/shared/commands/resource/resource-command.js

@@ -325,11 +325,11 @@ class ResourceCommand {
       // If this is the very first listener registered, of all kind of resource types:
       // * we want to start observing targets via TargetCommand
       // * _onTargetAvailable will be called for each already existing targets and the next one to come
-      this._watchTargetsPromise = this.targetCommand.watchTargets(
-        this.targetCommand.ALL_TYPES,
-        this._onTargetAvailable,
-        this._onTargetDestroyed
-      );
+      this._watchTargetsPromise = this.targetCommand.watchTargets({
+        types: this.targetCommand.ALL_TYPES,
+        onAvailable: this._onTargetAvailable,
+        onDestroyed: this._onTargetDestroyed,
+      });
     }
     return this._watchTargetsPromise;
   }
@@ -345,11 +345,11 @@ class ResourceCommand {
     this._offTargetFrontListeners.clear();
 
     this._watchTargetsPromise = null;
-    this.targetCommand.unwatchTargets(
-      this.targetCommand.ALL_TYPES,
-      this._onTargetAvailable,
-      this._onTargetDestroyed
-    );
+    this.targetCommand.unwatchTargets({
+      types: this.targetCommand.ALL_TYPES,
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
   }
 
   /**

devtools/shared/commands/resource/tests/browser_resources_console_messages_workers.js

@@ -31,7 +31,10 @@ add_task(async function() {
         resolve();
       }
     };
-    targetCommand.watchTargets([targetCommand.TYPES.WORKER], onAvailable);
+    targetCommand.watchTargets({
+      types: [targetCommand.TYPES.WORKER],
+      onAvailable,
+    });
   });
 
   // The worker logs a message right when it starts, containing its location, so we can

devtools/shared/commands/resource/tests/browser_resources_sources.js

@@ -25,10 +25,11 @@ add_task(async function() {
   await targetCommand.startListening();
 
   const targets = [];
-  await targetCommand.watchTargets(targetCommand.ALL_TYPES, async function({
-    targetFront,
-  }) {
-    targets.push(targetFront);
+  await targetCommand.watchTargets({
+    types: targetCommand.ALL_TYPES,
+    onAvailable: async function({ targetFront }) {
+      targets.push(targetFront);
+    },
   });
   is(targets.length, 3, "Got expected number of targets");
 

devtools/shared/commands/target-configuration/tests/browser_target_configuration_command_custom_user_agent.js

@@ -114,10 +114,10 @@ add_task(async function() {
   const otherTargetCommand = otherCommands.targetCommand;
   await otherTargetCommand.startListening();
   // wait for the target to be fully attached to avoid pending connection to the server
-  await otherTargetCommand.watchTargets(
-    [otherTargetCommand.TYPES.FRAME],
-    () => {}
-  );
+  await otherTargetCommand.watchTargets({
+    types: [otherTargetCommand.TYPES.FRAME],
+    onAvailable: () => {},
+  });
 
   // Let's update the configuration with this commands instance to make sure we hit the TargetConfigurationActor
   await otherTargetConfigurationCommand.updateConfiguration({

devtools/shared/commands/target-configuration/tests/browser_target_configuration_command_touch_events.js

@@ -74,10 +74,10 @@ add_task(async function() {
   await otherTargetCommand.startListening();
   // Watch targets so we wait for server communication to settle (e.g. attach calls), as
   // this could cause intermittent failures.
-  await otherTargetCommand.watchTargets(
-    [otherTargetCommand.TYPES.FRAME],
-    () => {}
-  );
+  await otherTargetCommand.watchTargets({
+    types: [otherTargetCommand.TYPES.FRAME],
+    onAvailable: () => {},
+  });
 
   // Let's update the configuration with this commands instance to make sure we hit the TargetConfigurationActor
   await otherTargetConfigurationCommand.updateConfiguration({

devtools/shared/commands/target/legacy-target-watchers/legacy-workers-watcher.js

@@ -142,11 +142,11 @@ class LegacyWorkersWatcher {
     this.target = this.targetCommand.targetFront;
 
     if (this.target.isParentProcess) {
-      await this.targetCommand.watchTargets(
-        [this.targetCommand.TYPES.PROCESS],
-        this._onProcessAvailable,
-        this._onProcessDestroyed
-      );
+      await this.targetCommand.watchTargets({
+        types: [this.targetCommand.TYPES.PROCESS],
+        onAvailable: this._onProcessAvailable,
+        onDestroyed: this._onProcessDestroyed,
+      });
 
       // The ParentProcessTarget front is considered to be a FRAME instead of a PROCESS.
       // So process it manually here.
@@ -199,11 +199,11 @@ class LegacyWorkersWatcher {
   unlisten({ isTargetSwitching } = {}) {
     // Stop listening for new process targets.
     if (this.target.isParentProcess) {
-      this.targetCommand.unwatchTargets(
-        [this.targetCommand.TYPES.PROCESS],
-        this._onProcessAvailable,
-        this._onProcessDestroyed
-      );
+      this.targetCommand.unwatchTargets({
+        types: [this.targetCommand.TYPES.PROCESS],
+        onAvailable: this._onProcessAvailable,
+        onDestroyed: this._onProcessDestroyed,
+      });
     } else if (this._isServiceWorkerWatcher) {
       this._legacyProcessesWatcher.unlisten();
     }

devtools/shared/commands/target/target-command.js

@@ -632,26 +632,45 @@ class TargetCommand extends EventEmitter {
   /**
    * Listen for the creation and/or destruction of target fronts matching one of the provided types.
    *
-   * @param {Array<String>} types
+   * @param {Object} options
+   * @param {Array<String>} options.types
    *        The type of target to listen for. Constant of TargetCommand.TYPES.
-   * @param {Function} onAvailable
-   *        Callback fired when a target has been just created or was already available.
+   * @param {Function} options.onAvailable
+   *        Mandatory callback fired when a target has been just created or was already available.
    *        The function is called with a single object argument containing the following properties:
    *        - {TargetFront} targetFront: The target Front
    *        - {Boolean} isTargetSwitching: Is this target relates to a navigation and
    *                    this replaced a previously available target, this flag will be true
-   * @param {Function} onDestroy
-   *        Callback fired in case of target front destruction.
+   * @param {Function} options.onDestroyed
+   *        Optional callback fired in case of target front destruction.
    *        The function is called with the same arguments than onAvailable.
-   * @param {Function} onSelect.
-   *        Callback fired when a given target is selected from the iframe picker
+   * @param {Function} options.onSelected
+   *        Optional callback fired when a given target is selected from the iframe picker
    *        The function is called with a single object argument containing the following properties:
    *        - {TargetFront} targetFront: The target Front
    */
-  async watchTargets(types, onAvailable, onDestroy, onSelect) {
+  async watchTargets(options = {}) {
+    const availableOptions = [
+      "types",
+      "onAvailable",
+      "onDestroyed",
+      "onSelected",
+    ];
+    const unsupportedKeys = Object.keys(options).filter(
+      key => !availableOptions.includes(key)
+    );
+    if (unsupportedKeys.length > 0) {
+      throw new Error(
+        `TargetCommand.watchTargets does not expect the following options: ${unsupportedKeys.join(
+          ", "
+        )}`
+      );
+    }
+
+    const { types, onAvailable, onDestroyed, onSelected } = options;
     if (typeof onAvailable != "function") {
       throw new Error(
-        "TargetCommand.watchTargets expects a function as second argument"
+        "TargetCommand.watchTargets expects a function for the onAvailable option"
       );
     }
 
@@ -715,11 +734,11 @@ class TargetCommand extends EventEmitter {
 
     for (const type of types) {
       this._createListeners.on(type, onAvailable);
-      if (onDestroy) {
-        this._destroyListeners.on(type, onDestroy);
+      if (onDestroyed) {
+        this._destroyListeners.on(type, onDestroyed);
       }
-      if (onSelect) {
-        this._selectListeners.on(type, onSelect);
+      if (onSelected) {
+        this._selectListeners.on(type, onSelected);
       }
     }
 
@@ -731,10 +750,28 @@ class TargetCommand extends EventEmitter {
    * Stop listening for the creation and/or destruction of a given type of target fronts.
    * See `watchTargets()` for documentation of the arguments.
    */
-  unwatchTargets(types, onAvailable, onDestroy, onSelect) {
+  unwatchTargets(options = {}) {
+    const availableOptions = [
+      "types",
+      "onAvailable",
+      "onDestroyed",
+      "onSelected",
+    ];
+    const unsupportedKeys = Object.keys(options).filter(
+      key => !availableOptions.includes(key)
+    );
+    if (unsupportedKeys.length > 0) {
+      throw new Error(
+        `TargetCommand.unwatchTargets does not expect the following options: ${unsupportedKeys.join(
+          ", "
+        )}`
+      );
+    }
+
+    const { types, onAvailable, onDestroyed, onSelected } = options;
     if (typeof onAvailable != "function") {
       throw new Error(
-        "TargetCommand.unwatchTargets expects a function as second argument"
+        "TargetCommand.unwatchTargets expects a function for the onAvailable option"
       );
     }
 
@@ -746,11 +783,11 @@ class TargetCommand extends EventEmitter {
       }
 
       this._createListeners.off(type, onAvailable);
-      if (onDestroy) {
-        this._destroyListeners.off(type, onDestroy);
+      if (onDestroyed) {
+        this._destroyListeners.off(type, onDestroyed);
       }
-      if (onSelect) {
-        this._selectListeners.off(type, onSelect);
+      if (onSelected) {
+        this._selectListeners.off(type, onSelected);
       }
     }
     this._pendingWatchTargetInitialization.delete(onAvailable);

devtools/shared/commands/target/tests/browser_target_command_bfcache.js

@@ -72,7 +72,11 @@ async function testTopLevelNavigations(bfcacheInParent) {
     destroyedTargets.push(targetFront);
   };
 
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
   is(targets.length, 1, "retrieved only the top level target");
   is(targets[0], targetCommand.targetFront, "the target is the top level one");
   is(
@@ -274,7 +278,7 @@ async function testTopLevelNavigations(bfcacheInParent) {
 
   await waitForAllTargetsToBeAttached(targetCommand);
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable);
+  targetCommand.unwatchTargets({ types: [TYPES.FRAME], onAvailable });
 
   BrowserTestUtils.removeTab(tab);
 
@@ -319,7 +323,11 @@ async function testTopLevelNavigationsOnDocumentWithIframe(bfcacheInParent) {
     destroyedTargets.push(targetFront);
   };
 
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
 
   if (isEveryFrameTargetEnabled()) {
     is(
@@ -450,7 +458,11 @@ async function testTopLevelNavigationsOnDocumentWithIframe(bfcacheInParent) {
 
   await waitForAllTargetsToBeAttached(targetCommand);
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable);
+  targetCommand.unwatchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
 
   BrowserTestUtils.removeTab(tab);
 
@@ -479,7 +491,7 @@ async function testIframeNavigations() {
     );
     targets.push(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable);
+  await targetCommand.watchTargets({ types: [TYPES.FRAME], onAvailable });
 
   // When fission/EFT is off, there isn't much to test for iframes as they are debugged
   // when the unique top level target
@@ -543,7 +555,7 @@ async function testIframeNavigations() {
   is(targets[4].url, secondPageUrl, "the 4th target is for the second url");
   ok(targets[3].isDestroyed(), "the third target is destroyed");
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable);
+  targetCommand.unwatchTargets({ types: [TYPES.FRAME], onAvailable });
 
   await waitForAllTargetsToBeAttached(targetCommand);
 

devtools/shared/commands/target/tests/browser_target_command_browser_workers.js

@@ -124,10 +124,10 @@ add_task(async function() {
     );
     targets.push(targetFront);
   };
-  await targetCommand.watchTargets(
-    [TYPES.WORKER, TYPES.SHARED_WORKER, TYPES.SERVICE_WORKER],
-    onAvailable
-  );
+  await targetCommand.watchTargets({
+    types: [TYPES.WORKER, TYPES.SHARED_WORKER, TYPES.SERVICE_WORKER],
+    onAvailable,
+  });
   is(
     targets.length,
     workers.length + sharedWorkers.length + serviceWorkers.length,
@@ -147,10 +147,10 @@ add_task(async function() {
     );
   }
 
-  targetCommand.unwatchTargets(
-    [TYPES.WORKER, TYPES.SHARED_WORKER, TYPES.SERVICE_WORKER],
-    onAvailable
-  );
+  targetCommand.unwatchTargets({
+    types: [TYPES.WORKER, TYPES.SHARED_WORKER, TYPES.SERVICE_WORKER],
+    onAvailable,
+  });
 
   // Create a new worker and see if the worker target is reported
   const onWorkerCreated = new Promise(resolve => {
@@ -158,10 +158,16 @@ add_task(async function() {
       if (targets.includes(targetFront)) {
         return;
       }
-      targetCommand.unwatchTargets([TYPES.WORKER], onAvailable2);
+      targetCommand.unwatchTargets({
+        types: [TYPES.WORKER],
+        onAvailable: onAvailable2,
+      });
       resolve(targetFront);
     };
-    targetCommand.watchTargets([TYPES.WORKER], onAvailable2);
+    targetCommand.watchTargets({
+      types: [TYPES.WORKER],
+      onAvailable: onAvailable2,
+    });
   });
   // eslint-disable-next-line no-unused-vars
   const worker2 = new Worker(CHROME_WORKER_URL + "#second");
@@ -191,11 +197,19 @@ add_task(async function() {
   const onWorkerDestroyed = new Promise(resolve => {
     const emptyFn = () => {};
     const onDestroyed = ({ targetFront }) => {
-      targetCommand.unwatchTargets([TYPES.WORKER], emptyFn, onDestroyed);
+      targetCommand.unwatchTargets({
+        types: [TYPES.WORKER],
+        onAvailable: emptyFn,
+        onDestroyed,
+      });
       resolve(targetFront);
     };
 
-    targetCommand.watchTargets([TYPES.WORKER], emptyFn, onDestroyed);
+    targetCommand.watchTargets({
+      types: [TYPES.WORKER],
+      onAvailable: emptyFn,
+      onDestroyed,
+    });
   });
   worker2.terminate();
   const workerTargetFront = await onWorkerDestroyed;

devtools/shared/commands/target/tests/browser_target_command_frames.js

@@ -243,7 +243,7 @@ async function testBrowserFrames() {
     );
     targets.push(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable);
+  await targetCommand.watchTargets({ types: [TYPES.FRAME], onAvailable });
   is(
     targets.length,
     frames.length,
@@ -358,7 +358,7 @@ async function testBrowserFrames() {
   );
   chromeWindow.close();
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable);
+  targetCommand.unwatchTargets({ types: [TYPES.FRAME], onAvailable });
 
   targetCommand.destroy();
   await waitForAllTargetsToBeAttached(targetCommand);
@@ -414,7 +414,11 @@ async function testTabFrames(mainRoot) {
     );
     destroyedTargets.push({ targetFront, isTargetSwitching });
   };
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
   is(
     targets.length,
     frames.length,
@@ -581,7 +585,7 @@ async function testTabFrames(mainRoot) {
 
   await onNewTargetProcessed;
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable);
+  targetCommand.unwatchTargets({ types: [TYPES.FRAME], onAvailable });
 
   targetCommand.destroy();
 

devtools/shared/commands/target/tests/browser_target_command_frames_reload_server_side_targets.js

@@ -36,7 +36,11 @@ add_task(async function() {
   const onDestroyed = ({ targetFront }) => {
     destroyedTargets.push(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.FRAME], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
 
   await waitFor(() => targets.length === 3);
   ok(
@@ -92,7 +96,11 @@ add_task(async function() {
     }
   }
 
-  targetCommand.unwatchTargets([TYPES.FRAME], onAvailable, onDestroyed);
+  targetCommand.unwatchTargets({
+    types: [TYPES.FRAME],
+    onAvailable,
+    onDestroyed,
+  });
   targetCommand.destroy();
   BrowserTestUtils.removeTab(tab);
   await commands.destroy();

devtools/shared/commands/target/tests/browser_target_command_invalid_api_usage.js

@@ -18,56 +18,57 @@ add_task(async function() {
   const onAvailable = function() {};
 
   await Assert.rejects(
-    targetCommand.watchTargets([null], onAvailable),
+    targetCommand.watchTargets({ types: [null], onAvailable }),
     /TargetCommand.watchTargets invoked with an unknown type/,
     "watchTargets should throw for null type"
   );
 
   await Assert.rejects(
-    targetCommand.watchTargets([undefined], onAvailable),
+    targetCommand.watchTargets({ types: [undefined], onAvailable }),
     /TargetCommand.watchTargets invoked with an unknown type/,
     "watchTargets should throw for undefined type"
   );
 
   await Assert.rejects(
-    targetCommand.watchTargets(["NOT_A_TARGET"], onAvailable),
+    targetCommand.watchTargets({ types: ["NOT_A_TARGET"], onAvailable }),
     /TargetCommand.watchTargets invoked with an unknown type/,
     "watchTargets should throw for unknown type"
   );
 
   await Assert.rejects(
-    targetCommand.watchTargets(
-      [targetCommand.TYPES.FRAME, "NOT_A_TARGET"],
-      onAvailable
-    ),
+    targetCommand.watchTargets({
+      types: [targetCommand.TYPES.FRAME, "NOT_A_TARGET"],
+      onAvailable,
+    }),
     /TargetCommand.watchTargets invoked with an unknown type/,
     "watchTargets should throw for unknown type mixed with a correct type"
   );
 
   Assert.throws(
-    () => targetCommand.unwatchTargets([null], onAvailable),
+    () => targetCommand.unwatchTargets({ types: [null], onAvailable }),
     /TargetCommand.unwatchTargets invoked with an unknown type/,
     "unwatchTargets should throw for null type"
   );
 
   Assert.throws(
-    () => targetCommand.unwatchTargets([undefined], onAvailable),
+    () => targetCommand.unwatchTargets({ types: [undefined], onAvailable }),
     /TargetCommand.unwatchTargets invoked with an unknown type/,
     "unwatchTargets should throw for undefined type"
   );
 
   Assert.throws(
-    () => targetCommand.unwatchTargets(["NOT_A_TARGET"], onAvailable),
+    () =>
+      targetCommand.unwatchTargets({ types: ["NOT_A_TARGET"], onAvailable }),
     /TargetCommand.unwatchTargets invoked with an unknown type/,
     "unwatchTargets should throw for unknown type"
   );
 
   Assert.throws(
     () =>
-      targetCommand.unwatchTargets(
-        [targetCommand.TYPES.CONSOLE_MESSAGE, "NOT_A_TARGET"],
-        onAvailable
-      ),
+      targetCommand.unwatchTargets({
+        types: [targetCommand.TYPES.CONSOLE_MESSAGE, "NOT_A_TARGET"],
+        onAvailable,
+      }),
     /TargetCommand.unwatchTargets invoked with an unknown type/,
     "unwatchTargets should throw for unknown type mixed with a correct type"
   );

devtools/shared/commands/target/tests/browser_target_command_preffedoff.js

@@ -51,9 +51,15 @@ async function testPreffedOffMainProcess() {
   const onProcessAvailable = ({ targetFront }) => {
     processTargets.push(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.PROCESS], onProcessAvailable);
+  await targetCommand.watchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable: onProcessAvailable,
+  });
   is(processTargets.length, 0, "We get no process when preffed-off");
-  targetCommand.unwatchTargets([TYPES.PROCESS], onProcessAvailable);
+  targetCommand.unwatchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable: onProcessAvailable,
+  });
 
   const frameTargets = [];
   const onFrameAvailable = ({ targetFront }) => {
@@ -68,7 +74,10 @@ async function testPreffedOffMainProcess() {
     );
     frameTargets.push(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.FRAME], onFrameAvailable);
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable: onFrameAvailable,
+  });
   is(
     frameTargets.length,
     1,
@@ -79,7 +88,10 @@ async function testPreffedOffMainProcess() {
     mainProcess,
     "The target is the top level one via watchTargets"
   );
-  targetCommand.unwatchTargets([TYPES.FRAME], onFrameAvailable);
+  targetCommand.unwatchTargets({
+    types: [TYPES.FRAME],
+    onAvailable: onFrameAvailable,
+  });
 
   targetCommand.destroy();
 

devtools/shared/commands/target/tests/browser_target_command_processes.js

@@ -47,11 +47,11 @@ add_task(async function() {
   const onDestroyed = ({ targetFront }) => {
     destroyed.push(targetFront);
   };
-  await targetCommand.watchTargets(
-    [targetCommand.TYPES.PROCESS],
+  await targetCommand.watchTargets({
+    types: [targetCommand.TYPES.PROCESS],
     onAvailable,
-    onDestroyed
-  );
+    onDestroyed,
+  });
   ok(created.length > 1, "We get many content process targets");
 
   targetCommand.stopListening();
@@ -126,7 +126,7 @@ async function testProcesses(targetCommand, target) {
     if (!targets.has(targetFront)) {
       ok(
         false,
-        "A target is declared destroyed via onDestroyed without being notified via onAvailable"
+        "A target is declared destroyed via onDestroy without being notified via onAvailable"
       );
     }
     is(
@@ -140,7 +140,11 @@ async function testProcesses(targetCommand, target) {
     );
     targets.delete(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
   is(
     targets.size,
     originalProcessesCount,
@@ -160,10 +164,16 @@ async function testProcesses(targetCommand, target) {
       if (previousTargets.has(targetFront)) {
         return;
       }
-      targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable2);
+      targetCommand.unwatchTargets({
+        types: [TYPES.PROCESS],
+        onAvailable: onAvailable2,
+      });
       resolve(targetFront);
     };
-    targetCommand.watchTargets([TYPES.PROCESS], onAvailable2);
+    targetCommand.watchTargets({
+      types: [TYPES.PROCESS],
+      onAvailable: onAvailable2,
+    });
   });
   const tab1 = await BrowserTestUtils.openNewForegroundTab({
     gBrowser,
@@ -177,14 +187,22 @@ async function testProcesses(targetCommand, target) {
 
   const processCountAfterTabOpen = targets.size;
 
-  // Assert that onDestroyed is called for destroyed processes
+  // Assert that onDestroy is called for destroyed processes
   const onProcessDestroyed = new Promise(resolve => {
     const onAvailable3 = () => {};
     const onDestroyed3 = ({ targetFront }) => {
       resolve(targetFront);
-      targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable3, onDestroyed3);
+      targetCommand.unwatchTargets({
+        types: [TYPES.PROCESS],
+        onAvailable: onAvailable3,
+        onDestroyed: onDestroyed3,
+      });
     };
-    targetCommand.watchTargets([TYPES.PROCESS], onAvailable3, onDestroyed3);
+    targetCommand.watchTargets({
+      types: [TYPES.PROCESS],
+      onAvailable: onAvailable3,
+      onDestroyed: onDestroyed3,
+    });
   });
 
   BrowserTestUtils.removeTab(tab1);
@@ -205,7 +223,11 @@ async function testProcesses(targetCommand, target) {
     "The destroyed target is the one that has been reported as created"
   );
 
-  targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  targetCommand.unwatchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
 
   // Ensure that getAllTargets still works after the call to unwatchTargets
   const processes3 = await targetCommand.getAllTargets([TYPES.PROCESS]);

devtools/shared/commands/target/tests/browser_target_command_service_workers.js

@@ -48,11 +48,11 @@ add_task(async function() {
   const onDestroyed = ({ targetFront }) =>
     targets.splice(targets.indexOf(targetFront), 1);
 
-  await targetCommand.watchTargets(
-    [TYPES.SERVICE_WORKER],
+  await targetCommand.watchTargets({
+    types: [TYPES.SERVICE_WORKER],
     onAvailable,
-    onDestroyed
-  );
+    onDestroyed,
+  });
 
   // We expect onAvailable to have been called one time, for the only service
   // worker target available in the test page.

devtools/shared/commands/target/tests/browser_target_command_service_workers_navigation.js

@@ -337,11 +337,11 @@ async function watchServiceWorkerTargets({
     hooks.targets.splice(hooks.targets.indexOf(targetFront), 1);
   };
 
-  await targetCommand.watchTargets(
-    [targetCommand.TYPES.SERVICE_WORKER],
+  await targetCommand.watchTargets({
+    types: [targetCommand.TYPES.SERVICE_WORKER],
     onAvailable,
-    onDestroyed
-  );
+    onDestroyed,
+  });
 
   return { hooks, commands, targetCommand };
 }

devtools/shared/commands/target/tests/browser_target_command_switchToTarget.js

@@ -84,11 +84,11 @@ add_task(async function testSwitchToTarget() {
     }
     destroyedTargets.push(targetFront);
   };
-  await targetCommand.watchTargets(
-    [TYPES.FRAME],
-    onFrameAvailable,
-    onFrameDestroyed
-  );
+  await targetCommand.watchTargets({
+    types: [TYPES.FRAME],
+    onAvailable: onFrameAvailable,
+    onDestroyed: onFrameDestroyed,
+  });
 
   // Save the original list of targets
   const createdTargets = [...frameTargets];

devtools/shared/commands/target/tests/browser_target_command_tab_workers.js

@@ -73,7 +73,7 @@ add_task(async function() {
     targets.push(targetFront);
     info(`Handled ${targets.length} targets\n`);
   };
-  const onDestroy = async ({ targetFront }) => {
+  const onDestroyed = async ({ targetFront }) => {
     is(
       targetFront.targetType,
       TYPES.WORKER,
@@ -83,11 +83,11 @@ add_task(async function() {
     destroyedTargets.push(targetFront);
   };
 
-  await targetCommand.watchTargets(
-    [TYPES.WORKER, TYPES.SHARED_WORKER],
+  await targetCommand.watchTargets({
+    types: [TYPES.WORKER, TYPES.SHARED_WORKER],
     onAvailable,
-    onDestroy
-  );
+    onDestroyed,
+  });
 
   // XXX: This should be modified in Bug 1607778, where we plan to add support for shared workers.
   info("Check that watched targets return the same fronts as getAllTargets");
@@ -304,11 +304,11 @@ add_task(async function() {
     "second spawned remote iframe worker target was destroyed"
   );
 
-  targetCommand.unwatchTargets(
-    [TYPES.WORKER, TYPES.SHARED_WORKER],
+  targetCommand.unwatchTargets({
+    types: [TYPES.WORKER, TYPES.SHARED_WORKER],
     onAvailable,
-    onDestroy
-  );
+    onDestroyed,
+  });
   targetCommand.destroy();
 
   info("Unregister service workers so they don't appear in other tests.");

devtools/shared/commands/target/tests/browser_target_command_tab_workers_bfcache_navigation.js

@@ -57,7 +57,7 @@ add_task(async function() {
     targets.push(targetFront);
     info(`Handled ${targets.length} new targets`);
   };
-  const onDestroy = async ({ targetFront }) => {
+  const onDestroyed = async ({ targetFront }) => {
     is(
       targetFront.targetType,
       TYPES.WORKER,
@@ -67,11 +67,11 @@ add_task(async function() {
     destroyedTargets.push(targetFront);
   };
 
-  await targetCommand.watchTargets(
-    [TYPES.WORKER, TYPES.SHARED_WORKER],
+  await targetCommand.watchTargets({
+    types: [TYPES.WORKER, TYPES.SHARED_WORKER],
     onAvailable,
-    onDestroy
-  );
+    onDestroyed,
+  });
 
   is(targets.length, 2, "watchTargets retrieved 2 workers…");
   const mainPageWorkerTarget = targets.find(

devtools/shared/commands/target/tests/browser_target_command_watchTargets.js

@@ -74,7 +74,11 @@ async function testWatchTargets() {
     );
     targets.delete(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
   is(
     targets.size,
     originalProcessesCount,
@@ -101,10 +105,16 @@ async function testWatchTargets() {
       if (previousTargets.has(targetFront)) {
         return;
       }
-      targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable2);
+      targetCommand.unwatchTargets({
+        types: [TYPES.PROCESS],
+        onAvailable: onAvailable2,
+      });
       resolve(targetFront);
     };
-    targetCommand.watchTargets([TYPES.PROCESS], onAvailable2);
+    targetCommand.watchTargets({
+      types: [TYPES.PROCESS],
+      onAvailable: onAvailable2,
+    });
   });
   const tab1 = await BrowserTestUtils.openNewForegroundTab({
     gBrowser,
@@ -124,9 +134,17 @@ async function testWatchTargets() {
     const onAvailable3 = () => {};
     const onDestroyed3 = ({ targetFront }) => {
       resolve(targetFront);
-      targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable3, onDestroyed3);
+      targetCommand.unwatchTargets({
+        types: [TYPES.PROCESS],
+        onAvailable: onAvailable3,
+        onDestroyed: onDestroyed3,
+      });
     };
-    targetCommand.watchTargets([TYPES.PROCESS], onAvailable3, onDestroyed3);
+    targetCommand.watchTargets({
+      types: [TYPES.PROCESS],
+      onAvailable: onAvailable3,
+      onDestroyed: onDestroyed3,
+    });
   });
 
   BrowserTestUtils.removeTab(tab1);
@@ -147,7 +165,11 @@ async function testWatchTargets() {
     "The destroyed target is the one that has been reported as created"
   );
 
-  targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  targetCommand.unwatchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
 
   targetCommand.destroy();
 
@@ -190,15 +212,23 @@ async function testContentProcessTarget() {
     targets.add(targetFront);
   };
   const onDestroyed = _ => {
-    ok(false, "onDestroyed should never be called in this test");
+    ok(false, "onDestroy should never be called in this test");
   };
-  await targetCommand.watchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  await targetCommand.watchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
 
   // This may fail if the top level target is reported by LegacyImplementation
   // to TargetCommand and registers a duplicated entry
   is(targets.size, 1, "We were only notified about the top level target");
 
-  targetCommand.unwatchTargets([TYPES.PROCESS], onAvailable, onDestroyed);
+  targetCommand.unwatchTargets({
+    types: [TYPES.PROCESS],
+    onAvailable,
+    onDestroyed,
+  });
   targetCommand.destroy();
 
   await commands.destroy();
@@ -230,7 +260,7 @@ async function testThrowingInOnAvailable() {
     }
     targets.add(targetFront);
   };
-  await targetCommand.watchTargets([TYPES.PROCESS], onAvailable);
+  await targetCommand.watchTargets({ types: [TYPES.PROCESS], onAvailable });
   is(
     targets.size,
     originalProcessesCount - 1,