ChromeOS MD-OOBE: Add HID detection screen.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js b/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js
index a28c496b7c56f01dfafdb0ee1cedae78023676ab..1e616f2c2aa670e9267072898ae7a95b013dc2a3 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js
@@ -20,38 +20,22 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
   var PINCODE_LENGTH = 6;
 
   return {
+    // Enumeration of possible connection states of a device.
+    CONNECTION: {
+      SEARCHING: 'searching',
+      USB: 'usb',
+      CONNECTED: 'connected',
+      PAIRING: 'pairing',
+      PAIRED: 'paired',
+      // Special info state.
+      UPDATE: 'update',
+    },
 
-  /**
-   * Enumeration of possible states during pairing.  The value associated with
-   * each state maps to a localized string in the global variable
-   * |loadTimeData|.
-   * @enum {string}
-   */
-   PAIRING: {
-     STARTUP: 'bluetoothStartConnecting',
-     REMOTE_PIN_CODE: 'bluetoothRemotePinCode',
-     CONNECT_FAILED: 'bluetoothConnectFailed',
-     CANCELED: 'bluetoothPairingCanceled',
-     // Pairing dismissed (succeeded or canceled).
-     DISMISSED: 'bluetoothPairingDismissed'
-   },
-
-   // Enumeration of possible connection states of a device.
-   CONNECTION: {
-     SEARCHING: 'searching',
-     USB: 'usb',
-     CONNECTED: 'connected',
-     PAIRING: 'pairing',
-     PAIRED: 'paired',
-     // Special info state.
-     UPDATE: 'update'
-   },
-
-   // Possible ids of device blocks.
-   BLOCK: {
-     MOUSE: 'hid-mouse-block',
-     KEYBOARD: 'hid-keyboard-block'
-   },
+    // Possible ids of device blocks.
+    BLOCK: {
+      MOUSE: 'hid-mouse-block',
+      KEYBOARD: 'hid-keyboard-block',
+    },
 
     /**
      * Button to move to usual OOBE flow after detection.
@@ -69,6 +53,11 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
             if (stateId === undefined)
               return;
             self.setDeviceBlockState_('hid-mouse-block', stateId);
+            var md = $('oobe-hid-detection-md');
+            if (md) {
+              md.screen = self;
+              md.setMouseState(stateId);
+            }
           }
       );
       this.context.addObserver(
@@ -78,12 +67,28 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
           if (stateId === undefined)
             return;
           self.setDeviceBlockState_('hid-keyboard-block', stateId);
-          if (stateId == self.CONNECTION.PAIRED) {
-            $('hid-keyboard-label-paired').textContent = self.context.get(
-                CONTEXT_KEY_KEYBOARD_LABEL, '');
-          } else if (stateId == self.CONNECTION.PAIRING) {
-            $('hid-keyboard-label-pairing').textContent = self.context.get(
-                CONTEXT_KEY_KEYBOARD_LABEL, '');
+          var md = $('oobe-hid-detection-md');
+          if (md) {
+            md.screen = self;
+            md.setKeyboardState(stateId);
+          }
+          var oldPaired = $('hid-keyboard-label-paired');
+          var oldPairing = $('hid-keyboard-label-pairing');
+
+          var label = self.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '');
+          if (md) {
+            if (stateId == self.CONNECTION.PAIRED) {
+              md.keyboardPairedLabel = label;
+            } else if (stateId == self.CONNECTION.PAIRING) {
+              md.keyboardPairingLabel = label;
+            }
+          }
+          if (oldPaired && oldPairing) {
+            if (stateId == self.CONNECTION.PAIRED) {
+                oldPaired.textContent = label;

[xiyuan, 2017/01/04 21:02:23]

nit: wrong indent

+            } else if (stateId == self.CONNECTION.PAIRING) {
+                oldPairing.textContent = label;
+            }
           }
         }
       );
@@ -99,7 +104,15 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       this.context.addObserver(
         CONTEXT_KEY_CONTINUE_BUTTON_ENABLED,
         function(enabled) {
-          $('hid-continue-button').disabled = !enabled;
+          var md = $('oobe-hid-detection-md');
+          if (md) {
+            md.screen = self;
+            md.continueButtonDisabled = !enabled;
+          }
+
+          var oldContinueButton = $('hid-continue-button');
+          if (oldContinueButton)
+            oldContinueButton.disabled = !enabled;
         }
       );
     },
@@ -126,9 +139,7 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
     /**
      * Returns a control which should receive an initial focus.
      */
-    get defaultControl() {
-      return $('hid-continue-button');
-    },
+    get defaultControl() { return $('hid-continue-button'); },
 
     /**
      * Sets a device-block css class to reflect device state of searching, usb,
@@ -141,6 +152,9 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       if (state == 'update')
         return;
       var deviceBlock = $(blockId);
+      /* Blocks are hidden in MD-mode */
+      if (!deviceBlock)
+        return;
       for (var key in this.CONNECTION) {
         var stateCase = this.CONNECTION[key];
         deviceBlock.classList.toggle(stateCase, stateCase == state);
@@ -155,15 +169,39 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       if (state === undefined)
         return;
       this.setDeviceBlockState_(this.BLOCK.MOUSE, state);
+      var md = $('oobe-hid-detection-md');
+      if (md) {
+        md.screen = this;
+        md.setMouseState(state);
+      }
     },
 
     /**
      * Updates state for pincode key elements based on context state.
      */
     updatePincodeKeysState_: function() {
-      var pincodeKeys = $('hid-keyboard-pincode');
       var pincode = this.context.get(CONTEXT_KEY_KEYBOARD_PINCODE, '');
       var state = this.context.get(CONTEXT_KEY_KEYBOARD_STATE, '');
+      var label = this.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '');
+
+      var entered =
+          this.context.get(CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE, 0);
+
+      // whether the functionality of getting num of entered keys is available.
+      var expected =
+          this.context.get(CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED, false);
+
+      var md = $('oobe-hid-detection-md');
+      if (md) {
+        md.screen = this;
+        md.setKeyboardState(state);
+        md.setPincodeState(pincode, entered, expected, label);
+        return;
+      }
+      /* non-md version */
+      var pincodeKeys = $('hid-keyboard-pincode');
+      if (!pincodeKeys)
+        return;
 
       if (!pincode || state !== this.CONNECTION.PAIRING) {
         pincodeKeys.hidden = true;
@@ -177,13 +215,6 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
             ' ' + loadTimeData.getString('hidDetectionBTEnterKey'));
       }
 
