bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Refactoring implementation0

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-06-11 09:52:25 -05:00
parent 927de0fc75
commit 710475d1c4
9 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/autofill/background/abstractions/overlay.background.ts
View File

@@ -114,7 +114,7 @@ export type OverlayBackgroundExtensionMessageHandlers = {
message, message,
sender, sender,
}: BackgroundOnMessageHandlerParams) => Promise<void>; }: BackgroundOnMessageHandlerParams) => Promise<void>;
updateAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void; toggleAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
checkIsAutofillInlineMenuButtonVisible: ({ sender }: BackgroundSenderParam) => void; checkIsAutofillInlineMenuButtonVisible: ({ sender }: BackgroundSenderParam) => void;
checkIsAutofillInlineMenuListVisible: ({ sender }: BackgroundSenderParam) => void; checkIsAutofillInlineMenuListVisible: ({ sender }: BackgroundSenderParam) => void;
checkShouldRepositionInlineMenu: ({ sender }: BackgroundSenderParam) => boolean; checkShouldRepositionInlineMenu: ({ sender }: BackgroundSenderParam) => boolean;

26
apps/browser/src/autofill/background/overlay.background.spec.ts
View File

@@ -1038,7 +1038,7 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { height: "2px", left: "4px", top: "2px", width: "2px" }, styles: { height: "2px", left: "4px", top: "2px", width: "2px" },
}); });
}); });
@@ -1056,7 +1056,7 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { height: "20px", left: "-22px", top: "8px", width: "20px" }, styles: { height: "20px", left: "-22px", top: "8px", width: "20px" },
}); });
}); });
@@ -1074,7 +1074,7 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { height: "27px", left: "-32px", top: "13px", width: "27px" }, styles: { height: "27px", left: "-32px", top: "13px", width: "27px" },
}); });
}); });
@@ -1092,7 +1092,7 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { height: "2px", left: "-18px", top: "2px", width: "2px" }, styles: { height: "2px", left: "-18px", top: "2px", width: "2px" },
}); });
}); });
@@ -1108,7 +1108,7 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(listPortSpy.postMessage).toHaveBeenCalledWith({ expect(listPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { left: "2px", top: "4px", width: "4px" }, styles: { left: "2px", top: "4px", width: "4px" },
}); });
}); });
@@ -1126,24 +1126,24 @@ describe("OverlayBackground", () => {
jest.advanceTimersByTime(50); jest.advanceTimersByTime(50);
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { opacity: "1" }, styles: { opacity: "1" },
}); });
expect(listPortSpy.postMessage).toHaveBeenCalledWith({ expect(listPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { opacity: "1" }, styles: { opacity: "1" },
}); });
}); });
}); });
describe("updateAutofillInlineMenuHidden message handler", () => { describe("toggleAutofillInlineMenuHidden message handler", () => {
beforeEach(async () => { beforeEach(async () => {
await initOverlayElementPorts(); await initOverlayElementPorts();
}); });
it("returns early if the display value is not provided", async () => { it("returns early if the display value is not provided", async () => {
const message = { const message = {
command: "updateAutofillInlineMenuHidden", command: "toggleAutofillInlineMenuHidden",
}; };
sendMockExtensionMessage(message); sendMockExtensionMessage(message);
@@ -1155,7 +1155,7 @@ describe("OverlayBackground", () => {
it("posts a message to the overlay button and list which hides the menu", async () => { it("posts a message to the overlay button and list which hides the menu", async () => {
const message = { const message = {
command: "updateAutofillInlineMenuHidden", command: "toggleAutofillInlineMenuHidden",
isAutofillInlineMenuHidden: true, isAutofillInlineMenuHidden: true,
setTransparentInlineMenu: false, setTransparentInlineMenu: false,
}; };
@@ -1164,14 +1164,14 @@ describe("OverlayBackground", () => {
await flushPromises(); await flushPromises();
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuHidden", command: "toggleAutofillInlineMenuHidden",
styles: { styles: {
display: "none", display: "none",
opacity: 1, opacity: 1,
}, },
}); });
expect(listPortSpy.postMessage).toHaveBeenCalledWith({ expect(listPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuHidden", command: "toggleAutofillInlineMenuHidden",
styles: { styles: {
display: "none", display: "none",
opacity: 1, opacity: 1,
@@ -1839,7 +1839,7 @@ describe("OverlayBackground", () => {
}); });
expect(listPortSpy.postMessage).toHaveBeenCalledWith({ expect(listPortSpy.postMessage).toHaveBeenCalledWith({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { height: "100px" }, styles: { height: "100px" },
}); });
}); });

13
apps/browser/src/autofill/background/overlay.background.ts
View File

@@ -82,7 +82,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
focusAutofillInlineMenuList: () => this.focusInlineMenuList(), focusAutofillInlineMenuList: () => this.focusInlineMenuList(),
updateAutofillInlineMenuPosition: ({ message, sender }) => updateAutofillInlineMenuPosition: ({ message, sender }) =>
this.updateInlineMenuPosition(message, sender), this.updateInlineMenuPosition(message, sender),
updateAutofillInlineMenuHidden: ({ message, sender }) => toggleAutofillInlineMenuHidden: ({ message, sender }) =>
this.updateInlineMenuHidden(message, sender), this.updateInlineMenuHidden(message, sender),
checkIsAutofillInlineMenuButtonVisible: ({ sender }) => checkIsAutofillInlineMenuButtonVisible: ({ sender }) =>
this.checkIsInlineMenuButtonVisible(sender), this.checkIsInlineMenuButtonVisible(sender),
@@ -582,7 +582,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
if (overlayElement === AutofillOverlayElement.Button) { if (overlayElement === AutofillOverlayElement.Button) {
this.inlineMenuButtonPort?.postMessage({ this.inlineMenuButtonPort?.postMessage({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: this.getInlineMenuButtonPosition(subFrameOffsets), styles: this.getInlineMenuButtonPosition(subFrameOffsets),
}); });
@@ -590,7 +590,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
} }
this.inlineMenuListPort?.postMessage({ this.inlineMenuListPort?.postMessage({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: this.getInlineMenuListPosition(subFrameOffsets), styles: this.getInlineMenuListPosition(subFrameOffsets),
}); });
} }
@@ -605,7 +605,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
} }
this.inlineMenuFadeInTimeout = globalThis.setTimeout(() => { this.inlineMenuFadeInTimeout = globalThis.setTimeout(() => {
const message = { command: "updateInlineMenuIframePosition", styles: { opacity: "1" } }; const message = { command: "updateAutofillInlineMenuPosition", styles: { opacity: "1" } };
this.inlineMenuButtonPort?.postMessage(message); this.inlineMenuButtonPort?.postMessage(message);
this.inlineMenuListPort?.postMessage(message); this.inlineMenuListPort?.postMessage(message);
}, 50); }, 50);
@@ -699,14 +699,13 @@ export class OverlayBackground implements OverlayBackgroundInterface {
styles = { ...styles, opacity }; styles = { ...styles, opacity };
} }
const portMessage = { command: "updateInlineMenuHidden", styles };
void BrowserApi.tabSendMessage( void BrowserApi.tabSendMessage(
sender.tab, sender.tab,
{ command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden: isAutofillInlineMenuHidden }, { command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden: isAutofillInlineMenuHidden },
{ frameId: 0 }, { frameId: 0 },
); );
const portMessage = { command: "toggleAutofillInlineMenuHidden", styles };
this.inlineMenuButtonPort?.postMessage(portMessage); this.inlineMenuButtonPort?.postMessage(portMessage);
this.inlineMenuListPort?.postMessage(portMessage); this.inlineMenuListPort?.postMessage(portMessage);
} }
@@ -1072,7 +1071,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
*/ */
private updateInlineMenuListHeight(message: OverlayBackgroundExtensionMessage) { private updateInlineMenuListHeight(message: OverlayBackgroundExtensionMessage) {
this.inlineMenuListPort?.postMessage({ this.inlineMenuListPort?.postMessage({
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: message.styles, styles: message.styles,
}); });
} }

6
apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts
View File

@@ -15,10 +15,12 @@ export type BackgroundPortMessageHandlers = {
message, message,
}: AutofillInlineMenuIframeExtensionMessageParam) => void; }: AutofillInlineMenuIframeExtensionMessageParam) => void;
initAutofillInlineMenuList: ({ message }: AutofillInlineMenuIframeExtensionMessageParam) => void; initAutofillInlineMenuList: ({ message }: AutofillInlineMenuIframeExtensionMessageParam) => void;
updateInlineMenuIframePosition: ({ updateAutofillInlineMenuPosition: ({
message,
}: AutofillInlineMenuIframeExtensionMessageParam) => void;
toggleAutofillInlineMenuHidden: ({
message, message,
}: AutofillInlineMenuIframeExtensionMessageParam) => void; }: AutofillInlineMenuIframeExtensionMessageParam) => void;
updateInlineMenuHidden: ({ message }: AutofillInlineMenuIframeExtensionMessageParam) => void;
updateAutofillInlineMenuColorScheme: () => void; updateAutofillInlineMenuColorScheme: () => void;
}; };

