From e4750b2757c8303dbcff0b4099987ffcb8de72fe Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Fri, 3 May 2024 10:51:56 -0500 Subject: [PATCH] [PM-5189] Refactoring implementation --- .../autofill/background/overlay.background.ts | 2 +- .../abstractions/autofill-overlay-button.ts | 6 +++++- .../autofill-overlay-iframe.service.ts | 4 ++-- .../abstractions/autofill-overlay-list.ts | 2 +- .../autofill-overlay-menu-container.ts | 4 ++-- .../autofill-overlay-iframe.service.spec.ts | 18 +++++++++--------- .../autofill-overlay-iframe.service.ts | 12 ++++++------ .../button/autofill-overlay-button.spec.ts | 2 +- .../pages/button/autofill-overlay-button.ts | 4 ++-- .../pages/list/autofill-overlay-list.spec.ts | 2 +- .../pages/list/autofill-overlay-list.ts | 4 ++-- .../menu/autofill-overlay-menu-container.ts | 4 ++-- .../src/autofill/spec/autofill-mocks.ts | 4 ++-- 13 files changed, 36 insertions(+), 32 deletions(-) diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index 895c828e6d1..edb0fff174c 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -975,7 +975,7 @@ class OverlayBackground implements OverlayBackgroundInterface { port.onDisconnect.addListener(this.handlePortOnDisconnect); port.postMessage({ - command: `initAutofillOverlay${isInlineMenuListPort ? "List" : "Button"}`, + command: `initAutofillInlineMenu${isInlineMenuListPort ? "List" : "Button"}`, iframeUrl: chrome.runtime.getURL(`overlay/${isInlineMenuListPort ? "list" : "button"}.html`), pageTitle: chrome.i18n.getMessage( isInlineMenuListPort ? "bitwardenVault" : "bitwardenOverlayButton", diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts index b80f32d6102..56564b15bfe 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts @@ -12,7 +12,11 @@ type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & { type OverlayButtonWindowMessageHandlers = { [key: string]: CallableFunction; - initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void; + initAutofillInlineMenuButton: ({ + message, + }: { + message: InitAutofillOverlayButtonMessage; + }) => void; checkAutofillInlineMenuButtonFocused: () => void; updateAutofillOverlayButtonAuthStatus: ({ message, diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts index 080a7462dba..91bbae35518 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts @@ -16,8 +16,8 @@ type AutofillOverlayIframeExtensionMessageParam = { type BackgroundPortMessageHandlers = { [key: string]: CallableFunction; - initAutofillOverlayButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; - initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; + initAutofillInlineMenuButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; + initAutofillInlineMenuList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateInlineMenuHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateAutofillInlineMenuColorScheme: () => void; diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts index 2ef79f5f9e8..137deb19f5f 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts @@ -19,7 +19,7 @@ type InitAutofillOverlayListMessage = OverlayListMessage & { type OverlayListWindowMessageHandlers = { [key: string]: CallableFunction; - initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void; + initAutofillInlineMenuList: ({ message }: { message: InitAutofillOverlayListMessage }) => void; checkAutofillInlineMenuListFocused: () => void; updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void; focusInlineMenuList: () => void; diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-menu-container.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-menu-container.ts index 121953c4ebd..8872f73a9d5 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-menu-container.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-menu-container.ts @@ -20,6 +20,6 @@ export type InitOverlayElementMessage = AutofillOverlayMenuContainerMessage & { export type AutofillOverlayMenuContainerWindowMessageHandlers = { [key: string]: CallableFunction; - initAutofillOverlayList: (message: InitOverlayElementMessage) => void; - initAutofillOverlayButton: (message: InitOverlayElementMessage) => void; + initAutofillInlineMenuList: (message: InitOverlayElementMessage) => void; + initAutofillInlineMenuButton: (message: InitOverlayElementMessage) => void; }; diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts index 9c1904967b9..9381833dcd2 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts @@ -206,7 +206,7 @@ describe("AutofillOverlayIframeService", () => { it("sets the port key and posts the message to the overlay page iframe", () => { const portKey = "portKey"; const message = { - command: "initAutofillOverlayButton", + command: "initAutofillInlineMenuButton", portKey, }; @@ -231,7 +231,7 @@ describe("AutofillOverlayIframeService", () => { it("passes the message on to the iframe element", () => { const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.Light, }; @@ -246,7 +246,7 @@ describe("AutofillOverlayIframeService", () => { it("sets a light theme based on the user's system preferences", () => { window.matchMedia = jest.fn(() => mock({ matches: false })); const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.System, }; @@ -257,7 +257,7 @@ describe("AutofillOverlayIframeService", () => { autofillOverlayIframeService["iframe"].contentWindow.postMessage, ).toHaveBeenCalledWith( { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.Light, }, "*", @@ -267,7 +267,7 @@ describe("AutofillOverlayIframeService", () => { it("sets a dark theme based on the user's system preferences", () => { window.matchMedia = jest.fn(() => mock({ matches: true })); const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.System, }; @@ -278,7 +278,7 @@ describe("AutofillOverlayIframeService", () => { autofillOverlayIframeService["iframe"].contentWindow.postMessage, ).toHaveBeenCalledWith( { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.Dark, }, "*", @@ -287,7 +287,7 @@ describe("AutofillOverlayIframeService", () => { it("updates the border to match the `dark` theme", () => { const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.Dark, }; @@ -303,7 +303,7 @@ describe("AutofillOverlayIframeService", () => { it("updates the border to match the `nord` theme", () => { const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.Nord, }; @@ -319,7 +319,7 @@ describe("AutofillOverlayIframeService", () => { it("updates the border to match the `solarizedDark` theme", () => { const message = { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", theme: ThemeType.SolarizedDark, }; diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts index 666ff043f48..3965969ae03 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts @@ -42,8 +42,8 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf private mutationObserverIterations = 0; private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout; private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = { - initAutofillOverlayButton: ({ message }) => this.initAutofillOverlay(message), - initAutofillOverlayList: ({ message }) => this.initAutofillOverlay(message), + initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message), + initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenu(message), updateIframePosition: ({ message }) => this.updateIframePosition(message.styles), updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles), updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(), @@ -189,10 +189,10 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf * @param message * @private */ - private initAutofillOverlay(message: AutofillOverlayIframeExtensionMessage) { + private initAutofillInlineMenu(message: AutofillOverlayIframeExtensionMessage) { this.portKey = message.portKey; - if (message.command === "initAutofillOverlayList") { - this.initAutofillOverlayList(message); + if (message.command === "initAutofillInlineMenuList") { + this.initAutofillInlineMenuList(message); return; } @@ -205,7 +205,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf * * @param message - The message sent from the iframe */ - private initAutofillOverlayList(message: AutofillOverlayIframeExtensionMessage) { + private initAutofillInlineMenuList(message: AutofillOverlayIframeExtensionMessage) { const { theme } = message; let borderColor: string; let verifiedTheme = theme; diff --git a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts index 67fb29be88a..becda8a336e 100644 --- a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts +++ b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts @@ -23,7 +23,7 @@ describe("AutofillOverlayButton", () => { jest.clearAllMocks(); }); - describe("initAutofillOverlayButton", () => { + describe("initAutofillInlineMenuButton", () => { it("creates the button element with the locked icon when the user's auth status is not Unlocked", async () => { postWindowMessage( createInitAutofillOverlayButtonMessageMock({ diff --git a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts index f2bc53f32aa..68cedb8a6de 100644 --- a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts +++ b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts @@ -18,7 +18,7 @@ class AutofillOverlayButton extends AutofillOverlayPageElement { private readonly logoIconElement: HTMLElement; private readonly logoLockedIconElement: HTMLElement; private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = { - initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message), + initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenuButton(message), checkAutofillInlineMenuButtonFocused: () => this.checkButtonFocused(), updateAutofillOverlayButtonAuthStatus: ({ message }) => this.updateAuthStatus(message.authStatus), @@ -48,7 +48,7 @@ class AutofillOverlayButton extends AutofillOverlayPageElement { * @param translations - The translations to apply to the page * @param portKey - Background generated key that allows the port to communicate with the background */ - private async initAutofillOverlayButton({ + private async initAutofillInlineMenuButton({ authStatus, styleSheetUrl, translations, diff --git a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts index a75869526e6..331e4e85a25 100644 --- a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts +++ b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts @@ -29,7 +29,7 @@ describe("AutofillOverlayList", () => { jest.clearAllMocks(); }); - describe("initAutofillOverlayList", () => { + describe("initAutofillInlineMenuList", () => { describe("the locked overlay for an unauthenticated user", () => { beforeEach(() => { postWindowMessage( diff --git a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts index 2dabe4418c5..3a44ccecf58 100644 --- a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts +++ b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts @@ -23,7 +23,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement { private currentCipherIndex = 0; private readonly showCiphersPerPage = 6; private readonly overlayListWindowMessageHandlers: OverlayListWindowMessageHandlers = { - initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message), + initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenuList(message), checkAutofillInlineMenuListFocused: () => this.checkInlineMenuListFocused(), updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers), focusInlineMenuList: () => this.focusInlineMenuList(), @@ -46,7 +46,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement { * @param ciphers - The ciphers to display in the overlay list. * @param portKey - Background generated key that allows the port to communicate with the background. */ - private async initAutofillOverlayList({ + private async initAutofillInlineMenuList({ translations, styleSheetUrl, theme, diff --git a/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts b/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts index 971a5a92d22..41ec1744441 100644 --- a/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts +++ b/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts @@ -37,8 +37,8 @@ export class AutofillOverlayMenuContainer { tabIndex: "-1", }; private windowMessageHandlers: AutofillOverlayMenuContainerWindowMessageHandlers = { - initAutofillOverlayList: (message) => this.handleInitOverlayIframe(message), - initAutofillOverlayButton: (message) => this.handleInitOverlayIframe(message), + initAutofillInlineMenuList: (message) => this.handleInitOverlayIframe(message), + initAutofillInlineMenuButton: (message) => this.handleInitOverlayIframe(message), }; constructor() { diff --git a/apps/browser/src/autofill/spec/autofill-mocks.ts b/apps/browser/src/autofill/spec/autofill-mocks.ts index 5934683265e..fdcf6bad812 100644 --- a/apps/browser/src/autofill/spec/autofill-mocks.ts +++ b/apps/browser/src/autofill/spec/autofill-mocks.ts @@ -169,7 +169,7 @@ function createInitAutofillOverlayButtonMessageMock( customFields = {}, ): InitAutofillOverlayButtonMessage { return { - command: "initAutofillOverlayButton", + command: "initAutofillInlineMenuButton", translations: overlayPagesTranslations, styleSheetUrl: "https://jest-testing-website.com", authStatus: AuthenticationStatus.Unlocked, @@ -199,7 +199,7 @@ function createInitAutofillOverlayListMessageMock( customFields = {}, ): InitAutofillOverlayListMessage { return { - command: "initAutofillOverlayList", + command: "initAutofillInlineMenuList", translations: overlayPagesTranslations, styleSheetUrl: "https://jest-testing-website.com", theme: ThemeType.Light,