Example of usage of new features of context and screen.

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
new file mode 100644
index 0000000000000000000000000000000000000000..edbb05fc96a45dca94abd45df9d750884e8e282b
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_controller_pairing.js
@@ -0,0 +1,114 @@
+// Copyright (c) 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview controller pairing screen implementation.
+ */
+
+login.createScreen('ControllerPairingScreen', 'controller-pairing', function() {
+  'use strict';
+
+  /** @const */ var CONTEXT_KEY_PAGE = 'page';
+  /** @const */ var CONTEXT_KEY_CONTROLS_DISABLED = 'controlsDisabled';
+  /** @const */ var CONTEXT_KEY_DEVICES = 'devices';
+  /** @const */ var CONTEXT_KEY_CONFIRMATION_CODE = 'code';
+  /** @const */ var CONTEXT_KEY_SELECTED_DEVICE = 'selectedDevice';
+  /** @const */ var CONTEXT_KEY_ACCOUNT_ID = "accountId";
+
+  /** @const */ var PAGE_DEVICES_DISCOVERY = 'devices-discovery';
+  /** @const */ var PAGE_DEVICE_SELECT = 'device-select';
+  /** @const */ var PAGE_DEVICE_NOT_FOUND = 'device-not-found';
+  /** @const */ var PAGE_ESTABLISHING_CONNECTION = 'establishing-connection';
+  /** @const */ var PAGE_ESTABLISHING_CONNECTION_ERROR =
+      'establishing-connection-error';
+  /** @const */ var PAGE_CODE_CONFIRMATION = 'code-confirmation';
+  /** @const */ var PAGE_HOST_UPDATE = 'host-update';
+  /** @const */ var PAGE_HOST_CONNECTION_LOST = 'host-connection-lost';
+  /** @const */ var PAGE_ENRLOLLMENT_INTRODUCTION = 'enrollment-introduction';
+  /** @const */ var PAGE_AUTHENTICATION = 'authentication';
+  /** @const */ var PAGE_HOST_ENROLLMENT = 'host-enrollment';
+  /** @const */ var PAGE_HOST_ENROLLMENT_ERROR = 'host-enrollment-error';
+  /** @const */ var PAGE_PAIRING_DONE = 'pairing-done';
+
+  return {
+    deviceSelectionChangedCallback_: null,
+
+    /** @override */
+    decorate: function() {
+      this.makeMagic();
+
+      this.observeContext(CONTEXT_KEY_PAGE, this.pageChanged_);
+      this.observeContext(CONTEXT_KEY_CONTROLS_DISABLED, this.disableControls_);
+
+      cr.ui.List.decorate(this.deviceList_);
+      this.deviceList_.selectionModel = new cr.ui.ListSingleSelectionModel();
+    },
+
+    pageChanged_: function(newPage, oldPage) {
+      this.deviceList_.hidden = this.chooseDeviceButton_.hidden =
+          (newPage != PAGE_DEVICE_SELECT);
+      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.confirmationCodeLabel_.hidden = this.acceptCodeButton_.hidden =
+          this.rejectCodeButton_.hidden = (newPage != PAGE_CODE_CONFIRMATION);
+
+      if (newPage == PAGE_DEVICE_SELECT) {
+        this.observeContext(CONTEXT_KEY_DEVICES, this.deviceListChanged_);
+        this.observeContext(CONTEXT_KEY_SELECTED_DEVICE,
+            this.updateDeviceSelection_);
+        this.deviceSelectionChangedCallback_ =
+            this.deviceSelectionChanged_.bind(this);
+        this.deviceList_.addEventListener('change',
+            this.deviceSelectionChangedCallback_);
+        this.deviceSelectionChanged_();
+        this.deviceListChanged_(this.context.get(CONTEXT_KEY_DEVICES));
+        setTimeout(this.deviceList_.redraw.bind(this.deviceList_), 0);
+      } else if (oldPage == PAGE_DEVICE_SELECT) {
+        this.unobserveContext(this.deviceListChanged_);
+        this.observeContext(this.updateDeviceSelection_);
+        this.deviceList_.removeEventListener('change',
+            this.deviceSelectionChangedCallback_);
+        this.deviceSelectionChangedCallback_ = null;
+      }
+
+      if (newPage == PAGE_CODE_CONFIRMATION) {
+        this.confirmationCodeLabel_.textContent =
+            this.context.get(CONTEXT_KEY_CONFIRMATION_CODE) + '?';
+      }
+
+      this.pageNameLabel_.textContent = '<<<< ' + newPage + ' >>>>';
+      this.setAttribute('page', newPage);
+    },
+
+    deviceListChanged_: function(deviceList) {
+      this.deviceList_.dataModel =
+          new cr.ui.ArrayDataModel(deviceList.split('\0'));
+      this.updateDeviceSelection_();
+    },
+
+    deviceSelectionChanged_: function() {
+      var item = this.deviceList_.selectedItem;
+      this.context.set(CONTEXT_KEY_SELECTED_DEVICE, item ? item : '');
+      this.commitContextChanges();
+    },
+
+    updateDeviceSelection_: function() {
+      var selectedDevice = this.context.get(CONTEXT_KEY_SELECTED_DEVICE, null);
+      if (selectedDevice === '')
+        selectedDevice = null;
+      this.deviceList_.selectedItem = selectedDevice;
+    },
+
+    disableControls_: function(disable) {
+      this.querySelectorAll('button').forEach(function(button) {
+        button.disabled = disable;
+      });
+    }
+  };
+});
+