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

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js b/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js
index fd8e372ce004312a40794168e66dae7ca9236595..e0e018bc96b0753cd7741655c47443f24ef6f9a7 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js
@@ -7,6 +7,35 @@
  */
 
 login.createScreen('ControllerPairingScreen', 'controller-pairing', function() {
+  return {
+    decorate: function() {
+      this.children[0].decorate(this);
+    }
+  };
+});
+
+Polymer('pairing-device-list', (function() {
+  /** @const */ var ICON_COLORS = ['#F0B9CB', '#F0ACC3', '#F098B6', '#F084A9',

[Nikita (slow), 2014/10/13 17:23:40]

Should use some of these:
https://www.google.com/design/spec/style/color.html

+                                   '#F06D99', '#F05287', '#F0467F', '#F03473',
+                                   '#F01E65', '#F00051'];
+  return {
+    disabled: false,
+
+    /* Returns pseudo-random color depending of hash of the |name|. */
+    colorByName: function(name) {
+      var hash = 0;
+      for (var i = 0; i < name.length; ++i)
+        hash = (name.charCodeAt(i) + 31 * hash) | 0;
+      return ICON_COLORS[hash % ICON_COLORS.length];
+    }
+  };
+})());
+
+Polymer('controller-pairing-page', {
+  type: 'solid',
+});
+
+Polymer('controller-pairing-screen', (function() {
   'use strict';
 
   // Keep these constants synced with corresponding constants defined in
@@ -52,113 +81,41 @@ login.createScreen('ControllerPairingScreen', 'controller-pairing', function() {
       PAGE_PAIRING_DONE];
 
   return {
-    deviceSelectionChangedCallback_: null,
     gaiaHost_: null,
-    pages_: null,
-
-    /** @override */
-    decorate: function() {
-      this.initialize();
-
-      this.pages_ = {};
-      PAGE_NAMES.forEach(function(pageName) {
-        var page = this.querySelector('.page-' + pageName);
-        if (page === null)
-          throw Error('Page "' + pageName + '" was not found.');
-        page.hidden = true;
-        this.pages_[pageName] = page;
-      }, this);
-
-      this.disableControls_(true);
-
-      this.addContextObserver(CONTEXT_KEY_PAGE, this.pageChanged_);
-      this.addContextObserver(CONTEXT_KEY_CONTROLS_DISABLED,
-          this.disableControls_);
-
-      cr.ui.List.decorate(this.deviceList_);
-      this.deviceList_.selectionModel = new cr.ui.ListSingleSelectionModel();
+    selectedDevice: null,
 
-      this.gaiaHost_ = new cr.login.GaiaAuthHost(this.gaiaFrame_);
-
-      this.deviceSelectionChangedCallback_ =
-          this.deviceSelectionChanged_.bind(this);
+    observe: {

[dzhioev (left Google), 2014/10/10 13:53:01]

https://www.polymer-project.org/docs/polymer/polymer.html#observeblock

+      'C.devices': 'deviceListChanged',
+      'C.page': 'pageChanged'
     },
 
-    pageChanged_: function(newPage, oldPage) {
-      this.throbber_.hidden = [PAGE_DEVICES_DISCOVERY,
-                               PAGE_DEVICE_SELECT,
-                               PAGE_ESTABLISHING_CONNECTION,
-                               PAGE_HOST_UPDATE,
-                               PAGE_HOST_CONNECTION_LOST,
-                               PAGE_HOST_ENROLLMENT].indexOf(newPage) == -1;
-      this.togglePage_(newPage);
-      if (newPage == PAGE_DEVICE_SELECT) {
-        this.addContextObserver(CONTEXT_KEY_DEVICES, this.setDeviceList_);
-        this.addContextObserver(CONTEXT_KEY_SELECTED_DEVICE,
-            this.setSelectedDevice_);
-        this.setDeviceList_(this.context.get(CONTEXT_KEY_DEVICES));
-        this.deviceList_.addEventListener('change',
-            this.deviceSelectionChangedCallback_);
-      } else if (oldPage == PAGE_DEVICE_SELECT) {
-        this.removeContextObserver(this.setDeviceList_);
-        this.removeContextObserver(this.setSelectedDevice_);
-        this.deviceList_.removeEventListener('change',
-            this.deviceSelectionChangedCallback_);
-      }
-
-      if (newPage == PAGE_CODE_CONFIRMATION) {
-        // TODO(dzhioev): replace with i18n pattern.
-        this.confirmationCodeLabel_.textContent =
-            this.context.get(CONTEXT_KEY_CONFIRMATION_CODE) + '?';
-      }
+    /** @override */
+    initialize: function() {
+      this.context.set(CONTEXT_KEY_CONTROLS_DISABLED, true);
+      this.commitContextChanges();
+      this.gaiaHost_ = new cr.login.GaiaAuthHost(this.$.gaiaFrame);
+    },
 
+    pageChanged: function(oldPage, newPage) {
       if (newPage == PAGE_AUTHENTICATION) {
         this.gaiaHost_.load(cr.login.GaiaAuthHost.AuthMode.DEFAULT,
                             {},
                             this.onAuthCompleted_.bind(this));
       }
-
-      if (newPage == PAGE_HOST_ENROLLMENT) {
-        this.domainNameLabel_.textContent =
-            this.context.get(CONTEXT_KEY_ENROLLMENT_DOMAIN);
-      }
-
-      this.pageNameLabel_.textContent = '<<<< ' + newPage + ' >>>>';
-    },
-
-    togglePage_: function(newPage) {
-      PAGE_NAMES.forEach(function(pageName) {
-        this.pages_[pageName].hidden = (pageName !== newPage);
-      }, this);
     },
 
-    setDeviceList_: function(deviceList) {
-      this.deviceList_.removeEventListener('change',
-          this.deviceSelectionChangedCallback_);
-
-      this.deviceList_.dataModel = new cr.ui.ArrayDataModel(deviceList);
-      this.setSelectedDevice_(this.context.get(CONTEXT_KEY_SELECTED_DEVICE));
-
-      this.deviceList_.addEventListener('change',
-          this.deviceSelectionChangedCallback_);
+    deviceListChanged: function() {
+      this.selectedDevice = this.context.get(CONTEXT_KEY_SELECTED_DEVICE);
     },
 
-    setSelectedDevice_: function(selectedDevice) {
-      this.deviceList_.selectedItem = selectedDevice;
-    },
-
-    deviceSelectionChanged_: function() {
-      var item = this.deviceList_.selectedItem;
-      this.context.set(CONTEXT_KEY_SELECTED_DEVICE, item ? item : '');
+    selectedDeviceChanged: function() {

[dzhioev (left Google), 2014/10/10 13:53:01]

https://www.polymer-project.org/docs/polymer/polymer.html#change-watchers

+      this.context.set(CONTEXT_KEY_SELECTED_DEVICE,
+          this.selectedDevice ? this.selectedDevice : '');
       this.commitContextChanges();
     },
 
-    disableControls_: function(disable) {
-      this.querySelectorAll('button').forEach(function(button) {
-        button.disabled = disable;
-      });
-      this.context.set(CONTEXT_KEY_CONTROLS_DISABLED, disable);
-      this.commitContextChanges();
+    helpButtonClicked: function() {
+      console.error('Help is not implemented yet.');
     },
 
     onAuthCompleted_: function(credentials) {
@@ -167,5 +124,5 @@ login.createScreen('ControllerPairingScreen', 'controller-pairing', function() {
       this.send(login.Screen.CALLBACK_USER_ACTED, ACTION_ENROLL);
     }
   };
-});
+})());