Expose some internal PIN keyboard state.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
index a5cbe3b7c5c1c5616a7a1ababb4cc36f279640c4..0953668bf5758ae915dbb5b6ddf6d39777d2fd28 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -5,32 +5,70 @@
 Polymer({
   is: 'pin-keyboard',
 
-  // Called when a keypad number has been tapped.
+  properties: {
+    /** The value stored in the keyboard's input element. */
+    value: {
+      type: String,
+      notify: true,
+      value: '',
+    }
+  },
+
+  /**
+   * Transfers focus to the input element.
+   */
+  focus: function() {
+    this.$$('#pin-input').focus();
+  },
+
+  /**
+   * Called when a keypad number has been tapped.
+   */
   onNumberTap_: function(event, detail) {
-    var target = event.target;
-    var value = target.getAttribute('value');
+    var numberValue = event.target.getAttribute('value');
+    this.value += numberValue;
 
-    var input = this.$$('#pin-input');
-    input.value += value;
+    this.firePinChangeEvent_();

[xiyuan, 2016/06/21 20:16:24]

I wonder whether we can add an "observer" for |value| and fire the 'change'
event there instead of doing it explicitly (and using a timer in keydown
handler).

Would this work?

properties: {
  value: {
    type: String,
    notify: true,
    value: '',
    observer: 'valueChanged_'
  }
},
...
valueChanged_: function() {
  this.fire('change', { pin: this.value });
},
...

[jdufault, 2016/06/22 22:58:53]

Done. I think polymer is raising a 'change' event as well, so I've renamed the
event to 'pin-change'.

   },
 
-  // Called when the user wants to submit the PIN.
-  onPinSubmit_: function() {
-    var pin = this.$$('#pin-input').value;
-    this.fire('submit', { pin: pin });
+  /**
+   * Fires a submit event with the current PIN value.
+   */
+  firePinSubmitEvent_: function() {
+    this.fire('submit', { pin: this.value });
   },
 
-  // Called when a key event is pressed while the input element has focus.
+  /**
+   * Fires an update event with the current PIN value.
+   * @param {string} opt_previousValue Optional previous value. Update event
+   * will not be fired if the current value is equal to the previous value.
+   */
+  firePinChangeEvent_: function(opt_previousValue) {
+    if (this.value != opt_previousValue) {
+      this.fire('change', { pin: this.value });
+    }
+  },
+
+  /**
+   * Called when a key event is pressed while the input element has focus.
+   */
   onInputKeyDown_: function(event) {
     // Up/down pressed, swallow the event to prevent the input value from
     // being incremented or decremented.
-    if (event.keyCode == 38 || event.keyCode == 40)
+    if (event.keyCode == 38 || event.keyCode == 40) {
       event.preventDefault();
+      return;
+    }
 
     // Enter pressed.
     if (event.keyCode == 13) {
-      this.onPinSubmit_();
+      this.firePinSubmitEvent_();
       event.preventDefault();
+      return;
     }
+
+    // The PIN was very likely updated. Fire an update event after the event has
+    // finished processing.
+    setTimeout(this.firePinChangeEvent_.bind(this, this.value));
   }
 });