Fix fingerprint enrollment animations for dark mode (Part 6 of N)

This CL updates the fingerprint onboarding animations with support for
dark mode as well as color and size changes for light mode. It also
removes the static illustrations previously used for onboarding devices
with less common sensor locations.

Dark mode:
Default before: https://screenshot.googleplex.com/AM8Rc4BDBjANwXq
Default after: https://screenshot.googleplex.com/45GBBKzrzquEshp
Tablet before: https://screenshot.googleplex.com/AcDpzrjRpoaHoU8
Tablet after: https://screenshot.googleplex.com/d9yzRtRywkUh7UY
Bottom right before: https://screenshot.googleplex.com/56xnNTLbQ5hkYuy
Bottom right after: https://screenshot.googleplex.com/6JrrMktw87Z9c9d
Bottom left before: https://screenshot.googleplex.com/6NmnzW83hf5uj9q
Bottom left after: https://screenshot.googleplex.com/9oLDQZiSg64NDKu

Light mode:
Default before: https://screenshot.googleplex.com/9ayCJBPUHxHGfix
Default after: https://screenshot.googleplex.com/9mf3CPcxPDngHwZ
Tablet before: https://screenshot.googleplex.com/3ddnsw86EPg6sNz
Tablet after: https://screenshot.googleplex.com/3Qu9eggdnaF654T
Bottom right before: https://screenshot.googleplex.com/3dweeodeVy8RaHW
Bottom right after: https://screenshot.googleplex.com/6BY298YUs6YJqzF
Bottom left before: https://screenshot.googleplex.com/4ZYHVEe4dzao7bW
Bottom left after: https://screenshot.googleplex.com/C9BJo3u4GvNZj4h

A forthcoming CL will fix the enrollment-done tick animation. See
attached bug for full plan.

Bug: 1295944
Change-Id: I49698d1e3a71e56241aa63e45fb75200f847763f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3617819
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Colin Kincaid <ckincaid@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1001681}

chrome/browser/ash/login/quick_unlock/quick_unlock_utils.cc

@@ -260,48 +260,41 @@ bool IsFingerprintEnabled(Profile* profile, Purpose purpose) {
 }
 
 void AddFingerprintResources(content::WebUIDataSource* html_source) {
-  int resource_id;
-  bool is_lottie_animation = false;
+  int resource_id_dark;
+  int resource_id_light;
   switch (GetFingerprintLocation()) {
     case FingerprintLocation::TABLET_POWER_BUTTON:
-      is_lottie_animation = true;
-      resource_id = IDR_FINGERPRINT_TABLET_ANIMATION;
+      resource_id_dark = IDR_FINGERPRINT_TABLET_ANIMATION_DARK;
+      resource_id_light = IDR_FINGERPRINT_TABLET_ANIMATION_LIGHT;
       break;
     case FingerprintLocation::KEYBOARD_BOTTOM_RIGHT:
-      is_lottie_animation = true;
-      resource_id = IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION;
+      resource_id_dark = IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION_DARK;
+      resource_id_light = IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION_LIGHT;
       break;
     case FingerprintLocation::KEYBOARD_BOTTOM_LEFT:
-      resource_id = IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ILLUSTRATION_SVG;
+      resource_id_dark = IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ANIMATION_DARK;
+      resource_id_light = IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ANIMATION_LIGHT;
       break;
     case FingerprintLocation::KEYBOARD_TOP_RIGHT:
-      resource_id = IDR_FINGERPRINT_LAPTOP_TOP_RIGHT_ILLUSTRATION_SVG;
-      break;
     case FingerprintLocation::RIGHT_SIDE:
     case FingerprintLocation::LEFT_SIDE:
     case FingerprintLocation::UNKNOWN:
-      is_lottie_animation = true;
-      resource_id = IDR_FINGERPRINT_DEFAULT_ANIMATION;
+      resource_id_dark = IDR_FINGERPRINT_DEFAULT_ANIMATION_DARK;
+      resource_id_light = IDR_FINGERPRINT_DEFAULT_ANIMATION_LIGHT;
       break;
   }
-  if (is_lottie_animation) {
-    html_source->AddResourcePath("fingerprint_scanner_animation.json",
-                                 resource_id);
-
-    // To use lottie, the worker-src CSP needs to be updated for the web ui
-    // that is using it. Since as of now there are only a couple of webuis
-    // using lottie animations, this update has to be performed manually. As
-    // the usage increases, set this as the default so manual override is no
-    // longer required.
-    html_source->OverrideContentSecurityPolicy(
-        network::mojom::CSPDirectiveName::WorkerSrc,
-        "worker-src blob: 'self';");
-  } else {
-    html_source->AddResourcePath("fingerprint_scanner_illustration.svg",
-                                 resource_id);
-  }
-  html_source->AddBoolean("useLottieAnimationForFingerprint",
-                          is_lottie_animation);
+  html_source->AddResourcePath("fingerprint_scanner_animation_dark.json",
+                               resource_id_dark);
+  html_source->AddResourcePath("fingerprint_scanner_animation_light.json",
+                               resource_id_light);
+
+  // To use lottie, the worker-src CSP needs to be updated for the web ui
+  // that is using it. Since as of now there are only a couple of webuis
+  // using lottie animations, this update has to be performed manually. As
+  // the usage increases, set this as the default so manual override is no
+  // longer required.
+  html_source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::WorkerSrc, "worker-src blob: 'self';");
 }
 
 }  // namespace quick_unlock

