cros:update settings-setup-fingerprint-dialog

Bug: 876067
Change-Id: I0c1e32e23780bbb0e1117cac966550198ab1c865
Reviewed-on: https://chromium-review.googlesource.com/1183897
Commit-Queue: Xiaoyin Hu <xiaoyinh@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Sammie Quon <sammiequon@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585153}

chrome/app/settings_strings.grdp

@@ -3343,37 +3343,22 @@
       Google Accounts
     </message>
     <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_TITLE" desc="Title of the add fingerprint dialog popup.">
-      Add a fingerprint
+      Registering fingerprint
     </message>
     <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_LOCATE_SCANNER" desc="Text in the add fingerprint dialog telling users what to do for step 1.">
-      Find the fingerprint sensor on your device and touch it with your finger
-    </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_MOVE_FINGER" desc="Text in the add fingerprint dialog telling users what to do for step 2.">
-      Now move your finger slightly to capture all the different parts of your fingerprint
+      Let's get started. Place your finger on the sensor.
     </message>
     <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_READY" desc="Text in the add fingerprint dialog telling users what to do for step 3.">
-      Fingerprint added!
+      Fingerprint added.
     </message>
     <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_LIFT_FINGER" desc="Warning text in the add fingerprint dialog to tell users to lift their finger and touch the sensor again.">
-      Lift finger, then touch sensor again
-    </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_PARTIAL_DATA" desc="Warning text in the add fingerprint dialog to tell users partial data was captured.">
-      Partial data
-    </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSUFFICIENT_DATA" desc="Warning text in the add fingerprint dialog to tell users insufficient data was captured.">
-      Insufficient data
-    </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_SENSOR_DIRTY" desc="Warning text in the add fingerprint dialog to tell users the fingerprint sensor is dirty.">
-      Sensor dirty
-    </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_TOO_SLOW" desc="Warning text in the add fingerprint dialog to tell users they have moved their finger too slow.">
-      Finger moved too slowly
+      Lift then try again.
     </message>
-    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_TOO_FAST" desc="Warning text in the add fingerprint dialog to tell users they have moved their finger too fast.">
-      Finger moved too quickly
+    <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_TRY_AGAIN" desc="Warning text in the add fingerprint dialog to tell users to try again.">
+      Try again.
     </message>
     <message name="IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_IMMOBILE" desc="Warning text in the add fingerprint dialog to tell users they should move their finger slightly to capture different parts of the fingerprint.">
-      Move slightly to capture a different part of the fingerprint
+      Move slightly to capture a different part of the fingerprint.
     </message>
     <message name="IDS_SETTINGS_PEOPLE_PASSWORD_PROMPT_TITLE" desc="Title of the password prompt dialog popup.">
       Confirm your password

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

@@ -22,9 +22,21 @@
         };
       }
 
+      #scannerLocation {
+        background: url(chrome://theme/IDR_LOGIN_FINGERPRINT_SCANNER_ANIMATION);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 298px 205px;
+        height: 240px;
+      }
+
+      #messageDiv {
+        height: 20px;
+      }
+
       /* Use this instead of hidden so that the dialog does not resize when the
-         problem appears or disappears. */
-      #problemDiv[invisible] {
+         message appears or disappears. */
+      #messageDiv[invisible] {
         visibility: hidden;
       }
     </style>
@@ -32,17 +44,16 @@
     <cr-dialog id="dialog" on-close="close"
         close-text="$i18n{close}">
       <div slot="title">$i18n{configureFingerprintTitle}</div>
-      <div slot="body">
-        <div class="settings-box first">
-          <span class="middle">[[getInstructionMessage_(step_)]]</span>
+      <div slot="body" on-click="fakeScan_">
+        <div id="messageDiv"
+            invisible$="[[!getInstructionMessage_(step_, problemMessage_)]]">
+            <span>[[getInstructionMessage_(step_, problemMessage_)]]</span>
         </div>
-        <cr-fingerprint-progress-arc id="arc" circle-radius="100">
-        </cr-fingerprint-progress-arc>
-        <div id="problemDiv" class="settings-box first"
-            invisible$="[[!problemMessage_]]">
-          <iron-icon icon="cr:warning"></iron-icon>
-          <span class="middle">[[problemMessage_]]</span>
+        <div id="scannerLocation" hidden="[[!showScannerLocation_(step_)]]">
         </div>
+        <cr-fingerprint-progress-arc id="arc" circle-radius="100"
+            hidden="[[!showArc_(step_)]]">
+        </cr-fingerprint-progress-arc>
       </div>
       <div slot="button-container">
         <paper-button id="addAnotherButton" on-click="onAddAnotherFingerprint_"

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

