[EC-474] Add hidden char count toggle to web and desktop (#3262)

* feat-web: add hidden char count toggle

* Added toggle char count for desktop

* Use Tailwind and Component Library, add i18n

* Hide char count when password is hidden

* Initial proposal

* Update colors per design spec for all clients

Also make variable names consistent across clients

* Remove unused scss

* Add styling

* Set fixed with for password count elements

* Add separate wrapped stories

* Fix alignment of first char when wrapped

* Minor refactors

* Make naming consistent

* Add Figma url

* add barrel files

* Use CL component

* Fix template

* Remove duplicate style

* Use ColorPasswordComponent in web, remove old pipe

Also remove styling and move pipe out of jslib-module given that
it's no longer shared by all Angular clients

* Run prettier

* Remove unused scss vars

* Undo unnecessary changes

* Remove unnecessary changes

* Fix styling

* Fix selector

* Collect show password event

* Fix incorrect background in dark mode

* Fix linting

* Use color password for password history

* Add char count to hidden custom fields in desktop

* Fix char count background in web: take 2

* Update service name

* Add missing label toggleCharacterCount for desktop

Co-authored-by: Daniel James Smith <djsmith@web.de>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

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

@@ -64,6 +64,8 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { BitwardenToastModule } from "@bitwarden/angular/components/toastr.component";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
+import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
 
 import { EnvironmentComponent } from "./accounts/environment.component";
 import { HintComponent } from "./accounts/hint.component";
@@ -202,6 +204,8 @@ registerLocaleData(localeZhTw, "zh-TW");
     CipherRowComponent,
     VaultItemsComponent,
     CollectionsComponent,
+    ColorPasswordPipe,
+    ColorPasswordCountPipe,
     CurrentTabComponent,
     EnvironmentComponent,
     ExcludedDomainsComponent,

apps/browser/src/popup/scss/misc.scss

@@ -193,7 +193,7 @@ p.lead {
   font-size: 8px;
 
   @include themify($themes) {
-    color: themed("mutedColor") !important;
+    color: themed("passwordCountText") !important;
   }
 }
 

apps/browser/src/popup/scss/variables.scss

@@ -109,6 +109,7 @@ $themes: (
     logoSuffix: "dark",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
+    passwordCountText: #212529,
     calloutBorderColor: $border-color-dark,
     calloutBackgroundColor: $box-background-color,
     toastTextColor: #ffffff,
@@ -170,6 +171,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: #6f9df1,
     passwordSpecialColor: #ff8d85,
+    passwordCountText: #ffffff,
     calloutBorderColor: #4c525f,
     calloutBackgroundColor: #3c424e,
     toastTextColor: #1f242e,
@@ -230,6 +232,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: $nord8,
     passwordSpecialColor: $nord12,
+    passwordCountText: $nord5,
     calloutBorderColor: $nord0,
     calloutBackgroundColor: $nord2,
     toastTextColor: #ffffff,
@@ -290,6 +293,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: $solarizedDarkCyan,
     passwordSpecialColor: $solarizedDarkYellow,
+    passwordCountText: $solarizedDarkBase2,
     calloutBorderColor: $solarizedDarkBase03,
     calloutBackgroundColor: $solarizedDarkBase01,
     toastTextColor: #ffffff,

apps/browser/src/popup/vault/password-history.component.html

@@ -13,9 +13,10 @@
       <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
         <div class="row-main">
           <div class="row-main-content">
-            <span class="text monospaced no-ellipsis">
-              {{ h.password }}
-            </span>
+            <span
+              class="text monospaced no-ellipsis"
+              [innerHTML]="h.password | colorPassword"
+            ></span>
             <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
           </div>
         </div>