[PM-3783] Add zone.js support for chrome.runtime.onMessage (#6188)

* [PM-3783] chore: remove `ngZone.run` calls

No longer needed now that we have zone-patches for `chrome.runtime.onMessage`

* [PM-3783] feat: patch `chrome.runtime.onMessage` event listeners

apps/browser/src/platform/polyfills/zone-patch-chrome-runtime.ts

@@ -0,0 +1,36 @@
+/**
+ * Monkey patch `chrome.runtime.onMessage` event listeners to run in the Angular zone.
+ */
+Zone.__load_patch("ChromeRuntimeOnMessage", (global: any, Zone: ZoneType, api: _ZonePrivate) => {
+  const onMessage = global.chrome.runtime.onMessage;
+  if (typeof global?.chrome?.runtime?.onMessage === "undefined") {
+    return;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  api.patchMethod(onMessage, "addListener", (delegate: Function) => (self: any, args: any[]) => {
+    const callback = args.length > 0 ? args[0] : null;
+    if (typeof callback === "function") {
+      const wrapperedCallback = Zone.current.wrap(callback, "ChromeRuntimeOnMessage");
+      callback[api.symbol("chromeRuntimeOnMessageCallback")] = wrapperedCallback;
+      return delegate.call(self, wrapperedCallback);
+    } else {
+      return delegate.apply(self, args);
+    }
+  });
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  api.patchMethod(onMessage, "removeListener", (delegate: Function) => (self: any, args: any[]) => {
+    const callback = args.length > 0 ? args[0] : null;
+    if (typeof callback === "function") {
+      const wrapperedCallback = callback[api.symbol("chromeRuntimeOnMessageCallback")];
+      if (wrapperedCallback) {
+        return delegate.call(self, wrapperedCallback);
+      } else {
+        return delegate.apply(self, args);
+      }
+    } else {
+      return delegate.apply(self, args);
+    }
+  });
+});

apps/browser/src/popup/app.component.ts

@@ -86,7 +86,6 @@ export class AppComponent implements OnInit, OnDestroy {
       sendResponse: any
     ) => {
       if (msg.command === "doneLoggingOut") {
-        this.ngZone.run(async () => {
         this.authService.logOut(async () => {
           if (msg.expired) {
             this.showToast({
@@ -101,16 +100,11 @@ export class AppComponent implements OnInit, OnDestroy {
           }
         });
         this.changeDetectorRef.detectChanges();
-        });
       } else if (msg.command === "authBlocked") {
-        this.ngZone.run(() => {
         this.router.navigate(["home"]);
-        });
       } else if (msg.command === "locked") {
         if (msg.userId == null || msg.userId === (await this.stateService.getUserId())) {
-          this.ngZone.run(() => {
           this.router.navigate(["lock"]);
-          });
         }
       } else if (msg.command === "showDialog") {
         await this.ngZone.run(() => this.showDialog(msg));
@@ -118,9 +112,7 @@ export class AppComponent implements OnInit, OnDestroy {
         // TODO: Should be refactored to live in another service.
         await this.ngZone.run(() => this.showNativeMessagingFingerprintDialog(msg));
       } else if (msg.command === "showToast") {
-        this.ngZone.run(() => {
         this.showToast(msg);
-        });
       } else if (msg.command === "reloadProcess") {
         const forceWindowReload =
           this.platformUtilsService.isSafari() ||
@@ -132,13 +124,9 @@ export class AppComponent implements OnInit, OnDestroy {
           2000
         );
       } else if (msg.command === "reloadPopup") {
-        this.ngZone.run(() => {
         this.router.navigate(["/"]);
-        });
       } else if (msg.command === "convertAccountToKeyConnector") {
-        this.ngZone.run(async () => {
         this.router.navigate(["/remove-password"]);
-        });
       } else {
         msg.webExtSender = sender;
         this.broadcasterService.send(msg);

apps/browser/src/popup/polyfills.ts

@@ -1,3 +1,5 @@
 import "core-js/stable";
 import "date-input-polyfill";
 import "zone.js";
+
+import "../platform/polyfills/zone-patch-chrome-runtime";