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       Oobe.showUserPods();
 177     },
 178
 179     /**
 180      * Guest button click handler.
 181      *
 182      * @private
 183      */
 184     handleGuestClick_: function(e) {
 185       Oobe.disableSigninUI();
 186       chrome.send('launchIncognito');
 187       e.stopPropagation();
 188     },
 189
 190     /**
 191      * Sign out button click handler.
 192      *
 193      * @private
 194      */
 195     handleSignoutClick_: function(e) {
 196       this.disabled = true;
 197       chrome.send('signOutUser');
 198       e.stopPropagation();
 199     },
 200
 201     /**
 202      * Shutdown button click handler.
 203      *
 204      * @private
 205      */
 206     handleShutdownClick_: function(e) {
 207       chrome.send('shutdownSystem');
 208       e.stopPropagation();
 209     },
 210
 211     /**
 212      * Cancel user adding button handler.
 213      *
 214      * @private
 215      */
 216     handleCancelMultipleSignInClick_: function(e) {
 217       chrome.send('cancelUserAdding');
 218       e.stopPropagation();
 219     },
 220
 221     /**
 222      * Cancel consumer management enrollment button handler.
 223      *
 224      * @private
 225      */
 226     handleCancelConsumerManagementEnrollmentClick_: function(e) {
 227       chrome.send('cancelConsumerManagementEnrollment');
 228       e.stopPropagation();
 229     },
 230
 231     /**
 232      * If true then "Browse as Guest" button is shown.
 233      *
 234      * @type {boolean}
 235      */
 236     set showGuestButton(value) {
 237       this.showGuest_ = value;
 238       this.updateUI_();
 239     },
 240
 241     set newGaiaFlow(value) {
 242       this.isNewGaiaFlow_ = value;
 243       this.updateUI_();
 244     },
 245
 246     set showCreateSupervisedButton(value) {
 247       this.showCreateSupervised_ = value;
 248       this.updateUI_();
 249     },
 250
 251     /**
 252      * If true the "Restart" button is shown.
 253      *
 254      * @type {boolean}
 255      */
 256     set showRebootButton(value) {
 257       this.showReboot_ = value;
 258       this.updateUI_();
 259     },
 260
 261     /**
 262      * If true the "Shutdown" button is shown.
 263      *
 264      * @type {boolean}
 265      */
 266     set showShutdownButton(value) {
 267       this.showShutdown_ = value;
 268       this.updateUI_();
 269     },
 270
 271     /**
 272      * Current header bar UI / sign in state.
 273      *
 274      * @type {number} state Current state of the sign-in screen (see
 275      *       SIGNIN_UI_STATE).
 276      */
 277     get signinUIState() {
 278       return this.signinUIState_;
 279     },
 280     set signinUIState(state) {
 281       this.signinUIState_ = state;
 282       this.updateUI_();
 283     },
 284
 285     /**
 286      * Whether the Cancel button is enabled during Gaia sign-in.
 287      *
 288      * @type {boolean}
 289      */
 290     set allowCancel(value) {
 291       this.allowCancel_ = value;
 292       this.updateUI_();
 293     },
 294
 295     get allowCancel() {
 296       return !!this.allowCancel_;
 297     },
 298
 299     /**
 300      * Update whether there are kiosk apps.
 301      *
 302      * @type {boolean}
 303      */
 304     set hasApps(value) {
 305       this.hasApps_ = value;
 306       this.updateUI_();
 307     },
 308
 309     /**
 310      * Updates visibility state of action buttons.
 311      *
 312      * @private
 313      */
 314     updateUI_: function() {
 315       var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN);
 316       var enrollmentIsActive =
 317           (this.signinUIState_ == SIGNIN_UI_STATE.ENROLLMENT);
 318       var accountPickerIsActive =
 319           (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER);
 320       var supervisedUserCreationDialogIsActive =
 321           (this.signinUIState_ ==
 322                SIGNIN_UI_STATE.SUPERVISED_USER_CREATION_FLOW);
 323       var wrongHWIDWarningIsActive =
 324           (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING);
 325       var isSamlPasswordConfirm =
 326           (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM);
 327       var isEnrollingConsumerManagement = (this.signinUIState_ ==
 328           SIGNIN_UI_STATE.CONSUMER_MANAGEMENT_ENROLLMENT);
 329       var isPasswordChangedUI =
 330           (this.signinUIState_ == SIGNIN_UI_STATE.PASSWORD_CHANGED);
 331       var isMultiProfilesUI =
 332           (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
 333       var isLockScreen =
 334           (Oobe.getInstance().displayType == DISPLAY_TYPE.LOCK);
 335       var isNewGaiaScreenWithBackButton =
 336            gaiaIsActive &&
 337            this.isNewGaiaFlow_ &&
 338            !($('back-button-item').hidden);
 339       var supervisedUserCreationDialogIsActiveAndNotIntro =
 340           supervisedUserCreationDialogIsActive &&
 341           $('supervised-user-creation').currentPage_ != 'intro';
 342       var errorScreenIsActive =
 343           (this.signinUIState_ == SIGNIN_UI_STATE.ERROR);
 344
 345       $('add-user-button').hidden =
 346           (!this.isNewGaiaFlow_ && !accountPickerIsActive) ||
 347           (this.isNewGaiaFlow_ && gaiaIsActive) ||
 348           enrollmentIsActive ||
 349           isMultiProfilesUI ||
 350           isLockScreen ||
 351           supervisedUserCreationDialogIsActiveAndNotIntro ||
 352           errorScreenIsActive;
 353       $('more-settings-header-bar-item').hidden =
 354           !this.showCreateSupervised_ ||
 355           isNewGaiaScreenWithBackButton ||
 356           supervisedUserCreationDialogIsActive;
 357       $('cancel-add-user-button').hidden =
 358           ((gaiaIsActive || isPasswordChangedUI || isSamlPasswordConfirm ||
 359             errorScreenIsActive) &&
 360            this.isNewGaiaFlow_) ||
 361           accountPickerIsActive ||
 362           !this.allowCancel_ ||
 363           wrongHWIDWarningIsActive ||
 364           isMultiProfilesUI ||
 365           supervisedUserCreationDialogIsActive;
 366       $('guest-user-header-bar-item').hidden =
 367           (gaiaIsActive && !this.isNewGaiaFlow_) ||
 368           supervisedUserCreationDialogIsActiveAndNotIntro ||
 369           !this.showGuest_ ||
 370           wrongHWIDWarningIsActive ||
 371           isSamlPasswordConfirm ||
 372           isMultiProfilesUI ||
 373           isNewGaiaScreenWithBackButton;
 374       $('restart-header-bar-item').hidden = !this.showReboot_;
 375       $('shutdown-header-bar-item').hidden = !this.showShutdown_;
 376       $('sign-out-user-item').hidden = !isLockScreen;
 377
 378       $('add-user-header-bar-item').hidden =
 379           $('add-user-button').hidden && $('cancel-add-user-button').hidden;
 380       $('apps-header-bar-item').hidden = !this.hasApps_ ||
 381           (!gaiaIsActive && !accountPickerIsActive);
 382       $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI;
 383       $('cancel-consumer-management-enrollment').hidden =
 384           !isEnrollingConsumerManagement;
 385
 386       if (!Oobe.getInstance().newKioskUI) {
 387         if (!$('apps-header-bar-item').hidden)
 388           $('show-apps-button').didShow();
 389       }
 390     },
 391
 392     /**
 393      * Animates Header bar to hide from the screen.
 394      *
 395      * @param {function()} callback will be called once animation is finished.
 396      */
 397     animateOut: function(callback) {
 398       var launcher = this;
 399       launcher.addEventListener(
 400           'webkitTransitionEnd', function f(e) {
 401             launcher.removeEventListener('webkitTransitionEnd', f);
 402             callback();
 403           });
 404       // Guard timer for 2 seconds + 200 ms + epsilon.
 405       ensureTransitionEndEvent(launcher, 2250);
 406
 407       this.classList.remove('login-header-bar-animate-slow');
 408       this.classList.add('login-header-bar-animate-fast');
 409       this.classList.add('login-header-bar-hidden');
 410     },
 411
 412     /**
 413      * Animates Header bar to appear on the screen.
 414      *
 415      * @param {boolean} fast Whether the animation should complete quickly or
 416      *     slowly.
 417      * @param {function()} callback will be called once animation is finished.
 418      */
 419     animateIn: function(fast, callback) {
 420       if (callback) {
 421         var launcher = this;
 422         launcher.addEventListener(
 423             'webkitTransitionEnd', function f(e) {
 424               launcher.removeEventListener('webkitTransitionEnd', f);
 425               callback();
 426             });
 427         // Guard timer for 2 seconds + 200 ms + epsilon.
 428         ensureTransitionEndEvent(launcher, 2250);
 429       }
 430
 431       if (fast) {
 432         this.classList.remove('login-header-bar-animate-slow');
 433         this.classList.add('login-header-bar-animate-fast');
 434       } else {
 435         this.classList.remove('login-header-bar-animate-fast');
 436         this.classList.add('login-header-bar-animate-slow');
 437       }
 438
 439       this.classList.remove('login-header-bar-hidden');
 440     },
 441   };
 442
 443   /**
 444    * Convenience wrapper of animateOut.
 445    */
 446   HeaderBar.animateOut = function(callback) {
 447     $('login-header-bar').animateOut(callback);
 448   };
 449
 450   /**
 451    * Convenience wrapper of animateIn.
 452    */
 453   HeaderBar.animateIn = function(fast, callback) {
 454     $('login-header-bar').animateIn(fast, callback);
 455   };
 456
 457   return {
 458     HeaderBar: HeaderBar
 459   };
 460 });