Use a service to track when to open and close offscreen document (#8977)

* Use a service to track when to open and close offscreen document

There some strangeness around maintaining the offscreen document for more callbacks, that need not have the same reasons and justifications as the original.

We'd need to test, but perhaps the intent is something closer to maintaining a work queue ourselves and creating the offscreen page for only a single reason as it comes in, then waiting for that page to close before opening another.

* Prefer builtin promise flattening

* Await anything and everything

---------

Co-authored-by: Cesar Gonzalez <cesar.a.gonzalezcs@gmail.com>

apps/browser/src/popup/services/services.module.ts

@@ -100,6 +100,8 @@ import { runInsideAngular } from "../../platform/browser/run-inside-angular.oper
 /* eslint-disable no-restricted-imports */
 import { ChromeMessageSender } from "../../platform/messaging/chrome-message.sender";
 /* eslint-enable no-restricted-imports */
+import { OffscreenDocumentService } from "../../platform/offscreen-document/abstractions/offscreen-document";
+import { DefaultOffscreenDocumentService } from "../../platform/offscreen-document/offscreen-document.service";
 import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
 import { BrowserFileDownloadService } from "../../platform/popup/services/browser-file-download.service";
 import { BrowserStateService as StateServiceAbstraction } from "../../platform/services/abstractions/browser-state.service";
@@ -287,9 +289,17 @@ const safeProviders: SafeProvider[] = [
     useFactory: getBgService<DevicesServiceAbstraction>("devicesService"),
     deps: [],
   }),
+  safeProvider({
+    provide: OffscreenDocumentService,
+    useClass: DefaultOffscreenDocumentService,
+    deps: [],
+  }),
   safeProvider({
     provide: PlatformUtilsService,
-    useFactory: (toastService: ToastService) => {
+    useFactory: (
+      toastService: ToastService,
+      offscreenDocumentService: OffscreenDocumentService,
+    ) => {
       return new ForegroundPlatformUtilsService(
         toastService,
         (clipboardValue: string, clearMs: number) => {
@@ -306,9 +316,10 @@ const safeProviders: SafeProvider[] = [
           return response.result;
         },
         window,
+        offscreenDocumentService,
       );
     },
-    deps: [ToastService],
+    deps: [ToastService, OffscreenDocumentService],
   }),
   safeProvider({
     provide: PasswordGenerationServiceAbstraction,