ChromeOS MD-OOBE: Add HID detection screen.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html b/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
index 5649a82e340869e8047401f8e5ffd5934dbc7d0e..11214e62cf9502666e2ec89c066bde4d47b14db1 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
@@ -1,68 +1,78 @@
 <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="">
-      </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>
-        <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">
+  <template id="hid-detection-md-switch" is="dom-bind">
+    <template is="dom-if" if="[[useMDOobe_]]">
+      <oobe-hid-detection-md id="oobe-hid-detection-md">
+      </oobe-hid-detection-md>
+    </template>
+    <template is="dom-if" if="[[!useMDOobe_]]">
+      <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-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="">
+            </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>
+              <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>
-  </div>
-  <div id="hid-detection-controls" class="step-controls"></div>
+    </template>
+  </template>
 </div>