ChromeOS MD-OOBE: Add HID detection screen.

This CL implements HID detection screen for material design ChromeOS OOBE.

BUG=604119
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2600983003
Cr-Commit-Position: refs/heads/master@{#443023}

chrome/browser/chromeos/login/wizard_controller.cc

@@ -603,8 +603,6 @@ void WizardController::ShowSupervisedUserCreationScreen() {
 
 void WizardController::ShowHIDDetectionScreen() {
   VLOG(1) << "Showing HID discovery screen.";
-  // TODO(drcrash): Remove this after testing (http://crbug.com/647411).
-  SetShowMdOobe(false);  // Disable the MD OOBE from there on.
   SetStatusAreaVisible(true);
   SetCurrentScreen(GetScreen(OobeScreen::SCREEN_OOBE_HID_DETECTION));
   // In HID detection screen, puts the Bluetooth in discoverable mode and waits
@@ -985,6 +983,8 @@ void WizardController::SetCurrentScreenSmooth(BaseScreen* new_current,
   previous_screen_ = current_screen_;
   current_screen_ = new_current;
 
+  oobe_ui_->UpdateLocalizedStringsIfNeeded();
+
   if (use_smoothing) {
     smooth_show_timer_.Start(
         FROM_HERE,

chrome/browser/resources/chromeos/login/custom_elements_oobe.html

@@ -18,6 +18,7 @@
 <include src="oobe_buttons.html">
 <include src="oobe_dialog.html">
 <include src="oobe_eula.html">
+<include src="oobe_hid_detection.html">
 <include src="oobe_update.html">
 <include src="oobe_i18n_dropdown.html">
 <include src="oobe_welcome_dialog.html">

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

@@ -28,6 +28,7 @@
 // <include src="oobe_buttons.js">
 // <include src="oobe_dialog.js">
 // <include src="oobe_eula.js">
+// <include src="oobe_hid_detection.js">
 // <include src="oobe_update.js">
 // <include src="oobe_i18n_dropdown.js">
 // <include src="oobe_welcome_dialog.js">

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

+/* 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. */
+
+#continue-button-text {
+  text-transform: none;
+}
+
+#keyboard-icon,
+#mouse-icon {
+  height: 40px;
+  width: 40px;
+}
+
+#keyboard-tick,
+#mouse-tick {
+  -webkit-margin-start: -28px;
+  position: relative;
+  top: 4px; /* icon is 40x40, tick is 32x32, 4 = (40-32)/2 */
+}
+
+#hid-keyboard-pincode {
+  padding-bottom: 4px;
+};
+
+#hid-continue-button {
+  -webkit-padding-end: 18px;
+}
+
+.bottom-buttons {
+  padding: 0 6px; /* = 8px - 2px back button border */
+}
+
+.hid-selection-entry {
+  border-top: 1px solid lightgrey;
+  min-height: 44px;
+  padding: 0 20px;
+}
+
+.hid-selection-entry:last-of-type {
+  border-bottom: 1px solid lightgrey;
+}

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

+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<iron-iconset-svg name="oobe-hid-detection" size="24">
+  <svg>
+    <defs>
+      <g id="bluetooth"><path d="M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"></path></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
+<dom-module name="oobe-hid-detection-md">
+  <template>
+    <link rel="stylesheet" href="oobe_hid_detection.css">
+    <link rel="stylesheet" href="oobe_dialog_parameters.css">
+    <link rel="stylesheet" href="../../options/chromeos/bluetooth.css">
+    <oobe-dialog has-buttons>
+      <iron-icon icon="oobe-hid-detection:bluetooth" class="oobe-icon">
+      </iron-icon>
+      <div class="header">
+        <h1 class="title" i18n-content="hidDetectionInvitation"></h1>
+        <div class="subtitle" i18n-content="hidDetectionPrerequisites"></div>
+      </div>
+      <div class="footer flex layout vertical">
+        <div class="layout vertical justified hid-selection-entry">
+          <div class="layout horizontal center">
+            <img id="mouse-icon" alt=""
+                src="chrome://theme/IDR_BLUETOOTH_MOUSE">
+            <img id="mouse-tick" alt=""
+                hidden="[[!tickIsVisible_(mouseState_)]]"
+                src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
+            <div id="mouse-label-searching" aria-live="polite"
+                i18n-content="hidDetectionMouseSearching"
+                hidden="[[notEq_(mouseState_, screen.CONNECTION.SEARCHING)]]">
+            </div>
+            <div id="mouse-label-usb" aria-live="polite"
+                i18n-content="hidDetectionUSBMouseConnected"
+                hidden="[[notEq_(mouseState_, screen.CONNECTION.USB)]]">
+            </div>
+            <div id="mouse-label-connected" aria-live="polite"
+                i18n-content="hidDetectionPointingDeviceConnected"
+                hidden="[[notEq_(mouseState_, screen.CONNECTION.CONNECTED)]]">
+            </div>
+            <div id="mouse-label-paired" aria-live="polite"
+                i18n-content="hidDetectionBTMousePaired"
+                hidden="[[notEq_(mouseState_, screen.CONNECTION.PAIRED)]]">
+            </div>
+          </div>
+        </div>
+        <div class="layout vertical hid-selection-entry">
+          <div class="layout horizontal center">
+            <img id="keyboard-icon" alt=""
+                src="chrome://theme/IDR_BLUETOOTH_KEYBOARD">
+            <img id="keyboard-tick" alt=""
+                hidden="[[!tickIsVisible_(keyboardState_)]]"
+                src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
+            <div aria-live="polite"
+                i18n-content="hidDetectionKeyboardSearching"
+                hidden="[[notEq_(keyboardState_, screen.CONNECTION.SEARCHING)]]"
+                >
+            </div>
+            <div aria-live="polite"
+                i18n-content="hidDetectionUSBKeyboardConnected"
+                hidden="[[notEq_(keyboardState_, screen.CONNECTION.USB)]]">
+            </div>
+            <div aria-live="polite"
+                hidden="[[notEq_(keyboardState_, screen.CONNECTION.PAIRED)]]">
+               [[keyboardPairedLabel]]
+            </div>
+            <div hidden="[[notEq_(keyboardState_, screen.CONNECTION.PAIRING)]]">
+               [[keyboardPairingLabel]]
+            </div>
+          </div>
+          <div id="hid-keyboard-pincode"
+              class="layout horizontal center-justified"
+              hidden="[[!keyboardPincodeVisible_]]">
+            <div id="hid-keyboard-pincode-sym-1"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-2"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-3"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-4"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-5"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-6"
+                class="bluetooth-keyboard-button">
+            </div>
+            <div id="hid-keyboard-pincode-sym-7"
+                i18n-content="hidDetectionBTEnterKey"
+                class="bluetooth-keyboard-button">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-buttons flex layout horizontal end-justified">
+        <oobe-text-button id="hid-continue-button"
+            inverse on-tap="onHIDContinueTap_"
+            disabled="[[continueButtonDisabled]]">
+          <div i18n-content="hidDetectionContinue" id="continue-button-text">
+          </div>
+        </oobe-text-button>
+      </div>
+    </oobe-dialog>
+  </template>
+</dom-module>

chrome/browser/resources/chromeos/login/oobe_hid_detection.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 Polymer element for displaying material design HID detection
+ * screen.
+ */
+
+(function() {
+  /** @const {number} */ var PINCODE_LENGTH = 6;
+
+  Polymer({
+    is: 'oobe-hid-detection-md',
+
+    properties: {
+      /** "Continue" button is disabled until HID devices are paired. */
+      continueButtonDisabled: {
+        type: Boolean,
+        value: true,
+      },
+
+      /** This is the displayed text for keyboard "Pairing" state. */
+      keyboardPairingLabel: String,
+
+      /** This is the displayed text for keyboard "Paired" state. */
+      keyboardPairedLabel: String,
+
+      /**
+       * Current state in mouse pairing process.
+       * @private
+       */
+      mouseState_: String,
+
+      /**
+       * Current state in keyboard pairing process.
+       * @private
+       */
+      keyboardState_: String,
+
+      /**
+       * Controls visibility of keyboard pincode.
+       * @private
+       */
+      keyboardPincodeVisible_: Boolean,
+
+      /**
+       * Reference to OOBE screen object.
+       * @type {!OobeTypes.Screen}
+       */
+      screen: Object,
+    },
+
+    /**
+     * Displayed keyboard pincode.
+     */
+    keyboardPincode_: String,
+
+    /**
+     * Helper function to update keyboard/mouse state.
+     * @param {string} state Existing connection state (one of
+     *   screen.CONNECTION).
+     * @param {string} newState New connection state (one of screen.CONNECTION).
+     * @private
+     */
+    calculateState_: function(state, newState) {
+      if (newState === undefined)
+        return state;
+
+      if (newState == this.screen.CONNECTION.UPDATE)
+        return state;
+
+      return newState;
+    },
+
+    /**
+     * Helper function to calculate visibility of 'connected' icons.
+     * @param {string} state Connection state (one of screen.CONNECTION).
+     * @private
+     */
+    tickIsVisible_: function(state) {
+      return (state == this.screen.CONNECTION.USB) ||
+          (state == this.screen.CONNECTION.CONNECTED) ||
+          (state == this.screen.CONNECTION.PAIRED);
+    },
+
+    /**
+     * Helper function to update keyboard/mouse state.
+     * Returns true if strings are not equal. False otherwize.
+     * @param {string} string1
+     * @param {string} string2
+     * @private
+     */
+    notEq_: function(string1, string2) { return string1 != string2; },
+
+    /**
+     * Sets current state in mouse pairing process.
+     * @param {string} state Connection state (one of screen.CONNECTION).
+     */
+    setMouseState: function(state) {
+      this.mouseState_ = this.calculateState_(this.mouseState_, state);
+    },
+
+    /**
+     * Updates visibility of keyboard pincode.
+     * @param {string} state Connection state (one of screen.CONNECTION).
+     * @private
+     */
+    updateKeyboardPincodeVisible_: function(state) {
+      this.keyboardPincodeVisible_ = this.keyboardPincode_ &&
+          (this.keyboardState_ == this.screen.CONNECTION.PAIRING);
+    },
+
+    /**
+     * Sets current state in keyboard pairing process.
+     * @param {string} state Connection state (one of screen.CONNECTION).
+     */
+    setKeyboardState: function(state) {
+      this.keyboardState_ = this.calculateState_(this.keyboardState_, state);
+      this.updateKeyboardPincodeVisible_();
+    },
+
+    /**
+     * Sets displayed keyboard pin.
+     * @param {string} pincode Pincode.
+     * @param {number} entered Number of digits already entered.
+     * @param {boolean} expected
+     * @param {string} label Connection state displayed description.
+     */
+    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 (let i = 0; i < (PINCODE_LENGTH + 1); i++) {
+        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.
+     */
+    onHIDContinueTap_: function(event) {
+      chrome.send('HIDDetectionOnContinue');
+      event.stopPropagation();
+    },
+  });
+})();

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

@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#hid-detection {
+#oobe:not([md-mode]) #hid-detection {
   min-height: 395px;
   padding: 70px 17px 21px;
   width: 622px;

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

 <div class="step hidden" id="hid-detection" hidden role="group"
     i18n-values="aria-label:hidDetectionInvitation">
-  <div class="step-contents">
-    <div id="hid-invitation-text" i18n-content="hidDetectionInvitation"></div>
-    <div id="hid-prerequisite-msg" i18n-content="hidDetectionPrerequisites">
-    </div>
-    <div id="hid-mouse-block">
-      <div id="hid-mouse-icon-block">
-        <img id="hid-mouse-icon" src="chrome://theme/IDR_BLUETOOTH_MOUSE"
-            alt="">
-        <img id="hid-mouse-tick" src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK"
-            alt="">
-      </div>
-      <div id="hid-mouse-label">
-        <span id="hid-mouse-label-searching" aria-live="polite"
-            i18n-content="hidDetectionMouseSearching" class="label">
-        </span>
-        <span id="hid-mouse-label-usb" aria-live="polite"
-            i18n-content="hidDetectionUSBMouseConnected" class="label">
-        </span>
-        <span id="hid-mouse-label-connected" aria-live="polite"
-            i18n-content="hidDetectionPointingDeviceConnected" class="label">
-        </span>
-        <span id="hid-mouse-label-paired" aria-live="polite"
-            i18n-content="hidDetectionBTMousePaired" class="label">
-        </span>
-      </div>
-    </div>
-    <div id="hid-keyboard-block" class="searching">
-      <div id="hid-keyboard-icon-block">
-        <img id="hid-keyboard-icon" src="chrome://theme/IDR_BLUETOOTH_KEYBOARD"
-            alt="">
-        <img id="hid-keyboard-tick"
-            src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK" alt="">
+  <oobe-hid-detection-md id="oobe-hid-detection-md" hidden>
+  </oobe-hid-detection-md>
+  <div id="oobe-hid-detection">
+    <div class="step-contents">
+      <div id="hid-invitation-text" i18n-content="hidDetectionInvitation"></div>
+      <div id="hid-prerequisite-msg" i18n-content="hidDetectionPrerequisites">
       </div>
-      <div id="hid-keyboard-label">
-        <span id="hid-keyboard-label-searching" aria-live="polite"
-            i18n-content="hidDetectionKeyboardSearching" class="label">
-        </span>
-        <span id="hid-keyboard-label-usb" aria-live="polite"
-            i18n-content="hidDetectionUSBKeyboardConnected" class="label">
-        </span>
-        <span id="hid-keyboard-label-paired" class="label" aria-live="polite">
-        </span>
-        <span id="hid-keyboard-label-pairing" class="label"></span>
-      </div>
-      <div id="hid-keyboard-pincode" hidden>
-        <div id="hid-keyboard-pincode-sym-1" class="bluetooth-keyboard-button">
-        </div>
-        <div id="hid-keyboard-pincode-sym-2" class="bluetooth-keyboard-button">
+      <div id="hid-mouse-block">
+        <div id="hid-mouse-icon-block">
+          <img id="hid-mouse-icon" src="chrome://theme/IDR_BLUETOOTH_MOUSE"
+              alt="">
+          <img id="hid-mouse-tick"
+              src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK" alt="">
         </div>
-        <div id="hid-keyboard-pincode-sym-3" class="bluetooth-keyboard-button">
+        <div id="hid-mouse-label">
+          <span id="hid-mouse-label-searching" aria-live="polite"
+              i18n-content="hidDetectionMouseSearching" class="label">
+          </span>
+          <span id="hid-mouse-label-usb" aria-live="polite"
+              i18n-content="hidDetectionUSBMouseConnected" class="label">
+          </span>
+          <span id="hid-mouse-label-connected" aria-live="polite"
+              i18n-content="hidDetectionPointingDeviceConnected" class="label">
+          </span>
+          <span id="hid-mouse-label-paired" aria-live="polite"
+              i18n-content="hidDetectionBTMousePaired" class="label">
+          </span>
         </div>
-        <div id="hid-keyboard-pincode-sym-4" class="bluetooth-keyboard-button">
-        </div>
-        <div id="hid-keyboard-pincode-sym-5" class="bluetooth-keyboard-button">
+      </div>
+      <div id="hid-keyboard-block" class="searching">
+        <div id="hid-keyboard-icon-block">
+          <img id="hid-keyboard-icon"
+              src="chrome://theme/IDR_BLUETOOTH_KEYBOARD" alt="">
+          <img id="hid-keyboard-tick"
+              src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK" alt="">
         </div>
-        <div id="hid-keyboard-pincode-sym-6" class="bluetooth-keyboard-button">
+        <div id="hid-keyboard-label">
+          <span id="hid-keyboard-label-searching" aria-live="polite"
+              i18n-content="hidDetectionKeyboardSearching" class="label">
+          </span>
+          <span id="hid-keyboard-label-usb" aria-live="polite"
+              i18n-content="hidDetectionUSBKeyboardConnected" class="label">
+          </span>
+          <span id="hid-keyboard-label-paired" class="label" aria-live="polite">
+          </span>
+          <span id="hid-keyboard-label-pairing" class="label"></span>
         </div>
-        <div id="hid-keyboard-pincode-sym-7"
-            i18n-content="hidDetectionBTEnterKey"
-            class="bluetooth-keyboard-button">
+        <div id="hid-keyboard-pincode" hidden>
+          <div id="hid-keyboard-pincode-sym-1"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-2"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-3"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-4"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-5"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-6"
+              class="bluetooth-keyboard-button">
+          </div>
+          <div id="hid-keyboard-pincode-sym-7"
+              i18n-content="hidDetectionBTEnterKey"
+              class="bluetooth-keyboard-button">
+          </div>
         </div>
       </div>
     </div>
+    <div id="hid-detection-controls" class="step-controls"></div>
   </div>
-  <div id="hid-detection-controls" class="step-controls"></div>
 </div>

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.
@@ -63,12 +47,15 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
     decorate: function() {
       var self = this;
 
+      $('oobe-hid-detection-md').screen = this;
+
       this.context.addObserver(
           CONTEXT_KEY_MOUSE_STATE,
           function(stateId) {
             if (stateId === undefined)
               return;
             self.setDeviceBlockState_('hid-mouse-block', stateId);
+            $('oobe-hid-detection-md').setMouseState(stateId);
           }
       );
       this.context.addObserver(
@@ -78,12 +65,15 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
           if (stateId === undefined)
             return;
           self.setDeviceBlockState_('hid-keyboard-block', stateId);
+          $('oobe-hid-detection-md').setKeyboardState(stateId);
           if (stateId == self.CONNECTION.PAIRED) {
-            $('hid-keyboard-label-paired').textContent = self.context.get(
-                CONTEXT_KEY_KEYBOARD_LABEL, '');
+            var label = self.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '');
+            $('hid-keyboard-label-paired').textContent = label;
+            $('oobe-hid-detection-md').keyboardPairedLabel = label;
           } else if (stateId == self.CONNECTION.PAIRING) {
-            $('hid-keyboard-label-pairing').textContent = self.context.get(
-                CONTEXT_KEY_KEYBOARD_LABEL, '');
+            var label = self.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '');
+            $('hid-keyboard-label-pairing').textContent = label;
+            $('oobe-hid-detection-md').keyboardPairingLabel = label;
           }
         }
       );
