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