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

[PM-5189] Refactoring implementation

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-05-03 10:29:48 -05:00
parent c1ab475b77
commit c178a9be08
11 changed files with 99 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -128,19 +128,19 @@ type PortConnectionParam = {
}; };
type PortOnMessageHandlerParams = PortMessageParam & PortConnectionParam; type PortOnMessageHandlerParams = PortMessageParam & PortConnectionParam;
type OverlayButtonPortMessageHandlers = { type InlineMenuButtonPortMessageHandlers = {
[key: string]: CallableFunction; [key: string]: CallableFunction;
autofillInlineMenuButtonClicked: ({ port }: PortConnectionParam) => void; autofillInlineMenuButtonClicked: ({ port }: PortConnectionParam) => void;
closeAutofillInlineMenu: ({ port }: PortConnectionParam) => void; closeAutofillInlineMenu: ({ port }: PortConnectionParam) => void;
forceCloseAutofillInlineMenu: ({ port }: PortConnectionParam) => void; forceCloseAutofillInlineMenu: ({ port }: PortConnectionParam) => void;
autofillInlineMenuBlurred: () => void; autofillInlineMenuBlurred: () => void;
redirectAutofillInlineMenuFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void; redirectAutofillInlineMenuFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
updateOverlayPageColorScheme: () => void; updateAutofillInlineMenuColorScheme: () => void;
}; };
type OverlayListPortMessageHandlers = { type InlineMenuListPortMessageHandlers = {
[key: string]: CallableFunction; [key: string]: CallableFunction;
checkAutofillOverlayButtonFocused: () => void; checkAutofillInlineMenuButtonFocused: () => void;
forceCloseAutofillInlineMenu: ({ port }: PortConnectionParam) => void; forceCloseAutofillInlineMenu: ({ port }: PortConnectionParam) => void;
autofillInlineMenuBlurred: () => void; autofillInlineMenuBlurred: () => void;
unlockVault: ({ port }: PortConnectionParam) => void; unlockVault: ({ port }: PortConnectionParam) => void;
@@ -148,7 +148,7 @@ type OverlayListPortMessageHandlers = {
addNewVaultItem: ({ port }: PortConnectionParam) => void; addNewVaultItem: ({ port }: PortConnectionParam) => void;
viewSelectedCipher: ({ message, port }: PortOnMessageHandlerParams) => void; viewSelectedCipher: ({ message, port }: PortOnMessageHandlerParams) => void;
redirectAutofillInlineMenuFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void; redirectAutofillInlineMenuFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
updateAutofillOverlayListHeight: ({ message, port }: PortOnMessageHandlerParams) => void; updateAutofillInlineMenuListHeight: ({ message, port }: PortOnMessageHandlerParams) => void;
}; };
interface OverlayBackground { interface OverlayBackground {
@@ -168,7 +168,7 @@ export {
OverlayCipherData, OverlayCipherData,
OverlayAddNewItemMessage, OverlayAddNewItemMessage,
OverlayBackgroundExtensionMessageHandlers, OverlayBackgroundExtensionMessageHandlers,
OverlayButtonPortMessageHandlers, InlineMenuButtonPortMessageHandlers,
OverlayListPortMessageHandlers, InlineMenuListPortMessageHandlers,
OverlayBackground, OverlayBackground,
}; };

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

@@ -94,7 +94,7 @@ describe("OverlayBackground", () => {
options; options;
if (initButton) { if (initButton) {
await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button)); await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
buttonPortSpy = overlayBackground["overlayButtonPort"]; buttonPortSpy = overlayBackground["inlineMenuButtonPort"];
} }
if (initButtonMessageConnector) { if (initButtonMessageConnector) {
@@ -104,7 +104,7 @@ describe("OverlayBackground", () => {
if (initList) { if (initList) {
await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List)); await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
listPortSpy = overlayBackground["overlayListPort"]; listPortSpy = overlayBackground["inlineMenuListPort"];
} }
if (initListMessageConnectorSpy) { if (initListMessageConnectorSpy) {
@@ -237,7 +237,7 @@ describe("OverlayBackground", () => {
}); });
it("posts an `updateOverlayListCiphers` message to the overlay list port with the updated ciphers", async () => { it("posts an `updateOverlayListCiphers` message to the overlay list port with the updated ciphers", async () => {
overlayBackground["overlayListPort"] = mock<chrome.runtime.Port>(); overlayBackground["inlineMenuListPort"] = mock<chrome.runtime.Port>();
cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]); cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]);
cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1); cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab); jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab);
@@ -245,7 +245,7 @@ describe("OverlayBackground", () => {
await overlayBackground.updateOverlayCiphers(); await overlayBackground.updateOverlayCiphers();
expect(overlayBackground["overlayListPort"].postMessage).toHaveBeenCalledWith({ expect(overlayBackground["inlineMenuListPort"].postMessage).toHaveBeenCalledWith({
command: "updateOverlayListCiphers", command: "updateOverlayListCiphers",
ciphers: [ ciphers: [
{ {
@@ -430,12 +430,12 @@ describe("OverlayBackground", () => {
describe("updateOverlayButtonAuthStatus", () => { describe("updateOverlayButtonAuthStatus", () => {
it("will send a message to the button port with the user's auth status", () => { it("will send a message to the button port with the user's auth status", () => {
overlayBackground["overlayButtonPort"] = mock<chrome.runtime.Port>(); overlayBackground["inlineMenuButtonPort"] = mock<chrome.runtime.Port>();
jest.spyOn(overlayBackground["overlayButtonPort"], "postMessage"); jest.spyOn(overlayBackground["inlineMenuButtonPort"], "postMessage");
overlayBackground["updateOverlayButtonAuthStatus"](); overlayBackground["updateOverlayButtonAuthStatus"]();
expect(overlayBackground["overlayButtonPort"].postMessage).toHaveBeenCalledWith({ expect(overlayBackground["inlineMenuButtonPort"].postMessage).toHaveBeenCalledWith({
command: "updateOverlayButtonAuthStatus", command: "updateOverlayButtonAuthStatus",
authStatus: overlayBackground["userAuthStatus"], authStatus: overlayBackground["userAuthStatus"],
}); });
@@ -444,7 +444,7 @@ describe("OverlayBackground", () => {
describe("getTranslations", () => { describe("getTranslations", () => {
it("will query the overlay page translations if they have not been queried", () => { it("will query the overlay page translations if they have not been queried", () => {
overlayBackground["overlayPageTranslations"] = undefined; overlayBackground["inlineMenuPageTranslations"] = undefined;
jest.spyOn(overlayBackground as any, "getTranslations"); jest.spyOn(overlayBackground as any, "getTranslations");
jest.spyOn(overlayBackground["i18nService"], "translate").mockImplementation((key) => key); jest.spyOn(overlayBackground["i18nService"], "translate").mockImplementation((key) => key);
jest.spyOn(BrowserApi, "getUILanguage").mockReturnValue("en"); jest.spyOn(BrowserApi, "getUILanguage").mockReturnValue("en");
@@ -582,7 +582,7 @@ describe("OverlayBackground", () => {
}); });
expect(buttonPortSpy.disconnect).toHaveBeenCalled(); expect(buttonPortSpy.disconnect).toHaveBeenCalled();
expect(overlayBackground["overlayButtonPort"]).toBeNull(); expect(overlayBackground["inlineMenuButtonPort"]).toBeNull();
}); });
it("disconnects the list element port", () => { it("disconnects the list element port", () => {
@@ -592,7 +592,7 @@ describe("OverlayBackground", () => {
}); });
expect(listPortSpy.disconnect).toHaveBeenCalled(); expect(listPortSpy.disconnect).toHaveBeenCalled();
expect(overlayBackground["overlayListPort"]).toBeNull(); expect(overlayBackground["inlineMenuListPort"]).toBeNull();
}); });
}); });
@@ -680,17 +680,17 @@ describe("OverlayBackground", () => {
command: "checkAutofillOverlayListFocused", command: "checkAutofillOverlayListFocused",
}); });
expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
command: "checkAutofillOverlayButtonFocused", command: "checkAutofillInlineMenuButtonFocused",
}); });
}); });
it("will check if the overlay button is focused if the list port is not open", () => { it("will check if the overlay button is focused if the list port is not open", () => {
overlayBackground["overlayListPort"] = undefined; overlayBackground["inlineMenuListPort"] = undefined;
sendMockExtensionMessage({ command: "checkAutofillInlineMenuFocused" }); sendMockExtensionMessage({ command: "checkAutofillInlineMenuFocused" });
expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({ expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
command: "checkAutofillOverlayButtonFocused", command: "checkAutofillInlineMenuButtonFocused",
}); });
expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({ expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
command: "checkAutofillOverlayListFocused", command: "checkAutofillOverlayListFocused",
@@ -721,12 +721,12 @@ describe("OverlayBackground", () => {
await overlayBackground["handlePortOnConnect"]( await overlayBackground["handlePortOnConnect"](
createPortSpyMock(AutofillOverlayPort.List), createPortSpyMock(AutofillOverlayPort.List),
); );
listPortSpy = overlayBackground["overlayListPort"]; listPortSpy = overlayBackground["inlineMenuListPort"];
await overlayBackground["handlePortOnConnect"]( await overlayBackground["handlePortOnConnect"](
createPortSpyMock(AutofillOverlayPort.Button), createPortSpyMock(AutofillOverlayPort.Button),
); );
buttonPortSpy = overlayBackground["overlayButtonPort"]; buttonPortSpy = overlayBackground["inlineMenuButtonPort"];
jest.spyOn(BrowserApi, "tabSendMessage").mockImplementation(); jest.spyOn(BrowserApi, "tabSendMessage").mockImplementation();
}); });
@@ -1063,7 +1063,7 @@ describe("OverlayBackground", () => {
}); });
await flushPromises(); await flushPromises();
expect(overlayBackground["overlayButtonPort"]).toBeUndefined(); expect(overlayBackground["inlineMenuButtonPort"]).toBeUndefined();
expect(listPortSpy.postMessage).toHaveBeenCalled(); expect(listPortSpy.postMessage).toHaveBeenCalled();
expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled(); expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/list.css"); expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/list.css");
@@ -1084,7 +1084,7 @@ describe("OverlayBackground", () => {
}); });
await flushPromises(); await flushPromises();
expect(overlayBackground["overlayListPort"]).toBeUndefined(); expect(overlayBackground["inlineMenuListPort"]).toBeUndefined();
expect(buttonPortSpy.postMessage).toHaveBeenCalled(); expect(buttonPortSpy.postMessage).toHaveBeenCalled();
expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled(); expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/button.css"); expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/button.css");
@@ -1121,13 +1121,13 @@ describe("OverlayBackground", () => {
// It ignores port messages that do not have a valid portKey // It ignores port messages that do not have a valid portKey
it("ignores port messages that do not contain a handler", () => { it("ignores port messages that do not contain a handler", () => {
jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation(); jest.spyOn(overlayBackground as any, "checkInlineMenuButtonFocused").mockImplementation();
sendPortMessage(buttonMessageConnectorPortSpy, { sendPortMessage(buttonMessageConnectorPortSpy, {
command: "checkAutofillOverlayButtonFocused", command: "checkAutofillInlineMenuButtonFocused",
}); });
expect(overlayBackground["checkOverlayButtonFocused"]).not.toHaveBeenCalled(); expect(overlayBackground["checkInlineMenuButtonFocused"]).not.toHaveBeenCalled();
}); });
describe("overlay button message handlers", () => { describe("overlay button message handlers", () => {
@@ -1245,16 +1245,16 @@ describe("OverlayBackground", () => {
overlayBackground["portKeyForTab"][buttonPortSpy.sender.tab.id] = portKey; overlayBackground["portKeyForTab"][buttonPortSpy.sender.tab.id] = portKey;
}); });
describe("checkAutofillOverlayButtonFocused", () => { describe("checkAutofillInlineMenuButtonFocused", () => {
it("checks on the focus state of the overlay button", () => { it("checks on the focus state of the overlay button", () => {
jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation(); jest.spyOn(overlayBackground as any, "checkInlineMenuButtonFocused").mockImplementation();
sendPortMessage(listMessageConnectorPortSpy, { sendPortMessage(listMessageConnectorPortSpy, {
command: "checkAutofillOverlayButtonFocused", command: "checkAutofillInlineMenuButtonFocused",
portKey, portKey,
}); });
expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled(); expect(overlayBackground["checkInlineMenuButtonFocused"]).toHaveBeenCalled();
}); });
}); });
@@ -1277,14 +1277,14 @@ describe("OverlayBackground", () => {
describe("autofillInlineMenuBlurred", () => { describe("autofillInlineMenuBlurred", () => {
it("checks on the focus state of the overlay button", () => { it("checks on the focus state of the overlay button", () => {
jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation(); jest.spyOn(overlayBackground as any, "checkInlineMenuButtonFocused").mockImplementation();
sendPortMessage(listMessageConnectorPortSpy, { sendPortMessage(listMessageConnectorPortSpy, {
command: "autofillInlineMenuBlurred", command: "autofillInlineMenuBlurred",
portKey, portKey,
}); });
expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled(); expect(overlayBackground["checkInlineMenuButtonFocused"]).toHaveBeenCalled();
}); });
}); });

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

@@ -37,9 +37,9 @@ import {
OverlayBackground as OverlayBackgroundInterface, OverlayBackground as OverlayBackgroundInterface,
OverlayBackgroundExtensionMessage, OverlayBackgroundExtensionMessage,
OverlayBackgroundExtensionMessageHandlers, OverlayBackgroundExtensionMessageHandlers,
OverlayButtonPortMessageHandlers, InlineMenuButtonPortMessageHandlers,
OverlayCipherData, OverlayCipherData,
OverlayListPortMessageHandlers, InlineMenuListPortMessageHandlers,
OverlayPortMessage, OverlayPortMessage,
PageDetailsForTab, PageDetailsForTab,
SubFrameOffsetData, SubFrameOffsetData,
@@ -53,15 +53,15 @@ class OverlayBackground implements OverlayBackgroundInterface {
private overlayLoginCiphers: Map<string, CipherView> = new Map(); private overlayLoginCiphers: Map<string, CipherView> = new Map();
private pageDetailsForTab: PageDetailsForTab = {}; private pageDetailsForTab: PageDetailsForTab = {};
private subFrameOffsetsForTab: SubFrameOffsetsForTab = {}; private subFrameOffsetsForTab: SubFrameOffsetsForTab = {};
private updateOverlayMenuPositionTimeout: number | NodeJS.Timeout; private updateInlineMenuPositionTimeout: number | NodeJS.Timeout;
private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut; private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
private overlayButtonPort: chrome.runtime.Port; private inlineMenuButtonPort: chrome.runtime.Port;
private overlayListPort: chrome.runtime.Port; private inlineMenuListPort: chrome.runtime.Port;
private portKeyForTab: Record<number, string> = {}; private portKeyForTab: Record<number, string> = {};
private focusedFieldData: FocusedFieldData; private focusedFieldData: FocusedFieldData;
private isFieldCurrentlyFocused: boolean = false; private isFieldCurrentlyFocused: boolean = false;
private isFieldCurrentlyFilling: boolean = false; private isFieldCurrentlyFilling: boolean = false;
private overlayPageTranslations: Record<string, string>; private inlineMenuPageTranslations: Record<string, string>;
private iconsServerUrl: string; private iconsServerUrl: string;
private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = { private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
openAutofillInlineMenu: () => this.openInlineMenu(false), openAutofillInlineMenu: () => this.openInlineMenu(false),
@@ -93,7 +93,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
addEditCipherSubmitted: () => this.updateOverlayCiphers(), addEditCipherSubmitted: () => this.updateOverlayCiphers(),
deletedCipher: () => this.updateOverlayCiphers(), deletedCipher: () => this.updateOverlayCiphers(),
}; };
private readonly overlayButtonPortMessageHandlers: OverlayButtonPortMessageHandlers = { private readonly inlineMenuButtonPortMessageHandlers: InlineMenuButtonPortMessageHandlers = {
autofillInlineMenuButtonClicked: ({ port }) => this.handleInlineMenuButtonClicked(port), autofillInlineMenuButtonClicked: ({ port }) => this.handleInlineMenuButtonClicked(port),
closeAutofillInlineMenu: ({ port }) => this.closeInlineMenu(port.sender), closeAutofillInlineMenu: ({ port }) => this.closeInlineMenu(port.sender),
forceCloseAutofillInlineMenu: ({ port }) => forceCloseAutofillInlineMenu: ({ port }) =>
@@ -101,20 +101,20 @@ class OverlayBackground implements OverlayBackgroundInterface {
autofillInlineMenuBlurred: () => this.checkInlineMenuListFocused(), autofillInlineMenuBlurred: () => this.checkInlineMenuListFocused(),
redirectAutofillInlineMenuFocusOut: ({ message, port }) => redirectAutofillInlineMenuFocusOut: ({ message, port }) =>
this.redirectInlineMenuFocusOut(message, port), this.redirectInlineMenuFocusOut(message, port),
updateOverlayPageColorScheme: () => this.updateButtonPageColorScheme(), updateAutofillInlineMenuColorScheme: () => this.updateInlineMenuButtonColorScheme(),
}; };
private readonly overlayListPortMessageHandlers: OverlayListPortMessageHandlers = { private readonly inlineMenuListPortMessageHandlers: InlineMenuListPortMessageHandlers = {
checkAutofillOverlayButtonFocused: () => this.checkOverlayButtonFocused(), checkAutofillInlineMenuButtonFocused: () => this.checkInlineMenuButtonFocused(),
forceCloseAutofillInlineMenu: ({ port }) => forceCloseAutofillInlineMenu: ({ port }) =>
this.closeInlineMenu(port.sender, { forceCloseAutofillInlineMenu: true }), this.closeInlineMenu(port.sender, { forceCloseAutofillInlineMenu: true }),
autofillInlineMenuBlurred: () => this.checkOverlayButtonFocused(), autofillInlineMenuBlurred: () => this.checkInlineMenuButtonFocused(),
unlockVault: ({ port }) => this.unlockVault(port), unlockVault: ({ port }) => this.unlockVault(port),
fillSelectedListItem: ({ message, port }) => this.fillSelectedOverlayListItem(message, port), fillSelectedListItem: ({ message, port }) => this.fillSelectedOverlayListItem(message, port),
addNewVaultItem: ({ port }) => this.getNewVaultItemDetails(port), addNewVaultItem: ({ port }) => this.getNewVaultItemDetails(port),
viewSelectedCipher: ({ message, port }) => this.viewSelectedCipher(message, port), viewSelectedCipher: ({ message, port }) => this.viewSelectedCipher(message, port),
redirectAutofillInlineMenuFocusOut: ({ message, port }) => redirectAutofillInlineMenuFocusOut: ({ message, port }) =>
this.redirectInlineMenuFocusOut(message, port), this.redirectInlineMenuFocusOut(message, port),
updateAutofillOverlayListHeight: ({ message }) => this.updateOverlayListHeight(message), updateAutofillInlineMenuListHeight: ({ message }) => this.updateInlineMenuListHeight(message),
}; };
constructor( constructor(
@@ -189,7 +189,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
} }
const ciphers = await this.getOverlayCipherData(); const ciphers = await this.getOverlayCipherData();
this.overlayListPort?.postMessage({ command: "updateOverlayListCiphers", ciphers }); this.inlineMenuListPort?.postMessage({ command: "updateOverlayListCiphers", ciphers });
} }
/** /**
@@ -321,8 +321,8 @@ class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
if (this.updateOverlayMenuPositionTimeout) { if (this.updateInlineMenuPositionTimeout) {
clearTimeout(this.updateOverlayMenuPositionTimeout); clearTimeout(this.updateInlineMenuPositionTimeout);
} }
const frameTabs = Array.from(subFrameOffsetsForTab.keys()); const frameTabs = Array.from(subFrameOffsetsForTab.keys());
@@ -335,7 +335,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
await this.buildSubFrameOffsets(sender.tab, frameId, sender.url); await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
} }
this.updateOverlayMenuPositionTimeout = setTimeout(() => { this.updateInlineMenuPositionTimeout = setTimeout(() => {
if (this.isFieldCurrentlyFocused) { if (this.isFieldCurrentlyFocused) {
void this.updateInlineMenuPosition({ overlayElement: AutofillOverlayElement.List }, sender); void this.updateInlineMenuPosition({ overlayElement: AutofillOverlayElement.List }, sender);
void this.updateInlineMenuPosition( void this.updateInlineMenuPosition(
@@ -387,27 +387,27 @@ class OverlayBackground implements OverlayBackgroundInterface {
* if it is open, otherwise it will check the overlay button. * if it is open, otherwise it will check the overlay button.
*/ */
private checkInlineMenuFocused() { private checkInlineMenuFocused() {
if (this.overlayListPort) { if (this.inlineMenuListPort) {
this.checkInlineMenuListFocused(); this.checkInlineMenuListFocused();
return; return;
} }
this.checkOverlayButtonFocused(); this.checkInlineMenuButtonFocused();
} }
/** /**
* Posts a message to the overlay button iframe to check if it is focused. * Posts a message to the overlay button iframe to check if it is focused.
*/ */
private checkOverlayButtonFocused() { private checkInlineMenuButtonFocused() {
this.overlayButtonPort?.postMessage({ command: "checkAutofillOverlayButtonFocused" }); this.inlineMenuButtonPort?.postMessage({ command: "checkAutofillInlineMenuButtonFocused" });
} }
/** /**
* Posts a message to the overlay list iframe to check if it is focused. * Posts a message to the overlay list iframe to check if it is focused.
*/ */
private checkInlineMenuListFocused() { private checkInlineMenuListFocused() {
this.overlayListPort?.postMessage({ command: "checkAutofillOverlayListFocused" }); this.inlineMenuListPort?.postMessage({ command: "checkAutofillOverlayListFocused" });
} }
/** /**
@@ -464,14 +464,14 @@ class OverlayBackground implements OverlayBackgroundInterface {
*/ */
private overlayElementClosed({ overlayElement }: OverlayBackgroundExtensionMessage) { private overlayElementClosed({ overlayElement }: OverlayBackgroundExtensionMessage) {
if (overlayElement === AutofillOverlayElement.Button) { if (overlayElement === AutofillOverlayElement.Button) {
this.overlayButtonPort?.disconnect(); this.inlineMenuButtonPort?.disconnect();
this.overlayButtonPort = null; this.inlineMenuButtonPort = null;
return; return;
} }
this.overlayListPort?.disconnect(); this.inlineMenuListPort?.disconnect();
this.overlayListPort = null; this.inlineMenuListPort = null;
} }
/** /**
@@ -502,7 +502,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
} }
if (overlayElement === AutofillOverlayElement.Button) { if (overlayElement === AutofillOverlayElement.Button) {
this.overlayButtonPort?.postMessage({ this.inlineMenuButtonPort?.postMessage({
command: "updateIframePosition", command: "updateIframePosition",
styles: this.getOverlayButtonPosition(subFrameOffsets), styles: this.getOverlayButtonPosition(subFrameOffsets),
}); });
@@ -510,7 +510,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
this.overlayListPort?.postMessage({ this.inlineMenuListPort?.postMessage({
command: "updateIframePosition", command: "updateIframePosition",
styles: this.getOverlayListPosition(subFrameOffsets), styles: this.getOverlayListPosition(subFrameOffsets),
}); });
@@ -612,8 +612,8 @@ class OverlayBackground implements OverlayBackgroundInterface {
{ frameId: 0 }, { frameId: 0 },
); );
this.overlayButtonPort?.postMessage(portMessage); this.inlineMenuButtonPort?.postMessage(portMessage);
this.overlayListPort?.postMessage(portMessage); this.inlineMenuListPort?.postMessage(portMessage);
} }
/** /**
@@ -673,7 +673,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
* Sends a message to the overlay button to update its authentication status. * Sends a message to the overlay button to update its authentication status.
*/ */
private updateOverlayButtonAuthStatus() { private updateOverlayButtonAuthStatus() {
this.overlayButtonPort?.postMessage({ this.inlineMenuButtonPort?.postMessage({
command: "updateOverlayButtonAuthStatus", command: "updateOverlayButtonAuthStatus",
authStatus: this.userAuthStatus, authStatus: this.userAuthStatus,
}); });
@@ -741,7 +741,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
* Facilitates redirecting focus to the overlay list. * Facilitates redirecting focus to the overlay list.
*/ */
private focusInlineMenuList() { private focusInlineMenuList() {
this.overlayListPort?.postMessage({ command: "focusInlineMenuList" }); this.inlineMenuListPort?.postMessage({ command: "focusInlineMenuList" });
} }
/** /**
@@ -762,8 +762,8 @@ class OverlayBackground implements OverlayBackgroundInterface {
* Gets the translations for the overlay page. * Gets the translations for the overlay page.
*/ */
private getTranslations() { private getTranslations() {
if (!this.overlayPageTranslations) { if (!this.inlineMenuPageTranslations) {
this.overlayPageTranslations = { this.inlineMenuPageTranslations = {
locale: BrowserApi.getUILanguage(), locale: BrowserApi.getUILanguage(),
opensInANewWindow: this.i18nService.translate("opensInANewWindow"), opensInANewWindow: this.i18nService.translate("opensInANewWindow"),
buttonPageTitle: this.i18nService.translate("bitwardenOverlayButton"), buttonPageTitle: this.i18nService.translate("bitwardenOverlayButton"),
@@ -780,7 +780,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
}; };
} }
return this.overlayPageTranslations; return this.inlineMenuPageTranslations;
} }
/** /**
@@ -897,14 +897,14 @@ class OverlayBackground implements OverlayBackgroundInterface {
return sender.tab.id === this.focusedFieldData.tabId && this.overlayLoginCiphers.size > 0; return sender.tab.id === this.focusedFieldData.tabId && this.overlayLoginCiphers.size > 0;
} }
private updateButtonPageColorScheme() { private updateInlineMenuButtonColorScheme() {
this.overlayButtonPort?.postMessage({ this.inlineMenuButtonPort?.postMessage({
command: "updateOverlayPageColorScheme", command: "updateAutofillInlineMenuColorScheme",
}); });
} }
private updateOverlayListHeight(message: OverlayBackgroundExtensionMessage) { private updateInlineMenuListHeight(message: OverlayBackgroundExtensionMessage) {
this.overlayListPort?.postMessage({ this.inlineMenuListPort?.postMessage({
command: "updateIframePosition", command: "updateIframePosition",
styles: message.styles, styles: message.styles,
}); });
@@ -967,9 +967,9 @@ class OverlayBackground implements OverlayBackgroundInterface {
} }
if (isOverlayListPort) { if (isOverlayListPort) {
this.overlayListPort = port; this.inlineMenuListPort = port;
} else { } else {
this.overlayButtonPort = port; this.inlineMenuButtonPort = port;
} }
port.onDisconnect.addListener(this.handlePortOnDisconnect); port.onDisconnect.addListener(this.handlePortOnDisconnect);
@@ -1017,11 +1017,11 @@ class OverlayBackground implements OverlayBackgroundInterface {
let handler: CallableFunction | undefined; let handler: CallableFunction | undefined;
if (port.name === AutofillOverlayPort.ButtonMessageConnector) { if (port.name === AutofillOverlayPort.ButtonMessageConnector) {
handler = this.overlayButtonPortMessageHandlers[command]; handler = this.inlineMenuButtonPortMessageHandlers[command];
} }
if (port.name === AutofillOverlayPort.ListMessageConnector) { if (port.name === AutofillOverlayPort.ListMessageConnector) {
handler = this.overlayListPortMessageHandlers[command]; handler = this.inlineMenuListPortMessageHandlers[command];
} }
if (!handler) { if (!handler) {
@@ -1033,11 +1033,11 @@ class OverlayBackground implements OverlayBackgroundInterface {
private handlePortOnDisconnect = (port: chrome.runtime.Port) => { private handlePortOnDisconnect = (port: chrome.runtime.Port) => {
if (port.name === AutofillOverlayPort.List) { if (port.name === AutofillOverlayPort.List) {
this.overlayListPort = null; this.inlineMenuListPort = null;
} }
if (port.name === AutofillOverlayPort.Button) { if (port.name === AutofillOverlayPort.Button) {
this.overlayButtonPort = null; this.inlineMenuButtonPort = null;
} }
}; };
} }

4
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts
View File

@@ -13,13 +13,13 @@ type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & {
type OverlayButtonWindowMessageHandlers = { type OverlayButtonWindowMessageHandlers = {
[key: string]: CallableFunction; [key: string]: CallableFunction;
initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void; initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void;
checkAutofillOverlayButtonFocused: () => void; checkAutofillInlineMenuButtonFocused: () => void;
updateAutofillOverlayButtonAuthStatus: ({ updateAutofillOverlayButtonAuthStatus: ({
message, message,
}: { }: {
message: UpdateAuthStatusMessage; message: UpdateAuthStatusMessage;
}) => void; }) => void;
updateOverlayPageColorScheme: ({ message }: { message: OverlayButtonMessage }) => void; updateAutofillInlineMenuColorScheme: ({ message }: { message: OverlayButtonMessage }) => void;
}; };
export { export {

4
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts
View File

@@ -7,7 +7,7 @@ type AutofillOverlayIframeExtensionMessage = {
type AutofillOverlayIframeWindowMessageHandlers = { type AutofillOverlayIframeWindowMessageHandlers = {
[key: string]: CallableFunction; [key: string]: CallableFunction;
updateAutofillOverlayListHeight: (message: AutofillOverlayIframeExtensionMessage) => void; updateAutofillInlineMenuListHeight: (message: AutofillOverlayIframeExtensionMessage) => void;
}; };
type AutofillOverlayIframeExtensionMessageParam = { type AutofillOverlayIframeExtensionMessageParam = {
@@ -20,7 +20,7 @@ type BackgroundPortMessageHandlers = {
initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateInlineMenuHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateInlineMenuHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateOverlayPageColorScheme: () => void; updateAutofillInlineMenuColorScheme: () => void;
}; };
interface AutofillOverlayIframeService { interface AutofillOverlayIframeService {

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

@@ -404,14 +404,14 @@ describe("AutofillOverlayIframeService", () => {
it("updates the button based on the web page's color scheme", () => { it("updates the button based on the web page's color scheme", () => {
sendPortMessage(portSpy, { sendPortMessage(portSpy, {
command: "updateOverlayPageColorScheme", command: "updateAutofillInlineMenuColorScheme",
}); });
expect( expect(
autofillOverlayIframeService["iframe"].contentWindow.postMessage, autofillOverlayIframeService["iframe"].contentWindow.postMessage,
).toHaveBeenCalledWith( ).toHaveBeenCalledWith(
{ {
command: "updateOverlayPageColorScheme", command: "updateAutofillInlineMenuColorScheme",
colorScheme: "normal", colorScheme: "normal",
}, },
"*", "*",

6
apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts
View File

@@ -46,7 +46,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
initAutofillOverlayList: ({ message }) => this.initAutofillOverlay(message), initAutofillOverlayList: ({ message }) => this.initAutofillOverlay(message),
updateIframePosition: ({ message }) => this.updateIframePosition(message.styles), updateIframePosition: ({ message }) => this.updateIframePosition(message.styles),
updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles), updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles),
updateOverlayPageColorScheme: () => this.updateOverlayPageColorScheme(), updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(),
}; };
constructor( constructor(
@@ -257,13 +257,13 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
* to update its color scheme. Will default to "normal" if the meta tag * to update its color scheme. Will default to "normal" if the meta tag
* does not exist. * does not exist.
*/ */
private updateOverlayPageColorScheme() { private updateAutofillInlineMenuColorScheme() {
const colorSchemeValue = globalThis.document const colorSchemeValue = globalThis.document
.querySelector("meta[name='color-scheme']") .querySelector("meta[name='color-scheme']")
?.getAttribute("content"); ?.getAttribute("content");
this.postMessageToIFrame({ this.postMessageToIFrame({
command: "updateOverlayPageColorScheme", command: "updateAutofillInlineMenuColorScheme",
colorScheme: colorSchemeValue || "normal", colorScheme: colorSchemeValue || "normal",
}); });
} }

6
apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts
View File

@@ -70,7 +70,7 @@ describe("AutofillOverlayButton", () => {
it("does not post a message to close the autofill overlay if the element is focused during the focus check", async () => { it("does not post a message to close the autofill overlay if the element is focused during the focus check", async () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
postWindowMessage({ command: "checkAutofillOverlayButtonFocused" }); postWindowMessage({ command: "checkAutofillInlineMenuButtonFocused" });
await flushPromises(); await flushPromises();
expect(globalThis.parent.postMessage).not.toHaveBeenCalledWith({ expect(globalThis.parent.postMessage).not.toHaveBeenCalledWith({
@@ -81,7 +81,7 @@ describe("AutofillOverlayButton", () => {
it("posts a message to close the autofill overlay if the element is not focused during the focus check", async () => { it("posts a message to close the autofill overlay if the element is not focused during the focus check", async () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
postWindowMessage({ command: "checkAutofillOverlayButtonFocused" }); postWindowMessage({ command: "checkAutofillInlineMenuButtonFocused" });
await flushPromises(); await flushPromises();
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
@@ -109,7 +109,7 @@ describe("AutofillOverlayButton", () => {
globalThis.document.head.append(colorSchemeMetaTag); globalThis.document.head.append(colorSchemeMetaTag);
postWindowMessage({ postWindowMessage({
command: "updateOverlayPageColorScheme", command: "updateAutofillInlineMenuColorScheme",
colorScheme: "dark", colorScheme: "dark",
}); });
await flushPromises(); await flushPromises();

6
apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts
View File

@@ -19,10 +19,10 @@ class AutofillOverlayButton extends AutofillOverlayPageElement {
private readonly logoLockedIconElement: HTMLElement; private readonly logoLockedIconElement: HTMLElement;
private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = { private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = {
initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message), initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message),
checkAutofillOverlayButtonFocused: () => this.checkButtonFocused(), checkAutofillInlineMenuButtonFocused: () => this.checkButtonFocused(),
updateAutofillOverlayButtonAuthStatus: ({ message }) => updateAutofillOverlayButtonAuthStatus: ({ message }) =>
this.updateAuthStatus(message.authStatus), this.updateAuthStatus(message.authStatus),
updateOverlayPageColorScheme: ({ message }) => this.updatePageColorScheme(message), updateAutofillInlineMenuColorScheme: ({ message }) => this.updatePageColorScheme(message),
}; };
constructor() { constructor() {
@@ -63,7 +63,7 @@ class AutofillOverlayButton extends AutofillOverlayPageElement {
this.getTranslation("toggleBitwardenVaultOverlay"), this.getTranslation("toggleBitwardenVaultOverlay"),
); );
this.buttonElement.addEventListener(EVENTS.CLICK, this.handleButtonElementClick); this.buttonElement.addEventListener(EVENTS.CLICK, this.handleButtonElementClick);
this.postMessageToParent({ command: "updateOverlayPageColorScheme" }); this.postMessageToParent({ command: "updateAutofillInlineMenuColorScheme" });
this.updateAuthStatus(authStatus); this.updateAuthStatus(authStatus);

8
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
View File

@@ -289,7 +289,7 @@ describe("AutofillOverlayList", () => {
postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey })); postWindowMessage(createInitAutofillOverlayListMessageMock({ portKey }));
}); });
it("does not post a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is currently focused", () => { it("does not post a `checkAutofillInlineMenuButtonFocused` message to the parent if the overlay is currently focused", () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
postWindowMessage({ command: "checkAutofillOverlayListFocused" }); postWindowMessage({ command: "checkAutofillOverlayListFocused" });
@@ -297,13 +297,13 @@ describe("AutofillOverlayList", () => {
expect(globalThis.parent.postMessage).not.toHaveBeenCalled(); expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
}); });
it("posts a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is not currently focused", () => { it("posts a `checkAutofillInlineMenuButtonFocused` message to the parent if the overlay is not currently focused", () => {
jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false); jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
postWindowMessage({ command: "checkAutofillOverlayListFocused" }); postWindowMessage({ command: "checkAutofillOverlayListFocused" });
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
{ command: "checkAutofillOverlayButtonFocused", portKey }, { command: "checkAutofillInlineMenuButtonFocused", portKey },
"*", "*",
); );
}); });
@@ -461,7 +461,7 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]); autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
expect(globalThis.parent.postMessage).toHaveBeenCalledWith( expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
{ command: "updateAutofillOverlayListHeight", styles: { height: "300px" }, portKey }, { command: "updateAutofillInlineMenuListHeight", styles: { height: "300px" }, portKey },
"*", "*",
); );
}); });

4
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts
View File

@@ -487,7 +487,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
return; return;
} }
this.postMessageToParent({ command: "checkAutofillOverlayButtonFocused" }); this.postMessageToParent({ command: "checkAutofillInlineMenuButtonFocused" });
} }
/** /**
@@ -545,7 +545,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
const { height } = entry.contentRect; const { height } = entry.contentRect;
this.postMessageToParent({ this.postMessageToParent({
command: "updateAutofillOverlayListHeight", command: "updateAutofillInlineMenuListHeight",
styles: { height: `${height}px` }, styles: { height: `${height}px` },
}); });
break; break;