apply changes to autofill

2026-01-27 23:03:45 +00:00 · 2026-01-20 14:47:48 -08:00
parent 246765a1aa
commit 482f7c85f5
11 changed files with 11 additions and 115 deletions
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
@@ -7,6 +7,5 @@
  [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : undefined"
  showAutofillButton
  [disableDescriptionMargin]="showEmptyAutofillTip$ | async"
-  [primaryActionAutofill]="clickItemsToAutofillVaultView$ | async"
  [groupByType]="groupByType()"
 ></app-vault-list-items-container>
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
-import { combineLatest, map, Observable, startWith } from "rxjs";
+import { combineLatest, map, Observable } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
@@ -42,12 +42,6 @@ export class AutofillVaultListItemsComponent {
   */
  protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window);

-  /** Flag indicating whether the login item should automatically autofill when clicked  */
-  protected clickItemsToAutofillVaultView$: Observable<boolean> =
-    this.vaultSettingsService.clickItemsToAutofillVaultView$.pipe(
-      startWith(true), // Start with true to avoid flashing the fill button on first load
-    );
-
  protected readonly groupByType = toSignal(
    this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => !hasFilter)),
  );
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -15,7 +15,7 @@
          </button>
        </ng-container>
      </ng-container>
-      <ng-container *ngIf="showViewOption">
+      <ng-container>
        <button type="button" bitMenuItem (click)="onView()">
          {{ "view" | i18n }}
        </button>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -90,7 +90,7 @@
      </ng-container>

      <cdk-virtual-scroll-viewport [itemSize]="itemHeight$ | async" bitScrollLayout>
-        <bit-item *cdkVirtualFor="let cipher of group.ciphers">
+        <bit-item *cdkVirtualFor="let cipher of group.ciphers" class="tw-group/vault-item">
          <button
            bit-item-content
            type="button"
@@ -126,16 +126,11 @@

          <ng-container slot="end">
            <bit-item-action *ngIf="!hideAutofillButton()">
-              <button
-                type="button"
-                bitBadge
-                variant="primary"
-                (click)="doAutofill(cipher)"
-                [title]="autofillShortcutTooltip() ?? ('autofillTitle' | i18n: cipher.name)"
-                [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
+              <span
+                class="tw-opacity-0 tw-text-sm tw-text-primary-600 tw-px-2 group-hover/vault-item:tw-opacity-100 group-focus-within/vault-item:tw-opacity-100"
              >
                {{ "fill" | i18n }}
-              </button>
+              </span>
            </bit-item-action>
            <bit-item-action *ngIf="!showAutofillButton() && CipherViewLikeUtils.canLaunch(cipher)">
              <button
@@ -150,7 +145,6 @@
            <app-item-more-options
              [cipher]="cipher"
              [hideAutofillOptions]="hideAutofillMenuOptions()"
-              [showViewOption]="primaryActionAutofill()"
            ></app-item-more-options>
          </ng-container>
        </bit-item>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -248,10 +248,7 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
    return (cipher: CipherViewLike) => {
      const login = CipherViewLikeUtils.getLogin(cipher);
      const hasUsername = login?.username != null;
-      const key =
-        this.primaryActionAutofill() && !this.currentURIIsBlocked()
-          ? "autofillTitle"
-          : "viewItemTitle";
+      const key = !this.currentURIIsBlocked() ? "autofillTitle" : "viewItemTitle";
      return hasUsername ? `${key}WithField` : key;
    };
  });
@@ -268,9 +265,7 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   */
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
  // eslint-disable-next-line @angular-eslint/prefer-signals
