[PM-5189] Refactoring and organizing implementation

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[port.sender.tab.id] !== message?.portKey) {
-    if (this.portKeyForTab[tabId] !== message?.portKey) {
       return;
     }
 

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -363,10 +363,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     this.storeModifiedFormElement(formFieldElement);
 
-    if (
+    if (await this.hideOverlayListOnFilledField(formFieldElement)) {
-      formFieldElement.value &&
-      ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
-    ) {
       void this.sendExtensionMessage("closeAutofillOverlay", {
         overlayElement: AutofillOverlayElement.List,
         forceCloseOverlay: true,
@@ -466,15 +463,12 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
       });
     }
 
-    if (
+    if (await this.hideOverlayListOnFilledField(formFieldElement as FillableFormFieldElement)) {
-      !formElementHasValue ||
+      this.updateOverlayButtonPosition();
-      (!(await this.isInlineMenuCiphersPopulated()) && this.isUserAuthed())
-    ) {
-      void this.sendExtensionMessage("openAutofillOverlay");
       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.hideOverlayListOnFilledField(
-        ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
+          this.mostRecentlyFocusedField as FillableFormFieldElement,
+        )
       ) {
         void this.sendExtensionMessage("closeAutofillOverlay", {
           overlayElement: AutofillOverlayElement.List,
@@ -769,10 +764,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     }, 50);
     this.clearUserInteractionEventTimeout();
 
-    if (
+    if (this.isRepositionedFocusedFieldOutOfBounds()) {
-      this.focusedFieldData.focusedFieldRects?.top > 0 &&
-      this.focusedFieldData.focusedFieldRects?.top < globalThis.innerHeight + globalThis.scrollY
-    ) {
       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