bitwarden · jprusik · Jun 3, 2025 · Jun 2, 2025
@@ -4,7 +4,7 @@ import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 
-import { InlineMenuFillTypes } from "../../enums/autofill-overlay.enum";
+import { InlineMenuFillType } from "../../enums/autofill-overlay.enum";
 import AutofillPageDetails from "../../models/autofill-page-details";
 import { PageDetail } from "../../services/abstractions/autofill.service";
 
@@ -43,7 +43,7 @@ export type UpdateOverlayCiphersParams = {
 export type FocusedFieldData = {
   focusedFieldStyles: Partial<CSSStyleDeclaration>;
   focusedFieldRects: Partial<DOMRect>;
-  inlineMenuFillType?: InlineMenuFillTypes;
+  inlineMenuFillType?: InlineMenuFillType;
   tabId?: number;
   frameId?: number;
   accountCreationFieldType?: string;

@@ -45,7 +45,7 @@ import {
   AutofillOverlayElement,
   AutofillOverlayPort,
   InlineMenuAccountCreationFieldType,
-  InlineMenuFillType,
+  InlineMenuFillTypes,
   MAX_SUB_FRAME_DEPTH,
   RedirectFocusDirection,
 } from "../enums/autofill-overlay.enum";
@@ -1025,7 +1025,7 @@ describe("OverlayBackground", () => {
         overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
           tabId: tab.id,
           accountCreationFieldType: "text",
-          inlineMenuFillType: InlineMenuFillType.AccountCreationUsername,
+          inlineMenuFillType: InlineMenuFillTypes.AccountCreationUsername,
         });
         cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, identityCipher]);
         cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
