From c8331fe5fb4ae529ae89356fcd8f7dacb3ca9a30 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Fri, 3 May 2024 14:52:37 -0500 Subject: [PATCH] [PM-5189] Reworking project structure to ensure we can better differentiate the inline menu feature from other features --- .../abstractions/overlay.background.ts | 2 +- .../background/overlay.background.spec.ts | 2 +- .../autofill/background/overlay.background.ts | 6 +- .../autofill/content/autofill-init.spec.ts | 2 +- .../content/bootstrap-autofill-overlay.ts | 2 +- .../autofill-inline-menu-page-element.ts | 6 +- .../autofill/services/autofill-constants.ts | 2 +- .../autofill-overlay-content.service.spec.ts | 18 ++--- .../autofill-overlay-content.service.ts | 78 +++++++++---------- .../collect-autofill-content.service.spec.ts | 2 +- .../insert-autofill-content.service.spec.ts | 2 +- 11 files changed, 60 insertions(+), 62 deletions(-) diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts index 4f21406dfa1..5c902314cce 100644 --- a/apps/browser/src/autofill/background/abstractions/overlay.background.ts +++ b/apps/browser/src/autofill/background/abstractions/overlay.background.ts @@ -55,7 +55,7 @@ type OverlayBackgroundExtensionMessage = { overlayElement?: string; forceCloseAutofillInlineMenu?: boolean; isAutofillInlineMenuHidden?: boolean; - setTransparentOverlay?: boolean; + setTransparentInlineMenu?: boolean; isFieldCurrentlyFocused?: boolean; isFieldCurrentlyFilling?: boolean; subFrameData?: SubFrameOffsetData; diff --git a/apps/browser/src/autofill/background/overlay.background.spec.ts b/apps/browser/src/autofill/background/overlay.background.spec.ts index 988e1c11f78..11786f9df3b 100644 --- a/apps/browser/src/autofill/background/overlay.background.spec.ts +++ b/apps/browser/src/autofill/background/overlay.background.spec.ts @@ -877,7 +877,7 @@ describe("OverlayBackground", () => { it("sets the `opacity` CSS value on the overlay button and list", () => { const message = { command: "updateAutofillInlineMenuHidden", - setTransparentOverlay: true, + setTransparentInlineMenu: true, }; sendMockExtensionMessage(message); diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index 46bcef8538f..1d9723a5bb3 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -597,14 +597,14 @@ class OverlayBackground implements OverlayBackgroundInterface { * @param sender - The sender of the extension message */ private updateInlineMenuHidden( - { isAutofillInlineMenuHidden, setTransparentOverlay }: OverlayBackgroundExtensionMessage, + { isAutofillInlineMenuHidden, setTransparentInlineMenu }: OverlayBackgroundExtensionMessage, sender: chrome.runtime.MessageSender, ) { const display = isAutofillInlineMenuHidden ? "none" : "block"; let styles: { display: string; opacity?: number } = { display }; - if (typeof setTransparentOverlay !== "undefined") { - const opacity = setTransparentOverlay ? 0 : 1; + if (typeof setTransparentInlineMenu !== "undefined") { + const opacity = setTransparentInlineMenu ? 0 : 1; styles = { ...styles, opacity }; } diff --git a/apps/browser/src/autofill/content/autofill-init.spec.ts b/apps/browser/src/autofill/content/autofill-init.spec.ts index fe2681d3e3c..0be137fef9f 100644 --- a/apps/browser/src/autofill/content/autofill-init.spec.ts +++ b/apps/browser/src/autofill/content/autofill-init.spec.ts @@ -3,7 +3,7 @@ import { mock, MockProxy } from "jest-mock-extended"; import AutofillPageDetails from "../models/autofill-page-details"; import AutofillScript from "../models/autofill-script"; import { AutofillInlineMenuContentService } from "../overlay/inline-menu/content/autofill-inline-menu-content.service"; -import AutofillOverlayContentService from "../services/autofill-overlay-content.service"; +import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service"; import { flushPromises, sendMockExtensionMessage } from "../spec/testing-utils"; import { AutofillExtensionMessage } from "./abstractions/autofill-init"; diff --git a/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts index 993b3a759f2..3dfa2506056 100644 --- a/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts +++ b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts @@ -1,5 +1,5 @@ import { AutofillInlineMenuContentService } from "../overlay/inline-menu/content/autofill-inline-menu-content.service"; -import AutofillOverlayContentService from "../services/autofill-overlay-content.service"; +import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service"; import { setupAutofillInitDisconnectAction } from "../utils"; import AutofillInit from "./autofill-init"; diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/shared/autofill-inline-menu-page-element.ts b/apps/browser/src/autofill/overlay/inline-menu/pages/shared/autofill-inline-menu-page-element.ts index 20c945ff07e..289c1944e38 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/pages/shared/autofill-inline-menu-page-element.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/pages/shared/autofill-inline-menu-page-element.ts @@ -20,7 +20,7 @@ export class AutofillInlineMenuPageElement extends HTMLElement { } /** - * Initializes the overlay page element. Facilitates ensuring that the page + * Initializes the inline menu page element. Facilitates ensuring that the page * is set up with the expected styles and translations. * * @param elementName - The name of the element, e.g. "button" or "list" @@ -118,8 +118,8 @@ export class AutofillInlineMenuPageElement extends HTMLElement { /** * Handles the document keydown event. Facilitates redirecting the - * user focus in the right direction out of the overlay. Also facilitates - * closing the overlay when the user presses the Escape key. + * user focus in the right direction out of the inline menu. Also facilitates + * closing the inline menu when the user presses the Escape key. * * @param event - The document keydown event */ diff --git a/apps/browser/src/autofill/services/autofill-constants.ts b/apps/browser/src/autofill/services/autofill-constants.ts index f6d0f10939f..9aa9a6f0d10 100644 --- a/apps/browser/src/autofill/services/autofill-constants.ts +++ b/apps/browser/src/autofill/services/autofill-constants.ts @@ -66,7 +66,7 @@ export class AutoFillConstants { ...AutoFillConstants.ExcludedAutofillLoginTypes, ]; - static readonly ExcludedOverlayTypes: string[] = [ + static readonly ExcludedInlineMenuTypes: string[] = [ "textarea", ...AutoFillConstants.ExcludedAutofillTypes, ]; diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts index af346a1d61d..c3c4f5ef764 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts @@ -10,7 +10,7 @@ import { flushPromises } from "../spec/testing-utils"; import { ElementWithOpId, FormFieldElement } from "../types"; import { AutoFillConstants } from "./autofill-constants"; -import AutofillOverlayContentService from "./autofill-overlay-content.service"; +import { AutofillOverlayContentService } from "./autofill-overlay-content.service"; const defaultWindowReadyState = document.readyState; const defaultDocumentVisibilityState = document.visibilityState; @@ -161,8 +161,8 @@ describe("AutofillOverlayContentService", () => { expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); }); - it("ignores fields that are part of the ExcludedOverlayTypes", () => { - AutoFillConstants.ExcludedOverlayTypes.forEach(async (excludedType) => { + it("ignores fields that are part of the ExcludedInlineMenuTypes", () => { + AutoFillConstants.ExcludedInlineMenuTypes.forEach(async (excludedType) => { autofillFieldData.type = excludedType; await autofillOverlayContentService.setupAutofillInlineMenuListenerOnField( @@ -779,7 +779,7 @@ describe("AutofillOverlayContentService", () => { }); const focusMostRecentOverlayFieldSpy = jest.spyOn( autofillOverlayContentService as any, - "focusMostRecentOverlayField", + "focusMostRecentlyFocusedField", ); autofillOverlayContentService["openAutofillInlineMenu"]({ isFocusingFieldElement: true }); @@ -795,7 +795,7 @@ describe("AutofillOverlayContentService", () => { }); const focusMostRecentOverlayFieldSpy = jest.spyOn( autofillOverlayContentService as any, - "focusMostRecentOverlayField", + "focusMostRecentlyFocusedField", ); autofillOverlayContentService["openAutofillInlineMenu"]({ isFocusingFieldElement: true }); @@ -870,7 +870,7 @@ describe("AutofillOverlayContentService", () => { }); }); - describe("focusMostRecentOverlayField", () => { + describe("focusMostRecentlyFocusedField", () => { it("focuses the most recently focused overlay field", () => { const mostRecentlyFocusedField = document.createElement( "input", @@ -878,7 +878,7 @@ describe("AutofillOverlayContentService", () => { autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField; jest.spyOn(mostRecentlyFocusedField, "focus"); - autofillOverlayContentService["focusMostRecentOverlayField"](); + autofillOverlayContentService["focusMostRecentlyFocusedField"](); expect(mostRecentlyFocusedField.focus).toHaveBeenCalled(); }); @@ -1120,7 +1120,7 @@ describe("AutofillOverlayContentService", () => { expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: true, - setTransparentOverlay: false, + setTransparentInlineMenu: false, }); }); @@ -1148,7 +1148,7 @@ describe("AutofillOverlayContentService", () => { expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: false, - setTransparentOverlay: true, + setTransparentInlineMenu: true, }); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("closeAutofillInlineMenu", { forceCloseAutofillInlineMenu: true, diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts index 66fd996c7b8..ff09533b89d 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts @@ -22,7 +22,7 @@ import { } from "./abstractions/autofill-overlay-content.service"; import { AutoFillConstants } from "./autofill-constants"; -class AutofillOverlayContentService implements AutofillOverlayContentServiceInterface { +export class AutofillOverlayContentService implements AutofillOverlayContentServiceInterface { pageDetailsUpdateRequired = false; inlineMenuVisibility: number; private readonly findTabs = tabbable; @@ -30,7 +30,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte private formFieldElements: Set> = new Set([]); private hiddenFormFieldElements: WeakMap, AutofillField> = new WeakMap(); - private ignoredFieldTypes: Set = new Set(AutoFillConstants.ExcludedOverlayTypes); + private ignoredFieldTypes: Set = new Set(AutoFillConstants.ExcludedInlineMenuTypes); private userFilledFields: Record = {}; private authStatus: AuthenticationStatus; private focusableElements: FocusableElement[] = []; @@ -105,12 +105,12 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Handles opening the autofill overlay. Will conditionally open - * the overlay based on the current autofill overlay visibility setting. - * Allows you to optionally focus the field element when opening the overlay. - * Will also optionally ignore the overlay visibility setting and open the + * Handles opening the autofill inline menu. Will conditionally open + * the inline menu based on the current inline menu visibility setting. + * Allows you to optionally focus the field element when opening the inline menu. + * Will also optionally ignore the inline menu visibility setting and open the * - * @param options - Options for opening the autofill overlay. + * @param options - Options for opening the autofill inline menu. */ openAutofillInlineMenu(options: OpenAutofillInlineMenuOptions = {}) { const { isFocusingFieldElement, isOpeningFullAutofillInlineMenu, authStatus } = options; @@ -126,7 +126,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } if (isFocusingFieldElement && !this.recentlyFocusedFieldIsCurrentlyFocused()) { - this.focusMostRecentOverlayField(); + this.focusMostRecentlyFocusedField(); } if (typeof authStatus !== "undefined") { @@ -147,7 +147,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Focuses the most recently focused field element. */ - focusMostRecentOverlayField() { + focusMostRecentlyFocusedField() { this.mostRecentlyFocusedField?.focus(); } @@ -182,7 +182,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Redirects the keyboard focus out of the overlay, selecting the element that is + * Redirects the keyboard focus out of the inline menu, selecting the element that is * either previous or next in the tab order. If the direction is current, the most * recently focused field will be focused. * @@ -194,7 +194,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } if (direction === RedirectFocusDirection.Current) { - this.focusMostRecentOverlayField(); + this.focusMostRecentlyFocusedField(); setTimeout(() => void this.sendExtensionMessage("closeAutofillInlineMenu"), 100); return; } @@ -215,7 +215,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Sets up the event listeners that facilitate interaction with the form field elements. * Will clear any cached form field element handlers that are encountered when setting - * up a form field element to the overlay. + * up a form field element. * * @param formFieldElement - The form field element to set up the event listeners for. */ @@ -240,7 +240,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Removes any cached form field element handlers that are encountered - * when setting up a form field element to present the overlay. + * when setting up a form field element to present the inline menu. * * @param formFieldElement - The form field element to remove the cached handlers for. */ @@ -284,7 +284,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Form Field blur event handler. Updates the value identifying whether - * the field is focused and sends a message to check if the overlay itself + * the field is focused and sends a message to check if the inline menu itself * is currently focused. */ private handleFormFieldBlurEvent = () => { @@ -296,8 +296,8 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Form field keyup event handler. Facilitates the ability to remove the - * autofill overlay using the escape key, focusing the overlay list using - * the ArrowDown key, and ensuring that the overlay is repositioned when + * autofill inline menu using the escape key, focusing the inline menu list using + * the ArrowDown key, and ensuring that the inline menu is repositioned when * the form is submitted using the Enter key. * * @param event - The keyup event. @@ -325,9 +325,9 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte }; /** - * Triggers a focus of the overlay list, if it is visible. If the list is not visible, - * the overlay will be opened and the list will be focused after a short delay. Ensures - * that the overlay list is focused when the user presses the down arrow key. + * Triggers a focus of the inline menu list, if it is visible. If the list is not visible, + * the inline menu will be opened and the list will be focused after a short delay. Ensures + * that the inline menu list is focused when the user presses the down arrow key. */ private async focusInlineMenuList() { if (this.mostRecentlyFocusedField && !(await this.isInlineMenuListVisible())) { @@ -355,7 +355,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Triggers when the form field element receives an input event. This method will * store the modified form element data for use when the user attempts to add a new - * vault item. It also acts to remove the overlay list while the user is typing. + * vault item. It also acts to remove the inline menu list while the user is typing. * * @param formFieldElement - The form field element that triggered the input event. */ @@ -412,7 +412,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Triggers when the form field element receives a click event. This method will - * trigger the focused action for the form field element if the overlay is not visible. + * trigger the focused action for the form field element if the inline menu is not visible. * * @param formFieldElement - The form field element that triggered the click event. */ @@ -438,7 +438,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Triggers when the form field element receives a focus event. This method will - * update the most recently focused field and open the autofill overlay if the + * update the most recently focused field and open the autofill inline menu if the * autofill process is not currently active. * * @param formFieldElement - The form field element that triggered the focus event. @@ -541,7 +541,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Updates the position of both the overlay button and overlay list. + * Updates the position of both the inline menu button and list. */ private updateAutofillInlineMenuElementsPosition() { this.updateAutofillInlineMenuButtonPosition(); @@ -549,7 +549,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Updates the position of the overlay button. + * Updates the position of the inline menu button. */ private updateAutofillInlineMenuButtonPosition() { void this.sendExtensionMessage("updateAutofillInlineMenuPosition", { @@ -558,7 +558,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Updates the position of the overlay list. + * Updates the position of the inline menu list. */ private updateAutofillInlineMenuListPosition() { void this.sendExtensionMessage("updateAutofillInlineMenuPosition", { @@ -567,23 +567,23 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Sends a message that facilitates hiding the overlay elements. + * Sends a message that facilitates hiding the inline menu elements. * - * @param isHidden - Indicates if the overlay elements should be hidden. - * @param setTransparentOverlay - Indicates if the overlay is closing. + * @param isHidden - Indicates if the inline menu elements should be hidden. + * @param setTransparentInlineMenu - Indicates if the inline menu is closing. */ private toggleAutofillInlineMenuHidden( isHidden: boolean, - setTransparentOverlay: boolean = false, + setTransparentInlineMenu: boolean = false, ) { void this.sendExtensionMessage("updateAutofillInlineMenuHidden", { isAutofillInlineMenuHidden: isHidden, - setTransparentOverlay, + setTransparentInlineMenu, }); } /** - * Updates the data used to position the overlay elements in relation + * Updates the data used to position the inline menu elements in relation * to the most recently focused form field. * * @param formFieldElement - The form field element that triggered the focus event. @@ -664,7 +664,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte } /** - * Identifies if the field should have the autofill overlay setup on it. Currently, this is mainly + * Identifies if the field should have the autofill inline menu setup on it. Currently, this is mainly * determined by whether the field correlates with a login cipher. This method will need to be * updated in the future to support other types of forms. * @@ -726,18 +726,18 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte }; /** - * Queries the background script for the autofill overlay visibility setting. + * Queries the background script for the autofill inline menu visibility setting. * If the setting is not found, a default value of OnFieldFocus will be used * @private */ private async getAutofillInlineMenuVisibility() { - const overlayVisibility = await this.sendExtensionMessage("getAutofillInlineMenuVisibility"); - this.inlineMenuVisibility = overlayVisibility || AutofillOverlayVisibility.OnFieldFocus; + const inlineMenuVisibility = await this.sendExtensionMessage("getAutofillInlineMenuVisibility"); + this.inlineMenuVisibility = inlineMenuVisibility || AutofillOverlayVisibility.OnFieldFocus; } /** * Sets up event listeners that facilitate repositioning - * the autofill overlay on scroll or resize. + * the overlay elements on scroll or resize. */ private setOverlayRepositionEventListeners() { globalThis.addEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, { @@ -748,7 +748,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Removes the listeners that facilitate repositioning - * the autofill overlay on scroll or resize. + * the overlay elements on scroll or resize. */ private removeOverlayRepositionEventListeners() { globalThis.removeEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, { @@ -759,7 +759,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte /** * Handles the resize or scroll events that enact - * repositioning of the overlay. + * repositioning of existing overlay elements. */ private handleOverlayRepositionEvent = async () => { this.rebuildSubFrameOffsets(); @@ -1033,5 +1033,3 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte this.removeOverlayRepositionEventListeners(); } } - -export default AutofillOverlayContentService; diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts index 1c883acb705..ee5fb07c572 100644 --- a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts +++ b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts @@ -10,7 +10,7 @@ import { FormElementWithAttribute, } from "../types"; -import AutofillOverlayContentService from "./autofill-overlay-content.service"; +import { AutofillOverlayContentService } from "./autofill-overlay-content.service"; import CollectAutofillContentService from "./collect-autofill-content.service"; import DomElementVisibilityService from "./dom-element-visibility.service"; diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts index 72bbfbf2e2c..558e78c19bd 100644 --- a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts +++ b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts @@ -3,7 +3,7 @@ import { EVENTS } from "@bitwarden/common/autofill/constants"; import AutofillScript, { FillScript, FillScriptActions } from "../models/autofill-script"; import { FillableFormFieldElement, FormElementWithAttribute, FormFieldElement } from "../types"; -import AutofillOverlayContentService from "./autofill-overlay-content.service"; +import { AutofillOverlayContentService } from "./autofill-overlay-content.service"; import CollectAutofillContentService from "./collect-autofill-content.service"; import DomElementVisibilityService from "./dom-element-visibility.service"; import InsertAutofillContentService from "./insert-autofill-content.service";