• 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   *
13   * @constructor
14   * @extends {HTMLDivElement}
15   */
16  var HeaderBar = cr.ui.define('div');
17
18  HeaderBar.prototype = {
19    __proto__: HTMLDivElement.prototype,
20
21    // Whether guest button should be shown when header bar is in normal mode.
22    showGuest_: false,
23
24    // Current UI state of the sign-in screen.
25    signinUIState_: SIGNIN_UI_STATE.HIDDEN,
26
27    // Whether to show kiosk apps menu.
28    hasApps_: false,
29
30    /** @override */
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');
52        else
53          login.AppsMenuButton.decorate($('show-apps-button'));
54      }
55      this.updateUI_();
56    },
57
58    /**
59     * Tab index value for all button elements.
60     *
61     * @type {number}
62     */
63    set buttonsTabIndex(tabIndex) {
64      var buttons = this.getElementsByTagName('button');
65      for (var i = 0, button; button = buttons[i]; ++i) {
66        button.tabIndex = tabIndex;
67      }
68    },
69
70    /**
71     * Disables the header bar and all of its elements.
72     *
73     * @type {boolean}
74     */
75    set disabled(value) {
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;
80    },
81
82    /**
83     * Add user button click handler.
84     *
85     * @private
86     */
87    handleAddUserClick_: function(e) {
88      Oobe.showSigninUI();
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
92      e.stopPropagation();
93    },
94
95    /**
96     * Cancel add user button click handler.
97     *
98     * @private
99     */
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();
105        return;
106      }
107
108      $('pod-row').loadLastWallpaper();
109
110      Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
111      Oobe.resetSigninUI(true);
112    },
113
114    /**
115     * Guest button click handler.
116     *
117     * @private
118     */
119    handleGuestClick_: function(e) {
120      Oobe.disableSigninUI();
121      chrome.send('launchIncognito');
122      e.stopPropagation();
123    },
124
125    /**
126     * Sign out button click handler.
127     *
128     * @private
129     */
130    handleSignoutClick_: function(e) {
131      this.disabled = true;
132      chrome.send('signOutUser');
133      e.stopPropagation();
134    },
135
136    /**
137     * Shutdown button click handler.
138     *
139     * @private
140     */
141    handleShutdownClick_: function(e) {
142      chrome.send('shutdownSystem');
143      e.stopPropagation();
144    },
145
146    /**
147     * Cancel user adding button handler.
148     *
149     * @private
150     */
151    handleCancelMultipleSignInClick_: function(e) {
152      chrome.send('cancelUserAdding');
153      e.stopPropagation();
154    },
155
156    /**
157     * If true then "Browse as Guest" button is shown.
158     *
159     * @type {boolean}
160     */
161    set showGuestButton(value) {
162      this.showGuest_ = value;
163      this.updateUI_();
164    },
165
166    /**
167     * Current header bar UI / sign in state.
168     *
169     * @type {number} state Current state of the sign-in screen (see
170     *       SIGNIN_UI_STATE).
171     */
172    get signinUIState() {
173      return this.signinUIState_;
174    },
175    set signinUIState(state) {
176      this.signinUIState_ = state;
177      this.updateUI_();
178    },
179
180    /**
181     * Whether the Cancel button is enabled during Gaia sign-in.
182     *
183     * @type {boolean}
184     */
185    set allowCancel(value) {
186      this.allowCancel_ = value;
187      this.updateUI_();
188    },
189
190    /**
191     * Update whether there are kiosk apps.
192     *
193     * @type {boolean}
194     */
195    set hasApps(value) {
196      this.hasApps_ = value;
197      this.updateUI_();
198    },
199
200    /**
201     * Updates visibility state of action buttons.
202     *
203     * @private
204     */
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);
217      var isLockScreen =
218          (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK);
219
220      $('add-user-button').hidden =
221          !accountPickerIsActive || isMultiProfilesUI || isLockScreen;
222      $('cancel-add-user-button').hidden = accountPickerIsActive ||
223          !this.allowCancel_ ||
224          wrongHWIDWarningIsActive ||
225          isMultiProfilesUI;
226      $('guest-user-header-bar-item').hidden = gaiaIsActive ||
227          managedUserCreationDialogIsActive ||
228          !this.showGuest_ ||
229          wrongHWIDWarningIsActive ||
230          isSamlPasswordConfirm ||
231          isMultiProfilesUI;
232      $('sign-out-user-item').hidden = !isLockScreen;
233
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;
239
240      if (!Oobe.getInstance().newKioskUI) {
241        if (!$('apps-header-bar-item').hidden)
242          $('show-apps-button').didShow();
243      }
244    },
245
246    /**
247     * Animates Header bar to hide from the screen.
248     *
249     * @param {function()} callback will be called once animation is finished.
250     */
251    animateOut: function(callback) {
252      var launcher = this;
253      launcher.addEventListener(
254          'webkitTransitionEnd', function f(e) {
255            launcher.removeEventListener('webkitTransitionEnd', f);
256            callback();
257          });
258      // Guard timer for 2 seconds + 200 ms + epsilon.
259      ensureTransitionEndEvent(launcher, 2250);
260
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');
264    },
265
266    /**
267     * Animates Header bar to slowly appear on the screen.
268     *
269     * @param {function()} callback will be called once animation is finished.
270     */
271    animateIn: function(callback) {
272      if (callback) {
273        var launcher = this;
274        launcher.addEventListener(
275            'webkitTransitionEnd', function f(e) {
276              launcher.removeEventListener('webkitTransitionEnd', f);
277              callback();
278            });
279        // Guard timer for 2 seconds + 200 ms + epsilon.
280        ensureTransitionEndEvent(launcher, 2250);
281      }
282
283      if (Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) {
284        this.classList.remove('login-header-bar-animate-slow');
285        this.classList.add('login-header-bar-animate-fast');
286      } else {
287        this.classList.remove('login-header-bar-animate-fast');
288        this.classList.add('login-header-bar-animate-slow');
289      }
290
291      this.classList.remove('login-header-bar-hidden');
292    },
293  };
294
295  /**
296   * Convenience wrapper of animateOut.
297   */
298  HeaderBar.animateOut = function(callback) {
299    $('login-header-bar').animateOut(callback);
300  };
301
302  /**
303   * Convenience wrapper of animateIn.
304   */
305  HeaderBar.animateIn = function(callback) {
306    $('login-header-bar').animateIn(callback);
307  }
308
309  return {
310    HeaderBar: HeaderBar
311  };
312});
313