-      var entered = this.context.get(
-          CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE, 0);
-
-      // whether the functionality of getting num of entered keys is available.
-      var expected = this.context.get(
-          CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED, false);
-
       if (pincode.length != PINCODE_LENGTH)
         console.error('Wrong pincode length');
 
@@ -198,14 +229,32 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       }
     },
 
-     /*
-     * Event handler that is invoked just before the screen in shown.
-     * @param {Object} data Screen init payload.
-     */
+    /*
+    * Event handler that is invoked just before the screen in shown.
+    * @param {Object} data Screen init payload.
+    */
     onBeforeShow: function(data) {
+      this.setMDMode_();
+      var md = $('oobe-hid-detection-md');
+      if (md) {
+        md.screen = this;
+        md.setMouseState(this.CONNECTION.SEARCHING);
+        md.setKeyboardState(this.CONNECTION.SEARCHING);
+      }
       this.setDeviceBlockState_('hid-mouse-block', this.CONNECTION.SEARCHING);
       this.setDeviceBlockState_('hid-keyboard-block',
                                 this.CONNECTION.SEARCHING);
     },
+
+    /**
+     * This method takes care of switching to material-design OOBE.
+     * @private
+     */
+    setMDMode_: function() {
+      var useMDOobe = (loadTimeData.getString('newOobeUI') == 'on');
+      $('hid-detection-md-switch').useMDOobe_ = useMDOobe;
+      //$('oobe-hid-detection-md').hidden = !useMDOobe;
+      //$('oobe-hid-detection').hidden = useMDOobe;
+    },
   };
 });