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 Login UI header bar implementation.
7 */
8
9cr.define('login', function() {
10  /**
11   * Creates a header bar element.
12   * @constructor
13   * @extends {HTMLDivElement}
14   */
15  var HeaderBar = cr.ui.define('div');
16
17  HeaderBar.prototype = {
18    __proto__: HTMLDivElement.prototype,
19
20    // Whether guest button should be shown when header bar is in normal mode.
21    showGuest_: false,
22
23    // Current UI state of the sign-in screen.
24    signinUIState_: SIGNIN_UI_STATE.HIDDEN,
25
26    // Whether to show kiosk apps menu.
27    hasApps_: false,
28
29    /** @override */
30    decorate: function() {
31      $('shutdown-header-bar-item').addEventListener('click',
32          this.handleShutdownClick_);
33      $('shutdown-button').addEventListener('click',
34          this.handleShutdownClick_);
35      $('add-user-button').addEventListener('click',
36          this.handleAddUserClick_);
37      $('cancel-add-user-button').addEventListener('click',
38          this.handleCancelAddUserClick_);
39      $('guest-user-header-bar-item').addEventListener('click',
40          this.handleGuestClick_);
41      $('guest-user-button').addEventListener('click',
42          this.handleGuestClick_);
43      $('sign-out-user-button').addEventListener('click',
44          this.handleSignoutClick_);
45      $('cancel-multiple-sign-in-button').addEventListener('click',
46          this.handleCancelMultipleSignInClick_);
47      if (document.documentElement.getAttribute('screen') == 'login')
48        login.AppsMenuButton.decorate($('show-apps-button'));
49    },
50
51    /**
52     * Tab index value for all button elements.
53     * @type {number}
54     */
55    set buttonsTabIndex(tabIndex) {
56      var buttons = this.getElementsByTagName('button');
57      for (var i = 0, button; button = buttons[i]; ++i) {
58        button.tabIndex = tabIndex;
59      }
60    },
61
62    /**
63     * Disables the header bar and all of its elements.
64     * @type {boolean}
65     */
66    set disabled(value) {
67      var buttons = this.getElementsByTagName('button');
68      for (var i = 0, button; button = buttons[i]; ++i)
69        if (!button.classList.contains('button-restricted'))
70          button.disabled = value;
71    },
72
73    /**
74     * Add user button click handler.
75     * @private
76     */
77    handleAddUserClick_: function(e) {
78      Oobe.showSigninUI();
79      // Prevent further propagation of click event. Otherwise, the click event
80      // handler of document object will set wallpaper to user's wallpaper when
81      // there is only one existing user. See http://crbug.com/166477
82      e.stopPropagation();
83    },
84
85    /**
86     * Cancel add user button click handler.
87     * @private
88     */
89    handleCancelAddUserClick_: function(e) {
90      // Let screen handle cancel itself if that is capable of doing so.
91      if (Oobe.getInstance().currentScreen &&
92          Oobe.getInstance().currentScreen.cancel) {
93        Oobe.getInstance().currentScreen.cancel();
94        return;
95      }
96
97      $('pod-row').loadLastWallpaper();
98
99      Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
100      Oobe.resetSigninUI(true);
101    },
102
103    /**
104     * Guest button click handler.
105     * @private
106     */
107    handleGuestClick_: function(e) {
108      Oobe.disableSigninUI();
109      chrome.send('launchIncognito');
110      e.stopPropagation();
111    },
112
113    /**
114     * Sign out button click handler.
115     * @private
116     */
117    handleSignoutClick_: function(e) {
118      this.disabled = true;
119      chrome.send('signOutUser');
120      e.stopPropagation();
121    },
122
123    /**
124     * Shutdown button click handler.
125     * @private
126     */
127    handleShutdownClick_: function(e) {
128      chrome.send('shutdownSystem');
129      e.stopPropagation();
130    },
131
132    /**
133     * Cancel user adding button handler.
134     * @private
135     */
136    handleCancelMultipleSignInClick_: function(e) {
137      chrome.send('cancelUserAdding');
138      e.stopPropagation();
139    },
140
141    /**
142     * If true then "Browse as Guest" button is shown.
143     * @type {boolean}
144     */
145    set showGuestButton(value) {
146      this.showGuest_ = value;
147      this.updateUI_();
148    },
149
150    /**
151     * Update current header bar UI.
152     * @type {number} state Current state of the sign-in screen
153     *                      (see SIGNIN_UI_STATE).
154     */
155    set signinUIState(state) {
156      this.signinUIState_ = state;
157      this.updateUI_();
158    },
159
160    /**
161     * Whether the Cancel button is enabled during Gaia sign-in.
162     * @type {boolean}
163     */
164    set allowCancel(value) {
165      this.allowCancel_ = value;
166      this.updateUI_();
167    },
168
169    /**
170     * Update whether there are kiosk apps.
171     * @type {boolean}
172     */
173    set hasApps(value) {
174      this.hasApps_ = value;
175      this.updateUI_();
176    },
177
178    /**
179     * Updates visibility state of action buttons.
180     * @private
181     */
182    updateUI_: function() {
183      var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN);
184      var accountPickerIsActive =
185          (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER);
186      var managedUserCreationDialogIsActive =
187          (this.signinUIState_ == SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW);
188      var wrongHWIDWarningIsActive =
189          (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING);
190      var isMultiProfilesUI = Oobe.getInstance().isSignInToAddScreen();
191
192      $('add-user-button').hidden = !accountPickerIsActive || isMultiProfilesUI;
193      $('cancel-add-user-button').hidden = accountPickerIsActive ||
194          !this.allowCancel_ ||
195          wrongHWIDWarningIsActive ||
196          isMultiProfilesUI;
197      $('guest-user-header-bar-item').hidden = gaiaIsActive ||
198          managedUserCreationDialogIsActive ||
199          !this.showGuest_ ||
200          wrongHWIDWarningIsActive ||
201          isMultiProfilesUI;
202      $('add-user-header-bar-item').hidden =
203          $('add-user-button').hidden && $('cancel-add-user-button').hidden;
204      $('apps-header-bar-item').hidden = !this.hasApps_ ||
205          (!gaiaIsActive && !accountPickerIsActive);
206      $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI;
207
208      if (!$('apps-header-bar-item').hidden)
209        $('show-apps-button').didShow();
210    },
211
212    /**
213     * Animates Header bar to hide from the screen.
214     * @param {function()} callback will be called once animation is finished.
215     */
216    animateOut: function(callback) {
217      var launcher = this;
218      launcher.addEventListener(
219          'webkitTransitionEnd', function f(e) {
220            launcher.removeEventListener('webkitTransitionEnd', f);
221            callback();
222          });
223      this.classList.remove('login-header-bar-animate-slow');
224      this.classList.add('login-header-bar-animate-fast');
225      this.classList.add('login-header-bar-hidden');
226    },
227
228    /**
229     * Animates Header bar to slowly appear on the screen.
230     */
231    animateIn: function() {
232      this.classList.remove('login-header-bar-animate-fast');
233      this.classList.add('login-header-bar-animate-slow');
234      this.classList.remove('login-header-bar-hidden');
235    },
236  };
237
238  /**
239   * Convenience wrapper of animateOut.
240   */
241  HeaderBar.animateOut = function(callback) {
242    $('login-header-bar').animateOut(callback);
243  };
244
245  /**
246   * Convenience wrapper of animateIn.
247   */
248  HeaderBar.animateIn = function() {
249    $('login-header-bar').animateIn();
250  }
251
252  return {
253    HeaderBar: HeaderBar
254  };
255});
256