Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-30 22:41:33 +01:00
Code Issues Projects Releases Wiki Activity

[PM-5189] Fixing an issue where the inline menu can render elements as hidden when collecting page details

Browse Source
This commit is contained in:
Cesar Gonzalez 2024-04-06 14:30:42 -05:00
parent 5a2c372b5d
commit ef716ee728
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
4 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@ class AutofillInit implements AutofillInitInterface {
);
}
this.domElementVisibilityService = new DomElementVisibilityService();
this.domElementVisibilityService = new DomElementVisibilityService(this.inlineMenuElements);
this.collectAutofillContentService = new CollectAutofillContentService(
this.domElementVisibilityService,
this.autofillOverlayContentService,

3
apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts
View File

@ -11,5 +11,6 @@ export type InlineMenuExtensionMessageHandlers = {
export interface InlineMenuElements {
extensionMessageHandlers: InlineMenuExtensionMessageHandlers;
destroy: () => void;
isElementInlineMenu(element: HTMLElement): boolean;
destroy(): void;
}

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

@ -52,6 +52,10 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
return this._extensionMessageHandlers;
}
isElementInlineMenu(element: HTMLElement) {
return element === this.buttonElement || element === this.listElement;
}
/**
* Sends a message that facilitates hiding the overlay elements.
*
@ -133,38 +137,30 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
* Updates the position of the overlay button.
*/
private async updateButtonPosition(): Promise<void> {
return new Promise((resolve) => {
if (!this.buttonElement) {
this.createButton();
this.updateCustomElementDefaultStyles(this.buttonElement);
}
if (!this.buttonElement) {
this.createButton();
this.updateCustomElementDefaultStyles(this.buttonElement);
}
if (!this.isButtonVisible) {
this.appendOverlayElementToBody(this.buttonElement);
this.isButtonVisible = true;
}
resolve();
});
if (!this.isButtonVisible) {
this.appendOverlayElementToBody(this.buttonElement);
this.isButtonVisible = true;
}
}
/**
* Updates the position of the overlay list.
*/
private async updateListPosition(): Promise<void> {
return new Promise((resolve) => {
if (!this.listElement) {
this.createList();
this.updateCustomElementDefaultStyles(this.listElement);
}
if (!this.listElement) {
this.createList();
this.updateCustomElementDefaultStyles(this.listElement);
}
if (!this.isListVisible) {
this.appendOverlayElementToBody(this.listElement);
this.isListVisible = true;
}
resolve();
});
if (!this.isListVisible) {
this.appendOverlayElementToBody(this.listElement);
this.isListVisible = true;
}
}
/**

7
apps/browser/src/autofill/services/dom-element-visibility.service.ts
View File

@ -1,3 +1,4 @@
import { InlineMenuElements } from "../overlay/abstractions/inline-menu-elements";
import { FillableFormFieldElement, FormFieldElement } from "../types";
import { DomElementVisibilityService as domElementVisibilityServiceInterface } from "./abstractions/dom-element-visibility.service";
@ -5,6 +6,8 @@ import { DomElementVisibilityService as domElementVisibilityServiceInterface } f
class DomElementVisibilityService implements domElementVisibilityServiceInterface {
private cachedComputedStyle: CSSStyleDeclaration | null = null;
constructor(private inlineMenuElements?: InlineMenuElements) {}
/**
* Checks if a form field is viewable. This is done by checking if the element is within the
* viewport bounds, not hidden by CSS, and not hidden behind another element.
@ -187,6 +190,10 @@ class DomElementVisibilityService implements domElementVisibilityServiceInterfac
return true;
}
if (this.inlineMenuElements?.isElementInlineMenu(elementAtCenterPoint as HTMLElement)) {
return true;
}
const targetElementLabelsSet = new Set((targetElement as FillableFormFieldElement).labels);
if (targetElementLabelsSet.has(elementAtCenterPoint as HTMLLabelElement)) {
return true;