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