From 374ea6af7c86ed99ba1e9ebc6a10a761dd1e32d9 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Thu, 16 Jan 2025 17:39:05 -0600 Subject: [PATCH] [PM-16719] [COMMUNITY] Debounce requestIdleCallback a single time every 100ms, as opposed to call requestIdleCallback on debounce method (#12695) * [COMMUNITY] Debounce requestIdleCallback a single time every 100ms, as opposed to call requestIdleCallback on debounce method Potential fix for #12031 * [COMMUNITY] Fixing broken jest mock of the debounce utils method * [COMMUNITY] Fixing broken jest mock of the debounce utils method * [COMMUNITY] Fixing broken jest mock of the debounce utils method --- .../services/collect-autofill-content.service.spec.ts | 2 +- .../autofill/services/collect-autofill-content.service.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts index 7471c298917..f15c3e4c389 100644 --- a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts +++ b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts @@ -21,7 +21,7 @@ jest.mock("../utils", () => { const utils = jest.requireActual("../utils"); return { ...utils, - debounce: jest.fn((fn) => fn), + debounce: jest.fn((fn, wait) => setTimeout(() => fn(), wait)), }; }); 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 13c546bccdb..8ccf726aa69 100644 --- a/apps/browser/src/autofill/services/collect-autofill-content.service.ts +++ b/apps/browser/src/autofill/services/collect-autofill-content.service.ts @@ -947,7 +947,8 @@ export class CollectAutofillContentService implements CollectAutofillContentServ } if (!this.mutationsQueue.length) { - requestIdleCallbackPolyfill(debounce(this.processMutations, 100), { timeout: 500 }); + // Collect all mutations and debounce the processing of those mutations by 100ms to ensure we don't process too many mutations at once. + debounce(this.processMutations, 100); } this.mutationsQueue.push(mutations); }; @@ -982,7 +983,8 @@ export class CollectAutofillContentService implements CollectAutofillContentServ const queueLength = this.mutationsQueue.length; if (!this.domQueryService.pageContainsShadowDomElements()) { - this.checkPageContainsShadowDom(); + // Checking if a page contains shadowDOM elements is a heavy operation and doesn't have to be done immediately, so we can call this within an idle moment on the event loop. + requestIdleCallbackPolyfill(this.checkPageContainsShadowDom, { timeout: 500 }); } for (let queueIndex = 0; queueIndex < queueLength; queueIndex++) {