WebUI: Replace apng animation with lottie animation on CrOS

This patch replaces the use of apng animation file (580 KiB) with a
lottie animation file (8 KiB).

Bug: 976057
TEST: Manually navigated to the animation page
Change-Id: I4c8fa8784b1e2bd1be071752eae8696f58c66737
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1725235
Commit-Queue: Malay Keshav <malaykeshav@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688683}

chrome/browser/resources/settings/people_page/BUILD.gn

@@ -222,6 +222,7 @@ js_library("profile_info_browser_proxy") {
 js_library("setup_fingerprint_dialog") {
   deps = [
     ":fingerprint_browser_proxy",
+    "//ui/webui/resources/cr_elements/chromeos/cr_lottie:cr_lottie",
     "//ui/webui/resources/cr_elements/cr_fingerprint:cr_fingerprint_progress_arc",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:web_ui_listener_behavior",

chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_lottie/cr_lottie.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
@@ -21,11 +22,6 @@
         width: 500px;
       }
 
-      .fingerprint-scanner-tablet-power-button {
-        background:
-            url(chrome://theme/IDR_LOGIN_FINGERPRINT_SCANNER_TABLET_POWER_BUTTON_ANIMATION);
-      }
-
       .fingerprint-scanner-laptop-bottom-right {
         background:
             url(chrome://theme/IDR_LOGIN_FINGERPRINT_SCANNER_LAPTOP_BOTTOM_RIGHT_ANIMATION);
@@ -43,6 +39,11 @@
         height: 240px;
       }
 
+      #scannerLocationLottie {
+        height: 220px;
+        padding: 10px 0;
+      }
+
       #messageDiv {
         height: 20px;
       }
@@ -67,11 +68,21 @@
             aria-live="polite">
           <span>[[getInstructionMessage_(step_, problemMessage_)]]</span>
         </div>
-        <div id="scannerLocation" hidden="[[!showScannerLocation_(step_)]]"
-            class$="[[fingerprintScannerAnimationClass_]]"
-            aria-label="$i18n{configureFingerprintScannerStepAriaLabel}"
-            aria-live="polite" >
-        </div>
+        <template is="dom-if" if="[[shouldUseLottieAnimation_]]">
+          <div id="scannerLocationLottie"
+            hidden="[[!showScannerLocation_(step_)]]" aria-live="polite"
+            aria-label="$i18n{configureFingerprintScannerStepAriaLabel}">
+            <cr-lottie animation-url="finger_print.json">
+            </cr-lottie>
+          </div>
+        </template>
+        <template is="dom-if" if="[[!shouldUseLottieAnimation_]]">
+          <div id="scannerLocation" hidden="[[!showScannerLocation_(step_)]]"
+             class$="[[fingerprintScannerAnimationClass_]]"
+             aria-label="$i18n{configureFingerprintScannerStepAriaLabel}"
+             aria-live="polite" >
+          </div>
+        </template>
         <cr-fingerprint-progress-arc id="arc" circle-radius="100"
             hidden="[[!showArc_(step_)]]">
         </cr-fingerprint-progress-arc>

chrome/browser/resources/settings/people_page/setup_fingerprint_dialog.js

@@ -101,7 +101,7 @@ Polymer({
             loadTimeData.getInteger('fingerprintReaderLocation');
         switch (fingerprintLocation) {
           case settings.FingerprintLocation.TABLET_POWER_BUTTON:
-            return 'fingerprint-scanner-tablet-power-button';
+            return '';
           case settings.FingerprintLocation.KEYBOARD_TOP_RIGHT:
             return 'fingerprint-scanner-laptop-top-right';
           case settings.FingerprintLocation.KEYBOARD_BOTTOM_RIGHT:
@@ -345,5 +345,23 @@ Polymer({
     this.$.arc.setProgress(oldValue, newValue, newValue === 100);
   },
 
+  /**
+   * Returns true if we have lottie animation file instead of a png animation
+   * image sequence.
+   * @return boolean
+   * @private
+   */
+  shouldUseLottieAnimation_: function() {
+    if (!loadTimeData.getBoolean('fingerprintUnlockEnabled')) {
+      return false;
+    }
+
+    const fingerprintLocation =
+        loadTimeData.getInteger('fingerprintReaderLocation');
+    const isTabletPowerButton =
+        settings.FingerprintLocation.TABLET_POWER_BUTTON == fingerprintLocation;
+    return isTabletPowerButton;
+  },
+
 });
 })();

chrome/browser/ui/webui/settings/settings_ui.cc

@@ -129,6 +129,7 @@
 #include "components/user_manager/user.h"
 #include "ui/base/ui_base_features.h"
 #include "ui/chromeos/resources/grit/ui_chromeos_resources.h"
+#include "ui/resources/grit/webui_resources.h"
 #else  // !defined(OS_CHROMEOS)
 #include "chrome/browser/signin/account_consistency_mode_manager.h"
 #include "chrome/browser/ui/webui/settings/settings_default_browser_handler.h"
@@ -472,6 +473,8 @@ void SettingsUI::InitOSWebUIHandlers(Profile* profile,
     html_source->AddInteger(
         "fingerprintReaderLocation",
         static_cast<int32_t>(chromeos::quick_unlock::GetFingerprintLocation()));
+    html_source->AddResourcePath("finger_print.json",
+                                 IDR_LOGIN_FINGER_PRINT_TABLET_ANIMATION);
   }
   html_source->AddBoolean("lockScreenNotificationsEnabled",
                           ash::features::IsLockScreenNotificationsEnabled());

chrome/test/data/webui/settings/chromeos/fingerprint_browsertest_chromeos.js

@@ -159,7 +159,7 @@ suite('settings-fingerprint-list', function() {
       assertTrue(dialog.$$('#dialog').open);
       assertEquals(0, dialog.percentComplete_);
       assertEquals(settings.FingerprintSetupStep.LOCATE_SCANNER, dialog.step_);
-      assertFalse(dialog.$$('#scannerLocation').hidden);
+      assertFalse(dialog.$$('#scannerLocationLottie').hidden);
       assertTrue(dialog.$$('#arc').hidden);
       // Message should be shown for LOCATE_SCANNER step.
       assertEquals(
@@ -171,7 +171,7 @@ suite('settings-fingerprint-list', function() {
           settings.FingerprintResultType.SUCCESS, false, 20 /* percent */);
       assertEquals(20, dialog.percentComplete_);
       assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
-      assertTrue(dialog.$$('#scannerLocation').hidden);
+      assertTrue(dialog.$$('#scannerLocationLottie').hidden);
       assertFalse(dialog.$$('#arc').hidden);
 
       // Verify that by sending a scan problem, the div that contains the
@@ -254,7 +254,7 @@ suite('settings-fingerprint-list', function() {
           assertTrue(dialog.$$('#dialog').open);
           assertFalse(isVisible(addAnotherButton));
           assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
-          assertTrue(dialog.$$('#scannerLocation').hidden);
+          assertTrue(dialog.$$('#scannerLocationLottie').hidden);
           assertFalse(dialog.$$('#arc').hidden);
 
           browserProxy.scanReceived(

ui/chromeos/resources/ui_chromeos_resources.grd

@@ -95,6 +95,7 @@
       <structure type="chrome_scaled_image" name="IDR_LOGIN_FINGERPRINT_SCANNER_TABLET_POWER_BUTTON_ANIMATION" file="fingerprint/fingerprint_scanner_tablet_power_button.png" />
       <structure type="chrome_scaled_image" name="IDR_LOGIN_FINGERPRINT_SCANNER_LAPTOP_BOTTOM_RIGHT_ANIMATION" file="fingerprint/fingerprint_scanner_laptop_bottom_right.png" />
       <structure type="chrome_scaled_image" name="IDR_LOGIN_FINGERPRINT_SCANNER_LAPTOP_TOP_RIGHT_ANIMATION" file="fingerprint/fingerprint_scanner_laptop_top_right.png" />
+      <structure type="chrome_html" name="IDR_LOGIN_FINGER_PRINT_TABLET_ANIMATION" file="vector/finger_print.json" compress="gzip" />
 
       <!-- Kerberos. -->
       <structure type="chrome_scaled_image" name="IDR_KERBEROS_ICON_KEY" file="kerberos/vpn_key_grey600_24dp.png" />