Implemented UI for the meetings controller out-of-box.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html b/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html
index bf3c3849d1cbd956068487fe252e3a78ee28024e..fc8132c11d72431ed970ae0f5fd714e44a137984 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.html
@@ -1,58 +1,223 @@
-<!-- TODO(dzhioev): replace all the strings with i18n-values. -->
-<div class="step hidden no-logo" id="controller-pairing" hidden>
-  <div alias="throbber_" class="throbber" hidden></div>
-  <div alias="pageNameLabel_" class="page-name"></div>
-  <div class="page page-devices-discovery">
-    <div>Searching for nearby Chromeboxes...</div>
-  </div>
-  <div class="page page-device-select">
-    <div>Select a Chromebox to connect to</div>
-    <list alias="deviceList_" class="device-list"></list>
-    <button action="chooseDevice">
-      Connect
-    </button>
-  </div>
-  <div class="page page-device-not-found">
-     <div>No Chromeboxes were found.</div>
-     <button action="repeatDiscovery">Repeat discovery</button>
-  </div>
-  <div class="page page-establishing-connection">
-    <div>Connecting...</div>
-  </div>
-  <div class="page page-establishing-connection-error">
-    <div>Can't connect to Chromebox.</div>
-    <button action="repeatDiscovery">Repeat discovery</button>
-  </div>
-  <div class="page page-code-confirmation">
-    <div alias="confirmationCodeLabel_"></div>
-    <button action="acceptCode" disabled>Yes</button>
-    <button action="rejectCode" disabled>No</button>
-  </div>
-  <div class="page page-host-update">
-    <div>Updating Chromebox.</div>
-  </div>
-  <div class="page page-host-connection-lost">
-    <div>Connection lost. Please come closer.</div>
-  </div>
-  <div class="page page-enrollment-introduction">
-    <div>Press continue to connect to your domain.</div>
-    <button action="proceedToAuthentication" disabled>Continue</button>
-  </div>
-  <div class="page page-authentication">
-    <div>Connect to your domain.</div>
-    <iframe alias="gaiaFrame_" frameBorder="0" class="gaia-frame"></iframe>
-  </div>
-  <div class="page page-host-enrollment">
-    <div>
-      Connecting to <strong alias="domainNameLabel_">domain.com</strong>.
+<link rel="import" href="chrome://oobe/custom_elements.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/core-item/core-item.html">
+<link rel="import" href="polymer/core-selector/core-selector.html">
+<link rel="import" href="polymer/paper-button/paper-button.html">
+<link rel="import" href="polymer/paper-progress/paper-progress.html">
+<link rel="import" href="polymer/paper-shadow/paper-shadow.html">
+<link rel="import" href="polymer/polymer/polymer.html">
+
+<!--
+List of devices.
+Published properties:
+  * devices - array of strings, the model of the list.
+  * selected - a name of the selected device ('null' if no devices are
+    selected).
+  * connecting - a binary attribute. If set, the list does not respond to the
+    user actions and a spinner is shown near selected device.
+-->
+<polymer-element name="pairing-device-list"
+    attributes="devices selected connecting">
+  <template>
+    <link rel="stylesheet" href="pairing_device_list.css">
+
+    <core-iconset-svg id="icon" iconSize="24">
+      <svg><defs><g id="circle">
+        <circle cx="12" cy="12" r="12"></circle>
+      </g></defs></svg>
+    </core-iconset-svg>
+
+    <core-selector selected="{{selected}}">
+      <template repeat="{{device in devices}}">
+        <!-- TODO(dzhioev): replace 'core-item' with 'paper-item'.
+             http://crbug.com/423368 -->
+        <core-item name="{{device}}" relative>
+          <core-icon icon="icon:circle"
+              style="color: {{device | colorByName}}"></core-icon>
+          <div>{{device}}</div>
+          <div flex horizontal end-justified layout center>
+            <div class="throbber"></div>
+          </div>
+        </core-item>
+      </template>
+    </core-selector>
+  </template>
+</polymer-element>
+
+<!--
+Single page of the controller's out-of-box flow.
+The page consists of the top part and the bottom part.
+The top part contains a title of the page. Direct successors of the
+<controller-pairing-page> having 'title' class will be inserted there.
+The bottom part contains controls that are aligned right  (all the successors
+that are <paper-button>s) and a content of the page (all the other successors).
+Special case is a help button (<paper-button> with 'help' class set) which
+is aligned left.
+There are several classes that can be used to change the page appearance:
+  * split - if this class is set, top and bottom parts will have different
+    colors.
+  * big-font - if this class is set, slightly bigger font is used on page.
+  * progress - if this class is set and 'split' is not, progress bar is shown
+    instead of top and bottom parts separator.
+
+Also height of the top part can be specified in CSS as follows:
+
+controller-pairing-page::shadow #top {
+  height: 100px;
+}
+-->
+<polymer-element name="controller-pairing-page" noscript>
+  <template>
+    <link rel="stylesheet" href="controller_pairing_page.css">
+
+    <div vertical layout fit>
+      <div id="top" hero hero-id="top" relative vertical end-justified layout>
+        <content select=".title"></content>
+        <div id="separator">
+          <indeterminate-progress fill runnerColor="white"
+              backgroundColor="#87ceac" runnerPortion="40">
+          </indeterminate-progress>
+        </div>
+      </div>
+      <div id="bottom" hero hero-id="bottom" flex vertical layout>
+        <div flex vertical layout>
+          <content select=":not(paper-button)"></content>
+        </div>
+        <div id="controls" horizontal layout center>
+          <div flex>
+            <content select="paper-button.help-button"></content>
+          </div>
+          <content select="paper-button"></content>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="page page-host-enrollment-error">
-    <div>Host enrollment failed.</div>
-    <button action="repeatDiscovery">Repeat discovery</button>
-  </div>
-  <div class="page page-pairing-done">
-    <div>Great success!</div>
-    <button action="startSession">Continue to Hangouts</button>
-  </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="controller-pairing-screen" extends="oobe-screen">
+  <template>
+    <link rel="stylesheet" href="oobe_screen_controller_pairing.css">
+
+    <template id="help-button">
+      <paper-button class="help-button" on-tap="{{helpButtonClicked}}"
+          label="{{'helpBtn' | i18n}}"></paper-button>
+    </template>
+
+    <template id="progress">
+      <indeterminate-progress runnerColor="#0f9d58" backgroundColor="#87ceac"
+          runnerPortion="23"></indeterminate-progress>
+    </template>
+
+    <paper-shadow z="1"></paper-shadow>
+
+    <core-animated-pages transitions="cross-fade-all hero-transition"
+        selected="{{C.page}}">
+      <controller-pairing-page name="devices-discovery" class="big-font">
+        <div class="title">{{'welcomeTitle' | i18n}}</div>
+        <div>{{'searching' | i18n}}</div>
+        <template bind ref="help-button"></template>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="device-select" class="split">
+        <div class="title">{{'selectTitle' | i18n}}</div>
+        <pairing-device-list devices="{{C.devices}}"
+            selected="{{selectedDevice}}"></pairing-device-list>
+        <template bind ref="help-button"></template>
+        <paper-button label="{{'connectBtn' | i18n}}" on-tap="{{userActed}}"
+            action="chooseDevice" disabled?="{{C.controlsDisabled}}">
+        </paper-button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="device-not-found">
+        <div class="title">{{'troubleConnectingTitle' | i18n}}</div>
+        <div>{{'connectingAdvice' | i18n}}</div>
+        <paper-button label="{{'adviceGotItBtn' | i18n}}" on-tap="{{userActed}}"
+            action="repeatDiscovery">
+        </paper-button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="establishing-connection" class="split">
+        <div class="title">{{'selectTitle' | i18n}}</div>
+        <pairing-device-list devices="{{C.devices}}"
+            selected="{{selectedDevice}}" connecting></pairing-device-list>
+        <template bind ref="help-button"></template>
+        <paper-button label="{{'connecting' | i18n}}" disabled></paper-button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="establishing-connection-error">
+        <!-- TODO(dzhioev): Strings TBD. http://crbug.com/423740 -->
+        <div class="title">Unable to connect to {{selectedDevice}}</div>
+        <paper-button on-tap="{{userActed}}" action="repeatDiscovery"
+            label="Repeat discovery"></paper-button>
+        </button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="code-confirmation" class="split">
+        <div class="title">{{'confirmationTitle' | i18n}}</div>
+        <div>{{'confirmationQuestion' | i18n}}</div>
+        <div id="code">{{C.code}}</div>
+        <paper-button label="{{'rejectCodeBtn' | i18n}}" on-tap="{{userActed}}"
+            action="rejectCode" disabled?="{{C.controlsDisabled}}">
+        </paper-button>
+        <paper-button label="{{'acceptCodeBtn' | i18n}}" on-tap="{{userActed}}"
+            action="acceptCode" disabled?="{{C.controlsDisabled}}">
+        </paper-button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="host-update" class="split">
+        <div class="title">{{'updateTitle' | i18n}}</div>
+        <div>{{'updateText' | i18n}}</div>
+        <template bind ref="progress"></template>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="host-connection-lost" class="split">
+        <div class="title">{{'connectionLostTitle' | i18n}}</div>
+        <div>{{'connectionLostText' | i18n}}</div>
+        <template bind ref="progress"></template>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="enrollment-introduction" class="split">
+        <div class="title">{{'enrollTitle' | i18n}}</div>
+        <p>{{'enrollText1' | i18n}}</p>
+        <p><strong>{{'enrollText2' | i18n}}</strong></p>
+        <paper-button label="{{'continueBtn' | i18n}}" on-click="{{userActed}}"
+            action="proceedToAuthentication" disabled?="{{C.controlsDisabled}}">
+        </paper-button>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="authentication" class="split">
+        <div class="title">{{'enrollTitle' | i18n}}</div>
+        <iframe id="gaiaFrame" frameBorder="0" scrolling="no" class="gaia-frame"
+            flex self-center></iframe>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="host-enrollment" class="progress">
+        <!-- 'enrollmentTitle' contains <strong> tag. -->
+        <html-echo class="title"
+            content="{{['enrollmentInProgress', C.enrollmentDomain] | i18n}}">
+        </html-echo>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="host-enrollment-error" class="progress">
+        <div class="title">{{'enrollmentErrorTitle' | i18n}}</div>
+        <div>{{'enrollmentErrorHostRestarts' | i18n}}</div>
+      </controller-pairing-page>
+
+      <controller-pairing-page name="pairing-done" class="big-font">
+        <div class="title">{{'successTitle' | i18n}}</div>
+        <div>{{['successText', selectedDevice] | i18n}}</div>
+        <paper-button label="{{'continueToHangoutsBtn' | i18n}}"
+            on-click="{{userActed}}" action="startSession"
+            disabled?="{{C.controlsDisabled}}">
+        </paper-button>
+      </controller-pairing-page>
+    </core-animated-pages>
+  </template>
+</polymer-element>
+
+<div class="step hidden no-logo" id="controller-pairing" hidden>
+  <controller-pairing-screen name="ControllerPairingScreen">
+  </controller-pairing-screen>
 </div>
+