[PM-7173] Update autofill settings [Nav changes] (#9318)

* Introduce additional options heading

Text will be needed for the UI changes later on anyway

* Move enableContextMenuItem from options.component to autofill.component

* Move copy TOTP automatically from options.component to autofill.component

* Move clearClipboard from options.component to autofill.component

* Move showCardsCurrentTab from options.component to autofill.component

* Move showIdentitiesCurrentTab from options.component to autofill.component

* Remove options.component as all controls have been migrated

Delete options.component
Import within AppModule
Delete obsolete route
Remove animation/page transition
Remove button from settings.component.html

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

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

@@ -762,6 +762,9 @@
   "notificationUnlock": {
     "message": "Unlock"
   },
+  "additionalOptions": {
+    "message": "Additional options"
+  },
   "enableContextMenuItem": {
     "message": "Show context menu options"
   },

apps/browser/src/autofill/popup/settings/autofill.component.html

@@ -122,6 +122,54 @@
     </div>
   </div>
   <div class="box">
+    <h2 class="box-header">{{ "additionalOptions" | i18n }}</h2>
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="context-menu">{{ "enableContextMenuItem" | i18n }}</label>
+        <input
+          id="context-menu"
+          type="checkbox"
+          aria-describedby="context-menuHelp"
+          (change)="updateContextMenuItem()"
+          [(ngModel)]="enableContextMenuItem"
+        />
+      </div>
+    </div>
+    <div id="context-menuHelp" class="box-footer">
+      {{
+        accountSwitcherEnabled ? ("contextMenuItemDescAlt" | i18n) : ("contextMenuItemDesc" | i18n)
+      }}
+    </div>
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="totp">{{ "enableAutoTotpCopy" | i18n }}</label>
+        <input
+          id="totp"
+          type="checkbox"
+          aria-describedby="totpHelp"
+          (change)="updateAutoTotpCopy()"
+          [(ngModel)]="enableAutoTotpCopy"
+        />
+      </div>
+    </div>
+    <div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
+    <div class="box-content">
+      <div class="box-content-row" appBoxRow>
+        <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
+        <select
+          id="clearClipboard"
+          name="ClearClipboard"
+          aria-describedby="clearClipboardHelp"
+          [(ngModel)]="clearClipboard"
+          (change)="saveClearClipboard()"
+        >
+          <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
+            {{ o.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div id="clearClipboardHelp" class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
     <div class="box-content">
       <div class="box-content-row" appBoxRow>
         <label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
@@ -139,5 +187,35 @@
     <div id="defaultUriMatchHelp" class="box-footer">
       {{ "defaultUriMatchDetectionDesc" | i18n }}
     </div>
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="showCardsCurrentTab">{{ "showCardsCurrentTab" | i18n }}</label>
+        <input
+          id="showCardsCurrentTab"
+          type="checkbox"
+          aria-describedby="showCardsCurrentTabHelp"
+          (change)="updateShowCardsCurrentTab()"
+          [(ngModel)]="showCardsCurrentTab"
+        />
+      </div>
+    </div>
+    <div id="showCardsCurrentTabHelp" class="box-footer">
+      {{ "showCardsCurrentTabDesc" | i18n }}
+    </div>
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="showIdentitiesCurrentTab">{{ "showIdentitiesCurrentTab" | i18n }}</label>
+        <input
+          id="showIdentitiesCurrentTab"
+          type="checkbox"
+          aria-describedby="showIdentitiesCurrentTabHelp"
+          (change)="updateShowIdentitiesCurrentTab()"
+          [(ngModel)]="showIdentitiesCurrentTab"
+        />
+      </div>
+    </div>
+    <div id="showIdentitiesCurrentTabHelp" class="box-footer">
+      {{ "showIdentitiesCurrentTabDesc" | i18n }}
+    </div>
   </div>
 </main>

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -4,13 +4,18 @@ import { firstValueFrom } from "rxjs";
 import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
-import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
+import {
+  InlineMenuVisibilitySetting,
+  ClearClipboardDelaySetting,
+} from "@bitwarden/common/autofill/types";
 import {
   UriMatchStrategy,
   UriMatchStrategySetting,
 } from "@bitwarden/common/models/domain/domain-service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { DialogService } from "@bitwarden/components";
 
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -30,8 +35,14 @@ export class AutofillComponent implements OnInit {
   enableAutoFillOnPageLoad = false;
   autoFillOnPageLoadDefault = false;
   autoFillOnPageLoadOptions: any[];
+  enableContextMenuItem = false;
+  enableAutoTotpCopy = false; // TODO: Does it matter if this is set to false or true?
+  clearClipboard: ClearClipboardDelaySetting;
+  clearClipboardOptions: any[];
   defaultUriMatch: UriMatchStrategySetting = UriMatchStrategy.Domain;
   uriMatchOptions: any[];
+  showCardsCurrentTab = false;
+  showIdentitiesCurrentTab = false;
   autofillKeyboardHelperText: string;
   accountSwitcherEnabled = false;
 
@@ -42,6 +53,8 @@ export class AutofillComponent implements OnInit {
     private autofillService: AutofillService,
     private dialogService: DialogService,
     private autofillSettingsService: AutofillSettingsServiceAbstraction,
+    private messagingService: MessagingService,
+    private vaultSettingsService: VaultSettingsService,
   ) {
     this.autoFillOverlayVisibilityOptions = [
       {
@@ -61,6 +74,15 @@ export class AutofillComponent implements OnInit {
       { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
       { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
     ];
+    this.clearClipboardOptions = [
+      { name: i18nService.t("never"), value: null },
+      { name: i18nService.t("tenSeconds"), value: 10 },
+      { name: i18nService.t("twentySeconds"), value: 20 },
+      { name: i18nService.t("thirtySeconds"), value: 30 },
+      { name: i18nService.t("oneMinute"), value: 60 },
+      { name: i18nService.t("twoMinutes"), value: 120 },
+      { name: i18nService.t("fiveMinutes"), value: 300 },
+    ];
     this.uriMatchOptions = [
       { name: i18nService.t("baseDomain"), value: UriMatchStrategy.Domain },
       { name: i18nService.t("host"), value: UriMatchStrategy.Host },
@@ -95,6 +117,14 @@ export class AutofillComponent implements OnInit {
       this.autofillSettingsService.autofillOnPageLoadDefault$,
     );
 
+    this.enableContextMenuItem = await firstValueFrom(
+      this.autofillSettingsService.enableContextMenu$,
+    );
+
+    this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);
+
+    this.clearClipboard = await firstValueFrom(this.autofillSettingsService.clearClipboardDelay$);
+
     const defaultUriMatch = await firstValueFrom(
       this.domainSettingsService.defaultUriMatchStrategy$,
     );
@@ -102,6 +132,12 @@ export class AutofillComponent implements OnInit {
 
     const command = await this.platformUtilsService.getAutofillKeyboardShortcut();
     await this.setAutofillKeyboardHelperText(command);
+
+    this.showCardsCurrentTab = await firstValueFrom(this.vaultSettingsService.showCardsCurrentTab$);
+
+    this.showIdentitiesCurrentTab = await firstValueFrom(
+      this.vaultSettingsService.showIdentitiesCurrentTab$,
+    );
   }
 
   async updateAutoFillOverlayVisibility() {
@@ -241,4 +277,25 @@ export class AutofillComponent implements OnInit {
   async privacyPermissionGranted(): Promise<boolean> {
     return await BrowserApi.permissionsGranted(["privacy"]);
   }
+
+  async updateContextMenuItem() {
+    await this.autofillSettingsService.setEnableContextMenu(this.enableContextMenuItem);
+    this.messagingService.send("bgUpdateContextMenu");
+  }
+
+  async updateAutoTotpCopy() {
+    await this.autofillSettingsService.setAutoCopyTotp(this.enableAutoTotpCopy);
+  }
+
+  async saveClearClipboard() {
+    await this.autofillSettingsService.setClearClipboardDelay(this.clearClipboard);
+  }
+
+  async updateShowCardsCurrentTab() {
+    await this.vaultSettingsService.setShowCardsCurrentTab(this.showCardsCurrentTab);
+  }
+
+  async updateShowIdentitiesCurrentTab() {
+    await this.vaultSettingsService.setShowIdentitiesCurrentTab(this.showIdentitiesCurrentTab);
+  }
 }

apps/browser/src/popup/app-routing.animations.ts

@@ -196,9 +196,6 @@ export const routerTransition = trigger("routerTransition", [
   transition("vault-settings => sync", inSlideLeft),
   transition("sync => vault-settings", outSlideRight),
 
-  transition("tabs => options", inSlideLeft),
-  transition("options => tabs", outSlideRight),
-
   // Appearance settings
   transition("tabs => appearance", inSlideLeft),
   transition("appearance => tabs", outSlideRight),

apps/browser/src/popup/app-routing.module.ts

@@ -65,7 +65,6 @@ import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.c
 
 import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils";
 import { debounceNavigationGuard } from "./services/debounce-navigation.service";
-import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
 import { TabsComponent } from "./tabs.component";
 
@@ -309,12 +308,6 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "premium" },
   },
-  {
-    path: "options",
-    component: OptionsComponent,
-    canActivate: [AuthGuard],
-    data: { state: "options" },
-  },
   {
     path: "appearance",
     component: AppearanceComponent,

apps/browser/src/popup/app.module.ts

@@ -82,7 +82,6 @@ import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
 import { ServicesModule } from "./services/services.module";
-import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
 import { TabsComponent } from "./tabs.component";
 
@@ -149,7 +148,6 @@ import "../platform/popup/locales";
     LoginComponent,
     LoginViaAuthRequestComponent,
     LoginDecryptionOptionsComponent,
-    OptionsComponent,
     NotificationsSettingsComponent,
     AppearanceComponent,
     GeneratorComponent,

apps/browser/src/popup/settings/options.component.html

@@ -1,135 +0,0 @@
-<header>
-  <div class="left">
-    <button type="button" routerLink="/tabs/settings">
-      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
-      <span>{{ "back" | i18n }}</span>
-    </button>
-  </div>
-  <h1 class="center">
-    <span class="title">{{ "options" | i18n }}</span>
-  </h1>
-  <div class="right"></div>
-</header>
-<main tabindex="-1">
-  <div class="box">
-    <h2>
-      <button
-        type="button"
-        class="box-header-expandable"
-        (click)="showGeneral = !showGeneral"
-        [attr.aria-expanded]="showGeneral"
-      >
-        <i *ngIf="!showGeneral" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showGeneral" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        {{ "general" | i18n }}
-      </button>
-    </h2>
-  </div>
-  <ng-container *ngIf="showGeneral">
-    <div class="box" *ngIf="showClearClipboard">
-      <div class="box-content">
-        <div class="box-content-row" appBoxRow>
-          <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
-          <select
-            id="clearClipboard"
-            name="ClearClipboard"
-            aria-describedby="clearClipboardHelp"
-            [(ngModel)]="clearClipboard"
-            (change)="saveClearClipboard()"
-          >
-            <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
-              {{ o.name }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div id="clearClipboardHelp" class="box-footer">{{ "clearClipboardDesc" | i18n }}</div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="totp">{{ "enableAutoTotpCopy" | i18n }}</label>
-          <input
-            id="totp"
-            type="checkbox"
-            aria-describedby="totpHelp"
-            (change)="updateAutoTotpCopy()"
-            [(ngModel)]="enableAutoTotpCopy"
-          />
-        </div>
-      </div>
-      <div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="context-menu">{{ "enableContextMenuItem" | i18n }}</label>
-          <input
-            id="context-menu"
-            type="checkbox"
-            aria-describedby="context-menuHelp"
-            (change)="updateContextMenuItem()"
-            [(ngModel)]="enableContextMenuItem"
-          />
-        </div>
-      </div>
-      <div id="context-menuHelp" class="box-footer">
-        {{
-          accountSwitcherEnabled
-            ? ("contextMenuItemDescAlt" | i18n)
-            : ("contextMenuItemDesc" | i18n)
-        }}
-      </div>
-    </div>
-  </ng-container>
-  <div class="box box-section-divider">
-    <h2>
-      <button
-        type="button"
-        class="box-header-expandable"
-        (click)="showDisplay = !showDisplay"
-        [attr.aria-expanded]="showDisplay"
-      >
-        <i *ngIf="!showDisplay" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showDisplay" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
-        {{ "display" | i18n }}
-      </button>
-    </h2>
-  </div>
-  <ng-container *ngIf="showDisplay">
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="showCardsCurrentTab">{{ "showCardsCurrentTab" | i18n }}</label>
-          <input
-            id="showCardsCurrentTab"
-            type="checkbox"
-            aria-describedby="showCardsCurrentTabHelp"
-            (change)="updateShowCardsCurrentTab()"
-            [(ngModel)]="showCardsCurrentTab"
-          />
-        </div>
-      </div>
-      <div id="showCardsCurrentTabHelp" class="box-footer">
-        {{ "showCardsCurrentTabDesc" | i18n }}
-      </div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="showIdentitiesCurrentTab">{{ "showIdentitiesCurrentTab" | i18n }}</label>
-          <input
-            id="showIdentitiesCurrentTab"
-            type="checkbox"
-            aria-describedby="showIdentitiesCurrentTabHelp"
-            (change)="updateShowIdentitiesCurrentTab()"
-            [(ngModel)]="showIdentitiesCurrentTab"
-          />
-        </div>
-      </div>
-      <div id="showIdentitiesCurrentTabHelp" class="box-footer">
-        {{ "showIdentitiesCurrentTabDesc" | i18n }}
-      </div>
-    </div>
-  </ng-container>
-</main>

apps/browser/src/popup/settings/options.component.ts

@@ -1,126 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { firstValueFrom } from "rxjs";
-
-import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
-import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
-import { ClearClipboardDelaySetting } from "@bitwarden/common/autofill/types";
-import {
-  UriMatchStrategy,
-  UriMatchStrategySetting,
-} from "@bitwarden/common/models/domain/domain-service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
-
-import { enableAccountSwitching } from "../../platform/flags";
-
-@Component({
-  selector: "app-options",
-  templateUrl: "options.component.html",
-})
-export class OptionsComponent implements OnInit {
-  enableAutoFillOnPageLoad = false;
-  autoFillOnPageLoadDefault = false;
-  autoFillOnPageLoadOptions: any[];
-  enableAutoTotpCopy = false; // TODO: Does it matter if this is set to false or true?
-  enableContextMenuItem = false;
-  showCardsCurrentTab = false;
-  showIdentitiesCurrentTab = false;
-  showClearClipboard = true;
-  defaultUriMatch: UriMatchStrategySetting = UriMatchStrategy.Domain;
-  uriMatchOptions: any[];
-  clearClipboard: ClearClipboardDelaySetting;
-  clearClipboardOptions: any[];
-  showGeneral = true;
-  showDisplay = true;
-  accountSwitcherEnabled = false;
-
-  constructor(
-    private messagingService: MessagingService,
-    private autofillSettingsService: AutofillSettingsServiceAbstraction,
-    private domainSettingsService: DomainSettingsService,
-    i18nService: I18nService,
-    private vaultSettingsService: VaultSettingsService,
-  ) {
-    this.uriMatchOptions = [
-      { name: i18nService.t("baseDomain"), value: UriMatchStrategy.Domain },
-      { name: i18nService.t("host"), value: UriMatchStrategy.Host },
-      { name: i18nService.t("startsWith"), value: UriMatchStrategy.StartsWith },
-      { name: i18nService.t("regEx"), value: UriMatchStrategy.RegularExpression },
-      { name: i18nService.t("exact"), value: UriMatchStrategy.Exact },
-      { name: i18nService.t("never"), value: UriMatchStrategy.Never },
-    ];
-    this.clearClipboardOptions = [
-      { name: i18nService.t("never"), value: null },
-      { name: i18nService.t("tenSeconds"), value: 10 },
-      { name: i18nService.t("twentySeconds"), value: 20 },
-      { name: i18nService.t("thirtySeconds"), value: 30 },
-      { name: i18nService.t("oneMinute"), value: 60 },
-      { name: i18nService.t("twoMinutes"), value: 120 },
-      { name: i18nService.t("fiveMinutes"), value: 300 },
-    ];
-    this.autoFillOnPageLoadOptions = [
-      { name: i18nService.t("autoFillOnPageLoadYes"), value: true },
-      { name: i18nService.t("autoFillOnPageLoadNo"), value: false },
-    ];
-
-    this.accountSwitcherEnabled = enableAccountSwitching();
-  }
-
-  async ngOnInit() {
-    this.enableAutoFillOnPageLoad = await firstValueFrom(
-      this.autofillSettingsService.autofillOnPageLoad$,
-    );
-
-    this.autoFillOnPageLoadDefault = await firstValueFrom(
-      this.autofillSettingsService.autofillOnPageLoadDefault$,
-    );
-
-    this.enableContextMenuItem = await firstValueFrom(
-      this.autofillSettingsService.enableContextMenu$,
-    );
-
-    this.showCardsCurrentTab = await firstValueFrom(this.vaultSettingsService.showCardsCurrentTab$);
-    this.showIdentitiesCurrentTab = await firstValueFrom(
-      this.vaultSettingsService.showIdentitiesCurrentTab$,
-    );
-
-    this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);
-
-    const defaultUriMatch = await firstValueFrom(
-      this.domainSettingsService.defaultUriMatchStrategy$,
-    );
-    this.defaultUriMatch = defaultUriMatch == null ? UriMatchStrategy.Domain : defaultUriMatch;
-
-    this.clearClipboard = await firstValueFrom(this.autofillSettingsService.clearClipboardDelay$);
-  }
-
-  async updateContextMenuItem() {
-    await this.autofillSettingsService.setEnableContextMenu(this.enableContextMenuItem);
-    this.messagingService.send("bgUpdateContextMenu");
-  }
-
-  async updateAutoTotpCopy() {
-    await this.autofillSettingsService.setAutoCopyTotp(this.enableAutoTotpCopy);
-  }
-
-  async updateAutoFillOnPageLoad() {
-    await this.autofillSettingsService.setAutofillOnPageLoad(this.enableAutoFillOnPageLoad);
-  }
-
-  async updateAutoFillOnPageLoadDefault() {
-    await this.autofillSettingsService.setAutofillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
-  }
-
-  async updateShowCardsCurrentTab() {
-    await this.vaultSettingsService.setShowCardsCurrentTab(this.showCardsCurrentTab);
-  }
-
-  async updateShowIdentitiesCurrentTab() {
-    await this.vaultSettingsService.setShowIdentitiesCurrentTab(this.showIdentitiesCurrentTab);
-  }
-
-  async saveClearClipboard() {
-    await this.autofillSettingsService.setClearClipboardDelay(this.clearClipboard);
-  }
-}

apps/browser/src/tools/popup/settings/settings.component.html

@@ -42,14 +42,6 @@
         <div class="row-main">{{ "vault" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        routerLink="/options"
-      >
-        <div class="row-main">{{ "options" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"