[PM-8869] Fix broken autofill cache invalidation features on Safari (#…

…9643)

* [PM-8869] Autofill features broken on Safari

* [PM-8869] Autofill features broken on Safari

apps/browser/src/autofill/services/collect-autofill-content.service.ts

@@ -21,6 +21,7 @@ import {
   nodeIsFormElement,
   nodeIsInputElement,
   // sendExtensionMessage,
+  requestIdleCallbackPolyfill,
 } from "../utils";
 
 import { AutofillOverlayContentService } from "./abstractions/autofill-overlay-content.service";
@@ -1057,7 +1058,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
     }
 
     if (!this.mutationsQueue.length) {
-      globalThis.requestIdleCallback(this.processMutations, { timeout: 500 });
+      requestIdleCallbackPolyfill(this.processMutations, { timeout: 500 });
     }
     this.mutationsQueue.push(mutations);
   };
@@ -1194,7 +1195,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
         continue;
       }
 
-      globalThis.requestIdleCallback(
+      requestIdleCallbackPolyfill(
         // We are setting this item to a -1 index because we do not know its position in the DOM.
         // This value should be updated with the next call to collect page details.
         () => void this.buildAutofillFieldItem(node as ElementWithOpId<FormFieldElement>, -1),

apps/browser/src/autofill/utils/index.ts

@@ -1,6 +1,20 @@
 import { AutofillPort } from "../enums/autofill-port.enums";
 import { FillableFormFieldElement, FormFieldElement } from "../types";
 
+/**
+ * Polyfills the requestIdleCallback API with a setTimeout fallback.
+ *
+ * @param callback - The callback function to run when the browser is idle.
+ * @param options - The options to pass to the requestIdleCallback function.
+ */
+export function requestIdleCallbackPolyfill(callback: () => void, options?: Record<string, any>) {
+  if ("requestIdleCallback" in globalThis) {
+    return globalThis.requestIdleCallback(() => callback(), options);
+  }
+
+  return globalThis.setTimeout(() => callback(), 1);
+}
+
 /**
  * Generates a random string of characters that formatted as a custom element name.
  */