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

[PM-5189] Implementing a methodology for triggering subframe updates from layout-shift

Browse Source
This commit is contained in:
Cesar Gonzalez 2024-06-13 10:44:32 -05:00
parent a30dcbb880
commit 3413450d56
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
3 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/browser/src/autofill/background/abstractions/overlay.background.ts
View File

@ -65,6 +65,7 @@ export type OverlayBackgroundExtensionMessage = {
subFrameData?: SubFrameOffsetData;
focusedFieldData?: FocusedFieldData;
styles?: Partial<CSSStyleDeclaration>;
triggerInlineMenuPositionUpdate?: boolean;
data?: LockedVaultPendingNotificationsData;
} & OverlayAddNewItemMessage &
CloseInlineMenuMessage;
@ -120,7 +121,7 @@ export type OverlayBackgroundExtensionMessageHandlers = {
checkShouldRepositionInlineMenu: ({ sender }: BackgroundSenderParam) => boolean;
getCurrentTabFrameId: ({ sender }: BackgroundSenderParam) => number;
updateSubFrameData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
rebuildSubFrameOffsets: ({ sender }: BackgroundSenderParam) => void;
rebuildSubFrameOffsets: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
destroyAutofillInlineMenuListeners: ({
message,
sender,

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

@ -95,7 +95,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
checkShouldRepositionInlineMenu: ({ sender }) => this.checkShouldRepositionInlineMenu(sender),
getCurrentTabFrameId: ({ sender }) => this.getSenderFrameId(sender),
updateSubFrameData: ({ message, sender }) => this.updateSubFrameData(message, sender),
rebuildSubFrameOffsets: ({ sender }) => this.rebuildSubFrameOffsets(sender),
rebuildSubFrameOffsets: ({ message, sender }) => this.rebuildSubFrameOffsets(message, sender),
destroyAutofillInlineMenuListeners: ({ message, sender }) =>
this.triggerDestroyInlineMenuListeners(sender.tab, message.subFrameData.frameId),
collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
@ -382,9 +382,13 @@ export class OverlayBackground implements OverlayBackgroundInterface {
* the field currently focused. We trigger a re-calculation of the field's position
* and as a result, the sub frame offsets of that frame will be updated.
*
* @param message - The message received from the `rebuildSubFrameOffsets` command
* @param sender - The sender of the message
*/
private async rebuildSubFrameOffsets(sender: chrome.runtime.MessageSender) {
private async rebuildSubFrameOffsets(
message: OverlayBackgroundExtensionMessage,
sender: chrome.runtime.MessageSender,
) {
if (sender.frameId === this.focusedFieldData?.frameId) {
return;
}
@ -406,10 +410,12 @@ export class OverlayBackground implements OverlayBackgroundInterface {
}
}
this.updateInlineMenuPositionTimeout = globalThis.setTimeout(
() => this.updateInlineMenuPositionAfterSubFrameRebuild(sender),
650,
);
if (message.triggerInlineMenuPositionUpdate) {
this.updateInlineMenuPositionTimeout = globalThis.setTimeout(
() => this.updateInlineMenuPositionAfterSubFrameRebuild(sender),
650,
);
}
}
/**

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

@ -43,6 +43,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
private focusedFieldData: FocusedFieldData;
private userInteractionEventTimeout: number | NodeJS.Timeout;
private recalculateSubFrameOffsetsTimeout: number | NodeJS.Timeout;
private performanceObserver: PerformanceObserver;
private autofillFieldKeywordsMap: WeakMap<AutofillField, string> = new WeakMap();
private eventHandlersMemo: { [key: string]: EventListener } = {};
private readonly extensionMessageHandlers: AutofillOverlayContentExtensionMessageHandlers = {
@ -786,6 +787,8 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
capture: true,
});
globalThis.addEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
this.performanceObserver = new PerformanceObserver(() => this.rebuildSubFrameOffsets(0, false));
this.performanceObserver.observe({ type: "layout-shift", buffered: true });
}
/**
@ -820,11 +823,14 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
/**
* Triggers a rebuild of a sub frame's offsets within the tab.
*/
private rebuildSubFrameOffsets() {
private rebuildSubFrameOffsets(delay: number = 150, triggerInlineMenuPositionUpdate = true) {
this.clearRecalculateSubFrameOffsetsTimeout();
this.recalculateSubFrameOffsetsTimeout = globalThis.setTimeout(
() => void this.sendExtensionMessage("rebuildSubFrameOffsets"),
150,
() =>
void this.sendExtensionMessage("rebuildSubFrameOffsets", {
triggerInlineMenuPositionUpdate,
}),
delay,
);
}
@ -1161,6 +1167,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
this.handleVisibilityChangeEvent,
);
globalThis.removeEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
this.performanceObserver?.disconnect();
this.removeOverlayRepositionEventListeners();
}
}