@@ -100,6 +90,7 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
         CONTEXT_KEY_CONTINUE_BUTTON_ENABLED,
         function(enabled) {
           $('hid-continue-button').disabled = !enabled;
+          $('oobe-hid-detection-md').continueButtonDisabled = !enabled;
         }
       );
     },
@@ -126,9 +117,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,
@@ -155,6 +144,7 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       if (state === undefined)
         return;
       this.setDeviceBlockState_(this.BLOCK.MOUSE, state);
+      $('oobe-hid-detection-md').setMouseState(state);
     },
 
     /**
@@ -164,6 +154,18 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', 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);
+
+      $('oobe-hid-detection-md').setKeyboardState(state);
+      $('oobe-hid-detection-md')
+          .setPincodeState(pincode, entered, expected, label);
 
       if (!pincode || state !== this.CONNECTION.PAIRING) {
         pincodeKeys.hidden = true;
@@ -177,13 +179,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 +193,27 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       }
     },
 
-     /*
+    /**
      * Event handler that is invoked just before the screen in shown.
      * @param {Object} data Screen init payload.
      */
     onBeforeShow: function(data) {
+      this.setMDMode_();
       this.setDeviceBlockState_('hid-mouse-block', this.CONNECTION.SEARCHING);
       this.setDeviceBlockState_('hid-keyboard-block',
                                 this.CONNECTION.SEARCHING);
+      $('oobe-hid-detection-md').setMouseState(this.CONNECTION.SEARCHING);
+      $('oobe-hid-detection-md').setKeyboardState(this.CONNECTION.SEARCHING);
+    },
+
+    /**
+     * This method takes care of switching to material-design OOBE.
+     * @private
+     */
+    setMDMode_: function() {
+      var useMDOobe = (loadTimeData.getString('newOobeUI') == 'on');
+      $('oobe-hid-detection-md').hidden = !useMDOobe;
+      $('oobe-hid-detection').hidden = useMDOobe;
     },
   };
 });

