[PM-16102] Display autofill shortcut on Fill button hover

bitwarden · Dec 20, 2024 · b89dcad · b89dcad
1 parent 8caadac
commit b89dcad
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/.../components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/.../components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -55,7 +55,11 @@ <h2 bitTypography="h6">
               bitBadge
               variant="primary"
               (click)="doAutofill(cipher)"
-              [title]="'autofillTitle' | i18n: cipher.name"
+              [title]="
+                autofillShortcutTooltip()
+                  ? autofillShortcutTooltip()
+                  : ('autofillTitle' | i18n: cipher.name)
+              "
               [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
             >
               {{ "fill" | i18n }}

diff --git a/...up/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/...up/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -2,12 +2,22 @@
 // @ts-strict-ignore
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, EventEmitter, inject, Input, Output } from "@angular/core";
+import {
+  AfterViewInit,
+  booleanAttribute,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  signal,
+} from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
 import { map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
@@ -50,7 +60,7 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
   templateUrl: "vault-list-items-container.component.html",
   standalone: true,
 })
-export class VaultListItemsContainerComponent {
+export class VaultListItemsContainerComponent implements AfterViewInit {
   private compactModeService = inject(CompactModeService);
 
   /**
@@ -133,14 +143,29 @@ export class VaultListItemsContainerComponent {
     return cipher.collections[0]?.name;
   }
 
+  protected autofillShortcutTooltip = signal<string | undefined>(undefined);
+
   constructor(
     private i18nService: I18nService,
     private vaultPopupAutofillService: VaultPopupAutofillService,
     private passwordRepromptService: PasswordRepromptService,
     private cipherService: CipherService,
     private router: Router,
+    private platformUtilsService: PlatformUtilsService,
   ) {}
 
+  async ngAfterViewInit() {
+    const autofillShortcut = await this.platformUtilsService.getAutofillKeyboardShortcut();
+
+    if (autofillShortcut === "") {
+      this.autofillShortcutTooltip.set(undefined);
+    } else {
+      const autofillTitle = this.i18nService.t("autoFill");
+
+      this.autofillShortcutTooltip.set(`${autofillTitle} ${autofillShortcut}`);
+    }
+  }
+
   /**
    * Launches the login cipher in a new browser tab.
    */