Polished UI for the host side of pairing flow.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.html b/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.html
index 335411951c6c68e1ec05c454cd70675e0e087242..ca61e53ec07bdc1cbc496e44fcb7f68d6c63990b 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.html
@@ -1,30 +1,80 @@
-<!-- TODO(dzhioev): replace all the strings with i18n-values. -->
-<div class="step hidden no-logo" id="host-pairing" hidden>
-  <div alias="pageNameLabel_" class="page-name"></div>
-  <div>My name is <strong alias="deviceNameLabel_"></strong>.</div>
-  <div class="page page-welcome">
-    <div>Welcome!</div>
-  </div>
-  <div class="page page-code-confirmation">
-    <div>Pair with a controller</div>
-    <div alias="confirmationCodeLabel_"></div>
-  </div>
-  <div class="page page-update">
-    <div>Updating Chromebox...</div>
-    <progress alias="updateProgressBar_"></progress>
-  </div>
-  <div class="page page-enrollment-introduction">
-    <div>Enroll your organization</div>
-  </div>
-  <div class="page page-enrollment">
-    <div>
-      Enrolling in <strong alias="domainNameLabel_">domain.com</strong>...
+<link rel="import" href="polymer/core-item/core-item.html">
+<link rel="import" href="polymer/core-animated-pages/core-animated-pages.html">
+<link rel="import" href="polymer/core-iconset-svg/core-iconset-svg.html">
+<link rel="import" href="polymer/polymer/polymer.html">
+
+<core-iconset-svg id="host-pairing-icons" iconSize="48">
+  <svg>
+    <defs>
+      <g id="cast">
+        <include src="../../../../app/theme/cast_icon.svg">
+      </g>
+    </defs>
+  </svg>
+</core-iconset-svg>
+
+<polymer-element name="host-pairing-page" noscript>
+  <template>
+    <link rel="stylesheet" href="oobe_screen_host_pairing_page.css">
+
+    <div id="title">
+      <content select=".title"></content>
     </div>
-  </div>
-  <div class="page page-enrollment-error">
-    <div>Enrollment failed =(</div>
-  </div>
-  <div class="page page-pairing-done">
-    <div>Great success!</div>
-  </div>
+    <div id="content">
+      <content></content>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="host-pairing-screen" extends="oobe-screen">
+  <template>
+    <link rel="stylesheet" href="oobe_screen_host_pairing.css">
+
+    <core-animated-pages transitions="cross-fade-all"
+                         selected="{{C.page}}">
+      <host-pairing-page name="welcome">
+        <div class="title">{{'welcomeTitle' | i18n}}</div>
+        <div>{{'welcomeText' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="code-confirmation">
+        <div class="title">{{'confirmationTitle' | i18n}}</div>
+        <div id="code">{{C.code}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="update">
+        <div class="title">{{'updatingTitle' | i18n}}</div>
+        <!-- Not yet implemented on backend side. -->
+        <!--div>{{['updatingText', C.downloadedMb, C.totalMb] | i18n}}</div-->
+      </host-pairing-page>
+      <host-pairing-page name="enrollment-introduction">
+        <div class="title">{{'enrollTitle' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="enrollment">
+        <div class="title">
+          <!-- 'enrollmentTitle' contains <strong> tag. We need to wrap it in
+               'html-echo' to prevent HTML escaping. -->
+          <html-echo
+              content="{{['enrollingTitle', C.enrollmentDomain] | i18n}}">
+          </html-echo>
+        </div>
+      </host-pairing-page>
+      <host-pairing-page name="enrollment-error">
+        <div class="title">{{'enrollmentErrorTitle' | i18n}}</div>
+        <div>{{'errorNeedsRestart' | i18n}}</div>
+      </host-pairing-page>
+      <host-pairing-page name="pairing-done">
+        <div class="title">{{'doneTitle' | i18n}}</div>
+        <div>{{'doneText' | i18n}}</div>
+      </host-pairing-page>
+    </core-animated-pages>
+    <core-item id="device-indicator"class="font-scalable"
+        icon="host-pairing-icons:cast">
+      <div id="device-label">{{C.deviceName}}</div>
+    </core-item>
+    <div id="illustration"></div>
+  </template>
+</polymer-element>
+
+<div class="step hidden no-logo fullscreen" id="host-pairing" hidden>
+  <host-pairing-screen name="HostPairingScreen"></host-pairing-screen>
 </div>
+