ChromeOS MD-OOBE: Add HID detection screen.

chrome/browser/resources/chromeos/login/oobe_hid_detection.js

Index: chrome/browser/resources/chromeos/login/oobe_hid_detection.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_hid_detection.js b/chrome/browser/resources/chromeos/login/oobe_hid_detection.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c4540ce024304b96a842058c91b5b6680b0db97
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_hid_detection.js
@@ -0,0 +1,159 @@
+// 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 Polymer element for displaying material design HID detection
+ * screen.
+ */
+
+{
+  var PINCODE_LENGTH = 6;

[stevenjb, 2016/12/28 20:47:04]

I don't think the { does anything, i.e. I don't think that actually scopes
PINCODE_LENGTH.

In Settings we would do the following:

(function() {
  /** @const {number} */ var PINCODE_LENGTH = 6;

  Polymer({
  ...
  });
})();

[Alexander Alekseev, 2016/12/28 22:56:23]

Done.

+
+  Polymer({
+    is: 'oobe-hid-detection-md',
+
+    properties: {
+      /**
+       * "Continue" button is disabled until HID devices are paired.
+       */

[stevenjb, 2016/12/28 20:47:04]

nit: All of these comments that fit can be a single line:

/** "Continue" button is disabled until HID devices are paired. */

[Alexander Alekseev, 2016/12/28 22:56:22]

Done.

+      continueButtonDisabled: {
+        type: Boolean,
+        value: true,
+      },
+
+      /**
+       * This is the displaed text for keyboard "Pairing" state.

[stevenjb, 2016/12/28 20:47:04]

displayed

[Alexander Alekseev, 2016/12/28 22:56:23]

Done.

+       */
+      keyboardPairingLabel: String,
+
+      /**
+       * This is the displaed text for keyboard "Paired" state.

[stevenjb, 2016/12/28 20:47:04]

displayed

[Alexander Alekseev, 2016/12/28 22:56:22]

Done.

+       */
+      keyboardPairedLabel: String,
+
+      /**
+       * Current state in mouse pairing process.
+       */
+      mouseState: String,

[stevenjb, 2016/12/28 20:47:04]

This appears to be internal? If so, append _ to the name and add @private to the
comment. Same with any other private properties (i.e. only used in this html/js,
not set by other html or js files).

[Alexander Alekseev, 2016/12/28 22:56:22]

Done.

+
+      /**
+       * Current state in keyboard pairing process.
+       */
+      keyboardState: String,
+
+      /**
+       * Controls visibility of keyboard pincode.
+       */
+      keyboardPincodeVisible: Boolean,
+
+      /**
+       * Reference to OOBE screen object.
+       * @type {!OobeTypes.Screen}
+       */
+      screen: Object,
+    },
+
+    /**
+     * Displayed keyboard pincode.
+     */
+    keyboardPincode_: String,
+
+    /**
+     * Helper function to update keyboard/mouse state.
+     * @private
+     */
+    calculateState_: function(state, newState) {

[stevenjb, 2016/12/28 20:47:04]

Add @param for state, newState.

[Alexander Alekseev, 2016/12/28 22:56:23]

Done.

+      if (newState === undefined)
+        return state;
+
+      if (newState == this.screen.CONNECTION.UPDATE)
+        return state;
+
+      return newState;
+    },
+
+    /**
+     * Helper function to calculate visibility of 'connected' icons.
+     * @private
+     */
+    tickIsVisible_: function(state) {

[stevenjb, 2016/12/28 20:47:04]

@param for all functions

[Alexander Alekseev, 2016/12/28 22:56:22]

Done.

+      return (state == this.screen.CONNECTION.USB) ||
+          (state == this.screen.CONNECTION.CONNECTED) ||
+          (state == this.screen.CONNECTION.PAIRED);
+    },
+
+    /**
+     * Helper function to update keyboard/mouse state.
+     * @private
+     */
+    notEq_: function(string1, string2) { return string1 != string2; },
+
+    /**
+     * Sets current state in keyboard pairing process.
+     */
+    setMouseState: function(state) {
+      this.mouseState = this.calculateState_(this.mouseState, state);
+    },
+
+    /**
+     * Updates visibility of keyboard pincode.
+     * @private
+     */
+    updateKeyboardPincodeVisible_: function(state) {
+      this.keyboardPincodeVisible = this.keyboardPincode_ &&
+          (this.keyboardState == this.screen.CONNECTION.PAIRING);
+    },
+
+    /**
+     * Sets current state in keyboard pairing process.
+     */
+    setKeyboardState: function(state) {
+      this.keyboardState = this.calculateState_(this.keyboardState, state);
+      console.error(
+          'keyboardState=' + this.keyboardState + ' (came state ' + state +
+          ')');

[stevenjb, 2016/12/28 20:47:04]

Remove debugging logs.

[Alexander Alekseev, 2016/12/28 22:56:23]

Done.

+      this.updateKeyboardPincodeVisible_();
+    },
+
+    /**
+     * Sets displayed keyboard pin.
+     */
+    setPincodeState: function(pincode, entered, expected, label) {
+      this.keyboardPincode_ = pincode;
+      if (!pincode) {
+        this.updateKeyboardPincodeVisible_();
+        return;
+      }
+
+      if (pincode.length != PINCODE_LENGTH)
+        console.error('Wrong pincode length');
+
+      // Pincode keys plus Enter key.
+      for (var i = 0; i < (PINCODE_LENGTH + 1); i++) {

[stevenjb, 2016/12/28 20:47:04]

nit: in cros specific UI we can use 'let' which scopes the variable:
for (let i = 0; ...)

[Alexander Alekseev, 2016/12/28 22:56:22]

Done.

+        var pincodeSymbol = this.$['hid-keyboard-pincode-sym-' + (i + 1)];
+        pincodeSymbol.classList.toggle('key-typed', i < entered && expected);
+        pincodeSymbol.classList.toggle('key-untyped', i > entered && expected);
+        pincodeSymbol.classList.toggle('key-next', i == entered && expected);
+        if (i < PINCODE_LENGTH)
+          pincodeSymbol.textContent = pincode[i] ? pincode[i] : '';
+      }
+
+      var wasVisible = this.keyboardPincodeVisible;
+      this.updateKeyboardPincodeVisible_();
+      if (this.keyboardPincodeVisible && !wasVisible) {
+        announceAccessibleMessage(
+            label + ' ' + pincode + ' ' +
+            loadTimeData.getString('hidDetectionBTEnterKey'));
+      }
+    },
+
+    /**
+     * This is 'on-tap' event handler for 'Continue' button.
+     */
+    onHIDContinue_: function(event) {
+      chrome.send('HIDDetectionOnContinue');
+      event.stopPropagation();
+    },
+  });
+}