From 857008413f768db6595203c6af890cebca9e2cf6 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Wed, 19 Jun 2024 03:21:40 -0500 Subject: [PATCH] [PM-5189] Working through content script port improvement --- .../abstractions/overlay.background.ts | 16 +++------- .../autofill/background/overlay.background.ts | 19 +++++------- .../autofill-inline-menu-iframe.service.ts | 5 +-- .../autofill-overlay-content.service.ts | 1 + .../autofill-overlay-content.service.ts | 31 ++++++------------- 5 files changed, 25 insertions(+), 47 deletions(-) diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts index 5b0ed0cd4c..ca91f4219c 100644 --- a/apps/browser/src/autofill/background/abstractions/overlay.background.ts +++ b/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; + 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; diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index 3989fd66b5..6bea83aa11 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/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); } diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts index 997836dd36..b8dc4d0449 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts +++ b/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() { diff --git a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts index 853778ed97..2c1c285d67 100644 --- a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts +++ b/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 { 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 336fea4c2c..a0dfc5ce85 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/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(