Polished UI for the host side of pairing flow.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.js b/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.js
index bd92c09a0792cece79d920ecee8e9114b79a00e8..a9899a8681083888c4abc63f156c62d623f13e73 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_host_pairing.js
@@ -7,89 +7,34 @@
  */
 
 login.createScreen('HostPairingScreen', 'host-pairing', function() {
-  'use strict';
-
-  // Keep these constants synced with corresponding constants in
-  // host_pairing_screen_actor.{h,cc}.
-  /** @const */ var CONTEXT_KEY_PAGE = 'page';
-  /** @const */ var CONTEXT_KEY_DEVICE_NAME = 'deviceName';
-  /** @const */ var CONTEXT_KEY_CONFIRMATION_CODE = 'code';
-  /** @const */ var CONTEXT_KEY_ENROLLMENT_DOMAIN = 'enrollmentDomain';
-  /** @const */ var CONTEXT_KEY_UPDATE_PROGRESS = 'updateProgress';
-
-  /** @const */ var PAGE_WELCOME = 'welcome';
-  /** @const */ var PAGE_CODE_CONFIRMATION = 'code-confirmation';
-  /** @const */ var PAGE_UPDATE = 'update';
-  /** @const */ var PAGE_ENROLLMENT_INTRODUCTION = 'enrollment-introduction';
-  /** @const */ var PAGE_ENROLLMENT = 'enrollment';
-  /** @const */ var PAGE_ENROLLMENT_ERROR = 'enrollment-error';
-  /** @const */ var PAGE_PAIRING_DONE = 'pairing-done';
-
-  /** @const */ var CALLBACK_CONTEXT_READY = 'contextReady';
-
-
-  /** @const */ var PAGE_NAMES = [
-      PAGE_WELCOME,
-      PAGE_CODE_CONFIRMATION,
-      PAGE_UPDATE,
-      PAGE_ENROLLMENT_INTRODUCTION,
-      PAGE_ENROLLMENT,
-      PAGE_ENROLLMENT_ERROR,
-      PAGE_PAIRING_DONE];
-
   return {
-    pages_: null,
+    polymerScreen_: 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.addContextObserver(CONTEXT_KEY_PAGE, this.pageChanged_);
-      this.send(CALLBACK_CONTEXT_READY);
+      polymerScreen_ = this.children[0];
+      polymerScreen_.decorate(this);
     },
 
-    pageChanged_: function(newPage, oldPage) {
-      this.pageNameLabel_.textContent = '<<<< ' + newPage + ' >>>>';
-      this.deviceNameLabel_.textContent =
-          this.context.get(CONTEXT_KEY_DEVICE_NAME);
-
-      if (newPage == PAGE_CODE_CONFIRMATION)
-        this.confirmationCodeLabel_.textContent =
-            this.context.get(CONTEXT_KEY_CONFIRMATION_CODE);
-
-      if (newPage == PAGE_UPDATE) {
-        this.setUpdateProgress_(this.context.get(CONTEXT_KEY_UPDATE_PROGRESS));
-        this.addContextObserver(CONTEXT_KEY_UPDATE_PROGRESS,
-            this.setUpdateProgress_);
-      } else if (oldPage == PAGE_UPDATE) {
-        this.removeContextObserver(this.setUpdateProgress_);
-      }
+    onBeforeShow: function() {
+      polymerScreen_.onBeforeShow();
+    }
+  };
+});
 
-      if (newPage == PAGE_ENROLLMENT)
-        this.domainNameLabel_.textContent =
-            this.context.get(CONTEXT_KEY_ENROLLMENT_DOMAIN);
+Polymer('host-pairing-screen', (function() {
+  'use strict';
 
-      this.togglePage_(newPage);
-    },
+  /** @const */ var CALLBACK_CONTEXT_READY = 'contextReady';
 
-    togglePage_: function(newPage) {
-      PAGE_NAMES.forEach(function(pageName) {
-        this.pages_[pageName].hidden = (pageName !== newPage);
-      }, this);
+  return {
+    onBeforeShow: function() {
+      Oobe.getInstance().headerHidden = true;
     },
 
-    setUpdateProgress_: function(progress) {
-      this.updateProgressBar_.value = progress;
+    /** @override */
+    initialize: function() {
+      this.send(CALLBACK_CONTEXT_READY);
     }
   };
-});
+})());