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