[PM-5189] Refactoring implementation

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",

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,

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;
+  initAutofillInlineMenuButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
-  initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
+  initAutofillInlineMenuList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
   updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
   updateInlineMenuHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
   updateAutofillInlineMenuColorScheme: () => void;

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;

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;
+  initAutofillInlineMenuList: (message: InitOverlayElementMessage) => void;
-  initAutofillOverlayButton: (message: InitOverlayElementMessage) => void;
+  initAutofillInlineMenuButton: (message: InitOverlayElementMessage) => void;
 };

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<MediaQueryList>({ 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<MediaQueryList>({ 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,
           };
 

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),
+    initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message),
-    initAutofillOverlayList: ({ message }) => this.initAutofillOverlay(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") {
+    if (message.command === "initAutofillInlineMenuList") {
-      this.initAutofillOverlayList(message);
+      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;

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({

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,

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(

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,

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),
+    initAutofillInlineMenuList: (message) => this.handleInitOverlayIframe(message),
-    initAutofillOverlayButton: (message) => this.handleInitOverlayIframe(message),
+    initAutofillInlineMenuButton: (message) => this.handleInitOverlayIframe(message),
   };
 
   constructor() {

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,