chrome/browser/browser_resources.grd

@@ -217,11 +217,14 @@
         <include name="IDR_ARC_SUPPORT_MANIFEST" file="resources\chromeos\arc_support\manifest.json" type="BINDATA" />
 
         <!-- Fingerprint resources. -->
-        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_right.json"/>
-        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_TABLET_ANIMATION" file="resources\chromeos\quick_unlock\fingerprint_tablet.json"/>
-        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_DEFAULT_ANIMATION" file="resources\chromeos\quick_unlock\fingerprint_default.json"/>
-        <include type="BINDATA" name="IDR_FINGERPRINT_LAPTOP_TOP_RIGHT_ILLUSTRATION_SVG" file="resources\chromeos\quick_unlock\fingerprint_laptop_top_right.svg" />
-        <include type="BINDATA" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ILLUSTRATION_SVG" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_left.svg" />
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ANIMATION_DARK" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_left_dark.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_LEFT_ANIMATION_LIGHT" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_left_light.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION_DARK" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_right_dark.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_LAPTOP_BOTTOM_RIGHT_ANIMATION_LIGHT" file="resources\chromeos\quick_unlock\fingerprint_laptop_bottom_right_light.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_TABLET_ANIMATION_DARK" file="resources\chromeos\quick_unlock\fingerprint_tablet_dark.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_TABLET_ANIMATION_LIGHT" file="resources\chromeos\quick_unlock\fingerprint_tablet_light.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_DEFAULT_ANIMATION_DARK" file="resources\chromeos\quick_unlock\fingerprint_default_dark.json"/>
+        <include type="BINDATA" compress="gzip" name="IDR_FINGERPRINT_DEFAULT_ANIMATION_LIGHT" file="resources\chromeos\quick_unlock\fingerprint_default_light.json"/>
 
         <include name="IDR_VM_INDEX_HTML" file="resources\chromeos\vm\index.html" type="BINDATA" />
         <include name="IDR_VM_APP_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\vm\app.js" type="BINDATA" use_base_dir="false" />

chrome/browser/resources/chromeos/login/screens/common/fingerprint_setup.html

@@ -27,14 +27,6 @@
         height: 242px;
         width: 352px;
       }
-
-      #sensorLocation {
-        background-image:
-            url(chrome://oobe/fingerprint_scanner_illustration.svg);
-        background-size: 352px 242px;
-        height: 100%;
-        width: 100%;
-      }
     </style>
     <oobe-adaptive-dialog id="setupFingerprint" role="dialog" for-step="start"
         footer-shrinkable
@@ -54,14 +46,9 @@ <h1 slot="title" hidden="[[!isChildAccount_]]">
       <iron-icon slot="icon" icon="oobe-32:fingerprint"></iron-icon>
       <div slot="content" class="flex layout vertical center center-justified">
         <div id="sensorLocationContainer" class="oobe-illustration">
