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.errorMessage = this.i18n(messageId);

[jdufault, 2016/08/22 20:56:40]

what about this for a public API?

  this.pinKeyboard.setProblem(this.i18n(messageId), true /*isError*/);

[sammiequon, 2016/08/23 17:30:18]

Done.

     this.updateStyles();
   },
 
   /** @private */
   hideProblem_: function() {
-    this.problemMessage_ = '';
-    this.problemClass_ = '';
+    this.pinKeyboard.errorMessage = '';
   },
 
   /** @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');
   },
 });
 
 })();