From 5da58401d7d647c32a76d57800c3338c4ba0d075 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Mon, 8 Apr 2024 07:43:35 -0500
Subject: [PATCH] [PM-5189] Refactoring and organizing implementation

---
 .../autofill/background/overlay.background.ts | 38 ++++++++---------
 .../autofill-overlay-content.service.ts       | 42 ++++++++++++-------
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index d9f9269f839..197ae1cc148 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -126,6 +126,18 @@ class OverlayBackground implements OverlayBackgroundInterface {
     private themeStateService: ThemeStateService,
   ) {}
 
+  /**
+   * Sets up the extension message listeners and gets the settings for the
+   * overlay's visibility and the user's authentication status.
+   */
+  async init() {
+    this.setupExtensionMessageListeners();
+    const env = await firstValueFrom(this.environmentService.environment$);
+    this.iconsServerUrl = env.getIconsUrl();
+    await this.getOverlayVisibility();
+    await this.getAuthStatus();
+  }
+
   /**
    * Removes cached page details for a tab
    * based on the passed tabId.
@@ -148,18 +160,6 @@ class OverlayBackground implements OverlayBackgroundInterface {
     }
   }
 
-  /**
-   * Sets up the extension message listeners and gets the settings for the
-   * overlay's visibility and the user's authentication status.
-   */
-  async init() {
-    this.setupExtensionMessageListeners();
-    const env = await firstValueFrom(this.environmentService.environment$);
-    this.iconsServerUrl = env.getIconsUrl();
-    await this.getOverlayVisibility();
-    await this.getAuthStatus();
-  }
-
   /**
    * Updates the overlay list's ciphers and sends the updated list to the overlay list iframe.
    * Queries all ciphers for the given url, and sorts them by last used. Will not update the
@@ -225,6 +225,10 @@ class OverlayBackground implements OverlayBackgroundInterface {
     message: OverlayBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
+    if (!this.portKeyForTab[sender.tab.id]) {
+      this.portKeyForTab[sender.tab.id] = generateRandomChars(12);
+    }
+
     const pageDetails = {
       frameId: sender.frameId,
       tab: sender.tab,
@@ -949,11 +953,6 @@ class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
-    const tabId = port.sender.tab.id;
-    if (!this.portKeyForTab[tabId]) {
-      this.portKeyForTab[tabId] = generateRandomChars(12);
-    }
-
     if (isOverlayListPort) {
       this.overlayListPort = port;
     } else {
@@ -969,7 +968,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
       translations: this.getTranslations(),
       ciphers: isOverlayListPort ? await this.getOverlayCipherData() : null,
       messageConnectorUrl: chrome.runtime.getURL("overlay/message-connector.html"),
-      portKey: this.portKeyForTab[tabId],
+      portKey: this.portKeyForTab[port.sender.tab.id],
     });
     void this.updateOverlayPosition(
       {
@@ -991,8 +990,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
     message: OverlayBackgroundExtensionMessage,
     port: chrome.runtime.Port,
   ) => {
-    const tabId = port.sender.tab.id;
-    if (this.portKeyForTab[tabId] !== message?.portKey) {
+    if (this.portKeyForTab[port.sender.tab.id] !== message?.portKey) {
       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 9d5481d1fdb..2e57246ecb6 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -363,10 +363,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     this.storeModifiedFormElement(formFieldElement);
 
-    if (
-      formFieldElement.value &&
-      ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
-    ) {
+    if (await this.hideOverlayListOnFilledField(formFieldElement)) {
       void this.sendExtensionMessage("closeAutofillOverlay", {
         overlayElement: AutofillOverlayElement.List,
         forceCloseOverlay: true,
@@ -466,15 +463,12 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
       });
     }
 
-    if (
-      !formElementHasValue ||
-      (!(await this.isInlineMenuCiphersPopulated()) && this.isUserAuthed())
-    ) {
-      void this.sendExtensionMessage("openAutofillOverlay");
+    if (await this.hideOverlayListOnFilledField(formFieldElement as FillableFormFieldElement)) {
+      this.updateOverlayButtonPosition();
       return;
     }
 
-    this.updateOverlayButtonPosition();
+    void this.sendExtensionMessage("openAutofillOverlay");
   }
 
   /**
@@ -758,8 +752,9 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     setTimeout(async () => {
       this.toggleOverlayHidden(false);
       if (
-        (this.mostRecentlyFocusedField as HTMLInputElement)?.value &&
-        ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
+        await this.hideOverlayListOnFilledField(
+          this.mostRecentlyFocusedField as FillableFormFieldElement,
+        )
       ) {
         void this.sendExtensionMessage("closeAutofillOverlay", {
           overlayElement: AutofillOverlayElement.List,
@@ -769,10 +764,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     }, 50);
     this.clearUserInteractionEventTimeout();
 
-    if (
-      this.focusedFieldData.focusedFieldRects?.top > 0 &&
-      this.focusedFieldData.focusedFieldRects?.top < globalThis.innerHeight + globalThis.scrollY
-    ) {
+    if (this.isRepositionedFocusedFieldOutOfBounds()) {
       return;
     }
 
@@ -797,6 +789,24 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     }
   }
 
+  private isRepositionedFocusedFieldOutOfBounds() {
+    const focusedFieldRectsTop = this.focusedFieldData?.focusedFieldRects?.top;
+    return (
+      focusedFieldRectsTop &&
+      focusedFieldRectsTop > 0 &&
+      focusedFieldRectsTop < globalThis.innerHeight + globalThis.scrollY
+    );
+  }
+
+  private async hideOverlayListOnFilledField(
+    formFieldElement?: FillableFormFieldElement,
+  ): Promise<boolean> {
+    return (
+      formFieldElement?.value &&
+      ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
+    );
+  }
+
   /**
    * Sets up global event listeners and the mutation
    * observer to facilitate required changes to the