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 15cr.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 72 cr.ui.Bubble.decorate($('bubble')); 73 login.HeaderBar.decorate($('login-header-bar')); 74 75 Oobe.initializeA11yMenu(); 76 77 chrome.send('screenStateInitialize'); 78 }, 79 80 /** 81 * Initializes OOBE accessibility menu. 82 */ 83 initializeA11yMenu: function() { 84 cr.ui.Bubble.decorate($('accessibility-menu')); 85 $('connect-accessibility-link').addEventListener( 86 'click', Oobe.handleAccessbilityLinkClick); 87 $('eula-accessibility-link').addEventListener( 88 'click', Oobe.handleAccessbilityLinkClick); 89 $('update-accessibility-link').addEventListener( 90 'click', Oobe.handleAccessbilityLinkClick); 91 92 $('high-contrast').addEventListener('click', 93 Oobe.handleHighContrastClick); 94 $('large-cursor').addEventListener('click', 95 Oobe.handleLargeCursorClick); 96 $('spoken-feedback').addEventListener('click', 97 Oobe.handleSpokenFeedbackClick); 98 $('screen-magnifier').addEventListener('click', 99 Oobe.handleScreenMagnifierClick); 100 101 // A11y menu should be accessible i.e. disable autohide on any 102 // keydown or click inside menu. 103 $('accessibility-menu').hideOnKeyPress = false; 104 $('accessibility-menu').hideOnSelfClick = false; 105 }, 106 107 /** 108 * Accessibility link handler. 109 */ 110 handleAccessbilityLinkClick: function(e) { 111 /** @const */ var BUBBLE_OFFSET = 5; 112 /** @const */ var BUBBLE_PADDING = 10; 113 $('accessibility-menu').showForElement(e.target, 114 cr.ui.Bubble.Attachment.BOTTOM, 115 BUBBLE_OFFSET, BUBBLE_PADDING); 116 if (Oobe.getInstance().currentScreen && 117 Oobe.getInstance().currentScreen.defaultControl) { 118 $('accessibility-menu').elementToFocusOnHide = 119 Oobe.getInstance().currentScreen.defaultControl; 120 } else { 121 // Update screen falls into this category. Since it doesn't have any 122 // controls other than a11y link we don't want that link to receive 123 // focus when screen is shown i.e. defaultControl is not defined. 124 // Focus a11y link instead. 125 $('accessibility-menu').elementToFocusOnHide = e.target; 126 } 127 e.stopPropagation(); 128 }, 129 130 /** 131 * Spoken feedback checkbox handler. 132 */ 133 handleSpokenFeedbackClick: function(e) { 134 chrome.send('enableSpokenFeedback', [$('spoken-feedback').checked]); 135 e.stopPropagation(); 136 }, 137 138 /** 139 * Large cursor checkbox handler. 140 */ 141 handleLargeCursorClick: function(e) { 142 chrome.send('enableLargeCursor', [$('large-cursor').checked]); 143 e.stopPropagation(); 144 }, 145 146 /** 147 * High contrast mode checkbox handler. 148 */ 149 handleHighContrastClick: function(e) { 150 chrome.send('enableHighContrast', [$('high-contrast').checked]); 151 e.stopPropagation(); 152 }, 153 154 /** 155 * Screen magnifier checkbox handler. 156 */ 157 handleScreenMagnifierClick: function(e) { 158 chrome.send('enableScreenMagnifier', [$('screen-magnifier').checked]); 159 e.stopPropagation(); 160 }, 161 162 /** 163 * Sets usage statistics checkbox. 164 * @param {boolean} checked Is the checkbox checked? 165 */ 166 setUsageStats: function(checked) { 167 $('usage-stats').checked = checked; 168 }, 169 170 /** 171 * Set OEM EULA URL. 172 * @param {text} oemEulaUrl OEM EULA URL. 173 */ 174 setOemEulaUrl: function(oemEulaUrl) { 175 if (oemEulaUrl) { 176 $('oem-eula-frame').src = oemEulaUrl; 177 $('eulas').classList.remove('one-column'); 178 } else { 179 $('eulas').classList.add('one-column'); 180 } 181 }, 182 183 /** 184 * Sets TPM password. 185 * @param {text} password TPM password to be shown. 186 */ 187 setTpmPassword: function(password) { 188 $('tpm-busy').hidden = true; 189 190 if (password.length) { 191 $('tpm-password').textContent = password; 192 $('tpm-password').hidden = false; 193 } else { 194 $('tpm-desc').hidden = true; 195 $('tpm-desc-powerwash').hidden = false; 196 } 197 }, 198 199 /** 200 * Refreshes a11y menu state. 201 * @param {!Object} data New dictionary with a11y features state. 202 */ 203 refreshA11yInfo: function(data) { 204 $('high-contrast').checked = data.highContrastEnabled; 205 $('spoken-feedback').checked = data.spokenFeedbackEnabled; 206 $('screen-magnifier').checked = data.screenMagnifierEnabled; 207 $('large-cursor').checked = data.largeCursorEnabled; 208 }, 209 210 /** 211 * Reloads content of the page (localized strings, options of the select 212 * controls). 213 * @param {!Object} data New dictionary with i18n values. 214 */ 215 reloadContent: function(data) { 216 // Reload global local strings, process DOM tree again. 217 loadTimeData.overrideValues(data); 218 i18nTemplate.process(document, loadTimeData); 219 220 // Update language and input method menu lists. 221 Oobe.setupSelect($('language-select'), data.languageList, ''); 222 Oobe.setupSelect($('keyboard-select'), data.inputMethodsList, ''); 223 224 // Update localized content of the screens. 225 Oobe.updateLocalizedContent(); 226 }, 227 228 /** 229 * Updates localized content of the screens. 230 * Should be executed on language change. 231 */ 232 updateLocalizedContent: function() { 233 // Buttons, headers and links. 234 Oobe.getInstance().updateLocalizedContent_(); 235 } 236 }; 237}); 238