[PM-5189] Working through content script port improvement

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

@@ -94,21 +94,15 @@ export type BackgroundOnMessageHandlerParams = BackgroundMessageParam & Backgrou
 
 export type OverlayBackgroundExtensionMessageHandlers = {
   [key: string]: CallableFunction;
+  closeAutofillInlineMenu: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   checkIsInlineMenuCiphersPopulated: ({ sender }: BackgroundSenderParam) => void;
   updateIsFieldCurrentlyFilling: ({ message }: BackgroundMessageParam) => void;
   checkIsFieldCurrentlyFilling: () => boolean;
   getAutofillInlineMenuVisibility: () => void;
-
-  toggleAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   checkIsAutofillInlineMenuButtonVisible: ({ sender }: BackgroundSenderParam) => void;
   checkIsAutofillInlineMenuListVisible: ({ sender }: BackgroundSenderParam) => void;
   getCurrentTabFrameId: ({ sender }: BackgroundSenderParam) => number;
-  updateSubFrameData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  triggerSubFrameFocusInRebuild: ({ sender }: BackgroundSenderParam) => void;
-  destroyAutofillInlineMenuListeners: ({
-    message,
-    sender,
-  }: BackgroundOnMessageHandlerParams) => void;
+
   collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   unlockCompleted: ({ message }: BackgroundMessageParam) => void;
   addedCipher: () => void;
@@ -137,18 +131,19 @@ export type OverlayContentScriptPortMessageHandlers = {
   updateFocusedFieldData: ({ message, port }: PortOnMessageHandlerParams) => void;
   updateIsFieldCurrentlyFocused: ({ message }: PortMessageParam) => void;
   openAutofillInlineMenu: () => void;
-  closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
   checkAutofillInlineMenuFocused: () => void;
   focusAutofillInlineMenuList: () => void;
   updateAutofillInlineMenuPosition: ({
     message,
     port,
   }: PortOnMessageHandlerParams) => Promise<void>;
+  updateSubFrameData: ({ message, port }: PortOnMessageHandlerParams) => void;
+  triggerSubFrameFocusInRebuild: ({ port }: PortConnectionParam) => void;
+  destroyAutofillInlineMenuListeners: ({ message, port }: PortOnMessageHandlerParams) => void;
 };
 
 export type InlineMenuButtonPortMessageHandlers = {
   [key: string]: CallableFunction;
-  closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
   triggerDelayedAutofillInlineMenuClosure: ({ port }: PortConnectionParam) => void;
   autofillInlineMenuButtonClicked: ({ port }: PortConnectionParam) => void;
   autofillInlineMenuBlurred: () => void;
@@ -158,7 +153,6 @@ export type InlineMenuButtonPortMessageHandlers = {
 
 export type InlineMenuListPortMessageHandlers = {
   [key: string]: CallableFunction;
-  closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
   checkAutofillInlineMenuButtonFocused: () => void;
   autofillInlineMenuBlurred: () => void;
   unlockVault: ({ port }: PortConnectionParam) => void;

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

@@ -76,22 +76,16 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private isFieldCurrentlyFilling: boolean = false;
   private iconsServerUrl: string;
   private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
+    closeAutofillInlineMenu: ({ message, sender }) => this.closeInlineMenu(sender, message),
     checkIsInlineMenuCiphersPopulated: ({ sender }) =>
       this.checkIsInlineMenuCiphersPopulated(sender),
     updateIsFieldCurrentlyFilling: ({ message }) => this.updateIsFieldCurrentlyFilling(message),
     checkIsFieldCurrentlyFilling: () => this.checkIsFieldCurrentlyFilling(),
     getAutofillInlineMenuVisibility: () => this.getInlineMenuVisibility(),
-
-    toggleAutofillInlineMenuHidden: ({ message, sender }) =>
-      this.toggleInlineMenuHidden(message, sender),
     checkIsAutofillInlineMenuButtonVisible: ({ sender }) =>
       this.checkIsInlineMenuButtonVisible(sender),
     checkIsAutofillInlineMenuListVisible: ({ sender }) => this.checkIsInlineMenuListVisible(sender),
     getCurrentTabFrameId: ({ sender }) => this.getSenderFrameId(sender),
-    updateSubFrameData: ({ message, sender }) => this.updateSubFrameData(message, sender),
-    triggerSubFrameFocusInRebuild: ({ sender }) => this.triggerSubFrameFocusInRebuild(sender),
-    destroyAutofillInlineMenuListeners: ({ message, sender }) =>
-      this.triggerDestroyInlineMenuListeners(sender.tab, message.subFrameData.frameId),
     collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
     unlockCompleted: ({ message }) => this.unlockCompleted(message),
     addedCipher: () => this.updateInlineMenuCiphers(),
@@ -106,14 +100,16 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     updateFocusedFieldData: ({ message, port }) => this.setFocusedFieldData(message, port),
     updateIsFieldCurrentlyFocused: ({ message }) => this.updateIsFieldCurrentlyFocused(message),
     openAutofillInlineMenu: () => this.openInlineMenu(false),
-    closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
     checkAutofillInlineMenuFocused: () => this.checkInlineMenuFocused(),
     focusAutofillInlineMenuList: () => this.focusInlineMenuList(),
     updateAutofillInlineMenuPosition: ({ message, port }) =>
       this.updateInlineMenuPosition(message, port.sender),
+    updateSubFrameData: ({ message, port }) => this.updateSubFrameData(message, port),
+    triggerSubFrameFocusInRebuild: ({ port }) => this.triggerSubFrameFocusInRebuild(port),
+    destroyAutofillInlineMenuListeners: ({ message, port }) =>
+      this.triggerDestroyInlineMenuListeners(port.sender.tab, message.subFrameData.frameId),
   };
   private readonly inlineMenuButtonPortMessageHandlers: InlineMenuButtonPortMessageHandlers = {
-    closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
     triggerDelayedAutofillInlineMenuClosure: ({ port }) => this.triggerDelayedInlineMenuClosure(),
     autofillInlineMenuButtonClicked: ({ port }) => this.handleInlineMenuButtonClicked(port),
     autofillInlineMenuBlurred: () => this.checkInlineMenuListFocused(),
@@ -122,7 +118,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     updateAutofillInlineMenuColorScheme: () => this.updateInlineMenuButtonColorScheme(),
   };
   private readonly inlineMenuListPortMessageHandlers: InlineMenuListPortMessageHandlers = {
-    closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
     checkAutofillInlineMenuButtonFocused: () => this.checkInlineMenuButtonFocused(),
     autofillInlineMenuBlurred: () => this.checkInlineMenuButtonFocused(),
     unlockVault: ({ port }) => this.unlockVault(port),
@@ -330,7 +325,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    */
   private updateSubFrameData(
     message: OverlayBackgroundExtensionMessage,
-    sender: chrome.runtime.MessageSender,
+    { sender }: chrome.runtime.Port,
   ) {
     const subFrameOffsetsForTab = this.subFrameOffsetsForTab[sender.tab.id];
     if (subFrameOffsetsForTab) {
@@ -1366,7 +1361,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     }
   }
 
-  private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
+  private async triggerSubFrameFocusInRebuild({ sender }: chrome.runtime.Port) {
     this.rebuildSubFrameOffsetsSubject.next(sender);
     this.calculateInlineMenuPositionSubject.next(sender);
   }

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

@@ -1,7 +1,7 @@
 import { EVENTS } from "@bitwarden/common/autofill/constants";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 
-import { setElementStyles } from "../../../utils";
+import { sendExtensionMessage, setElementStyles } from "../../../utils";
 import {
   BackgroundPortMessageHandlers,
   AutofillInlineMenuIframeService as AutofillInlineMenuIframeServiceInterface,
@@ -9,6 +9,7 @@ import {
 } from "../abstractions/autofill-inline-menu-iframe.service";
 
 export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframeServiceInterface {
+  private readonly sendExtensionMessage = sendExtensionMessage;
   private readonly setElementStyles = setElementStyles;
   private port: chrome.runtime.Port | null = null;
   private portKey: string;
@@ -304,7 +305,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
    * mutation observer is triggered excessively.
    */
   private forceCloseInlineMenu() {
-    void this.port.postMessage({ command: "closeAutofillInlineMenu", forceClose: true });
+    void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
   }
 
   private handleFadeInInlineMenuIframe() {

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

@@ -45,6 +45,7 @@ export type AutofillOverlayContentExtensionMessage = {
   focusedFieldData?: FocusedFieldData;
   isFieldCurrentlyFocused?: boolean;
   forceCloseInlineMenu?: boolean;
+  subFrameData?: SubFrameOffsetData;
 } & OverlayAddNewItemMessage;
 
 export interface AutofillOverlayContentService {

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

@@ -204,7 +204,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     this.mostRecentlyFocusedField?.blur();
 
     if (isClosingInlineMenu) {
-      this.sendPortMessage("closeAutofillInlineMenu");
+      void this.sendExtensionMessage("closeAutofillInlineMenu");
     }
   }
 
@@ -249,7 +249,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     if (direction === RedirectFocusDirection.Current) {
       this.focusMostRecentlyFocusedField();
       this.closeInlineMenuOnRedirectTimeout = globalThis.setTimeout(
-        () => this.sendPortMessage("closeAutofillInlineMenu"),
+        () => this.sendExtensionMessage("closeAutofillInlineMenu"),
         100,
       );
       return;
@@ -361,7 +361,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
   private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => {
     const eventCode = event.code;
     if (eventCode === "Escape") {
-      this.sendPortMessage("closeAutofillInlineMenu", {
+      void this.sendExtensionMessage("closeAutofillInlineMenu", {
         forceCloseInlineMenu: true,
       });
       return;
@@ -427,7 +427,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     this.storeModifiedFormElement(formFieldElement);
 
     if (await this.hideInlineMenuListOnFilledField(formFieldElement)) {
-      this.sendPortMessage("closeAutofillInlineMenu", {
+      void this.sendExtensionMessage("closeAutofillInlineMenu", {
         overlayElement: AutofillOverlayElement.List,
         forceCloseInlineMenu: true,
       });
@@ -519,7 +519,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       (initiallyFocusedField !== this.mostRecentlyFocusedField &&
         (await this.hideInlineMenuListOnFilledField(formFieldElement as FillableFormFieldElement)))
     ) {
-      this.sendPortMessage("closeAutofillInlineMenu", {
+      void this.sendExtensionMessage("closeAutofillInlineMenu", {
         overlayElement: AutofillOverlayElement.List,
         forceCloseInlineMenu: true,
       });
@@ -576,19 +576,6 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     });
   }
 
-  /**
-   * Sends a message that facilitates hiding the inline menu elements.
-   *
-   * @param isHidden - Indicates if the inline menu elements should be hidden.
-   * @param setTransparentInlineMenu - Indicates if the inline menu is closing.
-   */
-  private toggleInlineMenuHidden(isHidden: boolean, setTransparentInlineMenu: boolean = false) {
-    void this.sendExtensionMessage("toggleAutofillInlineMenuHidden", {
-      isInlineMenuHidden: isHidden,
-      setTransparentInlineMenu,
-    });
-  }
-
   /**
    * Updates the data used to position the inline menu elements in relation
    * to the most recently focused form field.
@@ -938,7 +925,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
 
     subFrameData.subFrameDepth++;
     if (subFrameData.subFrameDepth >= MAX_SUB_FRAME_DEPTH) {
-      void this.sendExtensionMessage("destroyAutofillInlineMenuListeners", { subFrameData });
+      this.sendPortMessage("destroyAutofillInlineMenuListeners", { subFrameData });
       return;
     }
 
@@ -970,7 +957,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       return;
     }
 
-    void this.sendExtensionMessage("updateSubFrameData", { subFrameData });
+    this.sendPortMessage("updateSubFrameData", { subFrameData });
   };
 
   /**
@@ -1007,7 +994,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     }
 
     this.unsetMostRecentlyFocusedField();
-    this.sendPortMessage("closeAutofillInlineMenu", {
+    void this.sendExtensionMessage("closeAutofillInlineMenu", {
       forceCloseInlineMenu: true,
     });
   };
@@ -1075,7 +1062,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
   };
 
   private handleSubFrameFocusInEvent = () => {
-    void this.sendExtensionMessage("triggerSubFrameFocusInRebuild");
+    this.sendPortMessage("triggerSubFrameFocusInRebuild");
 
     globalThis.removeEventListener(EVENTS.FOCUS, this.handleSubFrameFocusInEvent);
     globalThis.document.body.removeEventListener(