diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.ts index c637afb5a02..d09a69b7800 100644 --- a/apps/browser/src/autofill/services/collect-autofill-content.service.ts +++ b/apps/browser/src/autofill/services/collect-autofill-content.service.ts @@ -22,6 +22,7 @@ import { nodeIsInputElement, sendExtensionMessage, requestIdleCallbackPolyfill, + cancelIdleCallbackPolyfill, } from "../utils"; import { AutofillOverlayContentService } from "./abstractions/autofill-overlay-content.service"; @@ -45,7 +46,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte private elementInitializingIntersectionObserver: Set = new Set(); private mutationObserver: MutationObserver; private mutationsQueue: MutationRecord[][] = []; - private updateAfterMutationIdleCallback: number; + private updateAfterMutationIdleCallback: NodeJS.Timeout | number; private readonly updateAfterMutationTimeout = 1000; private readonly formFieldQueryString; private readonly nonInputFormFieldTags = new Set(["textarea", "select"]); @@ -1228,10 +1229,10 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte */ private updateAutofillElementsAfterMutation() { if (this.updateAfterMutationIdleCallback) { - globalThis.cancelIdleCallback(this.updateAfterMutationIdleCallback); + cancelIdleCallbackPolyfill(this.updateAfterMutationIdleCallback); } - this.updateAfterMutationIdleCallback = globalThis.requestIdleCallback( + this.updateAfterMutationIdleCallback = requestIdleCallbackPolyfill( this.getPageDetails.bind(this), { timeout: this.updateAfterMutationTimeout }, ); @@ -1480,7 +1481,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte */ destroy() { if (this.updateAfterMutationIdleCallback) { - globalThis.cancelIdleCallback(this.updateAfterMutationIdleCallback); + cancelIdleCallbackPolyfill(this.updateAfterMutationIdleCallback); } this.mutationObserver?.disconnect(); this.intersectionObserver?.disconnect(); diff --git a/apps/browser/src/autofill/utils/index.ts b/apps/browser/src/autofill/utils/index.ts index e5d20cf9f59..745e7a9548f 100644 --- a/apps/browser/src/autofill/utils/index.ts +++ b/apps/browser/src/autofill/utils/index.ts @@ -7,7 +7,10 @@ import { FillableFormFieldElement, FormFieldElement } from "../types"; * @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) { +export function requestIdleCallbackPolyfill( + callback: () => void, + options?: Record, +): number | NodeJS.Timeout { if ("requestIdleCallback" in globalThis) { return globalThis.requestIdleCallback(() => callback(), options); } @@ -15,6 +18,14 @@ export function requestIdleCallbackPolyfill(callback: () => void, options?: Reco return globalThis.setTimeout(() => callback(), 1); } +export function cancelIdleCallbackPolyfill(id: NodeJS.Timeout | number) { + if ("cancelIdleCallback" in globalThis) { + return globalThis.cancelIdleCallback(id as number); + } + + return globalThis.clearTimeout(id); +} + /** * Generates a random string of characters that formatted as a custom element name. */