OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 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 Login UI header bar implementation. | 6 * @fileoverview Login UI header bar implementation. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('login', function() { | 9 cr.define('login', function() { |
10 /** | 10 /** |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
42 // button issues a request to move lock screen apps to background, in the | 42 // button issues a request to move lock screen apps to background, in the |
43 // state where account picker is visible). | 43 // state where account picker is visible). |
44 lockScreenAppsState_: LOCK_SCREEN_APPS_STATE.NONE, | 44 lockScreenAppsState_: LOCK_SCREEN_APPS_STATE.NONE, |
45 | 45 |
46 // Whether to show kiosk apps menu. | 46 // Whether to show kiosk apps menu. |
47 hasApps_: false, | 47 hasApps_: false, |
48 | 48 |
49 /** @override */ | 49 /** @override */ |
50 decorate: function() { | 50 decorate: function() { |
51 document.addEventListener('click', this.handleClick_.bind(this)); | 51 document.addEventListener('click', this.handleClick_.bind(this)); |
52 $('shutdown-header-bar-item').addEventListener('click', | 52 $('shutdown-header-bar-item') |
53 this.handleShutdownClick_); | 53 .addEventListener('click', this.handleShutdownClick_); |
54 $('shutdown-button').addEventListener('click', | 54 $('shutdown-button').addEventListener('click', this.handleShutdownClick_); |
55 this.handleShutdownClick_); | 55 $('restart-header-bar-item') |
56 $('restart-header-bar-item').addEventListener('click', | 56 .addEventListener('click', this.handleShutdownClick_); |
57 this.handleShutdownClick_); | 57 $('restart-button').addEventListener('click', this.handleShutdownClick_); |
58 $('restart-button').addEventListener('click', | 58 $('add-user-button').addEventListener('click', this.handleAddUserClick_); |
59 this.handleShutdownClick_); | 59 $('more-settings-button') |
60 $('add-user-button').addEventListener('click', | 60 .addEventListener('click', this.handleMoreSettingsClick_.bind(this)); |
61 this.handleAddUserClick_); | 61 $('guest-user-header-bar-item') |
62 $('more-settings-button').addEventListener('click', | 62 .addEventListener('click', this.handleGuestClick_); |
63 this.handleMoreSettingsClick_.bind(this)); | 63 $('guest-user-button').addEventListener('click', this.handleGuestClick_); |
64 $('guest-user-header-bar-item').addEventListener('click', | 64 $('sign-out-user-button') |
65 this.handleGuestClick_); | 65 .addEventListener('click', this.handleSignoutClick_); |
66 $('guest-user-button').addEventListener('click', | 66 $('cancel-multiple-sign-in-button') |
67 this.handleGuestClick_); | 67 .addEventListener('click', this.handleCancelMultipleSignInClick_); |
68 $('sign-out-user-button').addEventListener('click', | 68 $('unlock-user-button') |
69 this.handleSignoutClick_); | 69 .addEventListener('click', this.handleUnlockUserClick_); |
70 $('cancel-multiple-sign-in-button').addEventListener('click', | 70 this.addSupervisedUserMenu.addEventListener( |
71 this.handleCancelMultipleSignInClick_); | 71 'click', this.handleAddSupervisedUserClick_.bind(this)); |
72 $('unlock-user-button').addEventListener('click', | 72 this.addSupervisedUserMenu.addEventListener( |
73 this.handleUnlockUserClick_); | 73 'keydown', this.handleAddSupervisedUserKeyDown_.bind(this)); |
74 this.addSupervisedUserMenu.addEventListener('click', | |
75 this.handleAddSupervisedUserClick_.bind(this)); | |
76 this.addSupervisedUserMenu.addEventListener('keydown', | |
77 this.handleAddSupervisedUserKeyDown_.bind(this)); | |
78 if (Oobe.getInstance().displayType == DISPLAY_TYPE.LOGIN || | 74 if (Oobe.getInstance().displayType == DISPLAY_TYPE.LOGIN || |
79 Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) { | 75 Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) { |
80 if (Oobe.getInstance().newKioskUI) | 76 if (Oobe.getInstance().newKioskUI) |
81 chrome.send('initializeKioskApps'); | 77 chrome.send('initializeKioskApps'); |
82 else | 78 else |
83 login.AppsMenuButton.decorate($('show-apps-button')); | 79 login.AppsMenuButton.decorate($('show-apps-button')); |
84 } | 80 } |
85 this.updateUI_(); | 81 this.updateUI_(); |
86 }, | 82 }, |
87 | 83 |
(...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
234 } | 230 } |
235 }, | 231 }, |
236 | 232 |
237 /** | 233 /** |
238 * Unlock user button handler. Sends a request to Chrome to show user pods | 234 * Unlock user button handler. Sends a request to Chrome to show user pods |
239 * in foreground. | 235 * in foreground. |
240 * | 236 * |
241 * @private | 237 * @private |
242 */ | 238 */ |
243 handleUnlockUserClick_: function(e) { | 239 handleUnlockUserClick_: function(e) { |
244 chrome.send('setLockScreenAppsState', | 240 chrome.send( |
245 [LOCK_SCREEN_APPS_STATE.BACKGROUND]); | 241 'setLockScreenAppsState', [LOCK_SCREEN_APPS_STATE.BACKGROUND]); |
246 e.preventDefault(); | 242 e.preventDefault(); |
247 }, | 243 }, |
248 | 244 |
249 /** | 245 /** |
250 * If true then "Browse as Guest" button is shown. | 246 * If true then "Browse as Guest" button is shown. |
251 * | 247 * |
252 * @type {boolean} | 248 * @type {boolean} |
253 */ | 249 */ |
254 set showGuestButton(value) { | 250 set showGuestButton(value) { |
255 this.showGuest_ = value; | 251 this.showGuest_ = value; |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
321 * @private | 317 * @private |
322 */ | 318 */ |
323 updateUI_: function() { | 319 updateUI_: function() { |
324 var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN); | 320 var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN); |
325 var enrollmentIsActive = | 321 var enrollmentIsActive = |
326 (this.signinUIState_ == SIGNIN_UI_STATE.ENROLLMENT); | 322 (this.signinUIState_ == SIGNIN_UI_STATE.ENROLLMENT); |
327 var accountPickerIsActive = | 323 var accountPickerIsActive = |
328 (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER); | 324 (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER); |
329 var supervisedUserCreationDialogIsActive = | 325 var supervisedUserCreationDialogIsActive = |
330 (this.signinUIState_ == | 326 (this.signinUIState_ == |
331 SIGNIN_UI_STATE.SUPERVISED_USER_CREATION_FLOW); | 327 SIGNIN_UI_STATE.SUPERVISED_USER_CREATION_FLOW); |
332 var wrongHWIDWarningIsActive = | 328 var wrongHWIDWarningIsActive = |
333 (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING); | 329 (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING); |
334 var isSamlPasswordConfirm = | 330 var isSamlPasswordConfirm = |
335 (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM); | 331 (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM); |
336 var isPasswordChangedUI = | 332 var isPasswordChangedUI = |
337 (this.signinUIState_ == SIGNIN_UI_STATE.PASSWORD_CHANGED); | 333 (this.signinUIState_ == SIGNIN_UI_STATE.PASSWORD_CHANGED); |
338 var isMultiProfilesUI = | 334 var isMultiProfilesUI = |
339 (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING); | 335 (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING); |
340 var isLockScreen = | 336 var isLockScreen = (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK); |
341 (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK); | 337 var errorScreenIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.ERROR); |
342 var errorScreenIsActive = | |
343 (this.signinUIState_ == SIGNIN_UI_STATE.ERROR); | |
344 | 338 |
345 $('add-user-button').hidden = | 339 $('add-user-button').hidden = !accountPickerIsActive || |
346 !accountPickerIsActive || | 340 isMultiProfilesUI || isLockScreen || errorScreenIsActive; |
347 isMultiProfilesUI || | 341 $('more-settings-header-bar-item').hidden = !this.showCreateSupervised_ || |
348 isLockScreen || | 342 gaiaIsActive || isLockScreen || errorScreenIsActive || |
349 errorScreenIsActive; | |
350 $('more-settings-header-bar-item').hidden = | |
351 !this.showCreateSupervised_ || | |
352 gaiaIsActive || | |
353 isLockScreen || | |
354 errorScreenIsActive || | |
355 supervisedUserCreationDialogIsActive; | 343 supervisedUserCreationDialogIsActive; |
356 $('guest-user-header-bar-item').hidden = | 344 $('guest-user-header-bar-item').hidden = !this.showGuest_ || |
357 !this.showGuest_ || | 345 isLockScreen || supervisedUserCreationDialogIsActive || |
358 isLockScreen || | 346 wrongHWIDWarningIsActive || isSamlPasswordConfirm || |
359 supervisedUserCreationDialogIsActive || | 347 isMultiProfilesUI || (gaiaIsActive && $('gaia-signin').closable) || |
360 wrongHWIDWarningIsActive || | |
361 isSamlPasswordConfirm || | |
362 isMultiProfilesUI || | |
363 (gaiaIsActive && $('gaia-signin').closable) || | |
364 (enrollmentIsActive && !$('oauth-enrollment').isAtTheBeginning()) || | 348 (enrollmentIsActive && !$('oauth-enrollment').isAtTheBeginning()) || |
365 (gaiaIsActive && !$('gaia-signin').isAtTheBeginning()); | 349 (gaiaIsActive && !$('gaia-signin').isAtTheBeginning()); |
366 $('restart-header-bar-item').hidden = | 350 $('restart-header-bar-item').hidden = !this.showReboot_ || |
367 !this.showReboot_ || | |
368 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; | 351 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; |
369 $('shutdown-header-bar-item').hidden = | 352 $('shutdown-header-bar-item').hidden = !this.showShutdown_ || |
370 !this.showShutdown_ || | |
371 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; | 353 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; |
372 $('sign-out-user-item').hidden = | 354 $('sign-out-user-item').hidden = !isLockScreen || |
373 !isLockScreen || | |
374 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; | 355 this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND; |
375 $('unlock-user-header-bar-item').hidden = | 356 $('unlock-user-header-bar-item').hidden = !isLockScreen || |
376 !isLockScreen || | |
377 this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND; | 357 this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND; |
378 | 358 |
379 $('add-user-header-bar-item').hidden = $('add-user-button').hidden; | 359 $('add-user-header-bar-item').hidden = $('add-user-button').hidden; |
380 $('apps-header-bar-item').hidden = !this.hasApps_ || | 360 $('apps-header-bar-item').hidden = |
381 (!gaiaIsActive && !accountPickerIsActive); | 361 !this.hasApps_ || (!gaiaIsActive && !accountPickerIsActive); |
382 $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI; | 362 $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI; |
383 | 363 |
384 if (!Oobe.getInstance().newKioskUI) { | 364 if (!Oobe.getInstance().newKioskUI) { |
385 if (!$('apps-header-bar-item').hidden) | 365 if (!$('apps-header-bar-item').hidden) |
386 $('show-apps-button').didShow(); | 366 $('show-apps-button').didShow(); |
387 } | 367 } |
388 | 368 |
389 // Lock screen apps are generally shown maximized - update the header | 369 // Lock screen apps are generally shown maximized - update the header |
390 // bar background opacity so the wallpaper is not visible behind it ( | 370 // bar background opacity so the wallpaper is not visible behind it ( |
391 // since it won't be visible in the rest of UI). | 371 // since it won't be visible in the rest of UI). |
392 this.classList.toggle( | 372 this.classList.toggle( |
393 'full-header-background', | 373 'full-header-background', |
394 this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.NONE); | 374 this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.NONE); |
395 }, | 375 }, |
396 | 376 |
397 /** | 377 /** |
398 * Animates Header bar to hide from the screen. | 378 * Animates Header bar to hide from the screen. |
399 * | 379 * |
400 * @param {function()} callback will be called once animation is finished. | 380 * @param {function()} callback will be called once animation is finished. |
401 */ | 381 */ |
402 animateOut: function(callback) { | 382 animateOut: function(callback) { |
403 var launcher = this; | 383 var launcher = this; |
404 launcher.addEventListener( | 384 launcher.addEventListener('transitionend', function f(e) { |
405 'transitionend', function f(e) { | 385 launcher.removeEventListener('transitionend', f); |
406 launcher.removeEventListener('transitionend', f); | 386 callback(); |
407 callback(); | 387 }); |
408 }); | |
409 // Guard timer for 2 seconds + 200 ms + epsilon. | 388 // Guard timer for 2 seconds + 200 ms + epsilon. |
410 ensureTransitionEndEvent(launcher, 2250); | 389 ensureTransitionEndEvent(launcher, 2250); |
411 | 390 |
412 this.classList.remove('login-header-bar-animate-slow'); | 391 this.classList.remove('login-header-bar-animate-slow'); |
413 this.classList.add('login-header-bar-animate-fast'); | 392 this.classList.add('login-header-bar-animate-fast'); |
414 this.classList.add('login-header-bar-hidden'); | 393 this.classList.add('login-header-bar-hidden'); |
415 }, | 394 }, |
416 | 395 |
417 /** | 396 /** |
418 * Animates Header bar to appear on the screen. | 397 * Animates Header bar to appear on the screen. |
419 * | 398 * |
420 * @param {boolean} fast Whether the animation should complete quickly or | 399 * @param {boolean} fast Whether the animation should complete quickly or |
421 * slowly. | 400 * slowly. |
422 * @param {function()} callback will be called once animation is finished. | 401 * @param {function()} callback will be called once animation is finished. |
423 */ | 402 */ |
424 animateIn: function(fast, callback) { | 403 animateIn: function(fast, callback) { |
425 if (callback) { | 404 if (callback) { |
426 var launcher = this; | 405 var launcher = this; |
427 launcher.addEventListener( | 406 launcher.addEventListener('transitionend', function f(e) { |
428 'transitionend', function f(e) { | 407 launcher.removeEventListener('transitionend', f); |
429 launcher.removeEventListener('transitionend', f); | 408 callback(); |
430 callback(); | 409 }); |
431 }); | |
432 // Guard timer for 2 seconds + 200 ms + epsilon. | 410 // Guard timer for 2 seconds + 200 ms + epsilon. |
433 ensureTransitionEndEvent(launcher, 2250); | 411 ensureTransitionEndEvent(launcher, 2250); |
434 } | 412 } |
435 | 413 |
436 if (fast) { | 414 if (fast) { |
437 this.classList.remove('login-header-bar-animate-slow'); | 415 this.classList.remove('login-header-bar-animate-slow'); |
438 this.classList.add('login-header-bar-animate-fast'); | 416 this.classList.add('login-header-bar-animate-fast'); |
439 } else { | 417 } else { |
440 this.classList.remove('login-header-bar-animate-fast'); | 418 this.classList.remove('login-header-bar-animate-fast'); |
441 this.classList.add('login-header-bar-animate-slow'); | 419 this.classList.add('login-header-bar-animate-slow'); |
(...skipping 10 matching lines...) Expand all Loading... |
452 $('login-header-bar').animateOut(callback); | 430 $('login-header-bar').animateOut(callback); |
453 }; | 431 }; |
454 | 432 |
455 /** | 433 /** |
456 * Convenience wrapper of animateIn. | 434 * Convenience wrapper of animateIn. |
457 */ | 435 */ |
458 HeaderBar.animateIn = function(fast, callback) { | 436 HeaderBar.animateIn = function(fast, callback) { |
459 $('login-header-bar').animateIn(fast, callback); | 437 $('login-header-bar').animateIn(fast, callback); |
460 }; | 438 }; |
461 | 439 |
462 return { | 440 return {HeaderBar: HeaderBar}; |
463 HeaderBar: HeaderBar | |
464 }; | |
465 }); | 441 }); |
OLD | NEW |