md settings: Modify errors/warnings on setup pin keyboard dialog.

Couple modifications to errors/warnings in setup pin dialog:
1) Shows min length warning right away
2) On confirming pin step, only show mismatch error when confirm button clicked
3) Min length warning becomes error once user exceeds min length, but goes back under min length threshold.

Bug: 723800
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I7fb9dd7f18c8555a3d247b8a2613574abe696b32
Reviewed-on: https://chromium-review.googlesource.com/540744Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Sammie Quon <sammiequon@chromium.org>
Cr-Commit-Position: refs/heads/master@{#481785}

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

@@ -32,6 +32,12 @@
         justify-content: center;
       }
 
+      /* Hide this using visibility: hidden instead of hidden so that the
+         dialog does not resize when there are no problems to display. */
+      #problemDiv[invisible] {
+        visibility: hidden;
+      }
+
       #problemMessage {
         font-size: 10px;
       }
@@ -49,7 +55,7 @@
               autofocus>
             <!-- Warning/error; only shown if title is hidden. -->
             <div id="problemDiv" class$="[[problemClass_]]"
-                hidden$="[[!problemMessage_]]" problem>
+                hidden="[[!problemMessage_]]" problem>
               <iron-icon icon="settings:error-outline"></iron-icon>
               <span id="problemMessage">[[problemMessage_]]</span>
             </div>

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

@@ -88,12 +88,27 @@ Polymer({
      * @private
      */
     quickUnlockPrivate_: {type: Object, value: chrome.quickUnlockPrivate},
+
+    /**
+     * |pinHasPassedMinimumLength_| tracks whether a user has passed the minimum
+     * length threshold at least once, and all subsequent PIN too short messages
+     * will be displayed as errors. They will be displayed as warnings prior to
+     * this.
+     * @private
+     */
+    pinHasPassedMinimumLength_: {type: Boolean, value: false},
   },
 
   /** @override */
   attached: function() {
     this.resetState_();
     this.$.dialog.showModal();
+
+    // Show the pin is too short error when first displaying the PIN dialog.
+    this.problemClass_ = ProblemType.WARNING;
+    this.quickUnlockPrivate_.getCredentialRequirements(
+        chrome.quickUnlockPrivate.QuickUnlockMode.PIN,
+        this.processPinRequirements_.bind(this, MessageType.TOO_SHORT));
   },
 
   close: function() {
@@ -170,7 +185,7 @@ Polymer({
     this.problemClass_ = problemClass;
     this.updateStyles();
     this.enableSubmit_ =
-        problemClass != ProblemType.ERROR && messageId != MessageType.MISMATCH;
+        problemClass != ProblemType.ERROR && messageId != MessageType.TOO_SHORT;
   },
 
   /** @private */
@@ -190,9 +205,16 @@ Polymer({
     if (!message.errors.length && !message.warnings.length) {
       this.hideProblem_();
       this.enableSubmit_ = true;
+      this.pinHasPassedMinimumLength_ = true;
       return;
     }
 
+    if (!message.errors.length ||
+        message.errors[0] !=
+            chrome.quickUnlockPrivate.CredentialProblem.TOO_SHORT) {
+      this.pinHasPassedMinimumLength_ = true;
+    }
+
     if (message.warnings.length) {
       assert(
           message.warnings[0] ==
@@ -203,7 +225,10 @@ Polymer({
     if (message.errors.length) {
       switch (message.errors[0]) {
         case chrome.quickUnlockPrivate.CredentialProblem.TOO_SHORT:
-          this.showProblem_(MessageType.TOO_SHORT, ProblemType.ERROR);
+          this.showProblem_(
+              MessageType.TOO_SHORT,
+              this.pinHasPassedMinimumLength_ ? ProblemType.ERROR :
+                                                ProblemType.WARNING);
           break;
         case chrome.quickUnlockPrivate.CredentialProblem.TOO_LONG:
           this.showProblem_(MessageType.TOO_LONG, ProblemType.ERROR);
@@ -216,7 +241,6 @@ Polymer({
           break;
       }
     }
-
   },
 
   /** @private */
@@ -230,13 +254,11 @@ Polymer({
       return;
     }
 
+    this.hideProblem_();
     if (this.canSubmit_()) {
-      this.hideProblem_();
       this.enableSubmit_ = true;
       return;
     }
-
-    this.showProblem_(MessageType.MISMATCH, ProblemType.WARNING);
   },
 
   /** @private */

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

@@ -15,7 +15,8 @@ cr.define('settings_people_page_quick_unlock', function() {
   function isVisible(element) {
     while (element) {
       if (element.offsetWidth <= 0 || element.offsetHeight <= 0 ||
-          element.hidden) {
+          element.hidden ||
+          window.getComputedStyle(element).visibility == 'hidden') {
         return false;
       }
 
@@ -389,11 +390,24 @@ cr.define('settings_people_page_quick_unlock', function() {
         assertTrue(isVisible(problemDiv));
       });
 
-      // If the PIN is too short an error problem is shown.
+      // If the PIN is too short a problem is shown.
       test('WarningShownForShortPins', function() {
-        pinKeyboard.value = '11';
-
+        // Verify initially when the PIN is less than 4 digits, the problem will
+        // be a warning.
+        pinKeyboard.value = '';
         assertTrue(isVisible(problemDiv));
+        assertHasClass(problemDiv, 'warning');
+        assertTrue(continueButton.disabled);
+
+        // Verify that once the PIN is 4 digits (do not use 1111 since that will
+        // bring up a easy to guess warning) the warning disappears.
+        pinKeyboard.value = '1321';
+        assertFalse(isVisible(problemDiv));
+        assertFalse(continueButton.disabled);
+
+        // Verify that after we pass 4 digits once, but delete some digits, the
+        // problem will be an error.
+        pinKeyboard.value = '11';
         assertHasClass(problemDiv, 'error');
         assertTrue(continueButton.disabled);
       });
@@ -423,16 +437,15 @@ cr.define('settings_people_page_quick_unlock', function() {
         assertHasClass(problemDiv, 'warning');
       });
 
-      // If the confirm PIN does not match the initial PIN a warning is shown.
-      // If the user tries to submit the PIN, the warning changes to an error.
+      // Show a error if the user tries to submit a PIN that does not match the
+      // initial PIN. The error disappears once the user edits the wrong PIN.
       test('WarningThenErrorShownForMismatchedPins', function() {
         pinKeyboard.value = '1118';
         MockInteractions.tap(continueButton);
 
         // Entering a mismatched PIN shows a warning.
         pinKeyboard.value = '1119';
-        assertTrue(isVisible(problemDiv));
-        assertHasClass(problemDiv, 'warning');
+        assertFalse(isVisible(problemDiv));
 
         // Submitting a mistmatched PIN shows an error. Directly call the button
         // event since a tap on the disabled button does nothing.
@@ -441,7 +454,7 @@ cr.define('settings_people_page_quick_unlock', function() {
 
         // Changing the PIN changes the error to a warning.
         pinKeyboard.value = '111';
-        assertHasClass(problemDiv, 'warning');
+        assertFalse(isVisible(problemDiv));
       });
 
       // Hitting cancel at the setup step dismisses the dialog.