[PM-8833] Implement on page autofill menu for password generation

apps/browser/src/_locales/en/messages.json

@@ -4474,5 +4474,12 @@
   },
   "noEditPermissions": {
     "message": "You don't have permission to edit this item"
+  },
+  "fillGeneratedPassword": {
+    "message": "Fill generated password",
+    "description": "Heading for the password generator within the inline menu"
+  },
+  "passwordRegenerated": {
+    "message": "Password regenerated"
   }
 }

apps/browser/src/autofill/background/abstractions/overlay.background.ts

@@ -2,6 +2,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 AutofillPageDetails from "../../models/autofill-page-details";
 import { PageDetail } from "../../services/abstractions/autofill.service";
 
@@ -32,14 +33,18 @@ export type WebsiteIconData = {
   icon: string;
 };
 
+export type UpdateOverlayCiphersParams = {
+  updateAllCipherTypes: boolean;
+  openInlineMenu: boolean;
+};
+
 export type FocusedFieldData = {
   focusedFieldStyles: Partial<CSSStyleDeclaration>;
   focusedFieldRects: Partial<DOMRect>;
-  filledByCipherType?: CipherType;
+  inlineMenuFillType?: InlineMenuFillTypes;
   tabId?: number;
   frameId?: number;
   accountCreationFieldType?: string;
-  showInlineMenuAccountCreation?: boolean;
   showPasskeys?: boolean;
 };
 
@@ -247,6 +252,8 @@ export type InlineMenuListPortMessageHandlers = {
   viewSelectedCipher: ({ message, port }: PortOnMessageHandlerParams) => void;
   redirectAutofillInlineMenuFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
   updateAutofillInlineMenuListHeight: ({ message, port }: PortOnMessageHandlerParams) => void;
+  refreshGeneratedPassword: () => Promise<void>;
+  fillGeneratedPassword: ({ port }: PortConnectionParam) => Promise<void>;
 };
 
 export interface OverlayBackground {

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -2,7 +2,7 @@
 import { BehaviorSubject } from "rxjs";
 
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import {
   AutofillOverlayVisibility,
   SHOW_AUTOFILL_BUTTON,
@@ -36,6 +36,7 @@
 import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { Fido2CredentialView } from "@bitwarden/common/vault/models/view/fido2-credential.view";
+import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
 import { BrowserPlatformUtilsService } from "../../platform/services/platform-utils/browser-platform-utils.service";
@@ -46,6 +47,7 @@
   RedirectFocusDirection,
 } from "../enums/autofill-overlay.enum";
 import { AutofillService } from "../services/abstractions/autofill.service";
+import { InlineMenuFieldQualificationService } from "../services/abstractions/inline-menu-field-qualifications.service";
 import {
   createAutofillPageDetailsMock,
   createChromeTabMock,
@@ -94,6 +96,8 @@
   let vaultSettingsServiceMock: MockProxy<VaultSettingsService>;
   let fido2ActiveRequestManager: Fido2ActiveRequestManager;
   let selectedThemeMock$: BehaviorSubject<ThemeType>;
+  let passwordGenerationService: MockProxy<PasswordGenerationServiceAbstraction>;
+  let inlineMenuFieldQualificationService: MockProxy<InlineMenuFieldQualificationService>;
   let themeStateService: MockProxy<ThemeStateService>;
   let overlayBackground: OverlayBackground;
   let portKeyForTabSpy: Record<number, string>;
@@ -166,7 +170,9 @@
     vaultSettingsServiceMock.enablePasskeys$ = enablePasskeysMock$;
     fido2ActiveRequestManager = new Fido2ActiveRequestManager();
     selectedThemeMock$ = new BehaviorSubject(ThemeType.Light);
+    inlineMenuFieldQualificationService = mock<InlineMenuFieldQualificationService>();
     themeStateService = mock<ThemeStateService>();
+    passwordGenerationService = mock<PasswordGenerationServiceAbstraction>();
     themeStateService.selectedTheme$ = selectedThemeMock$;
     overlayBackground = new OverlayBackground(
       logService,
@@ -180,6 +186,8 @@
       platformUtilsService,
       vaultSettingsServiceMock,
       fido2ActiveRequestManager,
+      passwordGenerationService,
+      inlineMenuFieldQualificationService,
       themeStateService,
     );
     portKeyForTabSpy = overlayBackground["portKeyForTab"];
@@ -922,7 +930,7 @@
     it("updates the inline menu list with card ciphers", async () => {
       overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
         tabId: tab.id,
-        filledByCipherType: CipherType.Card,
+        inlineMenuFillType: CipherType.Card,
       });
       cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, cardCipher]);
       cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
@@ -959,7 +967,6 @@
         overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
           tabId: tab.id,
           accountCreationFieldType: "text",
-          showInlineMenuAccountCreation: true,
         });
         cipherService.getAllDecryptedForUrl.mockResolvedValue([identityCipher, cardCipher]);
         cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
@@ -998,7 +1005,6 @@
         overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
           tabId: tab.id,
           accountCreationFieldType: "text",
-          showInlineMenuAccountCreation: true,
         });
         cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, identityCipher]);
         cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
@@ -1055,7 +1061,6 @@
         overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
           tabId: tab.id,
           accountCreationFieldType: "email",
-          showInlineMenuAccountCreation: true,
         });
         const identityCipherWithoutUsername = mock<CipherView>({
           id: "id-5",
@@ -1107,7 +1112,6 @@
         overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
           tabId: tab.id,
           accountCreationFieldType: "password",
-          showInlineMenuAccountCreation: true,
         });
         cipherService.getAllDecryptedForUrl.mockResolvedValue([identityCipher]);
         cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
@@ -1132,7 +1136,7 @@
       );
       overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
         tabId: tab.id,
-        filledByCipherType: CipherType.Login,
+        inlineMenuFillType: CipherType.Login,
         showPasskeys: true,
       });
       cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, passkeyCipher]);
@@ -1215,7 +1219,7 @@
       );
       overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
         tabId: tab.id,
-        filledByCipherType: CipherType.Login,
+        inlineMenuFillType: CipherType.Login,
         showPasskeys: true,
       });
       cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, passkeyCipher]);
@@ -1279,7 +1283,7 @@
       );
       overlayBackground["focusedFieldData"] = createFocusedFieldDataMock({
         tabId: tab.id,
-        filledByCipherType: CipherType.Login,
+        inlineMenuFillType: CipherType.Login,
         showPasskeys: true,
       });
       cipherService.getAllDecryptedForUrl.mockResolvedValue([loginCipher1, passkeyCipher]);
@@ -1873,7 +1877,6 @@
         const focusedFieldData = createFocusedFieldDataMock({
           tabId: tab.id,
           frameId: sender.frameId,
-          showInlineMenuAccountCreation: true,
         });
 
         sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData }, sender);
@@ -1894,15 +1897,15 @@
         const focusedFieldData = createFocusedFieldDataMock({
           tabId: tab.id,
           frameId: sender.frameId,
-          filledByCipherType: CipherType.Login,
+          inlineMenuFillType: CipherType.Login,
         });
         sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData }, sender);
         await flushPromises();
 
         const newFocusedFieldData = createFocusedFieldDataMock({
           tabId: tab.id,
           frameId: sender.frameId,
-          filledByCipherType: CipherType.Card,
+          inlineMenuFillType: CipherType.Card,
         });
         sendMockExtensionMessage(
           { command: "updateFocusedFieldData", focusedFieldData: newFocusedFieldData },