Bug 1509038 - Listen to worker updates on contentProcess fronts;r=daisuke

This is a followup to Bug 1506549 where some of the frontend
code was migrated to listen to worker updates on the content process fronts.
The current about:debugging was migrated, but not the new one.

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/middleware/debug-target-listener.js

@@ -41,6 +41,10 @@ function debugTargetListenerMiddleware(store) {
 
         if (isSupportedDebugTarget(runtime.type, DEBUG_TARGETS.WORKER)) {
           clientWrapper.addListener("workerListChanged", onWorkersUpdated);
+          clientWrapper.onFront("contentProcessTarget", front => {
+            clientWrapper.contentProcessFronts.push(front);
+            front.on("workerListChanged", onWorkersUpdated);
+          });
           clientWrapper.addListener("serviceWorkerRegistrationListChanged",
             onWorkersUpdated);
           clientWrapper.addListener("processListChanged", onWorkersUpdated);
@@ -65,6 +69,12 @@ function debugTargetListenerMiddleware(store) {
           clientWrapper.removeListener("workerListChanged", onWorkersUpdated);
           clientWrapper.removeListener("serviceWorkerRegistrationListChanged",
             onWorkersUpdated);
+
+          for (const front of clientWrapper.contentProcessFronts) {
+            front.off("workerListChanged", onWorkersUpdated);
+          }
+          clientWrapper.contentProcessFronts = [];
+
           clientWrapper.removeListener("processListChanged", onWorkersUpdated);
           clientWrapper.removeListener("registration-changed", onWorkersUpdated);
           clientWrapper.removeListener("push-subscription-modified", onWorkersUpdated);

devtools/client/aboutdebugging-new/src/modules/client-wrapper.js

@@ -31,6 +31,8 @@ const MAIN_ROOT_EVENTS = [
 class ClientWrapper {
   constructor(client) {
     this.client = client;
+    // Array of contentProcessTarget fronts on which we will listen for worker events.
+    this.contentProcessFronts = [];
   }
 
   addOneTimeListener(evt, listener) {
@@ -57,6 +59,10 @@ class ClientWrapper {
     }
   }
 
+  onFront(typeName, listener) {
+    this.client.mainRoot.onFront(typeName, listener);
+  }
+
   async getDeviceDescription() {
     const deviceFront = await this.client.mainRoot.getFront("device");
     const { brandName, channel, deviceName, version } =

devtools/client/aboutdebugging-new/test/browser/mocks/head-client-wrapper-mock.js

@@ -75,6 +75,8 @@ function createClientMock() {
       serviceWorkers: [],
       sharedWorkers: [],
     }),
+    // no-op
+    onFront: () => {},
     // stores the preference locally (doesn't update about:config)
     setPreference: function(prefName, value) {
       this._preferences[prefName] = value;