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

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Out of the box experience flow (OOBE).
   7  * This is the main code for the OOBE WebUI implementation.
   8  */
   9
  10 /**
  11  * Setting WAIT_FOR_POLYMER to 'true' will delay screens' registration until
  12  * Polymer is loaded.
  13  */
  14 /* @const */ var WAIT_FOR_POLYMER = true;
  15
  16 <include src="login_common.js">
  17 <include src="oobe_screen_auto_enrollment_check.js">
  18 <include src="oobe_screen_controller_pairing.js">
  19 <include src="oobe_screen_enable_debugging.js">
  20 <include src="oobe_screen_eula.js">
  21 <include src="oobe_screen_hid_detection.js">
  22 <include src="oobe_screen_host_pairing.js">
  23 <include src="oobe_screen_network.js">
  24 <include src="oobe_screen_update.js">
  25
  26 cr.define('cr.ui.Oobe', function() {
  27   return {
  28     /**
  29      * Setups given "select" element using the list and adds callback.
  30      * Creates option groups if needed.
  31      * @param {!Element} select Select object to be updated.
  32      * @param {!Object} list List of the options to be added.
  33      * Elements with optionGroupName are considered option group.
  34      * @param {string} callback Callback name which should be send to Chrome or
  35      * an empty string if the event listener shouldn't be added.
  36      */
  37     setupSelect: function(select, list, callback) {
  38       select.innerHTML = '';
  39       var optgroup = select;
  40       for (var i = 0; i < list.length; ++i) {
  41         var item = list[i];
  42         if (item.optionGroupName) {
  43           optgroup = document.createElement('optgroup');
  44           optgroup.label = item.optionGroupName;
  45           select.appendChild(optgroup);
  46         } else {
  47           var option =
  48               new Option(item.title, item.value, item.selected, item.selected);
  49           optgroup.appendChild(option);
  50         }
  51       }
  52       if (callback) {
  53         var runCallback = function() {
  54           callback(select.options[select.selectedIndex].value);
  55         };
  56         select.addEventListener('blur', runCallback);
  57         select.addEventListener('click', runCallback);
  58         select.addEventListener('keyup', function(event) {
  59           var keycodeInterested = [
  60             9,  // Tab
  61             13,  // Enter
  62             27,  // Escape
  63           ];
  64           if (keycodeInterested.indexOf(event.keyCode) >= 0)
  65             runCallback();
  66         });
  67       }
  68     },
  69
  70     /**
  71      * Initializes the OOBE flow.  This will cause all C++ handlers to
  72      * be invoked to do final setup.
  73      */
  74     initialize: function() {
  75       cr.ui.login.DisplayManager.initialize();
  76       login.HIDDetectionScreen.register();
  77       login.WrongHWIDScreen.register();
  78       login.NetworkScreen.register();
  79       login.EulaScreen.register();
  80       login.UpdateScreen.register();
  81       login.AutoEnrollmentCheckScreen.register();
  82       login.EnableDebuggingScreen.register();
  83       login.ResetScreen.register();
  84       login.AutolaunchScreen.register();
  85       login.KioskEnableScreen.register();
  86       login.AccountPickerScreen.register();
  87       login.GaiaSigninScreen.register();
  88       login.UserImageScreen.register(/* lazyInit= */ false);
  89       login.ErrorMessageScreen.register();
  90       login.TPMErrorMessageScreen.register();
  91       login.PasswordChangedScreen.register();
  92       login.SupervisedUserCreationScreen.register();
  93       login.TermsOfServiceScreen.register();
  94       login.AppLaunchSplashScreen.register();
  95       login.ConfirmPasswordScreen.register();
  96       login.FatalErrorScreen.register();
  97       login.ControllerPairingScreen.register();
  98       login.HostPairingScreen.register();
  99       login.DeviceDisabledScreen.register();
 100
 101       cr.ui.Bubble.decorate($('bubble'));
 102       login.HeaderBar.decorate($('login-header-bar'));
 103
 104       Oobe.initializeA11yMenu();
 105
 106       chrome.send('screenStateInitialize');
 107     },
 108
 109     /**
 110      * Initializes OOBE accessibility menu.
 111      */
 112     initializeA11yMenu: function() {
 113       cr.ui.Bubble.decorate($('accessibility-menu'));
 114       $('connect-accessibility-link').addEventListener(
 115         'click', Oobe.handleAccessibilityLinkClick);
 116       $('eula-accessibility-link').addEventListener(
 117         'click', Oobe.handleAccessibilityLinkClick);
 118       $('update-accessibility-link').addEventListener(
 119         'click', Oobe.handleAccessibilityLinkClick);
 120       // Same behaviour on hitting spacebar. See crbug.com/342991.
 121       function reactOnSpace(event) {
 122         if (event.keyCode == 32)
 123           Oobe.handleAccessibilityLinkClick(event);
 124       }
 125       $('connect-accessibility-link').addEventListener(
 126         'keyup', reactOnSpace);
 127       $('eula-accessibility-link').addEventListener(
 128         'keyup', reactOnSpace);
 129       $('update-accessibility-link').addEventListener(
 130         'keyup', reactOnSpace);
 131
 132       $('high-contrast').addEventListener('click',
 133                                           Oobe.handleHighContrastClick);
 134       $('large-cursor').addEventListener('click',
 135                                          Oobe.handleLargeCursorClick);
 136       $('spoken-feedback').addEventListener('click',
 137                                             Oobe.handleSpokenFeedbackClick);
 138       $('screen-magnifier').addEventListener('click',
 139                                              Oobe.handleScreenMagnifierClick);
 140       $('virtual-keyboard').addEventListener('click',
 141                                               Oobe.handleVirtualKeyboardClick);
 142
 143       // A11y menu should be accessible i.e. disable autohide on any
 144       // keydown or click inside menu.
 145       $('accessibility-menu').hideOnKeyPress = false;
 146       $('accessibility-menu').hideOnSelfClick = false;
 147     },
 148
 149     /**
 150      * Accessibility link handler.
 151      */
 152     handleAccessibilityLinkClick: function(e) {
 153       /** @const */ var BUBBLE_OFFSET = 5;
 154       /** @const */ var BUBBLE_PADDING = 10;
 155       $('accessibility-menu').showForElement(e.target,
 156                                              cr.ui.Bubble.Attachment.BOTTOM,
 157                                              BUBBLE_OFFSET, BUBBLE_PADDING);
 158
 159       var maxHeight = cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(
 160           $('accessibility-menu'));
 161       if (maxHeight < $('accessibility-menu').offsetHeight) {
 162         $('accessibility-menu').showForElement(e.target,
 163                                                cr.ui.Bubble.Attachment.TOP,
 164                                                BUBBLE_OFFSET, BUBBLE_PADDING);
 165       }
 166
 167       $('accessibility-menu').firstBubbleElement = $('spoken-feedback');
 168       $('accessibility-menu').lastBubbleElement = $('close-accessibility-menu');
 169       if (Oobe.getInstance().currentScreen &&
 170           Oobe.getInstance().currentScreen.defaultControl) {
 171         $('accessibility-menu').elementToFocusOnHide =
 172           Oobe.getInstance().currentScreen.defaultControl;
 173       } else {
 174         // Update screen falls into this category. Since it doesn't have any
 175         // controls other than a11y link we don't want that link to receive
 176         // focus when screen is shown i.e. defaultControl is not defined.
 177         // Focus a11y link instead.
 178         $('accessibility-menu').elementToFocusOnHide = e.target;
 179       }
 180       e.stopPropagation();
 181     },
 182
 183     /**
 184      * Spoken feedback checkbox handler.
 185      */
 186     handleSpokenFeedbackClick: function(e) {
 187       chrome.send('enableSpokenFeedback', [$('spoken-feedback').checked]);
 188       e.stopPropagation();
 189     },
 190
 191     /**
 192      * Large cursor checkbox handler.
 193      */
 194     handleLargeCursorClick: function(e) {
 195       chrome.send('enableLargeCursor', [$('large-cursor').checked]);
 196       e.stopPropagation();
 197     },
 198
 199     /**
 200      * High contrast mode checkbox handler.
 201      */
 202     handleHighContrastClick: function(e) {
 203       chrome.send('enableHighContrast', [$('high-contrast').checked]);
 204       e.stopPropagation();
 205     },
 206
 207     /**
 208      * Screen magnifier checkbox handler.
 209      */
 210     handleScreenMagnifierClick: function(e) {
 211       chrome.send('enableScreenMagnifier', [$('screen-magnifier').checked]);
 212       e.stopPropagation();
 213     },
 214
 215     /**
 216      * On-screen keyboard checkbox handler.
 217      */
 218     handleVirtualKeyboardClick: function(e) {
 219       chrome.send('enableVirtualKeyboard', [$('virtual-keyboard').checked]);
 220       e.stopPropagation();
 221     },
 222
 223     /**
 224      * Sets usage statistics checkbox.
 225      * @param {boolean} checked Is the checkbox checked?
 226      */
 227     setUsageStats: function(checked) {
 228       $('usage-stats').checked = checked;
 229     },
 230
 231     /**
 232      * Set OEM EULA URL.
 233      * @param {text} oemEulaUrl OEM EULA URL.
 234      */
 235     setOemEulaUrl: function(oemEulaUrl) {
 236       if (oemEulaUrl) {
 237         $('oem-eula-frame').src = oemEulaUrl;
 238         $('eulas').classList.remove('one-column');
 239       } else {
 240         $('eulas').classList.add('one-column');
 241       }
 242     },
 243
 244     /**
 245      * Sets TPM password.
 246      * @param {text} password TPM password to be shown.
 247      */
 248     setTpmPassword: function(password) {
 249       $('tpm-busy').hidden = true;
 250
 251       if (password.length) {
 252         $('tpm-password').textContent = password;
 253         $('tpm-password').hidden = false;
 254       } else {
 255         $('tpm-desc').hidden = true;
 256         $('tpm-desc-powerwash').hidden = false;
 257       }
 258     },
 259
 260     /**
 261      * Refreshes a11y menu state.
 262      * @param {!Object} data New dictionary with a11y features state.
 263      */
 264     refreshA11yInfo: function(data) {
 265       $('high-contrast').checked = data.highContrastEnabled;
 266       $('spoken-feedback').checked = data.spokenFeedbackEnabled;
 267       $('screen-magnifier').checked = data.screenMagnifierEnabled;
 268       $('large-cursor').checked = data.largeCursorEnabled;
 269       $('virtual-keyboard').checked = data.virtualKeyboardEnabled;
 270     },
 271
 272     /**
 273      * Reloads content of the page (localized strings, options of the select
 274      * controls).
 275      * @param {!Object} data New dictionary with i18n values.
 276      */
 277     reloadContent: function(data) {
 278       // Reload global local strings, process DOM tree again.
 279       loadTimeData.overrideValues(data);
 280       i18nTemplate.process(document, loadTimeData);
 281
 282       // Update language and input method menu lists.
 283       Oobe.setupSelect($('language-select'), data.languageList);
 284       Oobe.setupSelect($('keyboard-select'), data.inputMethodsList);
 285       Oobe.setupSelect($('timezone-select'), data.timezoneList);
 286
 287       // Update localized content of the screens.
 288       Oobe.updateLocalizedContent();
 289     },
 290
 291     /**
 292      * Updates localized content of the screens.
 293      * Should be executed on language change.
 294      */
 295     updateLocalizedContent: function() {
 296       // Buttons, headers and links.
 297       Oobe.getInstance().updateLocalizedContent_();
 298     }
 299   };
 300 });