From cd1f9fb7c9796192735cd1d423d7f35d8edf1b1a Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Fri, 14 Jun 2024 10:07:52 -0500 Subject: [PATCH] [PM-5189] Working through subFrameRecalculation approach --- .../background/notification.background.ts | 2 +- .../autofill/background/overlay.background.ts | 6 +-- .../src/autofill/content/autofill-init.ts | 2 +- .../fido2/background/fido2.background.ts | 2 +- .../autofill-overlay-content.service.ts | 38 ++++++++++++++----- libs/common/src/autofill/constants/index.ts | 5 ++- 6 files changed, 39 insertions(+), 16 deletions(-) diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts index 9b65e4db0b2..40224642fe5 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 218bc1ea0b5..cc2f03e286d 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 3e8dd7d23f5..cdb0d995334 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 a58d32da16f..7066d7938c7 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 047f87f0c70..195d9c33213 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 6d5af41a17e..93815be55df 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 = {