diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts index ca91f4219c2..5b0ed0cd4c0 100644 --- a/apps/browser/src/autofill/background/abstractions/overlay.background.ts +++ b/apps/browser/src/autofill/background/abstractions/overlay.background.ts @@ -94,15 +94,21 @@ 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; @@ -131,19 +137,18 @@ 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; @@ -153,6 +158,7 @@ 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 fccc8ae4b6d..43bb8956fa8 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -77,16 +77,22 @@ 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(), @@ -101,16 +107,14 @@ 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(), @@ -119,6 +123,7 @@ 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), @@ -327,7 +332,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { */ private updateSubFrameData( message: OverlayBackgroundExtensionMessage, - { sender }: chrome.runtime.Port, + sender: chrome.runtime.MessageSender, ) { const subFrameOffsetsForTab = this.subFrameOffsetsForTab[sender.tab.id]; if (subFrameOffsetsForTab) { 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 b8dc4d04494..997836dd36b 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 { sendExtensionMessage, setElementStyles } from "../../../utils"; +import { setElementStyles } from "../../../utils"; import { BackgroundPortMessageHandlers, AutofillInlineMenuIframeService as AutofillInlineMenuIframeServiceInterface, @@ -9,7 +9,6 @@ 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; @@ -305,7 +304,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe * mutation observer is triggered excessively. */ private forceCloseInlineMenu() { - void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true }); + void this.port.postMessage({ command: "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 2c1c285d67c..853778ed97f 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,7 +45,6 @@ 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 c5f58cbf769..56f6839dc4d 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) { - void this.sendExtensionMessage("closeAutofillInlineMenu"); + this.sendPortMessage("closeAutofillInlineMenu"); } } @@ -249,7 +249,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ if (direction === RedirectFocusDirection.Current) { this.focusMostRecentlyFocusedField(); this.closeInlineMenuOnRedirectTimeout = globalThis.setTimeout( - () => this.sendExtensionMessage("closeAutofillInlineMenu"), + () => this.sendPortMessage("closeAutofillInlineMenu"), 100, ); return; @@ -361,7 +361,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => { const eventCode = event.code; if (eventCode === "Escape") { - void this.sendExtensionMessage("closeAutofillInlineMenu", { + this.sendPortMessage("closeAutofillInlineMenu", { forceCloseInlineMenu: true, }); return; @@ -427,7 +427,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ this.storeModifiedFormElement(formFieldElement); if (await this.hideInlineMenuListOnFilledField(formFieldElement)) { - void this.sendExtensionMessage("closeAutofillInlineMenu", { + this.sendPortMessage("closeAutofillInlineMenu", { overlayElement: AutofillOverlayElement.List, forceCloseInlineMenu: true, }); @@ -519,7 +519,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ (initiallyFocusedField !== this.mostRecentlyFocusedField && (await this.hideInlineMenuListOnFilledField(formFieldElement as FillableFormFieldElement))) ) { - void this.sendExtensionMessage("closeAutofillInlineMenu", { + this.sendPortMessage("closeAutofillInlineMenu", { overlayElement: AutofillOverlayElement.List, forceCloseInlineMenu: true, }); @@ -576,6 +576,19 @@ 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. @@ -925,7 +938,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ subFrameData.subFrameDepth++; if (subFrameData.subFrameDepth >= MAX_SUB_FRAME_DEPTH) { - this.sendPortMessage("destroyAutofillInlineMenuListeners", { subFrameData }); + void this.sendExtensionMessage("destroyAutofillInlineMenuListeners", { subFrameData }); return; } @@ -957,7 +970,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ return; } - this.sendPortMessage("updateSubFrameData", { subFrameData }); + void this.sendExtensionMessage("updateSubFrameData", { subFrameData }); }; /** @@ -994,7 +1007,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ } this.unsetMostRecentlyFocusedField(); - void this.sendExtensionMessage("closeAutofillInlineMenu", { + this.sendPortMessage("closeAutofillInlineMenu", { forceCloseInlineMenu: true, }); }; @@ -1062,7 +1075,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ }; private handleSubFrameFocusInEvent = () => { - this.sendPortMessage("triggerSubFrameFocusInRebuild"); + void this.sendExtensionMessage("triggerSubFrameFocusInRebuild"); globalThis.removeEventListener(EVENTS.FOCUS, this.handleSubFrameFocusInEvent); globalThis.document.body.removeEventListener(