@@ -1383,7 +1383,7 @@ describe("OverlayBackground", () => {
         {
           command: "updateFocusedFieldData",
           focusedFieldData: createFocusedFieldDataMock({
-            inlineMenuFillType: InlineMenuFillType.CurrentPasswordUpdate,
+            inlineMenuFillType: InlineMenuFillTypes.CurrentPasswordUpdate,
           }),
         },
         mock<chrome.runtime.MessageSender>({ tab }),
@@ -2045,7 +2045,7 @@ describe("OverlayBackground", () => {
         });
 
         it("displays the password generator when the focused field is for password generation", async () => {
-          focusedFieldData.inlineMenuFillType = InlineMenuFillType.PasswordGeneration;
+          focusedFieldData.inlineMenuFillType = InlineMenuFillTypes.PasswordGeneration;
 
           sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData }, sender);
           await flushPromises();
@@ -2103,7 +2103,7 @@ describe("OverlayBackground", () => {
         });
 
         it("shows the save login menu when the focused field type is for password generation and the field is filled", async () => {
-          focusedFieldData.inlineMenuFillType = InlineMenuFillType.PasswordGeneration;
+          focusedFieldData.inlineMenuFillType = InlineMenuFillTypes.PasswordGeneration;
 
           sendMockExtensionMessage(
             { command: "updateFocusedFieldData", focusedFieldData, focusedFieldHasValue: true },
@@ -3409,7 +3409,7 @@ describe("OverlayBackground", () => {
           {
             command: "updateFocusedFieldData",
             focusedFieldData: createFocusedFieldDataMock({
-              inlineMenuFillType: InlineMenuFillType.CurrentPasswordUpdate,
+              inlineMenuFillType: InlineMenuFillTypes.CurrentPasswordUpdate,
             }),
           },
           sender,
@@ -3607,7 +3607,7 @@ describe("OverlayBackground", () => {
 
     describe("fillGeneratedPassword", () => {
       const focusedFieldData = createFocusedFieldDataMock({
-        inlineMenuFillType: InlineMenuFillType.PasswordGeneration,
+        inlineMenuFillType: InlineMenuFillTypes.PasswordGeneration,
       });
 
       beforeEach(() => {

@@ -797,7 +797,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * @param focusedFieldData - Optional focused field data to validate against
    */
   private focusedFieldMatchesFillType(
-    fillType: InlineMenuFillTypes,
+    fillType: InlineMenuFillType,
     focusedFieldData?: FocusedFieldData,
   ) {
     const focusedFieldFillType = focusedFieldData
@@ -806,7 +806,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
 
     // When updating the current password for a field, it should fill with a login cipher
     if (
-      focusedFieldFillType === InlineMenuFillType.CurrentPasswordUpdate &&
+      focusedFieldFillType === InlineMenuFillTypes.CurrentPasswordUpdate &&
       fillType === CipherType.Login
     ) {
       return true;
@@ -819,7 +819,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * Identifies whether the inline menu is being shown on an account creation field.
    */
   private shouldShowInlineMenuAccountCreation(): boolean {
-    if (this.focusedFieldMatchesFillType(InlineMenuFillType.AccountCreationUsername)) {
+    if (this.focusedFieldMatchesFillType(InlineMenuFillTypes.AccountCreationUsername)) {
       return true;
     }
 
@@ -1152,7 +1152,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     }
 
     let pageDetails = Array.from(pageDetailsForTab.values());
-    if (this.focusedFieldMatchesFillType(InlineMenuFillType.CurrentPasswordUpdate)) {
+    if (this.focusedFieldMatchesFillType(InlineMenuFillTypes.CurrentPasswordUpdate)) {
       pageDetails = this.getFilteredPageDetails(
         pageDetails,
         this.inlineMenuFieldQualificationService.isUpdateCurrentPasswordField,
@@ -1705,7 +1705,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private shouldUpdatePasswordGeneratorMenuOnFieldFocus() {
     return (
       this.isInlineMenuButtonVisible &&
-      this.focusedFieldMatchesFillType(InlineMenuFillType.PasswordGeneration)
+      this.focusedFieldMatchesFillType(InlineMenuFillTypes.PasswordGeneration)
     );
   }
 
@@ -1767,9 +1767,9 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private shouldUpdateAccountCreationMenuOnFieldFocus(previousFocusedFieldData: FocusedFieldData) {
     const accountCreationFieldBlurred =
       this.focusedFieldMatchesFillType(
-        InlineMenuFillType.AccountCreationUsername,
+        InlineMenuFillTypes.AccountCreationUsername,
         previousFocusedFieldData,
-      ) && !this.focusedFieldMatchesFillType(InlineMenuFillType.AccountCreationUsername);
+      ) && !this.focusedFieldMatchesFillType(InlineMenuFillTypes.AccountCreationUsername);
     return accountCreationFieldBlurred || this.shouldShowInlineMenuAccountCreation();
   }
 
@@ -1876,7 +1876,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
 
     return (
       (this.shouldShowInlineMenuAccountCreation() ||
-        this.focusedFieldMatchesFillType(InlineMenuFillType.PasswordGeneration)) &&
+        this.focusedFieldMatchesFillType(InlineMenuFillTypes.PasswordGeneration)) &&
       !!(loginData.password || loginData.newPassword)
     );
   }
@@ -3036,7 +3036,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     }
 
     const focusFieldShouldShowPasswordGenerator =
-      this.focusedFieldMatchesFillType(InlineMenuFillType.PasswordGeneration) ||
+      this.focusedFieldMatchesFillType(InlineMenuFillTypes.PasswordGeneration) ||
       (showInlineMenuAccountCreation &&
         this.focusedFieldMatchesAccountCreationType(InlineMenuAccountCreationFieldType.Password));
     if (!focusFieldShouldShowPasswordGenerator) {

@@ -20,7 +20,7 @@ It is designed with accessibility and responsive design in mind.
 | `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
 | `buttonText`   | `string`                   | Yes          | The text to display on the button.                          |
 | `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
-| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` type. |
 
 ## Installation and Setup
 

@@ -20,7 +20,7 @@ handling, and a disabled state. The component is optimized for accessibility and
 | `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
 | `buttonText`   | `string`                   | Yes          | The text to display on the badge button.                    |
 | `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
-| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` type. |
 
 ## Installation and Setup
 

@@ -19,7 +19,7 @@ presenting actionable information.
 | ------------------ | ------------------ | ------------ | --------------------------------------------------------------------------------------------------------- |
 | `ciphers`          | `CipherData[]`     | Yes          | An array of cipher data objects. Each cipher includes metadata such as ID, name, type, and login details. |
 | `notificationType` | `NotificationType` | Yes          | Specifies the type of notification, such as `add`, `change`, `unlock`, or `fileless-import`.              |
-| `theme`            | `Theme`            | Yes          | Defines the theme used for styling the notification. Must match the `Theme` enum.                         |
+| `theme`            | `Theme`            | Yes          | Defines the theme used for styling the notification. Must match the `Theme` type.                         |
 
 ---
 

@@ -17,7 +17,7 @@ a close icon for visual clarity. The component is designed to be intuitive and a
 | **Prop**                  | **Type**             | **Required** | **Description**                                             |
 | ------------------------- | -------------------- | ------------ | ----------------------------------------------------------- |
 | `handleCloseNotification` | `(e: Event) => void` | Yes          | The function to execute when the button is clicked.         |
-| `theme`                   | `Theme`              | Yes          | The theme to style the button. Must match the `Theme` enum. |
+| `theme`                   | `Theme`              | Yes          | The theme to style the button. Must match the `Theme` type. |
 
 ## Installation and Setup
 

@@ -20,7 +20,7 @@ or settings where inline editing is required.
 | `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
 | `buttonText`   | `string`                   | Yes          | The text displayed as the button's tooltip.                 |
 | `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
-| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` type. |
 
 ## Installation and Setup
 

@@ -17,7 +17,7 @@ customization based on the `theme` and `notificationType`.
 | **Prop**           | **Type**           | **Required** | **Description**                                                                                    |
 | ------------------ | ------------------ | ------------ | -------------------------------------------------------------------------------------------------- |
 | `notificationType` | `NotificationType` | Yes          | The type of notification footer to display. Options: `add`, `change`, `unlock`, `fileless-import`. |
-| `theme`            | `Theme`            | Yes          | Defines the theme of the notification footer. Must match the `Theme` enum.                         |
+| `theme`            | `Theme`            | Yes          | Defines the theme of the notification footer. Must match the `Theme` type.                         |
 
 ---
 

@@ -19,7 +19,7 @@ and an optional close button. This component is versatile and can be styled dyna
 | ------------------------- | -------------------- | ------------ | ------------------------------------------------------------------- |
 | `message`                 | `string`             | Yes          | The text message to be displayed in the notification.               |
 | `standalone`              | `boolean`            | No           | Determines if the notification is displayed independently.          |
-| `theme`                   | `Theme`              | Yes          | Defines the theme of the notification. Must match the `Theme` enum. |
+| `theme`                   | `Theme`              | Yes          | Defines the theme of the notification. Must match the `Theme` type. |
 | `handleCloseNotification` | `(e: Event) => void` | No           | A callback function triggered when the close button is clicked.     |
 
 ---

@@ -28,7 +28,7 @@ like size, color, and theme. Each story is an example of how a specific icon can
 | `iconLink` | `URL`     | No           | Defines an external URL associated with the icon, prop exclusive to `Brand Icon`. |
 | `color`    | `string`  | No           | Sets the color of the icon.                                                       |
 | `disabled` | `boolean` | No           | Disables the icon visually and functionally.                                      |
-| `theme`    | `Theme`   | Yes          | Defines the theme used to style the icons. Must match the `Theme` enum.           |
+| `theme`    | `Theme`   | Yes          | Defines the theme used to style the icons. Must match the `Theme` type.           |
 | `size`     | `number`  | Yes          | Sets the width and height of the icon in pixels.                                  |
 
 ---

@@ -21,14 +21,16 @@ export const RedirectFocusDirection = {
   Next: "next",
 } as const;
 
-// FIXME: update to use a const object instead of a typescript enum
-// eslint-disable-next-line @bitwarden/platform/no-enums
-export enum InlineMenuFillType {
-  AccountCreationUsername = 5,
-  PasswordGeneration = 6,
-  CurrentPasswordUpdate = 7,
-}
-export type InlineMenuFillTypes = InlineMenuFillType | CipherType;
+export const InlineMenuFillTypes = {
+  AccountCreationUsername: 5,
+  PasswordGeneration: 6,
+  CurrentPasswordUpdate: 7,
+} as const;
+
+export type InlineMenuFillTypeValue =
+  (typeof InlineMenuFillTypes)[keyof typeof InlineMenuFillTypes];
+
+export type InlineMenuFillType = InlineMenuFillTypeValue | CipherType;
 
 export const InlineMenuAccountCreationFieldType = {
   Text: "text",

@@ -6,7 +6,7 @@ import { createPortSpyMock } from "../../../autofill/spec/autofill-mocks";
 import { triggerPortOnDisconnectEvent } from "../../../autofill/spec/testing-utils";
 import { Fido2PortName } from "../enums/fido2-port-name.enum";
 
-import { InsecureCreateCredentialParams, MessageType } from "./messaging/message";
+import { InsecureCreateCredentialParams, MessageTypes } from "./messaging/message";
 import { MessageWithMetadata, Messenger } from "./messaging/messenger";
 
 jest.mock("../../../autofill/utils", () => ({
@@ -71,7 +71,7 @@ describe("Fido2 Content Script", () => {
 
   it("handles a FIDO2 credential creation request message from the window message listener, formats the message and sends the formatted message to the extension background", async () => {
     const message = mock<MessageWithMetadata>({
-      type: MessageType.CredentialCreationRequest,
+      type: MessageTypes.CredentialCreationRequest,
       data: mock<InsecureCreateCredentialParams>(),
     });
     const mockResult = { credentialId: "mock" } as CreateCredentialResult;
@@ -92,14 +92,14 @@ describe("Fido2 Content Script", () => {
       requestId: expect.any(String),
     });
     expect(response).toEqual({
-      type: MessageType.CredentialCreationResponse,
+      type: MessageTypes.CredentialCreationResponse,
       result: mockResult,
     });
   });
 
   it("handles a FIDO2 credential get request message from the window message listener, formats the message and sends the formatted message to the extension background", async () => {
     const message = mock<MessageWithMetadata>({
-      type: MessageType.CredentialGetRequest,
+      type: MessageTypes.CredentialGetRequest,
       data: mock<InsecureCreateCredentialParams>(),
     });
 
@@ -121,7 +121,7 @@ describe("Fido2 Content Script", () => {
 
   it("removes the abort handler when the FIDO2 request is complete", async () => {
     const message = mock<MessageWithMetadata>({
-      type: MessageType.CredentialCreationRequest,
+      type: MessageTypes.CredentialCreationRequest,
       data: mock<InsecureCreateCredentialParams>(),
     });
     const abortController = new AbortController();
@@ -138,16 +138,14 @@ describe("Fido2 Content Script", () => {
 
   it("sends an extension message to abort the FIDO2 request when the abort controller is signaled", async () => {
     const message = mock<MessageWithMetadata>({
-      type: MessageType.CredentialCreationRequest,
+      type: MessageTypes.CredentialCreationRequest,
       data: mock<InsecureCreateCredentialParams>(),
     });
     const abortController = new AbortController();
     const abortSpy = jest.spyOn(abortController.signal, "addEventListener");
-    jest
-      .spyOn(chrome.runtime, "sendMessage")
-      .mockImplementationOnce(async (extensionId: string, message: unknown, options: any) => {
-        abortController.abort();
-      });
+    jest.spyOn(chrome.runtime, "sendMessage").mockImplementationOnce(async () => {
+      abortController.abort();
+    });
 
     // FIXME: Remove when updating file. Eslint update
     // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -165,7 +163,7 @@ describe("Fido2 Content Script", () => {
   it("rejects credential requests and returns an error result", async () => {
     const errorMessage = "Test error";
     const message = mock<MessageWithMetadata>({
-      type: MessageType.CredentialCreationRequest,
+      type: MessageTypes.CredentialCreationRequest,
       data: mock<InsecureCreateCredentialParams>(),
     });
     const abortController = new AbortController();