diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts index 9b65e4db0b..40224642fe 100644 --- a/apps/browser/src/autofill/background/notification.background.ts +++ b/apps/browser/src/autofill/background/notification.background.ts @@ -776,7 +776,7 @@ export default class NotificationBackground { } const messageResponse = handler({ message, sender }); - if (!messageResponse) { + if (typeof messageResponse === "undefined") { return; } diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index 218bc1ea0b..cc2f03e286 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -392,9 +392,9 @@ export class OverlayBackground implements OverlayBackgroundInterface { if (subFrameOffsetsForTab) { const tabFrameIds = Array.from(subFrameOffsetsForTab.keys()); for (const frameId of tabFrameIds) { - if (frameId === sender.frameId) { - continue; - } + // if (frameId === sender.frameId) { + // continue; + // } subFrameOffsetsForTab.delete(frameId); await this.buildSubFrameOffsets(sender.tab, frameId, sender.url); diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts index 3e8dd7d23f..cdb0d99533 100644 --- a/apps/browser/src/autofill/content/autofill-init.ts +++ b/apps/browser/src/autofill/content/autofill-init.ts @@ -182,7 +182,7 @@ class AutofillInit implements AutofillInitInterface { } const messageResponse = handler({ message, sender }); - if (!messageResponse) { + if (typeof messageResponse === "undefined") { return; } diff --git a/apps/browser/src/autofill/fido2/background/fido2.background.ts b/apps/browser/src/autofill/fido2/background/fido2.background.ts index a58d32da16..7066d7938c 100644 --- a/apps/browser/src/autofill/fido2/background/fido2.background.ts +++ b/apps/browser/src/autofill/fido2/background/fido2.background.ts @@ -299,7 +299,7 @@ export class Fido2Background implements Fido2BackgroundInterface { } const messageResponse = handler({ message, sender }); - if (!messageResponse) { + if (typeof messageResponse === "undefined") { return; } diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts index 047f87f0c7..195d9c3321 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts @@ -798,21 +798,16 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ if ("PerformanceObserver" in window && "LayoutShift" in window) { this.reflowPerformanceObserver = new PerformanceObserver( - throttle(this.updateSubFrameOffsetsFromLayoutShiftEvent.bind(this), 10), + throttle(this.updateSubFrameOffsetsFromLayoutShiftEvent.bind(this), 100), ); this.reflowPerformanceObserver.observe({ type: "layout-shift", buffered: true }); return; } - this.reflowMutationObserver = new MutationObserver( - throttle(this.updateSubFrameForReflow.bind(this), 10), - ); - this.reflowMutationObserver.observe(globalThis.document.documentElement, { - childList: true, - subtree: true, - attributes: true, - }); + if (globalThis.window.top !== globalThis.window && this.formFieldElements.size > 0) { + this.setupRebuildSubFrameOffsetsEventListeners(); + } } private updateSubFrameOffsetsFromLayoutShiftEvent = (list: any) => { @@ -827,6 +822,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ }; private updateSubFrameForReflow = () => { + // console.log("update sub frame reflow"); if (this.userInteractionEventTimeout) { this.clearUserInteractionEventTimeout(); void this.toggleInlineMenuHidden(false, true); @@ -1022,6 +1018,30 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ return documentRoot?.activeElement; } + private setupRebuildSubFrameOffsetsEventListeners = () => { + // console.log("setting up listeners"); + globalThis.addEventListener(EVENTS.FOCUS, this.handleSubFrameFocusInEvent); + globalThis.document.body.addEventListener(EVENTS.MOUSEENTER, this.handleSubFrameFocusInEvent); + }; + + private handleSubFrameFocusInEvent = (event: FocusEvent) => { + // console.log("removing listeners", event); + this.updateSubFrameForReflow(); + + globalThis.removeEventListener(EVENTS.FOCUS, this.handleSubFrameFocusInEvent); + globalThis.document.body.removeEventListener( + EVENTS.MOUSEENTER, + this.handleSubFrameFocusInEvent, + ); + globalThis.addEventListener(EVENTS.BLUR, this.handleSubFrameFocusOutEvent); + globalThis.document.body.addEventListener(EVENTS.MOUSELEAVE, this.handleSubFrameFocusOutEvent); + }; + + handleSubFrameFocusOutEvent = (event: FocusEvent) => { + // console.log(event); + this.setupRebuildSubFrameOffsetsEventListeners(); + }; + /** * Queries all iframe elements within the document and returns the * sub frame offsets for each iframe element. diff --git a/libs/common/src/autofill/constants/index.ts b/libs/common/src/autofill/constants/index.ts index 6d5af41a17..93815be55d 100644 --- a/libs/common/src/autofill/constants/index.ts +++ b/libs/common/src/autofill/constants/index.ts @@ -13,13 +13,16 @@ export const EVENTS = { BLUR: "blur", CLICK: "click", FOCUS: "focus", + FOCUSIN: "focusin", + FOCUSOUT: "focusout", SCROLL: "scroll", RESIZE: "resize", DOMCONTENTLOADED: "DOMContentLoaded", LOAD: "load", MESSAGE: "message", VISIBILITYCHANGE: "visibilitychange", - FOCUSOUT: "focusout", + MOUSEENTER: "mouseenter", + MOUSELEAVE: "mouseleave", } as const; export const ClearClipboardDelay = {