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