mirror of
https://github.com/bitwarden/browser.git
synced 2025-03-15 14:10:01 +01:00
[PM-5189] Reworking project structure to ensure we can better differentiate the inline menu feature from other features
This commit is contained in:
parent
9658f8a8df
commit
c8331fe5fb
@ -55,7 +55,7 @@ type OverlayBackgroundExtensionMessage = {
|
||||
overlayElement?: string;
|
||||
forceCloseAutofillInlineMenu?: boolean;
|
||||
isAutofillInlineMenuHidden?: boolean;
|
||||
setTransparentOverlay?: boolean;
|
||||
setTransparentInlineMenu?: boolean;
|
||||
isFieldCurrentlyFocused?: boolean;
|
||||
isFieldCurrentlyFilling?: boolean;
|
||||
subFrameData?: SubFrameOffsetData;
|
||||
|
@ -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);
|
||||
|
@ -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 };
|
||||
}
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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";
|
||||
|
@ -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
|
||||
*/
|
||||
|
@ -66,7 +66,7 @@ export class AutoFillConstants {
|
||||
...AutoFillConstants.ExcludedAutofillLoginTypes,
|
||||
];
|
||||
|
||||
static readonly ExcludedOverlayTypes: string[] = [
|
||||
static readonly ExcludedInlineMenuTypes: string[] = [
|
||||
"textarea",
|
||||
...AutoFillConstants.ExcludedAutofillTypes,
|
||||
];
|
||||
|
@ -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,
|
||||
|
@ -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<ElementWithOpId<FormFieldElement>> = new Set([]);
|
||||
private hiddenFormFieldElements: WeakMap<ElementWithOpId<FormFieldElement>, AutofillField> =
|
||||
new WeakMap();
|
||||
private ignoredFieldTypes: Set<string> = new Set(AutoFillConstants.ExcludedOverlayTypes);
|
||||
private ignoredFieldTypes: Set<string> = new Set(AutoFillConstants.ExcludedInlineMenuTypes);
|
||||
private userFilledFields: Record<string, FillableFormFieldElement> = {};
|
||||
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;
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user