-          <template is="dom-if" if="[[shouldUseLottieAnimation_]]">
-            <oobe-cr-lottie id="scannerLocationLottie"
-                animation-url="fingerprint_scanner_animation.json">
-            </oobe-cr-lottie>
-          </template>
-          <template is="dom-if" if="[[!shouldUseLottieAnimation_]]">
-            <div id="sensorLocation"></div>
-          </template>
+          <oobe-cr-lottie id="scannerLocationLottie"
+              animation-url="fingerprint_scanner_animation_light.json">
+          </oobe-cr-lottie>
         </div>
       </div>
       <div slot="bottom-buttons">

chrome/browser/resources/chromeos/login/screens/common/fingerprint_setup.js

@@ -94,15 +94,6 @@ class FingerprintSetup extends FingerprintSetupBase {
         type: Number,
       },
 
-      /**
-       * True if lottie animation file should be used instead of an
-       * illustration.
-       * @private
-       */
-      shouldUseLottieAnimation_: {
-        type: Boolean,
-      },
-
       /**
        * Indicates whether user is a child account.
        */
@@ -119,8 +110,6 @@ class FingerprintSetup extends FingerprintSetupBase {
     this.complete_ = false;
     this.canAddFinger = true;
     this.scanResult_ = FingerprintResultType.SUCCESS;
-    this.shouldUseLottieAnimation_ =
-        loadTimeData.getBoolean('useLottieAnimationForFingerprint');
     this.isChildAccount_ = false;
   }
 
@@ -205,12 +194,10 @@ class FingerprintSetup extends FingerprintSetupBase {
    * @param {boolean} playing True if animation should be playing.
    */
   setAnimationState_(playing) {
-    if (this.shouldUseLottieAnimation_) {
-      const lottieElement = /** @type{CrLottieElement} */ (
-          this.$.setupFingerprint.querySelector('#scannerLocationLottie'));
-      lottieElement.playing = playing;
-      this.$.arc.setPlay(playing);
-    }
+    const lottieElement = /** @type{CrLottieElement} */ (
+        this.$.setupFingerprint.querySelector('#scannerLocationLottie'));
+    lottieElement.playing = playing;
+    this.$.arc.setPlay(playing);
   }
 
   /**

chrome/browser/resources/settings/chromeos/os_people_page/setup_fingerprint_dialog.html

@@ -1,16 +1,11 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
+
 <style include="settings-shared">
   #dialog::part(dialog) {
     min-width: 500px;
     width: 500px;
   }
 
-  #scannerLocation {
-    display: block;
-    height: 205px;
-    margin: auto;
-    padding: 10px 0;
-  }
-
   #scannerLocationLottie {
     height: 220px;
     padding: 10px 0;
@@ -39,20 +34,16 @@
         aria-live="polite">
       <span>[[getInstructionMessage_(step_, problemMessage_)]]</span>
     </div>
-    <template is="dom-if" if="[[shouldUseLottieAnimation_]]">
-      <div id="scannerLocationLottie"
+    <div id="scannerLocationLottie"
         hidden="[[!showScannerLocation_(step_)]]" aria-live="polite"
         aria-label="$i18n{configureFingerprintScannerStepAriaLabel}">
-        <cr-lottie animation-url="fingerprint_scanner_animation.json" autoplay>
-        </cr-lottie>
-      </div>
-    </template>
-    <template is="dom-if" if="[[!shouldUseLottieAnimation_]]">
-      <img id="scannerLocation" hidden="[[!showScannerLocation_(step_)]]"
-        aria-label="$i18n{configureFingerprintScannerStepAriaLabel}"
-        aria-live="polite"
-        src="fingerprint_scanner_illustration.svg">
-    </template>
+      <iron-media-query query="(prefers-color-scheme: dark)"
+          query-matches="{{isDarkModeActive_}}">
+      </iron-media-query>
+      <cr-lottie animation-url="[[getAnimationUrl_(isDarkModeActive_)]]"
+          autoplay>
+      </cr-lottie>
+    </div>
     <cr-fingerprint-progress-arc id="arc" circle-radius="100" autoplay
         hidden="[[!showArc_(step_)]]">
     </cr-fingerprint-progress-arc>