10
apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
View File

@@ -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", () => { 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"); jest.spyOn(autofillInlineMenuIframeService as any, "updateIframePosition");
sendPortMessage(portSpy, { command: "updateInlineMenuIframePosition" }); sendPortMessage(portSpy, { command: "updateAutofillInlineMenuPosition" });
expect( expect(
autofillInlineMenuIframeService["iframe"].contentWindow.postMessage, autofillInlineMenuIframeService["iframe"].contentWindow.postMessage,
@@ -344,7 +344,7 @@ describe("AutofillInlineMenuIframeService", () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
sendPortMessage(portSpy, { sendPortMessage(portSpy, {
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles: { top: 100, left: 100 }, styles: { top: 100, left: 100 },
}); });
@@ -355,7 +355,7 @@ describe("AutofillInlineMenuIframeService", () => {
const styles = { top: "100px", left: "100px" }; const styles = { top: "100px", left: "100px" };
sendPortMessage(portSpy, { sendPortMessage(portSpy, {
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles, styles,
}); });
@@ -368,7 +368,7 @@ describe("AutofillInlineMenuIframeService", () => {
const styles = { top: "100px", left: "100px" }; const styles = { top: "100px", left: "100px" };
sendPortMessage(portSpy, { sendPortMessage(portSpy, {
command: "updateInlineMenuIframePosition", command: "updateAutofillInlineMenuPosition",
styles, styles,
}); });
@@ -381,7 +381,7 @@ describe("AutofillInlineMenuIframeService", () => {
it("updates the visibility of the iframe", () => { it("updates the visibility of the iframe", () => {
sendPortMessage(portSpy, { sendPortMessage(portSpy, {
command: "updateInlineMenuHidden", command: "toggleAutofillInlineMenuHidden",
styles: { display: "none" }, styles: { display: "none" },
}); });

5
apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
View File

@@ -47,8 +47,9 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = { private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = {
initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message), initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message),
initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenu(message), initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenu(message),
updateInlineMenuIframePosition: ({ message }) => this.updateIframePosition(message.styles), updateAutofillInlineMenuPosition: ({ message }) => this.updateIframePosition(message.styles),
updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles), toggleAutofillInlineMenuHidden: ({ message }) =>
this.updateElementStyles(this.iframe, message.styles),
updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(), updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(),
triggerDelayedAutofillInlineMenuClosure: () => this.handleDelayedAutofillInlineMenuClosure(), triggerDelayedAutofillInlineMenuClosure: () => this.handleDelayedAutofillInlineMenuClosure(),
}; };

4
apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
View File

@@ -882,7 +882,7 @@ describe("AutofillOverlayContentService", () => {
globalThis.dispatchEvent(new Event(EVENTS.SCROLL)); globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
await flushPromises(); await flushPromises();
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: true, isAutofillInlineMenuHidden: true,
setTransparentInlineMenu: false, setTransparentInlineMenu: false,
}); });
@@ -911,7 +911,7 @@ describe("AutofillOverlayContentService", () => {
await flushPromises(); await flushPromises();
jest.advanceTimersByTime(800); jest.advanceTimersByTime(800);
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: false, isAutofillInlineMenuHidden: false,
setTransparentInlineMenu: true, setTransparentInlineMenu: true,
}); });

2
apps/browser/src/autofill/services/autofill-overlay-content.service.ts
View File

@@ -596,7 +596,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
isHidden: boolean, isHidden: boolean,
setTransparentInlineMenu: boolean = false, setTransparentInlineMenu: boolean = false,
) { ) {
void this.sendExtensionMessage("updateAutofillInlineMenuHidden", { void this.sendExtensionMessage("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: isHidden, isAutofillInlineMenuHidden: isHidden,
setTransparentInlineMenu, setTransparentInlineMenu,
}); });

2
apps/browser/src/autofill/utils/index.spec.ts
View File

@@ -38,7 +38,7 @@ describe("generateRandomCustomElementName", () => {
describe("sendExtensionMessage", () => { describe("sendExtensionMessage", () => {
it("sends a message to the extension", async () => { it("sends a message to the extension", async () => {
const extensionMessagePromise = sendExtensionMessage("updateAutofillInlineMenuHidden", { const extensionMessagePromise = sendExtensionMessage("toggleAutofillInlineMenuHidden", {
display: "none", display: "none",
}); });