src/chrome/browser/resources/chromeos/login/header_bar.js

   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
   9 cr.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 });