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.
6 * @fileoverview Login UI header bar implementation.
9 cr.define('login', function() {
11 * Creates a header bar element.
14 * @extends {HTMLDivElement}
16 var HeaderBar = cr.ui.define('div');
18 HeaderBar.prototype = {
19 __proto__: HTMLDivElement.prototype,
21 // Whether guest button should be shown when header bar is in normal mode.
24 // Current UI state of the sign-in screen.
25 signinUIState_: SIGNIN_UI_STATE.HIDDEN,
27 // Whether to show kiosk apps menu.
31 decorate: function() {
32 $('shutdown-header-bar-item').addEventListener('click',
33 this.handleShutdownClick_);
34 $('shutdown-button').addEventListener('click',
35 this.handleShutdownClick_);
36 $('add-user-button').addEventListener('click',
37 this.handleAddUserClick_);
38 $('cancel-add-user-button').addEventListener('click',
39 this.handleCancelAddUserClick_);
40 $('guest-user-header-bar-item').addEventListener('click',
41 this.handleGuestClick_);
42 $('guest-user-button').addEventListener('click',
43 this.handleGuestClick_);
44 $('sign-out-user-button').addEventListener('click',
45 this.handleSignoutClick_);
46 $('cancel-multiple-sign-in-button').addEventListener('click',
47 this.handleCancelMultipleSignInClick_);
48 if (Oobe.getInstance().displayType == DISPLAY_TYPE.LOGIN ||
49 Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) {
50 if (Oobe.getInstance().newKioskUI)
51 chrome.send('initializeKioskApps');
53 login.AppsMenuButton.decorate($('show-apps-button'));
59 * Tab index value for all button elements.
63 set buttonsTabIndex(tabIndex) {
64 var buttons = this.getElementsByTagName('button');
65 for (var i = 0, button; button = buttons[i]; ++i) {
66 button.tabIndex = tabIndex;
71 * Disables the header bar and all of its elements.
76 var buttons = this.getElementsByTagName('button');
77 for (var i = 0, button; button = buttons[i]; ++i)
78 if (!button.classList.contains('button-restricted'))
79 button.disabled = value;
83 * Add user button click handler.
87 handleAddUserClick_: function(e) {
89 // Prevent further propagation of click event. Otherwise, the click event
90 // handler of document object will set wallpaper to user's wallpaper when
91 // there is only one existing user. See http://crbug.com/166477
96 * Cancel add user button click handler.
100 handleCancelAddUserClick_: function(e) {
101 // Let screen handle cancel itself if that is capable of doing so.
102 if (Oobe.getInstance().currentScreen &&
103 Oobe.getInstance().currentScreen.cancel) {
104 Oobe.getInstance().currentScreen.cancel();
108 $('pod-row').loadLastWallpaper();
110 Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
111 Oobe.resetSigninUI(true);
115 * Guest button click handler.
119 handleGuestClick_: function(e) {
120 Oobe.disableSigninUI();
121 chrome.send('launchIncognito');
126 * Sign out button click handler.
130 handleSignoutClick_: function(e) {
131 this.disabled = true;
132 chrome.send('signOutUser');
137 * Shutdown button click handler.
141 handleShutdownClick_: function(e) {
142 chrome.send('shutdownSystem');
147 * Cancel user adding button handler.
151 handleCancelMultipleSignInClick_: function(e) {
152 chrome.send('cancelUserAdding');
157 * If true then "Browse as Guest" button is shown.
161 set showGuestButton(value) {
162 this.showGuest_ = value;
167 * Current header bar UI / sign in state.
169 * @type {number} state Current state of the sign-in screen (see
172 get signinUIState() {
173 return this.signinUIState_;
175 set signinUIState(state) {
176 this.signinUIState_ = state;
181 * Whether the Cancel button is enabled during Gaia sign-in.
185 set allowCancel(value) {
186 this.allowCancel_ = value;
191 * Update whether there are kiosk apps.
196 this.hasApps_ = value;
201 * Updates visibility state of action buttons.
205 updateUI_: function() {
206 var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN);
207 var accountPickerIsActive =
208 (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER);
209 var managedUserCreationDialogIsActive =
210 (this.signinUIState_ == SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW);
211 var wrongHWIDWarningIsActive =
212 (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING);
213 var isSamlPasswordConfirm =
214 (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM);
215 var isMultiProfilesUI =
216 (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
218 (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK);
220 $('add-user-button').hidden =
221 !accountPickerIsActive || isMultiProfilesUI || isLockScreen;
222 $('cancel-add-user-button').hidden = accountPickerIsActive ||
223 !this.allowCancel_ ||
224 wrongHWIDWarningIsActive ||
226 $('guest-user-header-bar-item').hidden = gaiaIsActive ||
227 managedUserCreationDialogIsActive ||
229 wrongHWIDWarningIsActive ||
230 isSamlPasswordConfirm ||
232 $('sign-out-user-item').hidden = !isLockScreen;
234 $('add-user-header-bar-item').hidden =
235 $('add-user-button').hidden && $('cancel-add-user-button').hidden;
236 $('apps-header-bar-item').hidden = !this.hasApps_ ||
237 (!gaiaIsActive && !accountPickerIsActive);
238 $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI;
240 if (!Oobe.getInstance().newKioskUI) {
241 if (!$('apps-header-bar-item').hidden)
242 $('show-apps-button').didShow();
247 * Animates Header bar to hide from the screen.
249 * @param {function()} callback will be called once animation is finished.
251 animateOut: function(callback) {
253 launcher.addEventListener(
254 'webkitTransitionEnd', function f(e) {
255 launcher.removeEventListener('webkitTransitionEnd', f);
258 // Guard timer for 2 seconds + 200 ms + epsilon.
259 ensureTransitionEndEvent(launcher, 2250);
261 this.classList.remove('login-header-bar-animate-slow');
262 this.classList.add('login-header-bar-animate-fast');
263 this.classList.add('login-header-bar-hidden');
267 * Animates Header bar to slowly appear on the screen.
269 animateIn: function() {
270 this.classList.remove('login-header-bar-animate-fast');
271 this.classList.add('login-header-bar-animate-slow');
272 this.classList.remove('login-header-bar-hidden');
277 * Convenience wrapper of animateOut.
279 HeaderBar.animateOut = function(callback) {
280 $('login-header-bar').animateOut(callback);
284 * Convenience wrapper of animateIn.
286 HeaderBar.animateIn = function() {
287 $('login-header-bar').animateIn();