ChromeOS MD-OOBE: Add HID detection screen.

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="">
+  <oobe-hid-detection-md id="oobe-hid-detection-md" hidden>
+  </oobe-hid-detection-md>

[stevenjb, 2016/12/28 20:47:04]

It would be much more efficient, and more readable, to use dom-if here:

<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 class="step-contents">
  ...
</template>

[Alexander Alekseev, 2016/12/28 22:56:23]

dom-if conflicts with i18n-content="hidDetectionInvitation" attributes.

[stevenjb, 2016/12/29 00:32:19]

Ugh. We should really switch login to use the $18n{} macro we are using in
Settings.

In the meanwhile, can we move the body of this to oobe_hid_detection.html and
include either the old body or the new? i.e.

<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_]]">
  <oobe-hid-detection>
  </oobe-hid-detection>
</template>


The way this is currently set up, in addition to being twice as slow to load, is
very confusing. I assume that we want to get rid of the non OOBE version "soon",
but we both know how long "soon" can be.

+  <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-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 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>
-    <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 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-2" 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-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 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>