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