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