-  hideAutofillButton = computed(
-    () => !this.showAutofillButton() || this.currentURIIsBlocked() || this.primaryActionAutofill(),
-  );
+  hideAutofillButton = computed(() => !this.showAutofillButton() || this.currentURIIsBlocked());

  /**
   * Flag indicating whether the cipher item autofill menu options should be shown or not
@@ -279,13 +274,6 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  // eslint-disable-next-line @angular-eslint/prefer-signals
  hideAutofillMenuOptions = computed(() => this.currentURIIsBlocked() || this.showAutofillButton());

-  /**
-   * Option to perform autofill operation as the primary action for autofill suggestions.
-   */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  primaryActionAutofill = input(false, { transform: booleanAttribute });
-
  /**
   * Remove the bottom margin from the bit-section in this component
   * (used for containers at the end of the page where bottom margin is not needed)
@@ -341,9 +329,7 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
  }

  primaryActionOnSelect(cipher: PopupCipherViewLike) {
-    return this.primaryActionAutofill() && !this.currentURIIsBlocked()
-      ? this.doAutofill(cipher)
-      : this.onViewCipher(cipher);
+    return !this.currentURIIsBlocked() ? this.doAutofill(cipher) : this.onViewCipher(cipher);
  }

  /**
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -50,16 +50,10 @@
          <vault-permit-cipher-details-popover></vault-permit-cipher-details-popover>
        </bit-label>
      </bit-form-control>
-      <bit-form-control>
+      <bit-form-control disableMargin>
        <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
        <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
      </bit-form-control>
-      <bit-form-control disableMargin>
-        <input bitCheckbox formControlName="clickItemsToAutofillVaultView" type="checkbox" />
-        <bit-label>
-          {{ "clickToAutofill" | i18n }}
-        </bit-label>
-      </bit-form-control>
    </bit-card>
  </form>
 </popup-page>
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
@@ -12,7 +12,6 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
-import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";

 import { PopupCompactModeService } from "../../../platform/popup/layout/popup-compact-mode.service";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -59,14 +58,12 @@ describe("AppearanceV2Component", () => {
  const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
  const enableCompactMode$ = new BehaviorSubject<boolean>(false);
  const showQuickCopyActions$ = new BehaviorSubject<boolean>(false);
-  const clickItemsToAutofillVaultView$ = new BehaviorSubject<boolean>(false);
  const setSelectedTheme = jest.fn().mockResolvedValue(undefined);
  const setShowFavicons = jest.fn().mockResolvedValue(undefined);
  const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined);
  const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined);
  const setEnableCompactMode = jest.fn().mockResolvedValue(undefined);
  const setShowQuickCopyActions = jest.fn().mockResolvedValue(undefined);
-  const setClickItemsToAutofillVaultView = jest.fn().mockResolvedValue(undefined);

  const mockWidthService: Partial<PopupSizeService> = {
    width$: new BehaviorSubject("default"),
@@ -111,13 +108,6 @@ describe("AppearanceV2Component", () => {
          provide: PopupSizeService,
          useValue: mockWidthService,
        },
-        {
-          provide: VaultSettingsService,
-          useValue: {
-            clickItemsToAutofillVaultView$,
-            setClickItemsToAutofillVaultView,
-          },
-        },
      ],
    })
      .overrideComponent(AppearanceV2Component, {
@@ -147,7 +137,6 @@ describe("AppearanceV2Component", () => {
      enableCompactMode: false,
      showQuickCopyActions: false,
      width: "default",
-      clickItemsToAutofillVaultView: false,
    });
  });

@@ -193,11 +182,5 @@ describe("AppearanceV2Component", () => {

      expect(mockWidthService.setWidth).toHaveBeenCalledWith("wide");
    });
-
-    it("updates the click items to autofill vault view setting", () => {
-      component.appearanceForm.controls.clickItemsToAutofillVaultView.setValue(true);
-
-      expect(setClickItemsToAutofillVaultView).toHaveBeenCalledWith(true);
-    });
  });
 });
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -66,7 +66,6 @@ export class AppearanceV2Component implements OnInit {
    enableCompactMode: false,
    showQuickCopyActions: false,
    width: "default" as PopupWidthOption,
-    clickItemsToAutofillVaultView: false,
  });

  /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -112,9 +111,6 @@ export class AppearanceV2Component implements OnInit {
      this.copyButtonsService.showQuickCopyActions$,
    );
    const width = await firstValueFrom(this.popupSizeService.width$);
-    const clickItemsToAutofillVaultView = await firstValueFrom(
-      this.vaultSettingsService.clickItemsToAutofillVaultView$,
-    );

    // Set initial values for the form
    this.appearanceForm.setValue({
@@ -125,7 +121,6 @@ export class AppearanceV2Component implements OnInit {
      enableCompactMode,
      showQuickCopyActions,
      width,
-      clickItemsToAutofillVaultView,
    });

    this.formLoading = false;
@@ -171,16 +166,6 @@ export class AppearanceV2Component implements OnInit {
      .subscribe((width) => {
        void this.updateWidth(width);
      });
-
-    this.appearanceForm.controls.clickItemsToAutofillVaultView.valueChanges
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((clickItemsToAutofillVaultView) => {
-        void this.updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
-      });
-  }
-
-  async updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView: boolean) {
-    await this.vaultSettingsService.setClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
  }

  async updateFavicon(enableFavicon: boolean) {
--- a/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts
+++ b/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts
@@ -16,11 +16,6 @@ export abstract class VaultSettingsService {
   * An observable monitoring the state of the show identities on the current tab.
   */
  abstract showIdentitiesCurrentTab$: Observable<boolean>;
