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

[PM-5189] Fixing issues identified with updating the isCurrentlyFilling value within the overlay background

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-04-08 04:32:41 -05:00
parent d6d52e5e5e
commit 45d381cd1a
3 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -851,7 +851,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
return this.isFieldCurrentlyFocused; return this.isFieldCurrentlyFocused;
} }
private updateIsFieldCurrentlyFilling({ message }: OverlayBackgroundExtensionMessage) { private updateIsFieldCurrentlyFilling(message: OverlayBackgroundExtensionMessage) {
this.isCurrentlyFilling = message.isFieldCurrentlyFilling; this.isCurrentlyFilling = message.isFieldCurrentlyFilling;
} }

96
apps/browser/src/autofill/overlay/content/inline-menu-elements.ts
View File

@@ -23,7 +23,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
private listElement: HTMLElement; private listElement: HTMLElement;
private isButtonVisible = false; private isButtonVisible = false;
private isListVisible = false; private isListVisible = false;
private overlayElementsMutationObserver: MutationObserver; private inlineMenuElementsMutationObserver: MutationObserver;
private bodyElementMutationObserver: MutationObserver; private bodyElementMutationObserver: MutationObserver;
private documentElementMutationObserver: MutationObserver; private documentElementMutationObserver: MutationObserver;
private mutationObserverIterations = 0; private mutationObserverIterations = 0;
@@ -39,8 +39,8 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
appendInlineMenuElementsToDom: ({ message }) => this.appendInlineMenuElements(message), appendInlineMenuElementsToDom: ({ message }) => this.appendInlineMenuElements(message),
toggleInlineMenuHidden: ({ message }) => toggleInlineMenuHidden: ({ message }) =>
this.toggleInlineMenuHidden(message.isInlineMenuHidden), this.toggleInlineMenuHidden(message.isInlineMenuHidden),
checkIsInlineMenuButtonVisible: () => this.isButtonVisible, checkIsInlineMenuButtonVisible: () => this.isInlineMenuButtonVisible(),
checkIsInlineMenuListVisible: () => this.isListVisible, checkIsInlineMenuListVisible: () => this.isInlineMenuListVisible(),
}; };
constructor() { constructor() {
@@ -55,10 +55,18 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
return element === this.buttonElement || element === this.listElement; return element === this.buttonElement || element === this.listElement;
} }
private isInlineMenuButtonVisible() {
return this.isButtonVisible;
}
private isInlineMenuListVisible() {
return this.isListVisible;
}
/** /**
* 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 isHidden - Indicates if the inline menu elements should be hidden.
*/ */
private toggleInlineMenuHidden(isHidden: boolean) { private toggleInlineMenuHidden(isHidden: boolean) {
this.isButtonVisible = !!this.buttonElement && !isHidden; this.isButtonVisible = !!this.buttonElement && !isHidden;
@@ -66,7 +74,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Removes the autofill overlay from the page. This will initially * Removes the autofill inline menu from the page. This will initially
* unobserve the body element to ensure the mutation observer no * unobserve the body element to ensure the mutation observer no
* longer triggers. * longer triggers.
*/ */
@@ -87,8 +95,8 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
}; };
/** /**
* Removes the overlay button from the DOM if it is currently present. Will * Removes the inline menu button from the DOM if it is currently present. Will
* also remove the overlay reposition event listeners. * also remove the inline menu reposition event listeners.
*/ */
private removeInlineMenuButton() { private removeInlineMenuButton() {
if (!this.buttonElement) { if (!this.buttonElement) {
@@ -105,7 +113,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Removes the overlay list from the DOM if it is currently present. * Removes the inline menu list from the DOM if it is currently present.
*/ */
private removeInlineMenuList() { private removeInlineMenuList() {
if (!this.listElement) { if (!this.listElement) {
@@ -122,7 +130,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Updates the position of both the overlay button and overlay list. * Updates the position of both the inline menu button and inline menu list.
*/ */
private async appendInlineMenuElements({ overlayElement }: AutofillExtensionMessage) { private async appendInlineMenuElements({ overlayElement }: AutofillExtensionMessage) {
if (overlayElement === AutofillOverlayElement.Button) { if (overlayElement === AutofillOverlayElement.Button) {
@@ -133,7 +141,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Updates the position of the overlay button. * Updates the position of the inline menu button.
*/ */
private async appendButtonElement(): Promise<void> { private async appendButtonElement(): Promise<void> {
if (!this.buttonElement) { if (!this.buttonElement) {
@@ -148,7 +156,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Updates the position of the overlay list. * Updates the position of the inline menu list.
*/ */
private async appendListElement(): Promise<void> { private async appendListElement(): Promise<void> {
if (!this.listElement) { if (!this.listElement) {
@@ -163,11 +171,11 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Appends the overlay element to the body element. This method will also * Appends the inline menu element to the body element. This method will also
* observe the body element to ensure that the overlay element is not * observe the body element to ensure that the inline menu element is not
* interfered with by any DOM changes. * interfered with by any DOM changes.
* *
* @param element - The overlay element to append to the body element. * @param element - The inline menu element to append to the body element.
*/ */
private appendInlineMenuElementToBody(element: HTMLElement) { private appendInlineMenuElementToBody(element: HTMLElement) {
this.observeBodyElement(); this.observeBodyElement();
@@ -175,7 +183,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Creates the autofill overlay button element. Will not attempt * Creates the autofill inline menu button element. Will not attempt
* to create the element if it already exists in the DOM. * to create the element if it already exists in the DOM.
*/ */
private createButton() { private createButton() {
@@ -204,7 +212,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Creates the autofill overlay list element. Will not attempt * Creates the autofill inline menu list element. Will not attempt
* to create the element if it already exists in the DOM. * to create the element if it already exists in the DOM.
*/ */
private createList() { private createList() {
@@ -247,14 +255,14 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Sets up mutation observers for the overlay elements, the body element, and the * Sets up mutation observers for the inline menu elements, the body element, and
* document element. The mutation observers are used to remove any styles that are * the document element. The mutation observers are used to remove any styles that
* added to the overlay elements by the website. They are also used to ensure that * are added to the inline menu elements by the website. They are also used to ensure
* the overlay elements are always present at the bottom of the body element. * that the inline menu elements are always present at the bottom of the body element.
*/ */
private setupMutationObserver = () => { private setupMutationObserver = () => {
this.overlayElementsMutationObserver = new MutationObserver( this.inlineMenuElementsMutationObserver = new MutationObserver(
this.handleOverlayElementMutationObserverUpdate, this.handleInlineMenuElementMutationObserverUpdate,
); );
this.bodyElementMutationObserver = new MutationObserver( this.bodyElementMutationObserver = new MutationObserver(
@@ -263,33 +271,33 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
}; };
/** /**
* Sets up mutation observers to verify that the overlay * Sets up mutation observers to verify that the inline menu
* elements are not modified by the website. * elements are not modified by the website.
*/ */
private observeCustomElements() { private observeCustomElements() {
if (this.buttonElement) { if (this.buttonElement) {
this.overlayElementsMutationObserver?.observe(this.buttonElement, { this.inlineMenuElementsMutationObserver?.observe(this.buttonElement, {
attributes: true, attributes: true,
}); });
} }
if (this.listElement) { if (this.listElement) {
this.overlayElementsMutationObserver?.observe(this.listElement, { attributes: true }); this.inlineMenuElementsMutationObserver?.observe(this.listElement, { attributes: true });
} }
} }
/** /**
* Disconnects the mutation observers that are used to verify that the overlay * Disconnects the mutation observers that are used to verify that the inline menu
* elements are not modified by the website. * elements are not modified by the website.
*/ */
private unobserveCustomElements() { private unobserveCustomElements() {
this.overlayElementsMutationObserver?.disconnect(); this.inlineMenuElementsMutationObserver?.disconnect();
} }
/** /**
* Sets up a mutation observer for the body element. The mutation observer is used * Sets up a mutation observer for the body element. The mutation observer is used
* to ensure that the overlay elements are always present at the bottom of the body * to ensure that the inline menu elements are always present at the bottom of the
* element. * body element.
*/ */
private observeBodyElement() { private observeBodyElement() {
this.bodyElementMutationObserver?.observe(globalThis.document.body, { childList: true }); this.bodyElementMutationObserver?.observe(globalThis.document.body, { childList: true });
@@ -303,13 +311,13 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
/** /**
* Handles the mutation observer update for the overlay elements. This method will * Handles the mutation observer update for the inline menu elements. This method will
* remove any attributes or styles that might be added to the overlay elements by * remove any attributes or styles that might be added to the inline menu elements by
* a separate process within the website where this script is injected. * a separate process within the website where this script is injected.
* *
* @param mutationRecord - The mutation record that triggered the update. * @param mutationRecord - The mutation record that triggered the update.
*/ */
private handleOverlayElementMutationObserverUpdate = (mutationRecord: MutationRecord[]) => { private handleInlineMenuElementMutationObserverUpdate = (mutationRecord: MutationRecord[]) => {
if (this.isTriggeringExcessiveMutationObserverIterations()) { if (this.isTriggeringExcessiveMutationObserverIterations()) {
return; return;
} }
@@ -333,7 +341,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
}; };
/** /**
* Removes all elements from a passed overlay * Removes all elements from a passed inline menu
* element except for the style attribute. * element except for the style attribute.
* *
* @param element - The element to remove the attributes from. * @param element - The element to remove the attributes from.
@@ -352,8 +360,8 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
/** /**
* Handles the mutation observer update for the body element. This method will * Handles the mutation observer update for the body element. This method will
* ensure that the overlay elements are always present at the bottom of the body * ensure that the inline menu elements are always present at the bottom of the
* element. * body element.
*/ */
private handleBodyElementMutationObserverUpdate = () => { private handleBodyElementMutationObserverUpdate = () => {
if ( if (
@@ -365,20 +373,20 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
const lastChild = globalThis.document.body.lastElementChild; const lastChild = globalThis.document.body.lastElementChild;
const secondToLastChild = lastChild?.previousElementSibling; const secondToLastChild = lastChild?.previousElementSibling;
const lastChildIsOverlayList = lastChild === this.listElement; const lastChildIsInlineMenuList = lastChild === this.listElement;
const lastChildIsOverlayButton = lastChild === this.buttonElement; const lastChildIsInlineMenuButton = lastChild === this.buttonElement;
const secondToLastChildIsOverlayButton = secondToLastChild === this.buttonElement; const secondToLastChildIsInlineMenuButton = secondToLastChild === this.buttonElement;
if ( if (
(lastChildIsOverlayList && secondToLastChildIsOverlayButton) || (lastChildIsInlineMenuList && secondToLastChildIsInlineMenuButton) ||
(lastChildIsOverlayButton && !this.isListVisible) (lastChildIsInlineMenuButton && !this.isListVisible)
) { ) {
return; return;
} }
if ( if (
(lastChildIsOverlayList && !secondToLastChildIsOverlayButton) || (lastChildIsInlineMenuList && !secondToLastChildIsInlineMenuButton) ||
(lastChildIsOverlayButton && this.isListVisible) (lastChildIsInlineMenuButton && this.isListVisible)
) { ) {
globalThis.document.body.insertBefore(this.buttonElement, this.listElement); globalThis.document.body.insertBefore(this.buttonElement, this.listElement);
return; return;
@@ -390,7 +398,7 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
/** /**
* Identifies if the mutation observer is triggering excessive iterations. * Identifies if the mutation observer is triggering excessive iterations.
* Will trigger a blur of the most recently focused field and remove the * Will trigger a blur of the most recently focused field and remove the
* autofill overlay if any set mutation observer is triggering * autofill inline menu if any set mutation observer is triggering
* excessive iterations. * excessive iterations.
*/ */
private isTriggeringExcessiveMutationObserverIterations() { private isTriggeringExcessiveMutationObserverIterations() {

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

@@ -758,7 +758,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
setTimeout(async () => { setTimeout(async () => {
this.toggleOverlayHidden(false); this.toggleOverlayHidden(false);
if ( if (
(this.mostRecentlyFocusedField as HTMLInputElement).value && (this.mostRecentlyFocusedField as HTMLInputElement)?.value &&
((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed()) ((await this.isInlineMenuCiphersPopulated()) || !this.isUserAuthed())
) { ) {
void this.sendExtensionMessage("closeAutofillOverlay", { void this.sendExtensionMessage("closeAutofillOverlay", {