From 208d40809ac2de3b4d5cccdcf1131ca8fef416ef Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Fri, 22 Mar 2024 11:58:05 -0500
Subject: [PATCH] [PM-5189] Addressing visual flash bug with repositioning of
 inline menu

---
 .../autofill/background/overlay.background.ts | 23 +++++++++++++++----
 .../src/autofill/content/autofill-init.ts     |  1 -
 .../autofill-overlay-content.service.ts       | 14 +++++++----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index b90a584146..f8432e33a4 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -268,7 +268,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
   }
 
   private async rebuildSubFrameOffsets(sender: chrome.runtime.MessageSender) {
-    if (sender.frameId === this.focusedFieldData.frameId) {
+    if (sender.frameId === this.focusedFieldData?.frameId) {
       return;
     }
 
@@ -277,10 +277,23 @@ class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
-    subFrameOffsetsForTab.forEach((_, frameId) => {
+    const frameTabs = Array.from(subFrameOffsetsForTab.keys());
+    for (const frameId of frameTabs) {
+      if (frameId === sender.frameId) {
+        continue;
+      }
+
       subFrameOffsetsForTab.delete(frameId);
-      void this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
-    });
+      await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
+    }
+
+    // TODO: Consider a better way to facilitate this delayed update
+    setTimeout(() => {
+      if (this.isFieldCurrentlyFocused) {
+        void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.List }, sender);
+        void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.Button }, sender);
+      }
+    }, 650);
   }
 
   private async buildSubFrameOffsets(tab: chrome.tabs.Tab, frameId: number, url: string) {
@@ -298,7 +311,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
     const subFrameData = { url, top: 0, left: 0 };
     let frameDetails = await BrowserApi.getFrameDetails({ tabId, frameId });
 
-    while (frameDetails.parentFrameId !== -1) {
+    while (frameDetails && frameDetails.parentFrameId !== -1) {
       const subFrameOffset: SubFrameOffsetData = await BrowserApi.tabSendMessage(
         tab,
         {
diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index 07e7045c0b..e5bd3003d6 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -25,7 +25,6 @@ class AutofillInit implements AutofillInitInterface {
     collectPageDetailsImmediately: ({ message }) => this.collectPageDetails(message, true),
     fillForm: ({ message }) => this.fillForm(message),
     openAutofillOverlay: ({ message }) => this.openAutofillOverlay(message),
-    // closeAutofillOverlay: ({ message }) => this.removeAutofillOverlay(message),
     addNewVaultItemFromOverlay: () => this.addNewVaultItemFromOverlay(),
     redirectOverlayFocusOut: ({ message }) => this.redirectOverlayFocusOut(message),
     updateIsOverlayCiphersPopulated: ({ message }) => this.updateIsOverlayCiphersPopulated(message),
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 c9528f800a..ccc99f029a 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -707,11 +707,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
    * repositioning of the overlay.
    */
   private handleOverlayRepositionEvent = async () => {
-    this.clearRecalculateSubFrameOffsetsTimeout();
-    this.recalculateSubFrameOffsetsTimeout = setTimeout(
-      () => void this.sendExtensionMessage("rebuildSubFrameOffsets"),
-      750,
-    );
+    this.rebuildSubFrameOffsets();
 
     if (
       (await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) !== true &&
@@ -725,6 +721,14 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     this.userInteractionEventTimeout = setTimeout(this.triggerOverlayRepositionUpdates, 750);
   };
 
+  private rebuildSubFrameOffsets() {
+    this.clearRecalculateSubFrameOffsetsTimeout();
+    this.recalculateSubFrameOffsetsTimeout = setTimeout(
+      () => void this.sendExtensionMessage("rebuildSubFrameOffsets"),
+      150,
+    );
+  }
+
   /**
    * Triggers the overlay reposition updates. This method ensures that the overlay elements
    * are correctly positioned when the viewport scrolls or repositions.