Home | History | Annotate | Download | only in login 
      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 });
    261