Lock screen pin keyboard ui upgrades.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'settings-setup-pin-dialog' is the settings page for choosing a PIN.
  *
  * Example:
  *
@@ skipping 26 matching lines @@
      */
     pinKeyboardValue_: String,
 
     /**
      * Stores the initial PIN value so it can be confirmed.
      * @private
      */
     initialPin_: String,
 
     /**
-     * The actual problem message to display.
-     * @private
-     */
-    problemMessage_: String,
-
-    /**
-     * The type of problem class to show (warning or error).
-     */
-    problemClass_: String,
-
-    /**
      * Should the step-specific submit button be displayed?
      * @private
      */
     enableSubmit_: Boolean,
 
     /**
      * The current step/subpage we are on.
      * @private
      */
     isConfirmStep_: {
@@ skipping 13 matching lines @@
   },
 
   close: function() {
     if (this.$.dialog.open)
       this.$.dialog.close();
 
     this.resetState_();
   },
 
   /**
+   * Gets the pin keyboard element.
+   * @type {!HTMLDivElement}
+   */
+  get pinKeyboard() {
+    return this.$$('#pinKeyboard');
+  },
+
+  /**
    * Resets the element to the initial state.
    * @private
    */
   resetState_: function() {
     this.initialPin_ = '';
     this.pinKeyboardValue_ = '';
     this.enableSubmit_ = false;
     this.isConfirmStep_ = false;
     this.onPinChange_();
   },
@@ skipping 49 matching lines @@
            this.initialPin_ == this.pinKeyboardValue_;
   },
 
   /**
    * Notify the user about a problem.
    * @private
    * @param {string} messageId
    * @param {string} problemClass
    */
   showProblem_: function(messageId, problemClass) {
-    this.problemMessage_ = this.i18n(messageId);
-    this.problemClass_ = problemClass;
+    this.pinKeyboard.setProblem(this.i18n(messageId), true /*isError*/);

[jdufault, 2016/08/24 01:20:18]

Refactor the callers of showProblem_ to also use true/false.

problemClass is not being propagated right now which breaks all of the warnings.
If we want to eliminate the difference between warning and errors, we should
eliminate the problemClass parameter entirely.

[sammiequon, 2016/08/25 23:50:02]

No more problem message.

     this.updateStyles();
   },
 
   /** @private */
   hideProblem_: function() {
-    this.problemMessage_ = '';
-    this.problemClass_ = '';
+    this.pinKeyboard.setProblem('', true /*isError*/);

[jdufault, 2016/08/24 01:20:18]

Add a clearProblem method?

[sammiequon, 2016/08/25 23:50:02]

No more problem message.

   },
 
   /** @private */
   onPinChange_: function() {
     if (!this.isConfirmStep_) {
       var isPinLongEnough = this.isPinLongEnough_(this.pinKeyboardValue_);
       var isWeak = isPinLongEnough && this.isPinWeak_(this.pinKeyboardValue_);
 
       if (!isPinLongEnough && this.pinKeyboardValue_)
         this.showProblem_('configurePinTooShort', 'error');
@@ skipping 72 matching lines @@
    * @private
    * @param {boolean} isConfirmStep
    * @return {string}
    */
   getContinueMessage_: function(isConfirmStep) {
     return this.i18n(isConfirmStep ? 'confirm' : 'configurePinContinueButton');
   },
 });
 
 })();