@@ -132,12 +132,11 @@ Polymer({
   onScanReceived_: function(scan) {
     switch (this.step_) {
       case settings.FingerprintSetupStep.LOCATE_SCANNER:
+        this.$.arc.reset();
+        this.step_ = settings.FingerprintSetupStep.MOVE_FINGER;
+        this.percentComplete_ = 0;
+        break;
       case settings.FingerprintSetupStep.MOVE_FINGER:
-        if (this.step_ == settings.FingerprintSetupStep.LOCATE_SCANNER) {
-          this.$.arc.reset();
-          this.step_ = settings.FingerprintSetupStep.MOVE_FINGER;
-          this.percentComplete_ = 0;
-        }
         if (scan.isComplete) {
           this.problemMessage_ = '';
           this.step_ = settings.FingerprintSetupStep.READY;
@@ -148,7 +147,6 @@ Polymer({
         } else {
           this.setProblem_(scan.result);
           if (scan.result == settings.FingerprintResultType.SUCCESS) {
-            this.problemMessage_ = '';
             if (scan.percentComplete > this.percentComplete_) {
               this.$.arc.setProgress(
                   this.percentComplete_, scan.percentComplete,
@@ -171,14 +169,15 @@ Polymer({
    * on.
    * @param {!settings.FingerprintSetupStep} step The current step the
    *     fingerprint setup is on.
+   * @param {string} problemMessage Message for the scan result.
    * @private
    */
-  getInstructionMessage_: function(step) {
+  getInstructionMessage_: function(step, problemMessage) {
     switch (step) {
       case settings.FingerprintSetupStep.LOCATE_SCANNER:
         return this.i18n('configureFingerprintInstructionLocateScannerStep');
       case settings.FingerprintSetupStep.MOVE_FINGER:
-        return this.i18n('configureFingerprintInstructionMoveFingerStep');
+        return problemMessage;
       case settings.FingerprintSetupStep.READY:
         return this.i18n('configureFingerprintInstructionReadyStep');
     }
@@ -201,20 +200,11 @@ Polymer({
         }, SHOW_TAP_SENSOR_MESSAGE_DELAY_MS);
         break;
       case settings.FingerprintResultType.PARTIAL:
-        this.problemMessage_ = this.i18n('configureFingerprintPartialData');
-        break;
       case settings.FingerprintResultType.INSUFFICIENT:
-        this.problemMessage_ =
-            this.i18n('configureFingerprintInsufficientData');
-        break;
       case settings.FingerprintResultType.SENSOR_DIRTY:
-        this.problemMessage_ = this.i18n('configureFingerprintSensorDirty');
-        break;
       case settings.FingerprintResultType.TOO_SLOW:
-        this.problemMessage_ = this.i18n('configureFingerprintTooSlow');
-        break;
       case settings.FingerprintResultType.TOO_FAST:
-        this.problemMessage_ = this.i18n('configureFingerprintTooFast');
+        this.problemMessage_ = this.i18n('configureFingerprintTryAgain');
         break;
       case settings.FingerprintResultType.IMMOBILE:
         this.problemMessage_ = this.i18n('configureFingerprintImmobile');
@@ -267,7 +257,25 @@ Polymer({
     this.fire('add-fingerprint');
     this.reset_();
     this.$.arc.reset();
+    this.step_ = settings.FingerprintSetupStep.MOVE_FINGER;
     this.browserProxy_.startEnroll();
   },
+
+  /**
+   * Whether scanner location should be shown at the current step.
+   * @private
+   */
+  showScannerLocation_: function() {
+    return this.step_ == settings.FingerprintSetupStep.LOCATE_SCANNER;
+  },
+
+  /**
+   * Whether fingerprint progress circle should be shown at the current step.
+   * @private
+   */
+  showArc_: function() {
+    return this.step_ == settings.FingerprintSetupStep.MOVE_FINGER ||
+        this.step_ == settings.FingerprintSetupStep.READY;
+  },
 });
 })();

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

@@ -1496,22 +1496,12 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"configureFingerprintTitle", IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_TITLE},
     {"configureFingerprintInstructionLocateScannerStep",
      IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_LOCATE_SCANNER},
-    {"configureFingerprintInstructionMoveFingerStep",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_MOVE_FINGER},
     {"configureFingerprintInstructionReadyStep",
      IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSTRUCTION_READY},
     {"configureFingerprintLiftFinger",
      IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_LIFT_FINGER},
-    {"configureFingerprintPartialData",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_PARTIAL_DATA},
-    {"configureFingerprintInsufficientData",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_INSUFFICIENT_DATA},
-    {"configureFingerprintSensorDirty",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_SENSOR_DIRTY},
-    {"configureFingerprintTooSlow",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_TOO_SLOW},
-    {"configureFingerprintTooFast",
-     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_TOO_FAST},
+    {"configureFingerprintTryAgain",
+     IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_TRY_AGAIN},
     {"configureFingerprintImmobile",
      IDS_SETTINGS_ADD_FINGERPRINT_DIALOG_FINGER_IMMOBILE},
     {"configureFingerprintAddAnotherButton",

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

@@ -158,29 +158,44 @@ suite('settings-fingerprint-list', function() {
       assertTrue(dialog.$$('#dialog').open);
       assertEquals(0, dialog.percentComplete_);
       assertEquals(settings.FingerprintSetupStep.LOCATE_SCANNER, dialog.step_);
+      assertFalse(dialog.$$('#scannerLocation').hidden);
+      assertTrue(dialog.$$('#arc').hidden);
+      // Message should be shown for LOCATE_SCANNER step.
+      assertEquals(
+          'visible',
+          window.getComputedStyle(dialog.$$('#messageDiv')).visibility);
+
+      // First tap on the sensor to start fingerprint enrollment.
       browserProxy.scanReceived(
           settings.FingerprintResultType.SUCCESS, false, 20 /* percent */);
-      assertEquals(20, dialog.percentComplete_);
+      assertEquals(0, dialog.percentComplete_);
       assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
+      assertTrue(dialog.$$('#scannerLocation').hidden);
+      assertFalse(dialog.$$('#arc').hidden);
 
       // Verify that by sending a scan problem, the div that contains the
-      // problem message and icon should be visible.
+      // problem message should be visible.
       browserProxy.scanReceived(
           settings.FingerprintResultType.TOO_FAST, false, 20 /* percent */);
-      assertEquals(20, dialog.percentComplete_);
+      assertEquals(0, dialog.percentComplete_);
       assertEquals(
           'visible',
-          window.getComputedStyle(dialog.$$('#problemDiv')).visibility);
+          window.getComputedStyle(dialog.$$('#messageDiv')).visibility);
       browserProxy.scanReceived(
           settings.FingerprintResultType.SUCCESS, false, 50 /* percent */);
       assertEquals(
           'hidden',
-          window.getComputedStyle(dialog.$$('#problemDiv')).visibility);
+          window.getComputedStyle(dialog.$$('#messageDiv')).visibility);
+      assertEquals(50, dialog.percentComplete_);
       browserProxy.scanReceived(
           settings.FingerprintResultType.SUCCESS, false, 70 /* percent */);
       browserProxy.scanReceived(
           settings.FingerprintResultType.SUCCESS, true, 100 /* percent */);
       assertEquals(settings.FingerprintSetupStep.READY, dialog.step_);
+      // Message should be shown for READY step.
+      assertEquals(
+          'visible',
+          window.getComputedStyle(dialog.$$('#messageDiv')).visibility);
 
       // Verify that by tapping the continue button we should exit the dialog
       // and the fingerprint list should have one fingerprint registered.
@@ -209,6 +224,14 @@ suite('settings-fingerprint-list', function() {
           assertTrue(dialog.$$('#dialog').open);
           assertEquals(0, dialog.percentComplete_);
           assertFalse(isVisible(addAnotherButton));
+          assertEquals(
+              settings.FingerprintSetupStep.LOCATE_SCANNER, dialog.step_);
+
+          // First tap on the sensor to start fingerprint enrollment.
+          browserProxy.scanReceived(
+              settings.FingerprintResultType.SUCCESS, false, 20 /* percent */);
+          assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
+
           browserProxy.scanReceived(
               settings.FingerprintResultType.SUCCESS, true, 100 /* percent */);
           assertEquals(settings.FingerprintSetupStep.READY, dialog.step_);
@@ -229,6 +252,10 @@ suite('settings-fingerprint-list', function() {
 
           assertTrue(dialog.$$('#dialog').open);
           assertFalse(isVisible(addAnotherButton));
+          assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
+          assertTrue(dialog.$$('#scannerLocation').hidden);
+          assertFalse(dialog.$$('#arc').hidden);
+
           browserProxy.scanReceived(
               settings.FingerprintResultType.SUCCESS, true, 100 /* percent */);
 
@@ -251,9 +278,14 @@ suite('settings-fingerprint-list', function() {
           assertEquals(0, dialog.percentComplete_);
           assertEquals(
               settings.FingerprintSetupStep.LOCATE_SCANNER, dialog.step_);
+          // First tap on the sensor to start fingerprint enrollment.
           browserProxy.scanReceived(
               settings.FingerprintResultType.SUCCESS, false, 20 /* percent */);
-          assertEquals(20, dialog.percentComplete_);
+          assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
+
+          browserProxy.scanReceived(
+              settings.FingerprintResultType.SUCCESS, false, 30 /* percent */);
+          assertEquals(30, dialog.percentComplete_);
           assertEquals(settings.FingerprintSetupStep.MOVE_FINGER, dialog.step_);
 
           // Verify that by tapping the exit button we should exit the dialog