Base version of HID detection OOBE 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 4dcf73b1d6282cbcb59af70901ea690bef4ff5ca..f164f21f5360e5d5e7e0664fd3cdac72cda45784 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html
@@ -1,12 +1,63 @@
-<div class="step hidden" id="hid-detection">
+<div class="step hidden" id="hid-detection" hidden>
   <div class="step-contents">
-    <div id="logo"></div>
-    <div id="hid-invitation-text"></div>
+    <div id="hid-invitation-text" i18n-content="hidDetectionInvitation"></div>
+    <div id="hid-prerequisite-msg" i18n-content="hidDetectionPrerequisites">
+    </div>
     <div id="hid-mouse-block">
-      <img id="hid-mouse-icon">
+      <div id="hid-mouse-icon-block">
+        <img id="hid-mouse-icon" src="chrome://theme/IDR_LOGIN_DEFAULT_USER_16"
+            alt="">
+        <img id="hid-mouse-tick" src="chrome://theme/IDR_UPDATE_UPTODATE"
+            alt="">
+      </div>
+      <div id="hid-mouse-label">
+        <span id="hid-mouse-label-searching"
+            i18n-content="hidDetectionMouseSearching" class="label">
+        </span>
+        <span id="hid-mouse-label-connected"
+            i18n-content="hidDetectionUSBMouseConnected" class="label">
+        </span>
+        <span id="hid-mouse-label-paired"
+            i18n-content="hidDetectionBTMousePaired" class="label">
+        </span>
+      </div>
     </div>
     <div id="hid-keyboard-block">
-      <img id="hid-keyboard-icon">
+      <div id="hid-keyboard-icon-block">
+        <img id="hid-keyboard-icon" src="chrome://theme/IDR_RESET_WARNING"
+            alt="">
+        <img id="hid-keyboard-tick" src="chrome://theme/IDR_UPDATE_UPTODATE"
+            alt="">
+      </div>
+      <div id="hid-keyboard-label">
+        <span id="hid-keyboard-label-searching"
+            i18n-content="hidDetectionKeyboardSearching" class="label">
+        </span>
+        <span id="hid-keyboard-label-connected"
+            i18n-content="hidDetectionUSBKeyboardConnected" class="label">
+        </span>
+        <span id="hid-keyboard-label-paired" class="label">
+        </span>
+        <span id="hid-keyboard-label-pairing" class="label"></span>
+      </div>
+      <div id="hid-keyboard-pincode">
+        <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>