devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-5189] Refactoring implementation

This commit is contained in:
Cesar Gonzalez 2024-05-03 10:51:56 -05:00
parent 90cb44d17b
commit e4750b2757
No known key found for this signature in database
GPG Key ID: 3381A5457F8CCECF
13 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -975,7 +975,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
port.onDisconnect.addListener(this.handlePortOnDisconnect);
port.postMessage({
command: `initAutofillOverlay${isInlineMenuListPort ? "List" : "Button"}`,
command: `initAutofillInlineMenu${isInlineMenuListPort ? "List" : "Button"}`,
iframeUrl: chrome.runtime.getURL(`overlay/${isInlineMenuListPort ? "list" : "button"}.html`),
pageTitle: chrome.i18n.getMessage(
isInlineMenuListPort ? "bitwardenVault" : "bitwardenOverlayButton",

6
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts
View File

@ -12,7 +12,11 @@ type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & {
type OverlayButtonWindowMessageHandlers = {
[key: string]: CallableFunction;
initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void;
initAutofillInlineMenuButton: ({
message,
}: {
message: InitAutofillOverlayButtonMessage;
}) => void;
checkAutofillInlineMenuButtonFocused: () => void;
updateAutofillOverlayButtonAuthStatus: ({
message,

4
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts
View File

@ -16,8 +16,8 @@ type AutofillOverlayIframeExtensionMessageParam = {
type BackgroundPortMessageHandlers = {
[key: string]: CallableFunction;
initAutofillOverlayButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
initAutofillInlineMenuButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
initAutofillInlineMenuList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateInlineMenuHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
updateAutofillInlineMenuColorScheme: () => void;

2
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts
View File

@ -19,7 +19,7 @@ type InitAutofillOverlayListMessage = OverlayListMessage & {
type OverlayListWindowMessageHandlers = {
[key: string]: CallableFunction;
initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void;
initAutofillInlineMenuList: ({ message }: { message: InitAutofillOverlayListMessage }) => void;
checkAutofillInlineMenuListFocused: () => void;
updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void;
focusInlineMenuList: () => void;

4
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-menu-container.ts
View File

@ -20,6 +20,6 @@ export type InitOverlayElementMessage = AutofillOverlayMenuContainerMessage & {
export type AutofillOverlayMenuContainerWindowMessageHandlers = {
[key: string]: CallableFunction;
initAutofillOverlayList: (message: InitOverlayElementMessage) => void;
initAutofillOverlayButton: (message: InitOverlayElementMessage) => void;
initAutofillInlineMenuList: (message: InitOverlayElementMessage) => void;
initAutofillInlineMenuButton: (message: InitOverlayElementMessage) => void;
};

18
apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts
View File

@ -206,7 +206,7 @@ describe("AutofillOverlayIframeService", () => {
it("sets the port key and posts the message to the overlay page iframe", () => {
const portKey = "portKey";
const message = {
command: "initAutofillOverlayButton",
command: "initAutofillInlineMenuButton",
portKey,
};
@ -231,7 +231,7 @@ describe("AutofillOverlayIframeService", () => {
it("passes the message on to the iframe element", () => {
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.Light,
};
@ -246,7 +246,7 @@ describe("AutofillOverlayIframeService", () => {
it("sets a light theme based on the user's system preferences", () => {
window.matchMedia = jest.fn(() => mock<MediaQueryList>({ matches: false }));
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.System,
};
@ -257,7 +257,7 @@ describe("AutofillOverlayIframeService", () => {
autofillOverlayIframeService["iframe"].contentWindow.postMessage,
).toHaveBeenCalledWith(
{
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.Light,
},
"*",
@ -267,7 +267,7 @@ describe("AutofillOverlayIframeService", () => {
it("sets a dark theme based on the user's system preferences", () => {
window.matchMedia = jest.fn(() => mock<MediaQueryList>({ matches: true }));
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.System,
};
@ -278,7 +278,7 @@ describe("AutofillOverlayIframeService", () => {
autofillOverlayIframeService["iframe"].contentWindow.postMessage,
).toHaveBeenCalledWith(
{
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.Dark,
},
"*",
@ -287,7 +287,7 @@ describe("AutofillOverlayIframeService", () => {
it("updates the border to match the `dark` theme", () => {
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.Dark,
};
@ -303,7 +303,7 @@ describe("AutofillOverlayIframeService", () => {
it("updates the border to match the `nord` theme", () => {
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.Nord,
};
@ -319,7 +319,7 @@ describe("AutofillOverlayIframeService", () => {
it("updates the border to match the `solarizedDark` theme", () => {
const message = {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
theme: ThemeType.SolarizedDark,
};

12
apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts
View File

@ -42,8 +42,8 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
private mutationObserverIterations = 0;
private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout;
private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = {
initAutofillOverlayButton: ({ message }) => this.initAutofillOverlay(message),
initAutofillOverlayList: ({ message }) => this.initAutofillOverlay(message),
initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenu(message),
initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenu(message),
updateIframePosition: ({ message }) => this.updateIframePosition(message.styles),
updateInlineMenuHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles),
updateAutofillInlineMenuColorScheme: () => this.updateAutofillInlineMenuColorScheme(),
@ -189,10 +189,10 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
* @param message
* @private
*/
private initAutofillOverlay(message: AutofillOverlayIframeExtensionMessage) {
private initAutofillInlineMenu(message: AutofillOverlayIframeExtensionMessage) {
this.portKey = message.portKey;
if (message.command === "initAutofillOverlayList") {
this.initAutofillOverlayList(message);
if (message.command === "initAutofillInlineMenuList") {
this.initAutofillInlineMenuList(message);
return;
}
@ -205,7 +205,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
*
* @param message - The message sent from the iframe
*/
private initAutofillOverlayList(message: AutofillOverlayIframeExtensionMessage) {
private initAutofillInlineMenuList(message: AutofillOverlayIframeExtensionMessage) {
const { theme } = message;
let borderColor: string;
let verifiedTheme = theme;

2
apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.spec.ts
View File

@ -23,7 +23,7 @@ describe("AutofillOverlayButton", () => {
jest.clearAllMocks();
});
describe("initAutofillOverlayButton", () => {
describe("initAutofillInlineMenuButton", () => {
it("creates the button element with the locked icon when the user's auth status is not Unlocked", async () => {
postWindowMessage(
createInitAutofillOverlayButtonMessageMock({

4
apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts
View File

@ -18,7 +18,7 @@ class AutofillOverlayButton extends AutofillOverlayPageElement {
private readonly logoIconElement: HTMLElement;
private readonly logoLockedIconElement: HTMLElement;
private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = {
initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message),
initAutofillInlineMenuButton: ({ message }) => this.initAutofillInlineMenuButton(message),
checkAutofillInlineMenuButtonFocused: () => this.checkButtonFocused(),
updateAutofillOverlayButtonAuthStatus: ({ message }) =>
this.updateAuthStatus(message.authStatus),
@ -48,7 +48,7 @@ class AutofillOverlayButton extends AutofillOverlayPageElement {
* @param translations - The translations to apply to the page
* @param portKey - Background generated key that allows the port to communicate with the background
*/
private async initAutofillOverlayButton({
private async initAutofillInlineMenuButton({
authStatus,
styleSheetUrl,
translations,

2
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
View File

@ -29,7 +29,7 @@ describe("AutofillOverlayList", () => {
jest.clearAllMocks();
});
describe("initAutofillOverlayList", () => {
describe("initAutofillInlineMenuList", () => {
describe("the locked overlay for an unauthenticated user", () => {
beforeEach(() => {
postWindowMessage(

4
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts
View File

@ -23,7 +23,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
private currentCipherIndex = 0;
private readonly showCiphersPerPage = 6;
private readonly overlayListWindowMessageHandlers: OverlayListWindowMessageHandlers = {
initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
initAutofillInlineMenuList: ({ message }) => this.initAutofillInlineMenuList(message),
checkAutofillInlineMenuListFocused: () => this.checkInlineMenuListFocused(),
updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers),
focusInlineMenuList: () => this.focusInlineMenuList(),
@ -46,7 +46,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
* @param ciphers - The ciphers to display in the overlay list.
* @param portKey - Background generated key that allows the port to communicate with the background.
*/
private async initAutofillOverlayList({
private async initAutofillInlineMenuList({
translations,
styleSheetUrl,
theme,

4
apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts
View File

@ -37,8 +37,8 @@ export class AutofillOverlayMenuContainer {
tabIndex: "-1",
};
private windowMessageHandlers: AutofillOverlayMenuContainerWindowMessageHandlers = {
initAutofillOverlayList: (message) => this.handleInitOverlayIframe(message),
initAutofillOverlayButton: (message) => this.handleInitOverlayIframe(message),
initAutofillInlineMenuList: (message) => this.handleInitOverlayIframe(message),
initAutofillInlineMenuButton: (message) => this.handleInitOverlayIframe(message),
};
constructor() {

4
apps/browser/src/autofill/spec/autofill-mocks.ts
View File

@ -169,7 +169,7 @@ function createInitAutofillOverlayButtonMessageMock(
customFields = {},
): InitAutofillOverlayButtonMessage {
return {
command: "initAutofillOverlayButton",
command: "initAutofillInlineMenuButton",
translations: overlayPagesTranslations,
styleSheetUrl: "https://jest-testing-website.com",
authStatus: AuthenticationStatus.Unlocked,
@ -199,7 +199,7 @@ function createInitAutofillOverlayListMessageMock(
customFields = {},
): InitAutofillOverlayListMessage {
return {
command: "initAutofillOverlayList",
command: "initAutofillInlineMenuList",
translations: overlayPagesTranslations,
styleSheetUrl: "https://jest-testing-website.com",
theme: ThemeType.Light,