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

[PM-5189] Refactoring implementation

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-06-11 10:03:30 -05:00
parent 710475d1c4
commit 3a8b13917b
10 changed files with 128 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ export type OverlayAddNewItemMessage = {
};
export type CloseInlineMenuMessage = {
forceCloseAutofillInlineMenu?: boolean;
forceCloseInlineMenu?: boolean;
overlayElement?: string;
};
@@ -58,7 +58,7 @@ export type OverlayBackgroundExtensionMessage = {
tab?: chrome.tabs.Tab;
sender?: string;
details?: AutofillPageDetails;
isAutofillInlineMenuHidden?: boolean;
isInlineMenuHidden?: boolean;
setTransparentInlineMenu?: boolean;
isFieldCurrentlyFocused?: boolean;
isFieldCurrentlyFilling?: boolean;

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

@@ -819,7 +819,7 @@ describe("OverlayBackground", () => {
{
command: "openAutofillInlineMenu",
isFocusingFieldElement: false,
isOpeningFullAutofillInlineMenu: false,
isOpeningFullInlineMenu: false,
authStatus: AuthenticationStatus.Unlocked,
},
{ frameId: 0 },
@@ -839,7 +839,7 @@ describe("OverlayBackground", () => {
{
command: "openAutofillInlineMenu",
isFocusingFieldElement: false,
isOpeningFullAutofillInlineMenu: false,
isOpeningFullInlineMenu: false,
authStatus: AuthenticationStatus.Unlocked,
},
{ frameId: 10 },
@@ -872,7 +872,7 @@ describe("OverlayBackground", () => {
sendMockExtensionMessage(
{
command: "closeAutofillInlineMenu",
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
overlayElement: AutofillOverlayElement.Button,
},
sender,
@@ -899,7 +899,7 @@ describe("OverlayBackground", () => {
sendMockExtensionMessage(
{
command: "closeAutofillInlineMenu",
forceCloseAutofillInlineMenu: false,
forceCloseInlineMenu: false,
overlayElement: AutofillOverlayElement.Button,
},
sender,
@@ -1156,7 +1156,7 @@ describe("OverlayBackground", () => {
it("posts a message to the overlay button and list which hides the menu", async () => {
const message = {
command: "toggleAutofillInlineMenuHidden",
isAutofillInlineMenuHidden: true,
isInlineMenuHidden: true,
setTransparentInlineMenu: false,
};
@@ -1375,7 +1375,7 @@ describe("OverlayBackground", () => {
{
command: "openAutofillInlineMenu",
isFocusingFieldElement: true,
isOpeningFullAutofillInlineMenu: false,
isOpeningFullInlineMenu: false,
authStatus: AuthenticationStatus.Unlocked,
},
{ frameId: 0 },
@@ -1476,7 +1476,7 @@ describe("OverlayBackground", () => {
{
command: "openAutofillInlineMenu",
isFocusingFieldElement: false,
isOpeningFullAutofillInlineMenu: true,
isOpeningFullInlineMenu: true,
authStatus: AuthenticationStatus.Unlocked,
},
{ frameId: 0 },

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

@@ -476,16 +476,16 @@ export class OverlayBackground implements OverlayBackgroundInterface {
* Sends a message to the sender tab to close the autofill inline menu.
*
* @param sender - The sender of the port message
* @param forceCloseAutofillInlineMenu - Identifies whether the inline menu should be forced closed
* @param forceCloseInlineMenu - Identifies whether the inline menu should be forced closed
* @param overlayElement - The overlay element to close, either the list or button
*/
private closeInlineMenu(
sender: chrome.runtime.MessageSender,
{ forceCloseAutofillInlineMenu, overlayElement }: CloseInlineMenuMessage = {},
{ forceCloseInlineMenu, overlayElement }: CloseInlineMenuMessage = {},
) {
const command = "closeAutofillInlineMenu";
const sendOptions = { frameId: 0 };
if (forceCloseAutofillInlineMenu) {
if (forceCloseInlineMenu) {
void BrowserApi.tabSendMessage(sender.tab, { command, overlayElement }, sendOptions);
return;
}
@@ -688,10 +688,10 @@ export class OverlayBackground implements OverlayBackgroundInterface {
* @param sender - The sender of the extension message
*/
private updateInlineMenuHidden(
{ isAutofillInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage,
{ isInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage,
sender: chrome.runtime.MessageSender,
) {
const display = isAutofillInlineMenuHidden ? "none" : "block";
const display = isInlineMenuHidden ? "none" : "block";
let styles: { display: string; opacity?: number } = { display };
if (typeof setTransparentInlineMenu !== "undefined") {
@@ -701,7 +701,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
void BrowserApi.tabSendMessage(
sender.tab,
{ command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden: isAutofillInlineMenuHidden },
{ command: "toggleAutofillInlineMenuHidden", isInlineMenuHidden },
{ frameId: 0 },
);
@@ -714,12 +714,9 @@ export class OverlayBackground implements OverlayBackgroundInterface {
* Sends a message to the currently active tab to open the autofill inline menu.
*
* @param isFocusingFieldElement - Identifies whether the field element should be focused when the inline menu is opened
* @param isOpeningFullAutofillInlineMenu - Identifies whether the full inline menu should be forced open regardless of other states
* @param isOpeningFullInlineMenu - Identifies whether the full inline menu should be forced open regardless of other states
*/
private async openInlineMenu(
isFocusingFieldElement = false,
isOpeningFullAutofillInlineMenu = false,
) {
private async openInlineMenu(isFocusingFieldElement = false, isOpeningFullInlineMenu = false) {
const currentTab = await BrowserApi.getTabFromCurrentWindowId();
await BrowserApi.tabSendMessage(
@@ -727,7 +724,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
{
command: "openAutofillInlineMenu",
isFocusingFieldElement,
isOpeningFullAutofillInlineMenu,
isOpeningFullInlineMenu,
authStatus: await this.getAuthStatus(),
},
{

4
apps/browser/src/autofill/content/abstractions/autofill-init.ts
View File

@@ -16,10 +16,10 @@ export type AutofillExtensionMessage = {
overlayElement?: string;
isFocusingFieldElement?: boolean;
authStatus?: AuthenticationStatus;
isOpeningFullAutofillInlineMenu?: boolean;
isOpeningFullInlineMenu?: boolean;
data?: {
direction?: "previous" | "next" | "current";
forceCloseAutofillInlineMenu?: boolean;
forceCloseInlineMenu?: boolean;
inlineMenuVisibility?: number;
};
};

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

@@ -327,7 +327,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
* Triggers a forced closure of the autofill inline menu. This is used when the
* mutation observer is triggered excessively.
*/
private forceCloseAutofillInlineMenu() {
private forceCloseInlineMenu() {
void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
}
@@ -347,7 +347,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
this.delayedCloseTimeout = globalThis.setTimeout(() => {
this.updateElementStyles(this.iframe, { transition: this.fadeInOpacityTransition });
this.forceCloseAutofillInlineMenu();
this.forceCloseInlineMenu();
}, 100);
}
@@ -366,7 +366,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
}
if (this.foreignMutationsCount >= 10) {
this.forceCloseAutofillInlineMenu();
this.forceCloseInlineMenu();
break;
}
@@ -421,7 +421,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
if (this.mutationObserverIterations > 20) {
clearTimeout(this.mutationObserverIterationsResetTimeout);
resetCounters();
this.forceCloseAutofillInlineMenu();
this.forceCloseInlineMenu();
return true;
}

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

@@ -7,7 +7,7 @@ import { ElementWithOpId, FormFieldElement } from "../../types";
export type OpenAutofillInlineMenuOptions = {
isFocusingFieldElement?: boolean;
isOpeningFullAutofillInlineMenu?: boolean;
isOpeningFullInlineMenu?: boolean;
authStatus?: AuthenticationStatus;
};
@@ -30,7 +30,7 @@ export interface AutofillOverlayContentService {
pageDetailsUpdateRequired: boolean;
messageHandlers: AutofillOverlayContentExtensionMessageHandlers;
init(): void;
setupAutofillInlineMenuListenerOnField(
setupInlineMenuListenerOnField(
autofillFieldElement: ElementWithOpId<FormFieldElement>,
autofillFieldData: AutofillField,
): Promise<void>;

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

@@ -107,7 +107,7 @@ describe("AutofillOverlayContentService", () => {
});
});
describe("setupAutofillInlineMenuListenerOnField", () => {
describe("setupInlineMenuListenerOnField", () => {
let autofillFieldElement: ElementWithOpId<FormFieldElement>;
let autofillFieldData: AutofillField;
@@ -141,7 +141,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that are readonly", async () => {
autofillFieldData.readonly = true;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -152,7 +152,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that contain a disabled attribute", async () => {
autofillFieldData.disabled = true;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -163,7 +163,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that are not viewable", async () => {
autofillFieldData.viewable = false;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -175,7 +175,7 @@ describe("AutofillOverlayContentService", () => {
AutoFillConstants.ExcludedInlineMenuTypes.forEach(async (excludedType) => {
autofillFieldData.type = excludedType;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -187,7 +187,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that contain the keyword `search`", async () => {
autofillFieldData.placeholder = "search";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -198,7 +198,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that contain the keyword `captcha` ", async () => {
autofillFieldData.placeholder = "captcha";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -209,7 +209,7 @@ describe("AutofillOverlayContentService", () => {
it("ignores fields that do not appear as a login field", async () => {
autofillFieldData.placeholder = "another-type-of-field";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -221,7 +221,7 @@ describe("AutofillOverlayContentService", () => {
it("skips setup on fields that have been previously set up", async () => {
autofillOverlayContentService["formFieldElements"].add(autofillFieldElement);
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -234,7 +234,7 @@ describe("AutofillOverlayContentService", () => {
sendExtensionMessageSpy.mockResolvedValueOnce(undefined);
autofillOverlayContentService["inlineMenuVisibility"] = undefined;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -249,7 +249,7 @@ describe("AutofillOverlayContentService", () => {
sendExtensionMessageSpy.mockResolvedValueOnce(AutofillOverlayVisibility.OnFieldFocus);
autofillOverlayContentService["inlineMenuVisibility"] = undefined;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -272,7 +272,7 @@ describe("AutofillOverlayContentService", () => {
"op-1-username-field-focus-handler": focusHandler,
};
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -301,7 +301,7 @@ describe("AutofillOverlayContentService", () => {
describe("form field blur event listener", () => {
beforeEach(async () => {
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -324,7 +324,7 @@ describe("AutofillOverlayContentService", () => {
describe("form field keyup event listener", () => {
beforeEach(async () => {
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -335,7 +335,7 @@ describe("AutofillOverlayContentService", () => {
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Escape" }));
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -377,7 +377,7 @@ describe("AutofillOverlayContentService", () => {
);
const openAutofillOverlaySpy = jest.spyOn(
autofillOverlayContentService as any,
"openAutofillInlineMenu",
"openInlineMenu",
);
jest
.spyOn(autofillOverlayContentService as any, "isInlineMenuListVisible")
@@ -388,7 +388,7 @@ describe("AutofillOverlayContentService", () => {
expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
expect(openAutofillOverlaySpy).toHaveBeenCalledWith({
isOpeningFullAutofillInlineMenu: true,
isOpeningFullInlineMenu: true,
});
expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillInlineMenuList");
@@ -420,7 +420,7 @@ describe("AutofillOverlayContentService", () => {
) as ElementWithOpId<HTMLSpanElement>;
jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
spanAutofillFieldElement,
autofillFieldData,
);
@@ -434,7 +434,7 @@ describe("AutofillOverlayContentService", () => {
autofillOverlayContentService["mostRecentlyFocusedField"] =
mock<ElementWithOpId<FormFieldElement>>();
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -448,7 +448,7 @@ describe("AutofillOverlayContentService", () => {
});
it("stores the field as a user filled field if the form field data indicates that it is for a username", async () => {
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -464,7 +464,7 @@ describe("AutofillOverlayContentService", () => {
"password-field",
) as ElementWithOpId<FormFieldElement>;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
passwordFieldElement,
autofillFieldData,
);
@@ -479,7 +479,7 @@ describe("AutofillOverlayContentService", () => {
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
(autofillFieldElement as HTMLInputElement).value = "test";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -488,7 +488,7 @@ describe("AutofillOverlayContentService", () => {
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -500,7 +500,7 @@ describe("AutofillOverlayContentService", () => {
(autofillFieldElement as HTMLInputElement).value = "test";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -509,37 +509,37 @@ describe("AutofillOverlayContentService", () => {
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
it("opens the autofill inline menu if the form field is empty", async () => {
jest.spyOn(autofillOverlayContentService as any, "openAutofillInlineMenu");
jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
(autofillFieldElement as HTMLInputElement).value = "";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
autofillFieldElement.dispatchEvent(new Event("input"));
await flushPromises();
expect(autofillOverlayContentService["openAutofillInlineMenu"]).toHaveBeenCalled();
expect(autofillOverlayContentService["openInlineMenu"]).toHaveBeenCalled();
});
it("opens the autofill inline menu if the form field is empty and the user is authed", async () => {
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
jest.spyOn(autofillOverlayContentService as any, "openAutofillInlineMenu");
jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
(autofillFieldElement as HTMLInputElement).value = "";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
autofillFieldElement.dispatchEvent(new Event("input"));
await flushPromises();
expect(autofillOverlayContentService["openAutofillInlineMenu"]).toHaveBeenCalled();
expect(autofillOverlayContentService["openInlineMenu"]).toHaveBeenCalled();
});
it("opens the autofill inline menu if the form field is empty and the overlay ciphers are not populated", async () => {
@@ -547,17 +547,17 @@ describe("AutofillOverlayContentService", () => {
jest
.spyOn(autofillOverlayContentService as any, "isInlineMenuCiphersPopulated")
.mockResolvedValue(false);
jest.spyOn(autofillOverlayContentService as any, "openAutofillInlineMenu");
jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
(autofillFieldElement as HTMLInputElement).value = "";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
autofillFieldElement.dispatchEvent(new Event("input"));
await flushPromises();
expect(autofillOverlayContentService["openAutofillInlineMenu"]).toHaveBeenCalled();
expect(autofillOverlayContentService["openInlineMenu"]).toHaveBeenCalled();
});
});
@@ -566,7 +566,7 @@ describe("AutofillOverlayContentService", () => {
jest
.spyOn(autofillOverlayContentService as any, "triggerFormFieldFocusedAction")
.mockImplementation();
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -622,7 +622,7 @@ describe("AutofillOverlayContentService", () => {
autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
autofillOverlayContentService["inlineMenuVisibility"] =
AutofillOverlayVisibility.OnFieldFocus;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -634,7 +634,7 @@ describe("AutofillOverlayContentService", () => {
});
it("updates the most recently focused field", async () => {
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -651,7 +651,7 @@ describe("AutofillOverlayContentService", () => {
it("removes the overlay list if the autofill visibility is set to onClick", async () => {
autofillOverlayContentService["inlineMenuVisibility"] =
AutofillOverlayVisibility.OnButtonClick;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -661,7 +661,7 @@ describe("AutofillOverlayContentService", () => {
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -670,7 +670,7 @@ describe("AutofillOverlayContentService", () => {
"input",
) as ElementWithOpId<HTMLInputElement>;
(autofillFieldElement as HTMLInputElement).value = "test";
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -680,7 +680,7 @@ describe("AutofillOverlayContentService", () => {
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -688,7 +688,7 @@ describe("AutofillOverlayContentService", () => {
(autofillFieldElement as HTMLInputElement).value = "";
autofillOverlayContentService["inlineMenuVisibility"] =
AutofillOverlayVisibility.OnFieldFocus;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -704,7 +704,7 @@ describe("AutofillOverlayContentService", () => {
autofillOverlayContentService["inlineMenuVisibility"] =
AutofillOverlayVisibility.OnFieldFocus;
jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -722,7 +722,7 @@ describe("AutofillOverlayContentService", () => {
jest
.spyOn(autofillOverlayContentService as any, "isInlineMenuCiphersPopulated")
.mockReturnValue(true);
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -739,7 +739,7 @@ describe("AutofillOverlayContentService", () => {
describe("hidden form field focus event", () => {
it("sets up the inline menu listeners if the autofill field data is in the cache", async () => {
autofillFieldData.viewable = false;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -772,7 +772,7 @@ describe("AutofillOverlayContentService", () => {
it("skips setting up the inline menu listeners if the autofill field data is not in the cache", async () => {
autofillFieldData.viewable = false;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -808,7 +808,7 @@ describe("AutofillOverlayContentService", () => {
writable: true,
});
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -822,7 +822,7 @@ describe("AutofillOverlayContentService", () => {
it("sets the most recently focused field to the passed form field element if the value is not set", async () => {
autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
await autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -883,7 +883,7 @@ describe("AutofillOverlayContentService", () => {
await flushPromises();
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: true,
isInlineMenuHidden: true,
setTransparentInlineMenu: false,
});
});
@@ -912,11 +912,11 @@ describe("AutofillOverlayContentService", () => {
jest.advanceTimersByTime(800);
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: false,
isInlineMenuHidden: false,
setTransparentInlineMenu: true,
});
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -978,7 +978,7 @@ describe("AutofillOverlayContentService", () => {
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -1001,7 +1001,7 @@ describe("AutofillOverlayContentService", () => {
await flushPromises();
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
});
@@ -1016,7 +1016,7 @@ describe("AutofillOverlayContentService", () => {
autofillOverlayContentService["handleVisibilityChangeEvent"]();
expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
@@ -1029,7 +1029,7 @@ describe("AutofillOverlayContentService", () => {
autofillOverlayContentService["handleVisibilityChangeEvent"]();
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
});
});
@@ -1058,7 +1058,7 @@ describe("AutofillOverlayContentService", () => {
});
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
autofillOverlayContentService.setupAutofillInlineMenuListenerOnField(
autofillOverlayContentService.setupInlineMenuListenerOnField(
autofillFieldElement,
autofillFieldData,
);
@@ -1212,7 +1212,7 @@ describe("AutofillOverlayContentService", () => {
sendMockExtensionMessage({
command: "openAutofillInlineMenu",
isOpeningFullAutofillInlineMenu: false,
isOpeningFullInlineMenu: false,
});
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuPosition", {
@@ -1232,7 +1232,7 @@ describe("AutofillOverlayContentService", () => {
sendMockExtensionMessage({
command: "openAutofillInlineMenu",
isOpeningFullAutofillInlineMenu: true,
isOpeningFullInlineMenu: true,
});
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuPosition", {
@@ -1247,7 +1247,7 @@ describe("AutofillOverlayContentService", () => {
jest.spyOn(autofillOverlayContentService as any, "sendExtensionMessage");
autofillOverlayContentService.pageDetailsUpdateRequired = true;
autofillOverlayContentService["openAutofillInlineMenu"]();
autofillOverlayContentService["openInlineMenu"]();
sendMockExtensionMessage({ command: "openAutofillInlineMenu" });
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("bgCollectPageDetails", {

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

@@ -41,7 +41,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
private autofillFieldKeywordsMap: WeakMap<AutofillField, string> = new WeakMap();
private eventHandlersMemo: { [key: string]: EventListener } = {};
private readonly extensionMessageHandlers: AutofillOverlayContentExtensionMessageHandlers = {
openAutofillInlineMenu: ({ message }) => this.openAutofillInlineMenu(message),
openAutofillInlineMenu: ({ message }) => this.openInlineMenu(message),
addNewVaultItemFromOverlay: () => this.addNewVaultItem(),
blurMostRecentlyFocusedField: () => this.blurMostRecentlyFocusedField(),
unsetMostRecentlyFocusedField: () => this.unsetMostRecentlyFocusedField(),
@@ -49,8 +49,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
bgVaultItemRepromptPopoutOpened: () => this.blurMostRecentlyFocusedField(true),
redirectAutofillInlineMenuFocusOut: ({ message }) =>
this.redirectInlineMenuFocusOut(message?.data?.direction),
updateAutofillInlineMenuVisibility: ({ message }) =>
this.updateAutofillInlineMenuVisibility(message),
updateAutofillInlineMenuVisibility: ({ message }) => this.updateInlineMenuVisibility(message),
getSubFrameOffsets: ({ message }) => this.getSubFrameOffsets(message),
getSubFrameOffsetsFromWindowMessage: ({ message }) =>
this.getSubFrameOffsetsFromWindowMessage(message),
@@ -85,7 +84,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
* @param formFieldElement - Form field elements identified during the page details collection process.
* @param autofillFieldData - Autofill field data captured from the form field element.
*/
async setupAutofillInlineMenuListenerOnField(
async setupInlineMenuListenerOnField(
formFieldElement: ElementWithOpId<FormFieldElement>,
autofillFieldData: AutofillField,
) {
@@ -104,7 +103,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
}
if (!this.inlineMenuVisibility) {
await this.getAutofillInlineMenuVisibility();
await this.getInlineMenuVisibility();
}
this.setupFormFieldElementEventListeners(formFieldElement);
@@ -122,8 +121,8 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
*
* @param options - Options for opening the autofill inline menu.
*/
openAutofillInlineMenu(options: OpenAutofillInlineMenuOptions = {}) {
const { isFocusingFieldElement, isOpeningFullAutofillInlineMenu, authStatus } = options;
openInlineMenu(options: OpenAutofillInlineMenuOptions = {}) {
const { isFocusingFieldElement, isOpeningFullInlineMenu, authStatus } = options;
// TODO: It's likely that this method functions more cleanly from the scope of the background. Will address this in a future PR when time allows.
if (!this.mostRecentlyFocusedField) {
return;
@@ -146,13 +145,13 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
if (
this.inlineMenuVisibility === AutofillOverlayVisibility.OnButtonClick &&
!isOpeningFullAutofillInlineMenu
!isOpeningFullInlineMenu
) {
this.updateAutofillInlineMenuButtonPosition();
this.updateInlineMenuButtonPosition();
return;
}
this.updateAutofillInlineMenuElementsPosition();
this.updateInlineMenuElementsPosition();
}
/**
@@ -324,7 +323,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
const eventCode = event.code;
if (eventCode === "Escape") {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
return;
}
@@ -350,7 +349,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
private async focusInlineMenuList() {
if (this.mostRecentlyFocusedField && !(await this.isInlineMenuListVisible())) {
await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
this.openAutofillInlineMenu({ isOpeningFullAutofillInlineMenu: true });
this.openInlineMenu({ isOpeningFullInlineMenu: true });
globalThis.setTimeout(() => this.sendExtensionMessage("focusAutofillInlineMenuList"), 125);
return;
}
@@ -384,15 +383,15 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
this.storeModifiedFormElement(formFieldElement);
if (await this.hideAutofillInlineMenuListOnFilledField(formFieldElement)) {
if (await this.hideInlineMenuListOnFilledField(formFieldElement)) {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
return;
}
this.openAutofillInlineMenu();
this.openInlineMenu();
}
/**
@@ -476,22 +475,16 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
if (
this.inlineMenuVisibility === AutofillOverlayVisibility.OnButtonClick ||
(initiallyFocusedField !== this.mostRecentlyFocusedField &&
(await this.hideAutofillInlineMenuListOnFilledField(
formFieldElement as FillableFormFieldElement,
)))
(await this.hideInlineMenuListOnFilledField(formFieldElement as FillableFormFieldElement)))
) {
await this.sendExtensionMessage("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
}
if (
await this.hideAutofillInlineMenuListOnFilledField(
formFieldElement as FillableFormFieldElement,
)
) {
this.updateAutofillInlineMenuButtonPosition();
if (await this.hideInlineMenuListOnFilledField(formFieldElement as FillableFormFieldElement)) {
this.updateInlineMenuButtonPosition();
return;
}
@@ -563,15 +556,15 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
/**
* Updates the position of both the inline menu button and list.
*/
private updateAutofillInlineMenuElementsPosition() {
this.updateAutofillInlineMenuButtonPosition();
this.updateAutofillInlineMenuListPosition();
private updateInlineMenuElementsPosition() {
this.updateInlineMenuButtonPosition();
this.updateInlineMenuListPosition();
}
/**
* Updates the position of the inline menu button.
*/
private updateAutofillInlineMenuButtonPosition() {
private updateInlineMenuButtonPosition() {
void this.sendExtensionMessage("updateAutofillInlineMenuPosition", {
overlayElement: AutofillOverlayElement.Button,
});
@@ -580,7 +573,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
/**
* Updates the position of the inline menu list.
*/
private updateAutofillInlineMenuListPosition() {
private updateInlineMenuListPosition() {
void this.sendExtensionMessage("updateAutofillInlineMenuPosition", {
overlayElement: AutofillOverlayElement.List,
});
@@ -592,12 +585,9 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
* @param isHidden - Indicates if the inline menu elements should be hidden.
* @param setTransparentInlineMenu - Indicates if the inline menu is closing.
*/
private toggleAutofillInlineMenuHidden(
isHidden: boolean,
setTransparentInlineMenu: boolean = false,
) {
private toggleInlineMenuHidden(isHidden: boolean, setTransparentInlineMenu: boolean = false) {
void this.sendExtensionMessage("toggleAutofillInlineMenuHidden", {
isAutofillInlineMenuHidden: isHidden,
isInlineMenuHidden: isHidden,
setTransparentInlineMenu,
});
}
@@ -766,7 +756,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
autofillFieldData.readonly = getAttributeBoolean(formFieldElement, "disabled");
autofillFieldData.disabled = getAttributeBoolean(formFieldElement, "disabled");
autofillFieldData.viewable = true;
void this.setupAutofillInlineMenuListenerOnField(formFieldElement, autofillFieldData);
void this.setupInlineMenuListenerOnField(formFieldElement, autofillFieldData);
}
this.removeHiddenFieldFallbackListener(formFieldElement);
@@ -777,7 +767,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
* If the setting is not found, a default value of OnFieldFocus will be used
* @private
*/
private async getAutofillInlineMenuVisibility() {
private async getInlineMenuVisibility() {
const inlineMenuVisibility = await this.sendExtensionMessage("getAutofillInlineMenuVisibility");
this.inlineMenuVisibility = inlineMenuVisibility || AutofillOverlayVisibility.OnFieldFocus;
}
@@ -814,7 +804,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
}
this.rebuildSubFrameOffsets();
this.toggleAutofillInlineMenuHidden(true);
this.toggleInlineMenuHidden(true);
this.clearUserInteractionEventTimeout();
this.userInteractionEventTimeout = globalThis.setTimeout(
this.triggerOverlayRepositionUpdates,
@@ -839,25 +829,25 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
*/
private triggerOverlayRepositionUpdates = async () => {
if (!this.recentlyFocusedFieldIsCurrentlyFocused()) {
this.toggleAutofillInlineMenuHidden(false, true);
this.toggleInlineMenuHidden(false, true);
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
return;
}
await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
this.updateAutofillInlineMenuElementsPosition();
this.updateInlineMenuElementsPosition();
globalThis.setTimeout(async () => {
this.toggleAutofillInlineMenuHidden(false, true);
this.toggleInlineMenuHidden(false, true);
if (
await this.hideAutofillInlineMenuListOnFilledField(
await this.hideInlineMenuListOnFilledField(
this.mostRecentlyFocusedField as FillableFormFieldElement,
)
) {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
}
}, 50);
@@ -868,7 +858,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
}
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
};
@@ -909,7 +899,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
*
* @param formFieldElement - The form field element that triggered the focus event.
*/
private async hideAutofillInlineMenuListOnFilledField(
private async hideInlineMenuListOnFilledField(
formFieldElement?: FillableFormFieldElement,
): Promise<boolean> {
return (
@@ -948,7 +938,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
this.unsetMostRecentlyFocusedField();
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseAutofillInlineMenu: true,
forceCloseInlineMenu: true,
});
};
@@ -1100,7 +1090,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
*
* @param data - The data object from the extension message.
*/
private updateAutofillInlineMenuVisibility({ data }: AutofillExtensionMessage) {
private updateInlineMenuVisibility({ data }: AutofillExtensionMessage) {
if (!isNaN(data?.inlineMenuVisibility)) {
this.inlineMenuVisibility = data.inlineMenuVisibility;
}

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

@@ -2558,7 +2558,7 @@ describe("CollectAutofillContentService", () => {
);
setupAutofillOverlayListenerOnFieldSpy = jest.spyOn(
collectAutofillContentService["autofillOverlayContentService"],
"setupAutofillInlineMenuListenerOnField",
"setupInlineMenuListenerOnField",
);
});

11
apps/browser/src/autofill/services/collect-autofill-content.service.ts
View File

@@ -280,7 +280,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
autofillField.viewable = await this.domElementVisibilityService.isFormFieldViewable(element);
if (!currentViewableState && autofillField.viewable) {
await this.autofillOverlayContentService?.setupAutofillInlineMenuListenerOnField(
await this.autofillOverlayContentService?.setupInlineMenuListenerOnField(
element,
autofillField,
);
@@ -457,7 +457,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
if (elementIsSpanElement(element)) {
this.cacheAutofillFieldElement(index, element, autofillFieldBase);
void this.autofillOverlayContentService?.setupAutofillInlineMenuListenerOnField(
void this.autofillOverlayContentService?.setupInlineMenuListenerOnField(
element,
autofillFieldBase,
);
@@ -500,10 +500,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
};
this.cacheAutofillFieldElement(index, element, autofillField);
void this.autofillOverlayContentService?.setupAutofillInlineMenuListenerOnField(
element,
autofillField,
);
void this.autofillOverlayContentService?.setupInlineMenuListenerOnField(element, autofillField);
return autofillField;
};
@@ -1394,7 +1391,7 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
}
cachedAutofillFieldElement.viewable = true;
void this.autofillOverlayContentService?.setupAutofillInlineMenuListenerOnField(
void this.autofillOverlayContentService?.setupInlineMenuListenerOnField(
formFieldElement,
cachedAutofillFieldElement,
);