[PM-5189] Implementing fixes for how we handle adding to the vault through the inline menu

apps/browser/src/autofill/background/overlay.background.ts

@@ -377,7 +377,11 @@ class OverlayBackground implements OverlayBackgroundInterface {
     }: { forceCloseOverlay?: boolean; overlayElement?: string } = {},
   ) {
     if (forceCloseOverlay) {
-      void BrowserApi.tabSendMessage(sender.tab, { command: "closeInlineMenu" }, { frameId: 0 });
+      void BrowserApi.tabSendMessage(
+        sender.tab,
+        { command: "closeInlineMenu", overlayElement },
+        { frameId: 0 },
+      );
       return;
     }
 
@@ -745,9 +749,17 @@ class OverlayBackground implements OverlayBackgroundInterface {
    * @param sender - The sender of the port message
    */
   private getNewVaultItemDetails({ sender }: chrome.runtime.Port) {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    if (sender.tab.id !== this.focusedFieldData.tabId) {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      return;
-    BrowserApi.tabSendMessage(sender.tab, { command: "addNewVaultItemFromOverlay" });
+    }
+
+    void BrowserApi.tabSendMessage(
+      sender.tab,
+      { command: "addNewVaultItemFromOverlay" },
+      {
+        frameId: this.focusedFieldData.frameId || 0,
+      },
+    );
   }
 
   /**

apps/browser/src/autofill/content/autofill-init.ts

@@ -19,6 +19,7 @@ class AutofillInit implements AutofillInitInterface {
   private readonly domElementVisibilityService: DomElementVisibilityService;
   private readonly collectAutofillContentService: CollectAutofillContentService;
   private readonly insertAutofillContentService: InsertAutofillContentService;
+  private sendCollectDetailsMessageTimeout: number | NodeJS.Timeout | undefined;
   private readonly extensionMessageHandlers: AutofillExtensionMessageHandlers = {
     collectPageDetails: ({ message }) => this.collectPageDetails(message),
     collectPageDetailsImmediately: ({ message }) => this.collectPageDetails(message, true),
@@ -89,11 +90,13 @@ class AutofillInit implements AutofillInitInterface {
    * to act on the page.
    */
   private collectPageDetailsOnLoad() {
-    const sendCollectDetailsMessage = () =>
+    const sendCollectDetailsMessage = () => {
-      setTimeout(
+      this.clearSendCollectDetailsMessageTimeout();
+      this.sendCollectDetailsMessageTimeout = setTimeout(
         () => sendExtensionMessage("bgCollectPageDetails", { sender: "autofillInit" }),
         250,
       );
+    };
 
     if (document.readyState === "complete") {
       sendCollectDetailsMessage();
@@ -300,6 +303,12 @@ class AutofillInit implements AutofillInitInterface {
     return true;
   };
 
+  private clearSendCollectDetailsMessageTimeout() {
+    if (this.sendCollectDetailsMessageTimeout) {
+      clearTimeout(this.sendCollectDetailsMessageTimeout as number);
+    }
+  }
+
   /**
    * Handles destroying the autofill init content script. Removes all
    * listeners, timeouts, and object instances to prevent memory leaks.
@@ -308,6 +317,7 @@ class AutofillInit implements AutofillInitInterface {
     chrome.runtime.onMessage.removeListener(this.handleExtensionMessage);
     this.collectAutofillContentService.destroy();
     this.autofillOverlayContentService?.destroy();
+    this.clearSendCollectDetailsMessageTimeout();
   }
 }
 

apps/browser/src/autofill/overlay/content/inline-menu-elements.ts

@@ -35,7 +35,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
     zIndex: "2147483647",
   };
   private readonly _extensionMessageHandlers: InlineMenuExtensionMessageHandlers = {
-    closeInlineMenu: ({ message }) => this.removeInlineMenu(),
+    closeInlineMenu: ({ message }) => this.removeInlineMenu(message),
     updateInlineMenuElementsPosition: ({ message }) =>
       this.updateInlineMenuElementsPosition(message),
     toggleInlineMenuHidden: ({ message }) =>
@@ -67,7 +67,17 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
    * unobserve the body element to ensure the mutation observer no
    * longer triggers.
    */
-  private removeInlineMenu = () => {
+  private removeInlineMenu = (message: any) => {
+    if (message.overlayElement === AutofillOverlayElement.Button) {
+      this.removeInlineMenuButton();
+      return;
+    }
+
+    if (message.overlayElement === AutofillOverlayElement.List) {
+      this.removeInlineMenuList();
+      return;
+    }
+
     this.removeBodyElementObserver();
     this.removeInlineMenuButton();
     this.removeInlineMenuList();
@@ -403,7 +413,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
       clearTimeout(this.mutationObserverIterationsResetTimeout);
       this.mutationObserverIterations = 0;
       void this.sendExtensionMessage("blurMostRecentOverlayField");
-      this.removeInlineMenu();
+      this.removeInlineMenu({ forceClose: true });
 
       return true;
     }

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

@@ -364,7 +364,9 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
     const eventCode = event.code;
     if (eventCode === "Escape") {
       // this.removeAutofillOverlay();
-      void this.sendExtensionMessage("closeAutofillOverlay");
+      void this.sendExtensionMessage("closeAutofillOverlay", {
+        forceCloseOverlay: true,
+      });
       return;
     }
 
@@ -381,9 +383,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
       event.preventDefault();
       event.stopPropagation();
 
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      void this.focusOverlayList();
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.focusOverlayList();
     }
   };
 
@@ -439,6 +439,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
       // this.removeAutofillOverlayList();
       void this.sendExtensionMessage("closeAutofillOverlay", {
         overlayElement: AutofillOverlayElement.List,
+        forceCloseOverlay: true,
       });
       return;
     }
@@ -538,6 +539,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
       // this.removeAutofillOverlayList();
       void this.sendExtensionMessage("closeAutofillOverlay", {
         overlayElement: AutofillOverlayElement.List,
+        forceCloseOverlay: true,
       });
     }