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    * @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 });