From 710475d1c46aaa8e64810095fa42732840367854 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Tue, 11 Jun 2024 09:52:25 -0500 Subject: [PATCH] [PM-5189] Refactoring implementation0 --- .../abstractions/overlay.background.ts | 2 +- .../background/overlay.background.spec.ts | 26 +++++++++---------- .../autofill/background/overlay.background.ts | 13 +++++----- .../autofill-inline-menu-iframe.service.ts | 6 +++-- ...utofill-inline-menu-iframe.service.spec.ts | 10 +++---- .../autofill-inline-menu-iframe.service.ts | 5 ++-- .../autofill-overlay-content.service.spec.ts | 4 +-- .../autofill-overlay-content.service.ts | 2 +- apps/browser/src/autofill/utils/index.spec.ts | 2 +- 9 files changed, 36 insertions(+), 34 deletions(-) diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts index ef86a411eac..057c147e6db 100644 --- a/apps/browser/src/autofill/background/abstractions/overlay.background.ts +++ b/apps/browser/src/autofill/background/abstractions/overlay.background.ts @@ -114,7 +114,7 @@ export type OverlayBackgroundExtensionMessageHandlers = { message, sender, }: BackgroundOnMessageHandlerParams) => Promise; - updateAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void; + toggleAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void; checkIsAutofillInlineMenuButtonVisible: ({ sender }: BackgroundSenderParam) => void; checkIsAutofillInlineMenuListVisible: ({ sender }: BackgroundSenderParam) => void; checkShouldRepositionInlineMenu: ({ sender }: BackgroundSenderParam) => boolean; diff --git a/apps/browser/src/autofill/background/overlay.background.spec.ts b/apps/browser/src/autofill/background/overlay.background.spec.ts index 740c3828b20..4f4cc170663 100644 --- a/apps/browser/src/autofill/background/overlay.background.spec.ts +++ b/apps/browser/src/autofill/background/overlay.background.spec.ts @@ -1038,7 +1038,7 @@ describe("OverlayBackground", () => { await flushPromises(); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { height: "2px", left: "4px", top: "2px", width: "2px" }, }); }); @@ -1056,7 +1056,7 @@ describe("OverlayBackground", () => { await flushPromises(); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { height: "20px", left: "-22px", top: "8px", width: "20px" }, }); }); @@ -1074,7 +1074,7 @@ describe("OverlayBackground", () => { await flushPromises(); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { height: "27px", left: "-32px", top: "13px", width: "27px" }, }); }); @@ -1092,7 +1092,7 @@ describe("OverlayBackground", () => { await flushPromises(); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { height: "2px", left: "-18px", top: "2px", width: "2px" }, }); }); @@ -1108,7 +1108,7 @@ describe("OverlayBackground", () => { await flushPromises(); expect(listPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { left: "2px", top: "4px", width: "4px" }, }); }); @@ -1126,24 +1126,24 @@ describe("OverlayBackground", () => { jest.advanceTimersByTime(50); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { opacity: "1" }, }); expect(listPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { opacity: "1" }, }); }); }); - describe("updateAutofillInlineMenuHidden message handler", () => { + describe("toggleAutofillInlineMenuHidden message handler", () => { beforeEach(async () => { await initOverlayElementPorts(); }); it("returns early if the display value is not provided", async () => { const message = { - command: "updateAutofillInlineMenuHidden", + command: "toggleAutofillInlineMenuHidden", }; sendMockExtensionMessage(message); @@ -1155,7 +1155,7 @@ describe("OverlayBackground", () => { it("posts a message to the overlay button and list which hides the menu", async () => { const message = { - command: "updateAutofillInlineMenuHidden", + command: "toggleAutofillInlineMenuHidden", isAutofillInlineMenuHidden: true, setTransparentInlineMenu: false, }; @@ -1164,14 +1164,14 @@ describe("OverlayBackground", () => { await flushPromises(); expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuHidden", + command: "toggleAutofillInlineMenuHidden", styles: { display: "none", opacity: 1, }, }); expect(listPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuHidden", + command: "toggleAutofillInlineMenuHidden", styles: { display: "none", opacity: 1, @@ -1839,7 +1839,7 @@ describe("OverlayBackground", () => { }); expect(listPortSpy.postMessage).toHaveBeenCalledWith({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { height: "100px" }, }); }); diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index 4921d6b8883..e0b86d5b77c 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -82,7 +82,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { focusAutofillInlineMenuList: () => this.focusInlineMenuList(), updateAutofillInlineMenuPosition: ({ message, sender }) => this.updateInlineMenuPosition(message, sender), - updateAutofillInlineMenuHidden: ({ message, sender }) => + toggleAutofillInlineMenuHidden: ({ message, sender }) => this.updateInlineMenuHidden(message, sender), checkIsAutofillInlineMenuButtonVisible: ({ sender }) => this.checkIsInlineMenuButtonVisible(sender), @@ -582,7 +582,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { if (overlayElement === AutofillOverlayElement.Button) { this.inlineMenuButtonPort?.postMessage({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: this.getInlineMenuButtonPosition(subFrameOffsets), }); @@ -590,7 +590,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { } this.inlineMenuListPort?.postMessage({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: this.getInlineMenuListPosition(subFrameOffsets), }); } @@ -605,7 +605,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { } this.inlineMenuFadeInTimeout = globalThis.setTimeout(() => { - const message = { command: "updateInlineMenuIframePosition", styles: { opacity: "1" } }; + const message = { command: "updateAutofillInlineMenuPosition", styles: { opacity: "1" } }; this.inlineMenuButtonPort?.postMessage(message); this.inlineMenuListPort?.postMessage(message); }, 50); @@ -699,14 +699,13 @@ export class OverlayBackground implements OverlayBackgroundInterface { styles = { ...styles, opacity }; } - const portMessage = { command: "updateInlineMenuHidden", styles }; - void BrowserApi.tabSendMessage( sender.tab, { command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden: isAutofillInlineMenuHidden }, { frameId: 0 }, ); + const portMessage = { command: "toggleAutofillInlineMenuHidden", styles }; this.inlineMenuButtonPort?.postMessage(portMessage); this.inlineMenuListPort?.postMessage(portMessage); } @@ -1072,7 +1071,7 @@ export class OverlayBackground implements OverlayBackgroundInterface { */ private updateInlineMenuListHeight(message: OverlayBackgroundExtensionMessage) { this.inlineMenuListPort?.postMessage({ - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: message.styles, }); } diff --git a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts index 37979a3f431..d791b130f4d 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts @@ -15,10 +15,12 @@ export type BackgroundPortMessageHandlers = { message, }: AutofillInlineMenuIframeExtensionMessageParam) => void; initAutofillInlineMenuList: ({ message }: AutofillInlineMenuIframeExtensionMessageParam) => void; - updateInlineMenuIframePosition: ({ + updateAutofillInlineMenuPosition: ({ + message, + }: AutofillInlineMenuIframeExtensionMessageParam) => void; + toggleAutofillInlineMenuHidden: ({ message, }: AutofillInlineMenuIframeExtensionMessageParam) => void; - updateInlineMenuHidden: ({ message }: AutofillInlineMenuIframeExtensionMessageParam) => void; updateAutofillInlineMenuColorScheme: () => void; }; diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts index ad247c3724d..231cf10b63f 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts @@ -195,7 +195,7 @@ describe("AutofillInlineMenuIframeService", () => { it("handles port messages that are registered with the message handlers and does not pass the message on to the iframe", () => { jest.spyOn(autofillInlineMenuIframeService as any, "updateIframePosition"); - sendPortMessage(portSpy, { command: "updateInlineMenuIframePosition" }); + sendPortMessage(portSpy, { command: "updateAutofillInlineMenuPosition" }); expect( autofillInlineMenuIframeService["iframe"].contentWindow.postMessage, @@ -344,7 +344,7 @@ describe("AutofillInlineMenuIframeService", () => { jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false); sendPortMessage(portSpy, { - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles: { top: 100, left: 100 }, }); @@ -355,7 +355,7 @@ describe("AutofillInlineMenuIframeService", () => { const styles = { top: "100px", left: "100px" }; sendPortMessage(portSpy, { - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles, }); @@ -368,7 +368,7 @@ describe("AutofillInlineMenuIframeService", () => { const styles = { top: "100px", left: "100px" }; sendPortMessage(portSpy, { - command: "updateInlineMenuIframePosition", + command: "updateAutofillInlineMenuPosition", styles, }); @@ -381,7 +381,7 @@ describe("AutofillInlineMenuIframeService", () => { it("updates the visibility of the iframe", () => { sendPortMessage(portSpy, { - command: "updateInlineMenuHidden", + command: "toggleAutofillInlineMenuHidden", styles: { display: "none" }, }); 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 de3f3cd56be..d1697afd1c8 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 @@ -47,8 +47,9 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = { initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message), initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenu(message), - updateInlineMenuIframePosition: ({ message }) => this.updateIframePosition(message.styles), - updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles), + updateAutofillInlineMenuPosition: ({ message }) => this.updateIframePosition(message.styles), + toggleAutofillInlineMenuHidden: ({ message }) => + this.updateElementStyles(this.iframe, message.styles), updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(), triggerDelayedAutofillInlineMenuClosure: () => this.handleDelayedAutofillInlineMenuClosure(), }; diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts index 0a0bcbba670..414a6a69649 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts @@ -882,7 +882,7 @@ describe("AutofillOverlayContentService", () => { globalThis.dispatchEvent(new Event(EVENTS.SCROLL)); await flushPromises(); - expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { + expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: true, setTransparentInlineMenu: false, }); @@ -911,7 +911,7 @@ describe("AutofillOverlayContentService", () => { await flushPromises(); jest.advanceTimersByTime(800); - expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { + expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: false, setTransparentInlineMenu: true, }); 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 746e6b59360..1ef991abd3e 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts @@ -596,7 +596,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ isHidden: boolean, setTransparentInlineMenu: boolean = false, ) { - void this.sendExtensionMessage("updateAutofillInlineMenuHidden", { + void this.sendExtensionMessage("toggleAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: isHidden, setTransparentInlineMenu, }); diff --git a/apps/browser/src/autofill/utils/index.spec.ts b/apps/browser/src/autofill/utils/index.spec.ts index c0d66114cdb..b33ccbffddb 100644 --- a/apps/browser/src/autofill/utils/index.spec.ts +++ b/apps/browser/src/autofill/utils/index.spec.ts @@ -38,7 +38,7 @@ describe("generateRandomCustomElementName", () => { describe("sendExtensionMessage", () => { it("sends a message to the extension", async () => { - const extensionMessagePromise = sendExtensionMessage("updateAutofillInlineMenuHidden", { + const extensionMessagePromise = sendExtensionMessage("toggleAutofillInlineMenuHidden", { display: "none", });