OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview Polymer element for displaying material design OOBE. | 6 * @fileoverview Polymer element for displaying material design OOBE. |
7 */ | 7 */ |
8 | 8 |
9 Polymer({ | 9 Polymer({ |
10 is: 'oobe-welcome-md', | 10 is: 'oobe-welcome-md', |
(...skipping 27 matching lines...) Expand all Loading... |
38 /** | 38 /** |
39 * List of keyboards for keyboard selector dropdown. | 39 * List of keyboards for keyboard selector dropdown. |
40 * @type {!Array<OobeTypes.IMEDsc>} | 40 * @type {!Array<OobeTypes.IMEDsc>} |
41 */ | 41 */ |
42 keyboards: { | 42 keyboards: { |
43 type: Array, | 43 type: Array, |
44 observer: "onKeyboardsChanged_", | 44 observer: "onKeyboardsChanged_", |
45 }, | 45 }, |
46 | 46 |
47 /** | 47 /** |
48 * Flag that shows Welcome screen. | |
49 */ | |
50 welcomeScreenShown: { | |
51 type: Boolean, | |
52 value: true, | |
53 }, | |
54 | |
55 /** | |
56 * Flag that shows Language Selection screen. | |
57 */ | |
58 languageSelectionScreenShown: { | |
59 type: Boolean, | |
60 value: false, | |
61 }, | |
62 | |
63 /** | |
64 * Flag that shows Accessibility Options screen. | |
65 */ | |
66 accessibilityOptionsScreenShown: { | |
67 type: Boolean, | |
68 value: false, | |
69 }, | |
70 | |
71 /** | |
72 * Flag that shows Timezone Selection screen. | |
73 */ | |
74 timezoneScreenShown: { | |
75 type: Boolean, | |
76 value: false, | |
77 }, | |
78 | |
79 /** | |
80 * Flag that shows Network Selection screen. | |
81 */ | |
82 networkSelectionScreenShown: { | |
83 type: Boolean, | |
84 value: false, | |
85 observer: 'networkSelectionScreenShownChanged_', | |
86 }, | |
87 | |
88 /** | |
89 * Flag that enables MD-OOBE. | 48 * Flag that enables MD-OOBE. |
90 */ | 49 */ |
91 enabled: { | 50 enabled: { |
92 type: Boolean, | 51 type: Boolean, |
93 value: false, | 52 value: false, |
94 }, | 53 }, |
95 | 54 |
96 /** | 55 /** |
97 * Accessibility options status. | 56 * Accessibility options status. |
98 * @type {!OobeTypes.A11yStatuses} | 57 * @type {!OobeTypes.A11yStatuses} |
(...skipping 22 matching lines...) Expand all Loading... |
121 /** | 80 /** |
122 * True when connected to a network. | 81 * True when connected to a network. |
123 * @private | 82 * @private |
124 */ | 83 */ |
125 isConnected_: { | 84 isConnected_: { |
126 type: Boolean, | 85 type: Boolean, |
127 value: false, | 86 value: false, |
128 }, | 87 }, |
129 }, | 88 }, |
130 | 89 |
| 90 /** |
| 91 * GUID of the user-selected network. It is remembered after user taps on |
| 92 * network entry. After we receive event "connected" on this network, |
| 93 * OOBE will proceed. |
| 94 */ |
| 95 networkLastSelectedGuid_: '', |
| 96 |
131 /** @override */ | 97 /** @override */ |
132 ready: function() { | 98 ready: function() { |
133 CrOncStrings = { | 99 CrOncStrings = { |
134 OncTypeCellular: loadTimeData.getString('OncTypeCellular'), | 100 OncTypeCellular: loadTimeData.getString('OncTypeCellular'), |
135 OncTypeEthernet: loadTimeData.getString('OncTypeEthernet'), | 101 OncTypeEthernet: loadTimeData.getString('OncTypeEthernet'), |
136 OncTypeVPN: loadTimeData.getString('OncTypeVPN'), | 102 OncTypeVPN: loadTimeData.getString('OncTypeVPN'), |
137 OncTypeWiFi: loadTimeData.getString('OncTypeWiFi'), | 103 OncTypeWiFi: loadTimeData.getString('OncTypeWiFi'), |
138 OncTypeWiMAX: loadTimeData.getString('OncTypeWiMAX'), | 104 OncTypeWiMAX: loadTimeData.getString('OncTypeWiMAX'), |
139 networkDisabled: loadTimeData.getString('networkDisabled'), | 105 networkDisabled: loadTimeData.getString('networkDisabled'), |
140 networkListItemConnected: | 106 networkListItemConnected: |
141 loadTimeData.getString('networkListItemConnected'), | 107 loadTimeData.getString('networkListItemConnected'), |
142 networkListItemConnecting: | 108 networkListItemConnecting: |
143 loadTimeData.getString('networkListItemConnecting'), | 109 loadTimeData.getString('networkListItemConnecting'), |
144 networkListItemConnectingTo: | 110 networkListItemConnectingTo: |
145 loadTimeData.getString('networkListItemConnectingTo'), | 111 loadTimeData.getString('networkListItemConnectingTo'), |
146 networkListItemNotConnected: | 112 networkListItemNotConnected: |
147 loadTimeData.getString('networkListItemNotConnected'), | 113 loadTimeData.getString('networkListItemNotConnected'), |
148 vpnNameTemplate: loadTimeData.getString('vpnNameTemplate'), | 114 vpnNameTemplate: loadTimeData.getString('vpnNameTemplate'), |
149 | 115 |
150 // Additional strings for custom items. | 116 // Additional strings for custom items. |
151 addMobileNetworkMenuName: | 117 addMobileNetworkMenuName: |
152 loadTimeData.getString('addMobileNetworkMenuName'), | 118 loadTimeData.getString('addMobileNetworkMenuName'), |
153 addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'), | 119 addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'), |
154 proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'), | 120 proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'), |
155 }; | 121 }; |
156 }, | 122 }, |
157 | 123 |
158 /** | 124 /** |
159 * Hides all screens to help switching from one screen to another. | 125 * Hides all screens to help switching from one screen to another. |
| 126 * @private |
160 */ | 127 */ |
161 hideAllScreens_: function() { | 128 hideAllScreens_: function() { |
162 this.welcomeScreenShown = false; | 129 this.$.welcomeScreen.hidden = true; |
163 this.networkSelectionScreenShown = false; | |
164 this.languageSelectionScreenShown = false; | |
165 this.accessibilityOptionsScreenShown = false; | |
166 this.timezoneScreenShown = false; | |
167 }, | |
168 | 130 |
169 /** | 131 var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog') |
170 * GUID of the user-selected network. It is remembered after user taps on | 132 for (var i = 0; i < screens.length; ++i) { |
171 * network entry. After we receive event "connected" on this network, | 133 screens[i].hidden = true; |
172 * OOBE will proceed. | |
173 */ | |
174 networkLastSelectedGuid_: '', | |
175 | |
176 /** | |
177 * Sets proper focus. | |
178 */ | |
179 focus: function() { | |
180 this.$.welcomeNextButton.focus(); | |
181 }, | |
182 | |
183 /** @private */ | |
184 networkSelectionScreenShownChanged_: function() { | |
185 if (this.networkSelectionScreenShown) { | |
186 // After #networkSelect is stamped, trigger a refresh so that the list | |
187 // will be updated with the currently visible networks and sized | |
188 // appropriately. | |
189 this.async(function() { | |
190 this.$.networkSelect.refreshNetworks(); | |
191 }.bind(this)); | |
192 } | 134 } |
193 }, | 135 }, |
194 | 136 |
195 /** | 137 /** |
| 138 * Shows given screen. |
| 139 * @param id String Screen ID. |
| 140 * @private |
| 141 */ |
| 142 showScreen_: function(id) { |
| 143 this.hideAllScreens_(); |
| 144 |
| 145 var screen = this.$[id]; |
| 146 assert(screen); |
| 147 screen.hidden = false; |
| 148 screen.show(); |
| 149 }, |
| 150 |
| 151 /** |
| 152 * Returns active screen object. |
| 153 * @private |
| 154 */ |
| 155 getActiveScreen_: function() { |
| 156 var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog') |
| 157 for (var i = 0; i < screens.length; ++i) { |
| 158 if (!screens[i].hidden) |
| 159 return screens[i]; |
| 160 } |
| 161 return this.$.welcomeScreen; |
| 162 }, |
| 163 |
| 164 focus: function() { |
| 165 this.getActiveScreen_().focus(); |
| 166 }, |
| 167 |
| 168 /** @private */ |
| 169 onNetworkSelectionScreenShown_: function() { |
| 170 // After #networkSelect is stamped, trigger a refresh so that the list |
| 171 // will be updated with the currently visible networks and sized |
| 172 // appropriately. |
| 173 this.async(function() { |
| 174 this.$.networkSelect.refreshNetworks(); |
| 175 }.bind(this)); |
| 176 }, |
| 177 |
| 178 /** |
196 * Handles "visible" event. | 179 * Handles "visible" event. |
197 * @private | 180 * @private |
198 */ | 181 */ |
199 onAnimationFinish_: function() { | 182 onAnimationFinish_: function() { |
200 this.focus(); | 183 this.focus(); |
201 }, | 184 }, |
202 | 185 |
203 /** | 186 /** |
204 * Returns custom items for network selector. | 187 * Returns custom items for network selector. |
| 188 * @private |
205 */ | 189 */ |
206 _getNetworkCustomItems: function() { | 190 getNetworkCustomItems_: function() { |
207 var self = this; | 191 var self = this; |
208 return [ | 192 return [ |
209 { | 193 { |
210 customItemName: 'proxySettingsMenuName', | 194 customItemName: 'proxySettingsMenuName', |
211 polymerIcon: 'oobe-welcome-20:add-proxy', | 195 polymerIcon: 'oobe-welcome-20:add-proxy', |
212 customData: { | 196 customData: { |
213 onTap: function() { self.OpenProxySettingsDialog_(); }, | 197 onTap: function() { self.OpenProxySettingsDialog_(); }, |
214 }, | 198 }, |
215 }, | 199 }, |
216 { | 200 { |
(...skipping 20 matching lines...) Expand all Loading... |
237 isTimezoneButtonVisible_: function(highlightStrength) { | 221 isTimezoneButtonVisible_: function(highlightStrength) { |
238 return highlightStrength === 'strong'; | 222 return highlightStrength === 'strong'; |
239 }, | 223 }, |
240 | 224 |
241 /** | 225 /** |
242 * Handle "Next" button for "Welcome" screen. | 226 * Handle "Next" button for "Welcome" screen. |
243 * | 227 * |
244 * @private | 228 * @private |
245 */ | 229 */ |
246 onWelcomeNextButtonClicked_: function() { | 230 onWelcomeNextButtonClicked_: function() { |
247 this.hideAllScreens_(); | 231 this.showScreen_('networkSelectionScreen'); |
248 this.networkSelectionScreenShown = true; | |
249 }, | 232 }, |
250 | 233 |
251 /** | 234 /** |
252 * Handle "Language" button for "Welcome" screen. | 235 * Handle "Language" button for "Welcome" screen. |
253 * | 236 * |
254 * @private | 237 * @private |
255 */ | 238 */ |
256 onWelcomeSelectLanguageButtonClicked_: function() { | 239 onWelcomeSelectLanguageButtonClicked_: function() { |
257 this.hideAllScreens_(); | 240 this.showScreen_('languageScreen'); |
258 this.languageSelectionScreenShown = true; | |
259 }, | 241 }, |
260 | 242 |
261 /** | 243 /** |
262 * Handle "Accessibility" button for "Welcome" screen. | 244 * Handle "Accessibility" button for "Welcome" screen. |
263 * | 245 * |
264 * @private | 246 * @private |
265 */ | 247 */ |
266 onWelcomeAccessibilityButtonClicked_: function() { | 248 onWelcomeAccessibilityButtonClicked_: function() { |
267 this.hideAllScreens_(); | 249 this.showScreen_('accessibilityScreen'); |
268 this.accessibilityOptionsScreenShown = true; | |
269 }, | 250 }, |
270 | 251 |
271 /** | 252 /** |
272 * Handle "Timezone" button for "Welcome" screen. | 253 * Handle "Timezone" button for "Welcome" screen. |
273 * | 254 * |
274 * @private | 255 * @private |
275 */ | 256 */ |
276 onWelcomeTimezoneButtonClicked_: function() { | 257 onWelcomeTimezoneButtonClicked_: function() { |
277 this.hideAllScreens_(); | 258 this.showScreen_('timezoneScreen'); |
278 this.timezoneScreenShown = true; | |
279 }, | 259 }, |
280 | 260 |
281 /** | 261 /** |
282 * Handle Networwork Setup screen "Proxy settings" button. | 262 * Handle Networwork Setup screen "Proxy settings" button. |
283 * | 263 * |
284 * @private | 264 * @private |
285 */ | 265 */ |
286 OpenProxySettingsDialog_: function(item) { | 266 OpenProxySettingsDialog_: function(item) { |
287 chrome.send('launchProxySettingsDialog'); | 267 chrome.send('launchProxySettingsDialog'); |
288 }, | 268 }, |
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
380 itemState.customData.onTap(); | 360 itemState.customData.onTap(); |
381 }, | 361 }, |
382 | 362 |
383 /** | 363 /** |
384 * Handle "<- Back" button on network selection screen. | 364 * Handle "<- Back" button on network selection screen. |
385 * | 365 * |
386 * @private | 366 * @private |
387 */ | 367 */ |
388 onNetworkSelectionBackButtonPressed_: function() { | 368 onNetworkSelectionBackButtonPressed_: function() { |
389 this.networkLastSelectedGuid_ = ''; | 369 this.networkLastSelectedGuid_ = ''; |
390 this.hideAllScreens_(); | 370 this.showScreen_('welcomeScreen'); |
391 this.welcomeScreenShown = true; | |
392 }, | 371 }, |
393 | 372 |
394 /** | 373 /** |
395 * Handle language selection. | 374 * Handle language selection. |
396 * | 375 * |
397 * @param {!{detail: {!OobeTypes.LanguageDsc}}} event | 376 * @param {!{detail: {!OobeTypes.LanguageDsc}}} event |
398 * @private | 377 * @private |
399 */ | 378 */ |
400 onLanguageSelected_: function(event) { | 379 onLanguageSelected_: function(event) { |
401 var item = event.detail; | 380 var item = event.detail; |
(...skipping 22 matching lines...) Expand all Loading... |
424 onKeyboardsChanged_: function() { | 403 onKeyboardsChanged_: function() { |
425 this.currentKeyboard = Oobe.getSelectedTitle(this.keyboards); | 404 this.currentKeyboard = Oobe.getSelectedTitle(this.keyboards); |
426 }, | 405 }, |
427 | 406 |
428 /** | 407 /** |
429 * Handle "OK" button for "LanguageSelection" screen. | 408 * Handle "OK" button for "LanguageSelection" screen. |
430 * | 409 * |
431 * @private | 410 * @private |
432 */ | 411 */ |
433 closeLanguageSection_: function() { | 412 closeLanguageSection_: function() { |
434 this.hideAllScreens_(); | 413 this.showScreen_('welcomeScreen'); |
435 this.welcomeScreenShown = true; | |
436 }, | 414 }, |
437 | 415 |
438 /** ******************** Accessibility section ******************* */ | 416 /** ******************** Accessibility section ******************* */ |
439 | 417 |
440 /** | 418 /** |
441 * Handle "OK" button for "Accessibility Options" screen. | 419 * Handle "OK" button for "Accessibility Options" screen. |
442 * | 420 * |
443 * @private | 421 * @private |
444 */ | 422 */ |
445 closeAccessibilitySection_: function() { | 423 closeAccessibilitySection_: function() { |
446 this.hideAllScreens_(); | 424 this.showScreen_('welcomeScreen'); |
447 this.welcomeScreenShown = true; | |
448 }, | 425 }, |
449 | 426 |
450 /** | 427 /** |
451 * Handle all accessibility buttons. | 428 * Handle all accessibility buttons. |
452 * Note that each <oobe-a11y-option> has chromeMessage attribute | 429 * Note that each <oobe-a11y-option> has chromeMessage attribute |
453 * containing Chromium callback name. | 430 * containing Chromium callback name. |
454 * | 431 * |
455 * @private | 432 * @private |
456 * @param {!Event} event | 433 * @param {!Event} event |
457 */ | 434 */ |
458 onA11yOptionChanged_: function(event) { | 435 onA11yOptionChanged_: function(event) { |
459 chrome.send( | 436 chrome.send( |
460 event.currentTarget.chromeMessage, [event.currentTarget.checked]); | 437 event.currentTarget.chromeMessage, [event.currentTarget.checked]); |
461 }, | 438 }, |
462 | 439 |
463 /** ******************** Timezone section ******************* */ | 440 /** ******************** Timezone section ******************* */ |
464 | 441 |
465 /** | 442 /** |
466 * Handle "OK" button for "Timezone Selection" screen. | 443 * Handle "OK" button for "Timezone Selection" screen. |
467 * | 444 * |
468 * @private | 445 * @private |
469 */ | 446 */ |
470 closeTimezoneSection_: function() { | 447 closeTimezoneSection_: function() { |
471 this.hideAllScreens_(); | 448 this.showScreen_('welcomeScreen'); |
472 this.welcomeScreenShown = true; | |
473 }, | 449 }, |
474 | 450 |
475 /** | 451 /** |
476 * Handle timezone selection. | 452 * Handle timezone selection. |
477 * | 453 * |
478 * @param {!{detail: {!OobeTypes.Timezone}}} event | 454 * @param {!{detail: {!OobeTypes.Timezone}}} event |
479 * @private | 455 * @private |
480 */ | 456 */ |
481 onTimezoneSelected_: function(event) { | 457 onTimezoneSelected_: function(event) { |
482 var item = event.detail; | 458 var item = event.detail; |
483 if (!item) | 459 if (!item) |
484 return; | 460 return; |
485 | 461 |
486 this.screen.onTimezoneSelected_(item.value); | 462 this.screen.onTimezoneSelected_(item.value); |
487 }, | 463 }, |
488 | 464 |
489 /** | 465 /** |
490 * This function formats message for labels. | 466 * This function formats message for labels. |
491 * @param String label i18n string ID. | 467 * @param String label i18n string ID. |
492 * @param String parameter i18n string parameter. | 468 * @param String parameter i18n string parameter. |
493 * @private | 469 * @private |
494 */ | 470 */ |
495 formatMessage_: function(label, parameter) { | 471 formatMessage_: function(label, parameter) { |
496 return loadTimeData.getStringF(label, parameter); | 472 return loadTimeData.getStringF(label, parameter); |
497 }, | 473 }, |
498 }); | 474 }); |
OLD | NEW |