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     // Whether new Gaia flow is active.
  25     isNewGaiaFlow_: false,
  26
  27     // Whether the reboot button should be shown the when header bar is in
  28     // normal mode.
  29     showReboot_: false,
  30
  31     // Whether the shutdown button should be shown when the header bar is in
  32     // normal mode.
  33     showShutdown_: true,
  34
  35     // Whether the create supervised user button should be shown when the header
  36     // bar is in normal mode. It will be shown in "More settings" menu.
  37     showCreateSupervised_: false,
  38
  39     // Current UI state of the sign-in screen.
  40     signinUIState_: SIGNIN_UI_STATE.HIDDEN,
  41
  42     // Whether to show kiosk apps menu.
  43     hasApps_: false,
  44
  45     /** @override */
  46     decorate: function() {
  47       document.addEventListener('click', this.handleClick_.bind(this));
  48       $('shutdown-header-bar-item').addEventListener('click',
  49           this.handleShutdownClick_);
  50       $('shutdown-button').addEventListener('click',
  51           this.handleShutdownClick_);
  52       $('restart-header-bar-item').addEventListener('click',
  53           this.handleShutdownClick_);
  54       $('restart-button').addEventListener('click',
  55           this.handleShutdownClick_);
  56       $('add-user-button').addEventListener('click',
  57           this.handleAddUserClick_);
  58       $('more-settings-button').addEventListener('click',
  59           this.handleMoreSettingsClick_.bind(this));
  60       $('cancel-add-user-button').addEventListener('click',
  61           this.handleCancelAddUserClick_);
  62       $('guest-user-header-bar-item').addEventListener('click',
  63           this.handleGuestClick_);
  64       $('guest-user-button').addEventListener('click',
  65           this.handleGuestClick_);
  66       $('sign-out-user-button').addEventListener('click',
  67           this.handleSignoutClick_);
  68       $('cancel-multiple-sign-in-button').addEventListener('click',
  69           this.handleCancelMultipleSignInClick_);
  70       $('cancel-consumer-management-enrollment-button').addEventListener(
  71           'click',
  72           this.handleCancelConsumerManagementEnrollmentClick_);
  73       this.addSupervisedUserMenu.addEventListener('click',
  74           this.handleAddSupervisedUserClick_.bind(this));
  75       if (Oobe.getInstance().displayType == DISPLAY_TYPE.LOGIN ||
  76           Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) {
  77         if (Oobe.getInstance().newKioskUI)
  78           chrome.send('initializeKioskApps');
  79         else
  80           login.AppsMenuButton.decorate($('show-apps-button'));
  81       }
  82       this.updateUI_();
  83     },
  84
  85     /**
  86      * Tab index value for all button elements.
  87      *
  88      * @type {number}
  89      */
  90     set buttonsTabIndex(tabIndex) {
  91       var buttons = this.getElementsByTagName('button');
  92       for (var i = 0, button; button = buttons[i]; ++i) {
  93         button.tabIndex = tabIndex;
  94       }
  95     },
  96
  97     /**
  98      * Disables the header bar and all of its elements.
  99      *
 100      * @type {boolean}
 101      */
 102     set disabled(value) {
 103       var buttons = this.getElementsByTagName('button');
 104       for (var i = 0, button; button = buttons[i]; ++i)
 105         if (!button.classList.contains('button-restricted'))
 106           button.disabled = value;
 107     },
 108
 109     get getMoreSettingsMenu() {
 110       return $('more-settings-header-bar-item');
 111     },
 112
 113     get addSupervisedUserMenu() {
 114       return this.querySelector('.add-supervised-user-menu');
 115     },
 116
 117     /**
 118      * Whether action box button is in active state.
 119      * @type {boolean}
 120      */
 121     get isMoreSettingsActive() {
 122       return this.getMoreSettingsMenu.classList.contains('active');
 123     },
 124     set isMoreSettingsActive(active) {
 125       if (active == this.isMoreSettingsActive)
 126         return;
 127       if (active) {
 128         this.getMoreSettingsMenu.classList.add('active');
 129       } else {
 130         this.getMoreSettingsMenu.classList.remove('active');
 131       }
 132     },
 133
 134
 135     /**
 136      * Add user button click handler.
 137      *
 138      * @private
 139      */
 140     handleAddUserClick_: function(e) {
 141       Oobe.showSigninUI();
 142       // Prevent further propagation of click event. Otherwise, the click event
 143       // handler of document object will set wallpaper to user's wallpaper when
 144       // there is only one existing user. See http://crbug.com/166477
 145       e.stopPropagation();
 146     },
 147
 148     handleMoreSettingsClick_: function(e) {
 149       this.isMoreSettingsActive = !this.isMoreSettingsActive;
 150       this.addSupervisedUserMenu.focus();
 151       e.stopPropagation();
 152     },
 153
 154     handleClick_: function(e) {
 155       this.isMoreSettingsActive = false;
 156     },
 157
 158     handleAddSupervisedUserClick_: function(e) {
 159       chrome.send('showSupervisedUserCreationScreen');
 160       e.preventDefault();
 161     },
 162
 163     /**
 164      * Cancel add user button click handler.
 165      *
 166      * @private
 167      */
 168     handleCancelAddUserClick_: function(e) {
 169       // Let screen handle cancel itself if that is capable of doing so.
 170       if (Oobe.getInstance().currentScreen &&
 171           Oobe.getInstance().currentScreen.cancel) {
 172         Oobe.getInstance().currentScreen.cancel();
 173         return;
 174       }
 175
 176       $('pod-row').loadLastWallpaper();
 177
 178       Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
 179       Oobe.resetSigninUI(true);
 180     },
 181
 182     /**
 183      * Guest button click handler.
 184      *
 185      * @private
 186      */
 187     handleGuestClick_: function(e) {
 188       Oobe.disableSigninUI();
 189       chrome.send('launchIncognito');
 190       e.stopPropagation();
 191     },
 192
 193     /**
 194      * Sign out button click handler.
 195      *
 196      * @private
 197      */
 198     handleSignoutClick_: function(e) {
 199       this.disabled = true;
 200       chrome.send('signOutUser');
 201       e.stopPropagation();
 202     },
 203
 204     /**
 205      * Shutdown button click handler.
 206      *
 207      * @private
 208      */
 209     handleShutdownClick_: function(e) {
 210       chrome.send('shutdownSystem');
 211       e.stopPropagation();
 212     },
 213
 214     /**
 215      * Cancel user adding button handler.
 216      *
 217      * @private
 218      */
 219     handleCancelMultipleSignInClick_: function(e) {
 220       chrome.send('cancelUserAdding');
 221       e.stopPropagation();
 222     },
 223
 224     /**
 225      * Cancel consumer management enrollment button handler.
 226      *
 227      * @private
 228      */
 229     handleCancelConsumerManagementEnrollmentClick_: function(e) {
 230       chrome.send('cancelConsumerManagementEnrollment');
 231       e.stopPropagation();
 232     },
 233
 234     /**
 235      * If true then "Browse as Guest" button is shown.
 236      *
 237      * @type {boolean}
 238      */
 239     set showGuestButton(value) {
 240       this.showGuest_ = value;
 241       this.updateUI_();
 242     },
 243
 244     set newGaiaFlow(value) {
 245       this.isNewGaiaFlow_ = value;
 246       this.updateUI_();
 247     },
 248
 249     set showCreateSupervisedButton(value) {
 250       this.showCreateSupervised_ = value;
 251       this.updateUI_();
 252     },
 253
 254     /**
 255      * If true the "Restart" button is shown.
 256      *
 257      * @type {boolean}
 258      */
 259     set showRebootButton(value) {
 260       this.showReboot_ = value;
 261       this.updateUI_();
 262     },
 263
 264     /**
 265      * If true the "Shutdown" button is shown.
 266      *
 267      * @type {boolean}
 268      */
 269     set showShutdownButton(value) {
 270       this.showShutdown_ = value;
 271       this.updateUI_();
 272     },
 273
 274     /**
 275      * Current header bar UI / sign in state.
 276      *
 277      * @type {number} state Current state of the sign-in screen (see
 278      *       SIGNIN_UI_STATE).
 279      */
 280     get signinUIState() {
 281       return this.signinUIState_;
 282     },
 283     set signinUIState(state) {
 284       this.signinUIState_ = state;
 285       this.updateUI_();
 286     },
 287
 288     /**
 289      * Whether the Cancel button is enabled during Gaia sign-in.
 290      *
 291      * @type {boolean}
 292      */
 293     set allowCancel(value) {
 294       this.allowCancel_ = value;
 295       this.updateUI_();
 296     },
 297
 298     /**
 299      * Update whether there are kiosk apps.
 300      *
 301      * @type {boolean}
 302      */
 303     set hasApps(value) {
 304       this.hasApps_ = value;
 305       this.updateUI_();
 306     },
 307
 308     /**
 309      * Updates visibility state of action buttons.
 310      *
 311      * @private
 312      */
 313     updateUI_: function() {
 314       var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN);
 315       var accountPickerIsActive =
 316           (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER);
 317       var supervisedUserCreationDialogIsActive =
 318           (this.signinUIState_ ==
 319                SIGNIN_UI_STATE.SUPERVISED_USER_CREATION_FLOW);
 320       var wrongHWIDWarningIsActive =
 321           (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING);
 322       var isSamlPasswordConfirm =
 323           (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM);
 324       var isEnrollingConsumerManagement = (this.signinUIState_ ==
 325           SIGNIN_UI_STATE.CONSUMER_MANAGEMENT_ENROLLMENT);
 326       var isMultiProfilesUI =
 327           (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
 328       var isLockScreen =
 329           (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK);
 330
 331       $('add-user-button').hidden =
 332           !accountPickerIsActive || isMultiProfilesUI || isLockScreen;
 333       $('more-settings-header-bar-item').hidden = !this.isNewGaiaFlow_ ||
 334           !this.showCreateSupervised_ ||
 335           !accountPickerIsActive;
 336       $('cancel-add-user-button').hidden =
 337           (gaiaIsActive && this.isNewGaiaFlow_) ||
 338           accountPickerIsActive ||
 339           !this.allowCancel_ ||
 340           wrongHWIDWarningIsActive ||
 341           isMultiProfilesUI;
 342       $('guest-user-header-bar-item').hidden =
 343           (gaiaIsActive && !this.isNewGaiaFlow_) ||
 344           supervisedUserCreationDialogIsActive ||
 345           !this.showGuest_ ||
 346           wrongHWIDWarningIsActive ||
 347           isSamlPasswordConfirm ||
 348           isMultiProfilesUI;
 349       $('restart-header-bar-item').hidden = !this.showReboot_;
 350       $('shutdown-header-bar-item').hidden = !this.showShutdown_;
 351       $('sign-out-user-item').hidden = !isLockScreen;
 352
 353       $('add-user-header-bar-item').hidden =
 354           $('add-user-button').hidden && $('cancel-add-user-button').hidden;
 355       $('apps-header-bar-item').hidden = !this.hasApps_ ||
 356           (!gaiaIsActive && !accountPickerIsActive);
 357       $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI;
 358       $('cancel-consumer-management-enrollment').hidden =
 359           !isEnrollingConsumerManagement;
 360
 361       if (!Oobe.getInstance().newKioskUI) {
 362         if (!$('apps-header-bar-item').hidden)
 363           $('show-apps-button').didShow();
 364       }
 365     },
 366
 367     /**
 368      * Animates Header bar to hide from the screen.
 369      *
 370      * @param {function()} callback will be called once animation is finished.
 371      */
 372     animateOut: function(callback) {
 373       var launcher = this;
 374       launcher.addEventListener(
 375           'webkitTransitionEnd', function f(e) {
 376             launcher.removeEventListener('webkitTransitionEnd', f);
 377             callback();
 378           });
 379       // Guard timer for 2 seconds + 200 ms + epsilon.
 380       ensureTransitionEndEvent(launcher, 2250);
 381
 382       this.classList.remove('login-header-bar-animate-slow');
 383       this.classList.add('login-header-bar-animate-fast');
 384       this.classList.add('login-header-bar-hidden');
 385     },
 386
 387     /**
 388      * Animates Header bar to appear on the screen.
 389      *
 390      * @param {boolean} fast Whether the animation should complete quickly or
 391      *     slowly.
 392      * @param {function()} callback will be called once animation is finished.
 393      */
 394     animateIn: function(fast, callback) {
 395       if (callback) {
 396         var launcher = this;
 397         launcher.addEventListener(
 398             'webkitTransitionEnd', function f(e) {
 399               launcher.removeEventListener('webkitTransitionEnd', f);
 400               callback();
 401             });
 402         // Guard timer for 2 seconds + 200 ms + epsilon.
 403         ensureTransitionEndEvent(launcher, 2250);
 404       }
 405
 406       if (fast) {
 407         this.classList.remove('login-header-bar-animate-slow');
 408         this.classList.add('login-header-bar-animate-fast');
 409       } else {
 410         this.classList.remove('login-header-bar-animate-fast');
 411         this.classList.add('login-header-bar-animate-slow');
 412       }
 413
 414       this.classList.remove('login-header-bar-hidden');
 415     },
 416   };
 417
 418   /**
 419    * Convenience wrapper of animateOut.
 420    */
 421   HeaderBar.animateOut = function(callback) {
 422     $('login-header-bar').animateOut(callback);
 423   };
 424
 425   /**
 426    * Convenience wrapper of animateIn.
 427    */
 428   HeaderBar.animateIn = function(fast, callback) {
 429     $('login-header-bar').animateIn(fast, callback);
 430   };
 431
 432   return {
 433     HeaderBar: HeaderBar
 434   };
 435 });