[PM-5189] Working through subFrameRecalculation approach

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;
     }
 

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) {
+        // if (frameId === sender.frameId) {
-          continue;
+        //   continue;
-        }
+        // }
 
         subFrameOffsetsForTab.delete(frameId);
         await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);

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;
     }
 

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;
     }
 

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(
+    if (globalThis.window.top !== globalThis.window && this.formFieldElements.size > 0) {
-      throttle(this.updateSubFrameForReflow.bind(this), 10),
+      this.setupRebuildSubFrameOffsetsEventListeners();
-    );
+    }
-    this.reflowMutationObserver.observe(globalThis.document.documentElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-    });
   }
 
   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.

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 = {