-  /**
-   * An observable monitoring the state of the click items on the Vault view
-   * for Autofill suggestions.
-   */
-  abstract clickItemsToAutofillVaultView$: Observable<boolean>;

  /**
   * Saves the enable passkeys setting to disk.
@@ -37,10 +32,4 @@ export abstract class VaultSettingsService {
   * @param value The new value for the show identities on tab page setting.
   */
  abstract setShowIdentitiesCurrentTab(value: boolean): Promise<void>;
-  /**
-   * Saves the click items on vault View for Autofill suggestions to disk.
-   * @param value The new value for the click items on vault View for
-   * Autofill suggestions setting.
-   */
-  abstract setClickItemsToAutofillVaultView(value: boolean): Promise<void>;
 }
--- a/libs/common/src/vault/services/key-state/vault-settings.state.ts
+++ b/libs/common/src/vault/services/key-state/vault-settings.state.ts
@@ -25,12 +25,3 @@ export const SHOW_IDENTITIES_CURRENT_TAB = new UserKeyDefinition<boolean>(
    clearOn: [], // do not clear user settings
  },
 );
-
-export const CLICK_ITEMS_AUTOFILL_VAULT_VIEW = new UserKeyDefinition<boolean>(
-  VAULT_SETTINGS_DISK,
-  "clickItemsToAutofillOnVaultView",
-  {
-    deserializer: (obj) => obj,
-    clearOn: [], // do not clear user settings
-  },
-);
--- a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts
+++ b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts
@@ -1,4 +1,4 @@
-import { Observable, combineLatest, map, shareReplay } from "rxjs";
+import { Observable, combineLatest, map } from "rxjs";

 import { ActiveUserState, GlobalState, StateProvider } from "../../../platform/state";
 import { VaultSettingsService as VaultSettingsServiceAbstraction } from "../../abstractions/vault-settings/vault-settings.service";
@@ -7,7 +7,6 @@ import {
  SHOW_CARDS_CURRENT_TAB,
  SHOW_IDENTITIES_CURRENT_TAB,
  USER_ENABLE_PASSKEYS,
-  CLICK_ITEMS_AUTOFILL_VAULT_VIEW,
 } from "../key-state/vault-settings.state";
 import { RestrictedItemTypesService } from "../restricted-item-types.service";

@@ -49,17 +48,6 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction {
  readonly showIdentitiesCurrentTab$: Observable<boolean> =
    this.showIdentitiesCurrentTabState.state$.pipe(map((x) => x ?? true));

-  private clickItemsToAutofillVaultViewState: ActiveUserState<boolean> =
-    this.stateProvider.getActive(CLICK_ITEMS_AUTOFILL_VAULT_VIEW);
-  /**
-   * {@link VaultSettingsServiceAbstraction.clickItemsToAutofillVaultView$$}
-   */
-  readonly clickItemsToAutofillVaultView$: Observable<boolean> =
-    this.clickItemsToAutofillVaultViewState.state$.pipe(
-      map((x) => x ?? false),
-      shareReplay({ bufferSize: 1, refCount: false }),
-    );
-
  constructor(
    private stateProvider: StateProvider,
    private restrictedItemTypesService: RestrictedItemTypesService,
@@ -79,13 +67,6 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction {
    await this.showIdentitiesCurrentTabState.update(() => value);
  }

-  /**
-   * {@link VaultSettingsServiceAbstraction.setClickItemsToAutofillVaultView}
-   */
-  async setClickItemsToAutofillVaultView(value: boolean): Promise<void> {
-    await this.clickItemsToAutofillVaultViewState.update(() => value);
-  }
-
  /**
   * {@link VaultSettingsServiceAbstraction.setEnablePasskeys}
   */