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..94764502cd5e3e0c36d8cef57f50978a7552787c 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,52 @@
-<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="">

[ygorshenin1, 2014/04/24 11:30:24]

Why do you need alt property here (and for all images in the file)?

[merkulova, 2014/04/24 12:49:46]

http://dev.chromium.org/developers/accessibility/html-accessibility
'All <img> tags must have an alt attribute with an accessible name. If an image
is purely decorative or if the accessible name is already present in an adjacent
element in the DOM, you can use alt="".'

Accessible names will be added on accessibility-changes stage.

+        <img id="hid-mouse-tick" src="chrome://theme/IDR_UPDATE_UPTODATE"
+          alt="">
+      </div>
+      <div id="hid-mouse-label">
+        <span i18n-content="hidDetectionMouseSearching"
+          id="hid-mouse-label-searching" class="label">
+        </span>
+        <span i18n-content="hidDetectionUSBMouseConnected"
+          id="hid-mouse-label-connected" class="label">
+        </span>
+        <span i18n-content="hidDetectionBTMousePaired"
+          id="hid-mouse-label-paired" 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 i18n-content="hidDetectionKeyboardSearching"
+          id="hid-keyboard-label-searching" class="label">
+        </span>
+        <span i18n-content="hidDetectionUSBKeyboardConnected"
+          id="hid-keyboard-label-connected" class="label">
+        </span>
+        <span i18n-content="hidDetectionBTKeyboardPaired"
+          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-enter"
+          i18n-content="hidDetectionBTEnterKey"

[Nikita (slow), 2014/04/24 12:14:23]

nit: 4 spaces indent for same element (through whole html file).

[merkulova, 2014/04/24 12:49:46]

Done.

+          class="bluetooth-keyboard-button">
+        </div>
+      </div>
     </div>
   </div>
   <div id="hid-detection-controls" class="step-controls"></div>