cros: Allow pin keyboard to keep focus without popping up the pin keyboard.

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 d8b2762fb104855a57eb10cc72b4413c231f46ea..7b168925f5e642d609911a78b91e3de6e8722e9c 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -12,9 +12,15 @@
  *           the PIN keyboard's value.
  *
  * Events:
- *    pin-change: Fired when the PIN value has changed. The pin is available at
+ *    pin-change: Fired when the PIN value has changed. The PIN is available at
  *                event.detail.pin.
- *    submit: Fired when the PIN is submitted. The pin is available at
+ *    pin-clear: Fired when the clear button is clicked. If the PIN keyboard
+ *               has no input, this notifies the input which receives the PIN
+ *               keyboard events that backspace has been pressed.
+ *    pin-focus: Fired when the pin-input is focused. If the PIN keyboard has no
+ *               input, this notifies the input which receives the PIN keyboard
+ *               events to handle the input being focused.
+ *    submit: Fired when the PIN is submitted. The PIN is available at
  *            event.detail.pin.
  *
  * Example:
@@ -40,6 +46,14 @@ var REPEAT_BACKSPACE_DELAY_MS = 150;
  */
 var INITIAL_BACKSPACE_DELAY_MS = 500;
 
+/**
+ * The key codes of the keys allowed to be used on the pin input, in addition to
+ * number keys.
+ * @type {Array<number>}
+ * @const
+ */
+var PIN_INPUT_ALLOWED_NON_NUMBER_KEY_CODES = [8, 9, 37, 39];

[jdufault, 2016/10/26 17:56:16]

What do these key codes map to?

[sammiequon, 2016/10/27 00:22:40]

Done.

