Pin keyboard improvements.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.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
  * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally
  * numeric values.
  *
  * Properties:
  *    value: The value of the PIN keyboard. Writing to this property will adjust
  *           the PIN keyboard's value.
  *
  * Events:
  *    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
  *            event.detail.pin.
  *
  * Example:
  *    <pin-keyboard on-pin-change="onPinChange" on-submit="onPinSubmit"
  *                  value="{{pinValue}}">
  *    </pin-keyboard>
  */
+
+(function() {
+
+/**
+ * Once auto backspace starts, the time between individual backspaces.
+ * @type {number}
+ * @const
+ */
+var repeatBackspaceIntervalMs = 150;
+
+/**
+ * How long the backspace button must be held down before auto backspace
+ * starts.
+ * @type {number}
+ * @const
+ */
+var startAutoBackspaceMs = 500;
+
 Polymer({
   is: 'pin-keyboard',
 
   behaviors: [
     I18nBehavior,
   ],
 
   properties: {
     /**
      * Whether or not the keyboard's input element should be numerical
@@ skipping 11 matching lines @@
       type: Boolean,
       value: false
     },
 
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
       notify: true,
       value: '',
       observer: 'onPinValueChange_'
+    },
+
+    /**
+     * The intervalID used for the backspace button set/clear interval.
+     * @private
+     */
+    repeatBackspaceIntervalId_: {
+      type: Number,
+      value: 0
+    },
+
+    /**
+     * The timeoutID used for the auto backspace.
+     * @private
+     */
+    startAutoBackspaceId_: {
+      type: Number,
+      value: 0
     }
   },
 
   /**
    * Gets the container holding the password field.
    * @type {!HTMLInputElement}
    */
   get inputElement() {
     return this.$$('#pin-input');
   },
@@ skipping 24 matching lines @@
    * @param {string} value
    * @param {string} previous
    */
   onPinValueChange_: function(value, previous) {
     if (value != previous)
       this.fire('pin-change', { pin: value });
   },
 
   /**
    * Called when the user wants to erase the last character of the entered
-   *  PIN value.
+   * PIN value.
+   * @private
    */
   onPinClear_: function() {
     this.value = this.value.substring(0, this.value.length - 1);
   },
 
+  /**
+   * Called when the user presses or touches the backspace button. Starts a
+   * timer which starts an interval to repeatedly backspace the pin value until
+   * the interval is cleared.
+   * @param {Event} event The event object.
+   * @private
+   */
+  onBackspacePointerDown_: function(event) {
+    this.startAutoBackspaceId_ = setTimeout(function() {

[jdufault, 2016/09/06 14:46:37]

setTimeout and this.async do the same/similar things, right? Can we only use one
of them?

ie, we don't need to nest this.async inside of setTimeout.

[sammiequon, 2016/09/06 17:08:07]

Done.

+      this.async(function() {
+        this.repeatBackspaceIntervalId_ = setInterval(
+            this.onPinClear_.bind(this), repeatBackspaceIntervalMs);
+      }.bind(this), 1);
+    }.bind(this), startAutoBackspaceMs);
+  },
+
+  /**
+   * Helper function which clears the timer / interval ids and resets them.
+   * @private
+   */
+  clearAndReset_: function() {
+    clearInterval(this.repeatBackspaceIntervalId_);

[jdufault, 2016/09/06 14:46:37]

Do we need separate interval id variables? Can we reuse it? What do you think of
backspaceTimeoutId_ as a name?

[sammiequon, 2016/09/06 17:08:07]

The reason I use two variables is because I changed this hold backspace to work
more like smartphone backspaces (specifically Android M) in that you hold it for
X interval and then it starts to delete at Y intervals. If the person releases
before X then it counts as a click; to check this i check if the timeOutId != 0.
If we share Id then it will always be != 0 for the hold duration. Is there a
better approach?

+    this.repeatBackspaceIntervalId_ = 0;
+    clearTimeout(this.startAutoBackspaceId_);
+    this.startAutoBackspaceId_ = 0;
+  },
+
+  /**
+   * Called when the user exits the backspace button. Stops the interval
+   * callback.
+   * @param {Event} event The event object.
+   * @private
+   */
+  onBackspacePointerOut_: function(event) {
+    this.clearAndReset_();
+  },
+
+  /**
+   * Called when the user unpresses or untouches the backspace button. Stops the
+   * interval callback and fires a backspace event if there is no interval
+   * running.
+   * @param {Event} event The event object.
+   * @private
+   */
+  onBackspacePointerUp_: function(event) {
+    // If an interval has started, do not fire event on pointer up.
+    if (!this.repeatBackspaceIntervalId_)
+      this.onPinClear_();
+    this.clearAndReset_();
+  },
+
   /** 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) {
       event.preventDefault();
       return;
     }
 
     // Enter pressed.
@@ skipping 20 matching lines @@
   },
 
   /**
    * 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_();
       event.preventDefault();
       return;
     }
 
     this.value += String.fromCharCode(code);
@@ skipping 38 matching lines @@
     // possible. Number.isInteger will verify the value is not a NaN and that it
     // does not contain decimals.
     // This heuristic will fail for inputs like '1.0'.
     //
     // Since we still support users entering their passwords through the PIN
     // keyboard, we swap the input box to rtl when we think it is a password
     // (just numbers), if the document direction is rtl.
     return (document.dir == 'rtl') && !Number.isInteger(+password);
   },
 });
+})();