From 3e13cbfb5c9b4accfd4d65a102c9df0d80c8bbf7 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Sun, 7 Apr 2024 17:54:53 -0500
Subject: [PATCH] [PM-5189] Fixing smaller issues with how the inline menu
 renders

---
 .../autofill/background/overlay.background.ts |  8 ++++++--
 .../src/autofill/content/autofill-init.ts     |  4 +++-
 .../autofill-overlay-content.service.ts       | 19 +++++++++++++------
 .../collect-autofill-content.service.ts       | 16 +++++++++++-----
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index a0eef362067..46803af7d45 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -52,6 +52,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
   private overlayLoginCiphers: Map<string, CipherView> = new Map();
   private pageDetailsForTab: PageDetailsForTab = {};
   private subFrameOffsetsForTab: SubFrameOffsetsForTab = {};
+  private rebuildSubFrameOffsetsTimeout: number | NodeJS.Timeout;
   private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
   private overlayButtonPort: chrome.runtime.Port;
   private overlayListPort: chrome.runtime.Port;
@@ -277,6 +278,10 @@ class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
+    if (this.rebuildSubFrameOffsetsTimeout) {
+      clearTimeout(this.rebuildSubFrameOffsetsTimeout as number);
+    }
+
     const frameTabs = Array.from(subFrameOffsetsForTab.keys());
     for (const frameId of frameTabs) {
       if (frameId === sender.frameId) {
@@ -287,8 +292,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
       await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
     }
 
-    // TODO: Consider a better way to facilitate this delayed update
-    setTimeout(() => {
+    this.rebuildSubFrameOffsetsTimeout = setTimeout(() => {
       if (this.isFieldCurrentlyFocused) {
         void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.List }, sender);
         void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.Button }, sender);
diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index a7f5afe5eaa..ca175ff1672 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -1,3 +1,5 @@
+import { EVENTS } from "@bitwarden/common/autofill/constants";
+
 import AutofillPageDetails from "../models/autofill-page-details";
 import { InlineMenuElements } from "../overlay/abstractions/inline-menu-elements";
 import { AutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
@@ -92,7 +94,7 @@ class AutofillInit implements AutofillInitInterface {
       sendCollectDetailsMessage();
     }
 
-    window.addEventListener("load", sendCollectDetailsMessage);
+    globalThis.addEventListener(EVENTS.LOAD, sendCollectDetailsMessage);
   }
 
   /**
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 cd7f3af6192..27c3033cbd2 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -83,6 +83,10 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     this.formFieldElements.add(formFieldElement);
 
+    if (!this.mostRecentlyFocusedField) {
+      await this.updateMostRecentlyFocusedField(formFieldElement);
+    }
+
     if (!this.autofillOverlayVisibility) {
       await this.getAutofillOverlayVisibility();
     }
@@ -91,11 +95,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     if (this.getRootNodeActiveElement(formFieldElement) === formFieldElement) {
       await this.triggerFormFieldFocusedAction(formFieldElement);
-      return;
-    }
-
-    if (!this.mostRecentlyFocusedField) {
-      await this.updateMostRecentlyFocusedField(formFieldElement);
     }
   }
 
@@ -765,7 +764,15 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
     this.updateOverlayElementsPosition();
-    setTimeout(() => this.toggleOverlayHidden(false), 50);
+    setTimeout(() => {
+      this.toggleOverlayHidden(false);
+      if ((this.mostRecentlyFocusedField as HTMLInputElement).value) {
+        void this.sendExtensionMessage("closeAutofillOverlay", {
+          overlayElement: AutofillOverlayElement.List,
+          forceCloseOverlay: true,
+        });
+      }
+    }, 50);
     this.clearUserInteractionEventTimeout();
 
     if (
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 7c49a3d9881..7e418232aea 100644
--- a/apps/browser/src/autofill/services/collect-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/collect-autofill-content.service.ts
@@ -201,11 +201,17 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
    * @private
    */
   private updateCachedAutofillFieldVisibility() {
-    this.autofillFieldElements.forEach(
-      async (autofillField, element) =>
-        (autofillField.viewable =
-          await this.domElementVisibilityService.isFormFieldViewable(element)),
-    );
+    this.autofillFieldElements.forEach(async (autofillField, element) => {
+      const currentViewableState = autofillField.viewable;
+      autofillField.viewable = await this.domElementVisibilityService.isFormFieldViewable(element);
+
+      if (!currentViewableState && autofillField.viewable) {
+        await this.autofillOverlayContentService?.setupAutofillOverlayListenerOnField(
+          element,
+          autofillField,
+        );
+      }
+    });
   }
 
   /**