[PM-5189] Working through content script port improvement

This commit is contained in:
Cesar Gonzalez 2024-06-19 03:21:40 -05:00
parent f219d71070
commit 857008413f
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
5 changed files with 25 additions and 47 deletions

View File

@ -94,21 +94,15 @@ export type BackgroundOnMessageHandlerParams = BackgroundMessageParam & Backgrou
export type OverlayBackgroundExtensionMessageHandlers = {
[key: string]: CallableFunction;
closeAutofillInlineMenu: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
checkIsInlineMenuCiphersPopulated: ({ sender }: BackgroundSenderParam) => void;
updateIsFieldCurrentlyFilling: ({ message }: BackgroundMessageParam) => void;
checkIsFieldCurrentlyFilling: () => boolean;
getAutofillInlineMenuVisibility: () => void;
toggleAutofillInlineMenuHidden: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
checkIsAutofillInlineMenuButtonVisible: ({ sender }: BackgroundSenderParam) => void;
checkIsAutofillInlineMenuListVisible: ({ sender }: BackgroundSenderParam) => void;
getCurrentTabFrameId: ({ sender }: BackgroundSenderParam) => number;
updateSubFrameData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
triggerSubFrameFocusInRebuild: ({ sender }: BackgroundSenderParam) => void;
destroyAutofillInlineMenuListeners: ({
message,
sender,
}: BackgroundOnMessageHandlerParams) => void;
collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
unlockCompleted: ({ message }: BackgroundMessageParam) => void;
addedCipher: () => void;
@ -137,18 +131,19 @@ export type OverlayContentScriptPortMessageHandlers = {
updateFocusedFieldData: ({ message, port }: PortOnMessageHandlerParams) => void;
updateIsFieldCurrentlyFocused: ({ message }: PortMessageParam) => void;
openAutofillInlineMenu: () => void;
closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
checkAutofillInlineMenuFocused: () => void;
focusAutofillInlineMenuList: () => void;
updateAutofillInlineMenuPosition: ({
message,
port,
}: PortOnMessageHandlerParams) => Promise<void>;
updateSubFrameData: ({ message, port }: PortOnMessageHandlerParams) => void;
triggerSubFrameFocusInRebuild: ({ port }: PortConnectionParam) => void;
destroyAutofillInlineMenuListeners: ({ message, port }: PortOnMessageHandlerParams) => void;
};
export type InlineMenuButtonPortMessageHandlers = {
[key: string]: CallableFunction;
closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
triggerDelayedAutofillInlineMenuClosure: ({ port }: PortConnectionParam) => void;
autofillInlineMenuButtonClicked: ({ port }: PortConnectionParam) => void;
autofillInlineMenuBlurred: () => void;
@ -158,7 +153,6 @@ export type InlineMenuButtonPortMessageHandlers = {
export type InlineMenuListPortMessageHandlers = {
[key: string]: CallableFunction;
closeAutofillInlineMenu: ({ message, port }: PortOnMessageHandlerParams) => void;
checkAutofillInlineMenuButtonFocused: () => void;
autofillInlineMenuBlurred: () => void;
unlockVault: ({ port }: PortConnectionParam) => void;

View File

@ -76,22 +76,16 @@ export class OverlayBackground implements OverlayBackgroundInterface {
private isFieldCurrentlyFilling: boolean = false;
private iconsServerUrl: string;
private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
closeAutofillInlineMenu: ({ message, sender }) => this.closeInlineMenu(sender, message),
checkIsInlineMenuCiphersPopulated: ({ sender }) =>
this.checkIsInlineMenuCiphersPopulated(sender),
updateIsFieldCurrentlyFilling: ({ message }) => this.updateIsFieldCurrentlyFilling(message),
checkIsFieldCurrentlyFilling: () => this.checkIsFieldCurrentlyFilling(),
getAutofillInlineMenuVisibility: () => this.getInlineMenuVisibility(),
toggleAutofillInlineMenuHidden: ({ message, sender }) =>
this.toggleInlineMenuHidden(message, sender),
checkIsAutofillInlineMenuButtonVisible: ({ sender }) =>
this.checkIsInlineMenuButtonVisible(sender),
checkIsAutofillInlineMenuListVisible: ({ sender }) => this.checkIsInlineMenuListVisible(sender),
getCurrentTabFrameId: ({ sender }) => this.getSenderFrameId(sender),
updateSubFrameData: ({ message, sender }) => this.updateSubFrameData(message, sender),
triggerSubFrameFocusInRebuild: ({ sender }) => this.triggerSubFrameFocusInRebuild(sender),
destroyAutofillInlineMenuListeners: ({ message, sender }) =>
this.triggerDestroyInlineMenuListeners(sender.tab, message.subFrameData.frameId),
collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
unlockCompleted: ({ message }) => this.unlockCompleted(message),
addedCipher: () => this.updateInlineMenuCiphers(),
@ -106,14 +100,16 @@ export class OverlayBackground implements OverlayBackgroundInterface {
updateFocusedFieldData: ({ message, port }) => this.setFocusedFieldData(message, port),
updateIsFieldCurrentlyFocused: ({ message }) => this.updateIsFieldCurrentlyFocused(message),
openAutofillInlineMenu: () => this.openInlineMenu(false),
closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
checkAutofillInlineMenuFocused: () => this.checkInlineMenuFocused(),
focusAutofillInlineMenuList: () => this.focusInlineMenuList(),
updateAutofillInlineMenuPosition: ({ message, port }) =>
this.updateInlineMenuPosition(message, port.sender),
updateSubFrameData: ({ message, port }) => this.updateSubFrameData(message, port),
triggerSubFrameFocusInRebuild: ({ port }) => this.triggerSubFrameFocusInRebuild(port),
destroyAutofillInlineMenuListeners: ({ message, port }) =>
this.triggerDestroyInlineMenuListeners(port.sender.tab, message.subFrameData.frameId),
};
private readonly inlineMenuButtonPortMessageHandlers: InlineMenuButtonPortMessageHandlers = {
closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
triggerDelayedAutofillInlineMenuClosure: ({ port }) => this.triggerDelayedInlineMenuClosure(),
autofillInlineMenuButtonClicked: ({ port }) => this.handleInlineMenuButtonClicked(port),
autofillInlineMenuBlurred: () => this.checkInlineMenuListFocused(),
@ -122,7 +118,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
updateAutofillInlineMenuColorScheme: () => this.updateInlineMenuButtonColorScheme(),
};
private readonly inlineMenuListPortMessageHandlers: InlineMenuListPortMessageHandlers = {
closeAutofillInlineMenu: ({ message, port }) => this.closeInlineMenu(port.sender, message),
checkAutofillInlineMenuButtonFocused: () => this.checkInlineMenuButtonFocused(),
autofillInlineMenuBlurred: () => this.checkInlineMenuButtonFocused(),
unlockVault: ({ port }) => this.unlockVault(port),
@ -330,7 +325,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
*/
private updateSubFrameData(
message: OverlayBackgroundExtensionMessage,
sender: chrome.runtime.MessageSender,
{ sender }: chrome.runtime.Port,
) {
const subFrameOffsetsForTab = this.subFrameOffsetsForTab[sender.tab.id];
if (subFrameOffsetsForTab) {
@ -1366,7 +1361,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
}
}
private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
private async triggerSubFrameFocusInRebuild({ sender }: chrome.runtime.Port) {
this.rebuildSubFrameOffsetsSubject.next(sender);
this.calculateInlineMenuPositionSubject.next(sender);
}

View File

@ -1,7 +1,7 @@
import { EVENTS } from "@bitwarden/common/autofill/constants";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { setElementStyles } from "../../../utils";
import { sendExtensionMessage, setElementStyles } from "../../../utils";
import {
BackgroundPortMessageHandlers,
AutofillInlineMenuIframeService as AutofillInlineMenuIframeServiceInterface,
@ -9,6 +9,7 @@ import {
} from "../abstractions/autofill-inline-menu-iframe.service";
export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframeServiceInterface {
private readonly sendExtensionMessage = sendExtensionMessage;
private readonly setElementStyles = setElementStyles;
private port: chrome.runtime.Port | null = null;
private portKey: string;
@ -304,7 +305,7 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
* mutation observer is triggered excessively.
*/
private forceCloseInlineMenu() {
void this.port.postMessage({ command: "closeAutofillInlineMenu", forceClose: true });
void this.sendExtensionMessage("closeAutofillInlineMenu", { forceClose: true });
}
private handleFadeInInlineMenuIframe() {

View File

@ -45,6 +45,7 @@ export type AutofillOverlayContentExtensionMessage = {
focusedFieldData?: FocusedFieldData;
isFieldCurrentlyFocused?: boolean;
forceCloseInlineMenu?: boolean;
subFrameData?: SubFrameOffsetData;
} & OverlayAddNewItemMessage;
export interface AutofillOverlayContentService {

View File

@ -204,7 +204,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
this.mostRecentlyFocusedField?.blur();
if (isClosingInlineMenu) {
this.sendPortMessage("closeAutofillInlineMenu");
void this.sendExtensionMessage("closeAutofillInlineMenu");
}
}
@ -249,7 +249,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
if (direction === RedirectFocusDirection.Current) {
this.focusMostRecentlyFocusedField();
this.closeInlineMenuOnRedirectTimeout = globalThis.setTimeout(
() => this.sendPortMessage("closeAutofillInlineMenu"),
() => this.sendExtensionMessage("closeAutofillInlineMenu"),
100,
);
return;
@ -361,7 +361,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => {
const eventCode = event.code;
if (eventCode === "Escape") {
this.sendPortMessage("closeAutofillInlineMenu", {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseInlineMenu: true,
});
return;
@ -427,7 +427,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
this.storeModifiedFormElement(formFieldElement);
if (await this.hideInlineMenuListOnFilledField(formFieldElement)) {
this.sendPortMessage("closeAutofillInlineMenu", {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseInlineMenu: true,
});
@ -519,7 +519,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
(initiallyFocusedField !== this.mostRecentlyFocusedField &&
(await this.hideInlineMenuListOnFilledField(formFieldElement as FillableFormFieldElement)))
) {
this.sendPortMessage("closeAutofillInlineMenu", {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
overlayElement: AutofillOverlayElement.List,
forceCloseInlineMenu: true,
});
@ -576,19 +576,6 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
});
}
/**
* Sends a message that facilitates hiding the inline menu elements.
*
* @param isHidden - Indicates if the inline menu elements should be hidden.
* @param setTransparentInlineMenu - Indicates if the inline menu is closing.
*/
private toggleInlineMenuHidden(isHidden: boolean, setTransparentInlineMenu: boolean = false) {
void this.sendExtensionMessage("toggleAutofillInlineMenuHidden", {
isInlineMenuHidden: isHidden,
setTransparentInlineMenu,
});
}
/**
* Updates the data used to position the inline menu elements in relation
* to the most recently focused form field.
@ -938,7 +925,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
subFrameData.subFrameDepth++;
if (subFrameData.subFrameDepth >= MAX_SUB_FRAME_DEPTH) {
void this.sendExtensionMessage("destroyAutofillInlineMenuListeners", { subFrameData });
this.sendPortMessage("destroyAutofillInlineMenuListeners", { subFrameData });
return;
}
@ -970,7 +957,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
return;
}
void this.sendExtensionMessage("updateSubFrameData", { subFrameData });
this.sendPortMessage("updateSubFrameData", { subFrameData });
};
/**
@ -1007,7 +994,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
}
this.unsetMostRecentlyFocusedField();
this.sendPortMessage("closeAutofillInlineMenu", {
void this.sendExtensionMessage("closeAutofillInlineMenu", {
forceCloseInlineMenu: true,
});
};
@ -1075,7 +1062,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
};
private handleSubFrameFocusInEvent = () => {
void this.sendExtensionMessage("triggerSubFrameFocusInRebuild");
this.sendPortMessage("triggerSubFrameFocusInRebuild");
globalThis.removeEventListener(EVENTS.FOCUS, this.handleSubFrameFocusInEvent);
globalThis.document.body.removeEventListener(