+
 Polymer({
   is: 'pin-keyboard',
 
@@ -93,17 +107,6 @@ Polymer({
   },
 
   /**
-   * @override
-   */
-  attached: function() {
-    // Remove the space/enter key binds from the polymer
-    // iron-a11y-keys-behavior.
-    var digitButtons = Polymer.dom(this.root).querySelectorAll('.digit-button');
-    for (var i = 0; i < digitButtons.length; ++i)
-      digitButtons[i].keyEventTarget = null;
-  },
-
-  /**
    * Gets the container holding the password field.
    * @type {!HTMLInputElement}
    */
@@ -113,7 +116,9 @@ Polymer({
 
   /** Transfers focus to the input element. */
   focus: function() {
-    this.$$('#pin-input').focus();
+    if (!this.hideInput)
+      this.$$('#pin-input').focus();
+    this.fire('pin-focus');
   },
 
   /**
@@ -124,6 +129,14 @@ Polymer({
   onNumberTap_: function(event, detail) {
     var numberValue = event.target.getAttribute('value');
     this.value += numberValue;
+
+    // If a number button is clicked, we do not want to switch focus to the
+    // button, therefore we transfer focus back to the input, but if a number
+    // button is tabbed into, it should keep focus, so users can use tab and
+    // spacebar/return to enter their PIN.
+    if (!event.target.receivedFocusFromKeyboard)
+      this.focus();
+    event.preventDefault();
   },
 
   /** Fires a submit event with the current PIN value. */
@@ -148,7 +161,17 @@ Polymer({
    * @private
    */
   onPinClear_: function() {
-    this.value = this.value.substring(0, this.value.length - 1);
+    if (!this.hideInput) {
+      // If the input is shown check the location of the caret or the selected
+      // area to delete the correct character(s).

[jdufault, 2016/10/26 17:56:16]

Can we fire a backspace key event on the input element instead?

[sammiequon, 2016/10/27 00:22:40]

As per offline, this cannot be achieved.

+      var selectionStart = this.$$('#pin-input').selectionStart;
+      var selectionEnd = this.$$('#pin-input').selectionEnd;
+      if (selectionStart == selectionEnd)
+        selectionStart--;
+      this.value = this.value.substring(0, selectionStart) +
+          this.value.substring(selectionEnd, this.value.length);
+    }
+    this.fire('pin-clear');
   },
 
   /**
@@ -184,6 +207,10 @@ Polymer({
    */
   onBackspacePointerOut_: function(event) {
     this.clearAndReset_();
+
+    if (!event.target.receivedFocusFromKeyboard)
+      this.focus();
+    event.preventDefault();
   },
 
   /**
@@ -198,78 +225,41 @@ Polymer({
     if (!this.repeatBackspaceIntervalId_)
       this.onPinClear_();
     this.clearAndReset_();
+
+    if (!event.target.receivedFocusFromKeyboard)
+      this.focus();
+    event.preventDefault();
   },
 
   /** Called when a key event is pressed while the input element has focus. */
   onInputKeyDown_: function(event) {
+    var code = event.keyCode;
+
     // Up/down pressed, swallow the event to prevent the input value from
     // being incremented or decremented.
-    if (event.keyCode == 38 || event.keyCode == 40) {
+    if (code == 38 || code == 40) {

[jdufault, 2016/10/26 17:56:16]

If you're going to use a temporary, name it keyCode please, so that it is
immediately clear what it is referring to.

In this case I don't think a temporary is needed though, since you're just using
it to shorten a value fetch.

[sammiequon, 2016/10/27 00:22:40]

Done.

       event.preventDefault();
       return;
     }
 
     // Enter pressed.
-    if (event.keyCode == 13) {
+    if (code == 13) {
       this.firePinSubmitEvent_();
       event.preventDefault();
       return;
     }
-  },
 
-  /**
-   * Keypress does not handle backspace but handles the char codes nicely, so we
-   * have a seperate event to process the backspaces.
-   * @param {Event} event Keydown Event object.
-   * @private
-   */
-  onKeyDown_: function(event) {
-    // Backspace pressed.
-    if (event.keyCode == 8) {
-      this.onPinClear_();
-      event.preventDefault();
-      return;
-    }
-  },
+    // Do not pass events that are not numbers or special keys we care about. We
+    // use this instead of input type number because there are several issues
+    // with input type number, such as no selectionStart/selectionEnd and
+    // entered non numbers causes the caret to jump to the left.
+    var isUsableKey = (code >= 48 && code <= 57) ||
+        PIN_INPUT_ALLOWED_NON_NUMBER_KEY_CODES.indexOf(code) > -1;
 
-  /**
-   * Called when a key press event is fired while the number button is focused.
-   * Ideally we would want to pass focus back to the input element, but the we
-   * cannot or the virtual keyboard will keep poping up.
-   * @param {Event} event Keypress Event object.
-   * @private
-   */
-  onKeyPress_: function(event) {
-    // If the active element is the input element, the input element itself will
-    // handle the keypresses, so we do not handle them here.
-    if (this.shadowRoot.activeElement == this.inputElement)
-      return;
-
-    var code = event.keyCode;
-
-    // Enter pressed.
-    if (code == 13) {
-      this.firePinSubmitEvent_();
+    if (!isUsableKey) {
       event.preventDefault();
       return;
     }
-
-    // Space pressed. We want the old polymer function of space activating the
-    // button with focus.
-    if (code == 32) {
-      // Check if target was a number button.
-      if (event.target.hasAttribute('value')) {
-        this.value += event.target.getAttribute('value');
-        return;
-      }
-      // Check if target was backspace button.
-      if (event.target.classList.contains('backspace-button')) {
-        this.onPinClear_();
-        return;
-      }
-    }
-
-    this.value += String.fromCharCode(code);
   },
 
   /**
@@ -282,16 +272,6 @@ Polymer({
   },
 
   /**
-   * Computes whether the input type for the pin input should be password or
-   * numerical.
-   * @param {boolean} enablePassword
-   * @private
-   */
-  getInputType_: function(enablePassword) {
-    return enablePassword ? 'password' : 'number';
-  },
-
-  /**
    * Computes the value of the pin input placeholder.
    * @param {boolean} enablePassword
    * @private