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] 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
4 changed files with 30 additions and 26 deletions
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.collectAutofillContentService = new CollectAutofillContentService(
this.domElementVisibilityService, this.domElementVisibilityService,
this.autofillOverlayContentService, 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 { export interface InlineMenuElements {
extensionMessageHandlers: InlineMenuExtensionMessageHandlers; 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; return this._extensionMessageHandlers;
} }
isElementInlineMenu(element: HTMLElement) {
return element === this.buttonElement || element === this.listElement;
}
/** /**
* Sends a message that facilitates hiding the overlay elements. * 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. * Updates the position of the overlay button.
*/ */
private async updateButtonPosition(): Promise<void> { private async updateButtonPosition(): Promise<void> {
return new Promise((resolve) => { if (!this.buttonElement) {
if (!this.buttonElement) { this.createButton();
this.createButton(); this.updateCustomElementDefaultStyles(this.buttonElement);
this.updateCustomElementDefaultStyles(this.buttonElement); }
}
if (!this.isButtonVisible) { if (!this.isButtonVisible) {
this.appendOverlayElementToBody(this.buttonElement); this.appendOverlayElementToBody(this.buttonElement);
this.isButtonVisible = true; this.isButtonVisible = true;
} }
resolve();
});
} }
/** /**
* Updates the position of the overlay list. * Updates the position of the overlay list.
*/ */
private async updateListPosition(): Promise<void> { private async updateListPosition(): Promise<void> {
return new Promise((resolve) => { if (!this.listElement) {
if (!this.listElement) { this.createList();
this.createList(); this.updateCustomElementDefaultStyles(this.listElement);
this.updateCustomElementDefaultStyles(this.listElement); }
}
if (!this.isListVisible) { if (!this.isListVisible) {
this.appendOverlayElementToBody(this.listElement); this.appendOverlayElementToBody(this.listElement);
this.isListVisible = true; this.isListVisible = true;
} }
resolve();
});
} }
/** /**

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 { FillableFormFieldElement, FormFieldElement } from "../types";
import { DomElementVisibilityService as domElementVisibilityServiceInterface } from "./abstractions/dom-element-visibility.service"; import { DomElementVisibilityService as domElementVisibilityServiceInterface } from "./abstractions/dom-element-visibility.service";
@@ -5,6 +6,8 @@ import { DomElementVisibilityService as domElementVisibilityServiceInterface } f
class DomElementVisibilityService implements domElementVisibilityServiceInterface { class DomElementVisibilityService implements domElementVisibilityServiceInterface {
private cachedComputedStyle: CSSStyleDeclaration | null = null; 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 * 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. * viewport bounds, not hidden by CSS, and not hidden behind another element.
@@ -187,6 +190,10 @@ class DomElementVisibilityService implements domElementVisibilityServiceInterfac
return true; return true;
} }
if (this.inlineMenuElements?.isElementInlineMenu(elementAtCenterPoint as HTMLElement)) {
return true;
}
const targetElementLabelsSet = new Set((targetElement as FillableFormFieldElement).labels); const targetElementLabelsSet = new Set((targetElement as FillableFormFieldElement).labels);
if (targetElementLabelsSet.has(elementAtCenterPoint as HTMLLabelElement)) { if (targetElementLabelsSet.has(elementAtCenterPoint as HTMLLabelElement)) {
return true; return true;