Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-02 18:17:46 +01:00
Code Issues Projects Releases Wiki Activity

[PM-5189] Removing throttle from resize listeners within the content script

Browse Source
This commit is contained in:
Cesar Gonzalez 2024-06-26 13:16:41 -05:00
parent 498b4af3be
commit 62cf0f8f24
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
3 changed files with 6 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,7 @@ import "lit/polyfill-support.js";
import { FocusableElement, tabbable } from "tabbable"; import { FocusableElement, tabbable } from "tabbable";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
EVENTS,
AutofillOverlayVisibility,
AUTOFILL_OVERLAY_HANDLE_REPOSITION,
} from "@bitwarden/common/autofill/constants";
import { import {
FocusedFieldData, FocusedFieldData,
@ -22,12 +18,7 @@ import {
import AutofillField from "../models/autofill-field"; import AutofillField from "../models/autofill-field";
import AutofillPageDetails from "../models/autofill-page-details"; import AutofillPageDetails from "../models/autofill-page-details";
import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types"; import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types";
import { import { elementIsFillableFormField, getAttributeBoolean, sendExtensionMessage } from "../utils";
elementIsFillableFormField,
getAttributeBoolean,
sendExtensionMessage,
throttle,
} from "../utils";
import { import {
AutofillOverlayContentExtensionMessageHandlers, AutofillOverlayContentExtensionMessageHandlers,
@ -1057,15 +1048,11 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
* the overlay elements on scroll or resize. * the overlay elements on scroll or resize.
*/ */
private setOverlayRepositionEventListeners() { private setOverlayRepositionEventListeners() {
const handler = this.useEventHandlersMemo( globalThis.addEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
throttle(this.handleOverlayRepositionEvent, 900),
AUTOFILL_OVERLAY_HANDLE_REPOSITION,
);
globalThis.addEventListener(EVENTS.SCROLL, handler, {
capture: true, capture: true,
passive: true, passive: true,
}); });
globalThis.addEventListener(EVENTS.RESIZE, handler); globalThis.addEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
} }
/** /**
@ -1073,13 +1060,10 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
* the overlay elements on scroll or resize. * the overlay elements on scroll or resize.
*/ */
private removeOverlayRepositionEventListeners() { private removeOverlayRepositionEventListeners() {
const handler = this.eventHandlersMemo[AUTOFILL_OVERLAY_HANDLE_REPOSITION]; globalThis.removeEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
globalThis.removeEventListener(EVENTS.SCROLL, handler, {
capture: true, capture: true,
}); });
globalThis.removeEventListener(EVENTS.RESIZE, handler); globalThis.removeEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
delete this.eventHandlersMemo[AUTOFILL_OVERLAY_HANDLE_REPOSITION];
} }
/** /**

17
apps/browser/src/autofill/utils/index.ts
View File

@ -335,20 +335,3 @@ export function getPropertyOrAttribute(element: HTMLElement, attributeName: stri
return element.getAttribute(attributeName); return element.getAttribute(attributeName);
} }
/**
* Throttles a callback function to run at most once every `limit` milliseconds.
*
* @param callback - The callback function to throttle.
* @param limit - The time in milliseconds to throttle the callback.
*/
export function throttle(callback: () => void, limit: number) {
let waitingDelay = false;
return function (...args: unknown[]) {
if (!waitingDelay) {
callback.apply(this, args);
waitingDelay = true;
globalThis.setTimeout(() => (waitingDelay = false), limit);
}
};
}

2
libs/common/src/autofill/constants/index.ts
View File

@ -54,8 +54,6 @@ export const SEPARATOR_ID = "separator";
export const NOTIFICATION_BAR_LIFESPAN_MS = 150000; // 150 seconds export const NOTIFICATION_BAR_LIFESPAN_MS = 150000; // 150 seconds
export const AUTOFILL_OVERLAY_HANDLE_REPOSITION = "autofill-overlay-handle-reposition-event";
export const AutofillOverlayVisibility = { export const AutofillOverlayVisibility = {
Off: 0, Off: 0,
OnButtonClick: 1, OnButtonClick: 1,