chrome/browser/ui/webui/chromeos/login/hid_detection_screen_handler.cc

@@ -13,6 +13,7 @@
 #include "chrome/browser/chromeos/login/oobe_screen.h"
 #include "chrome/browser/chromeos/login/screens/core_oobe_actor.h"
 #include "chrome/browser/chromeos/login/screens/hid_detection_model.h"
+#include "chrome/browser/ui/webui/chromeos/login/oobe_ui.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/grit/generated_resources.h"
 #include "chromeos/chromeos_switches.h"

chrome/browser/ui/webui/chromeos/login/oobe_ui.cc

@@ -512,10 +512,9 @@ void OobeUI::GetLocalizedStrings(base::DictionaryValue* localized_strings) {
 
   bool new_kiosk_ui = KioskAppMenuHandler::EnableNewKioskUI();
   localized_strings->SetString("newKioskUI", new_kiosk_ui ? "on" : "off");
-  localized_strings->SetString(
-      "newOobeUI",
-      g_browser_process->local_state()->GetBoolean(prefs::kOobeMdMode) ? "on"
-                                                                       : "off");
+  oobe_ui_md_mode_ =
+      g_browser_process->local_state()->GetBoolean(prefs::kOobeMdMode);
+  localized_strings->SetString("newOobeUI", oobe_ui_md_mode_ ? "on" : "off");
 }
 
 void OobeUI::AddScreenHandler(std::unique_ptr<BaseScreenHandler> handler) {
@@ -622,4 +621,15 @@ void OobeUI::OnCurrentScreenChanged(OobeScreen new_screen) {
     observer.OnCurrentScreenChanged(current_screen_, new_screen);
 }
 
+void OobeUI::UpdateLocalizedStringsIfNeeded() {
+  if (oobe_ui_md_mode_ ==
+      g_browser_process->local_state()->GetBoolean(prefs::kOobeMdMode)) {
+    return;
+  }
+
+  base::DictionaryValue localized_strings;
+  GetLocalizedStrings(&localized_strings);
+  static_cast<CoreOobeActor*>(core_handler_)->ReloadContent(localized_strings);
+}
+
 }  // namespace chromeos

chrome/browser/ui/webui/chromeos/login/oobe_ui.h

@@ -159,6 +159,10 @@ class OobeUI : public content::WebUIController,
     return network_state_informer_.get();
   }
 
+  // Does ReloadContent() if needed (for example, if material design mode has
+  // changed).
+  void UpdateLocalizedStringsIfNeeded();
+
  private:
   void AddScreenHandler(std::unique_ptr<BaseScreenHandler> handler);
 
@@ -235,6 +239,10 @@ class OobeUI : public content::WebUIController,
   // calls.
   bool ready_ = false;
 
+  // This flag stores material-design mode (on/off) of currently displayed UI.
+  // If different version of UI is required, UI is updated.
+  bool oobe_ui_md_mode_ = false;
+
   // Callbacks to notify when JS part is fully loaded and ready to accept calls.
   std::vector<base::Closure> ready_callbacks_;