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 (document.documentElement.getAttribute('screen') == 'login')
     48         login.AppsMenuButton.decorate($('show-apps-button'));
     49     },
     50 
     51     /**
     52      * Tab index value for all button elements.
     53      * @type {number}
     54      */
     55     set buttonsTabIndex(tabIndex) {
     56       var buttons = this.getElementsByTagName('button');
     57       for (var i = 0, button; button = buttons[i]; ++i) {
     58         button.tabIndex = tabIndex;
     59       }
     60     },
     61 
     62     /**
     63      * Disables the header bar and all of its elements.
     64      * @type {boolean}
     65      */
     66     set disabled(value) {
     67       var buttons = this.getElementsByTagName('button');
     68       for (var i = 0, button; button = buttons[i]; ++i)
     69         if (!button.classList.contains('button-restricted'))
     70           button.disabled = value;
     71     },
     72 
     73     /**
     74      * Add user button click handler.
     75      * @private
     76      */
     77     handleAddUserClick_: function(e) {
     78       Oobe.showSigninUI();
     79       // Prevent further propagation of click event. Otherwise, the click event
     80       // handler of document object will set wallpaper to user's wallpaper when
     81       // there is only one existing user. See http://crbug.com/166477
     82       e.stopPropagation();
     83     },
     84 
     85     /**
     86      * Cancel add user button click handler.
     87      * @private
     88      */
     89     handleCancelAddUserClick_: function(e) {
     90       // Let screen handle cancel itself if that is capable of doing so.
     91       if (Oobe.getInstance().currentScreen &&
     92           Oobe.getInstance().currentScreen.cancel) {
     93         Oobe.getInstance().currentScreen.cancel();
     94         return;
     95       }
     96 
     97       $('pod-row').loadLastWallpaper();
     98 
     99       Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
    100       Oobe.resetSigninUI(true);
    101     },
    102 
    103     /**
    104      * Guest button click handler.
    105      * @private
    106      */
    107     handleGuestClick_: function(e) {
    108       Oobe.disableSigninUI();
    109       chrome.send('launchIncognito');
    110       e.stopPropagation();
    111     },
    112 
    113     /**
    114      * Sign out button click handler.
    115      * @private
    116      */
    117     handleSignoutClick_: function(e) {
    118       this.disabled = true;
    119       chrome.send('signOutUser');
    120       e.stopPropagation();
    121     },
    122 
    123     /**
    124      * Shutdown button click handler.
    125      * @private
    126      */
    127     handleShutdownClick_: function(e) {
    128       chrome.send('shutdownSystem');
    129       e.stopPropagation();
    130     },
    131 
    132     /**
    133      * Cancel user adding button handler.
    134      * @private
    135      */
    136     handleCancelMultipleSignInClick_: function(e) {
    137       chrome.send('cancelUserAdding');
    138       e.stopPropagation();
    139     },
    140 
    141     /**
    142      * If true then "Browse as Guest" button is shown.
    143      * @type {boolean}
    144      */
    145     set showGuestButton(value) {
    146       this.showGuest_ = value;
    147       this.updateUI_();
    148     },
    149 
    150     /**
    151      * Update current header bar UI.
    152      * @type {number} state Current state of the sign-in screen
    153      *                      (see SIGNIN_UI_STATE).
    154      */
    155     set signinUIState(state) {
    156       this.signinUIState_ = state;
    157       this.updateUI_();
    158     },
    159 
    160     /**
    161      * Whether the Cancel button is enabled during Gaia sign-in.
    162      * @type {boolean}
    163      */
    164     set allowCancel(value) {
    165       this.allowCancel_ = value;
    166       this.updateUI_();
    167     },
    168 
    169     /**
    170      * Update whether there are kiosk apps.
    171      * @type {boolean}
    172      */
    173     set hasApps(value) {
    174       this.hasApps_ = value;
    175       this.updateUI_();
    176     },
    177 
    178     /**
    179      * Updates visibility state of action buttons.
    180      * @private
    181      */
    182     updateUI_: function() {
    183       var gaiaIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.GAIA_SIGNIN);
    184       var accountPickerIsActive =
    185           (this.signinUIState_ == SIGNIN_UI_STATE.ACCOUNT_PICKER);
    186       var managedUserCreationDialogIsActive =
    187           (this.signinUIState_ == SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW);
    188       var wrongHWIDWarningIsActive =
    189           (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING);
    190       var isMultiProfilesUI = Oobe.getInstance().isSignInToAddScreen();
    191 
    192       $('add-user-button').hidden = !accountPickerIsActive || isMultiProfilesUI;
    193       $('cancel-add-user-button').hidden = accountPickerIsActive ||
    194           !this.allowCancel_ ||
    195           wrongHWIDWarningIsActive ||
    196           isMultiProfilesUI;
    197       $('guest-user-header-bar-item').hidden = gaiaIsActive ||
    198           managedUserCreationDialogIsActive ||
    199           !this.showGuest_ ||
    200           wrongHWIDWarningIsActive ||
    201           isMultiProfilesUI;
    202       $('add-user-header-bar-item').hidden =
    203           $('add-user-button').hidden && $('cancel-add-user-button').hidden;
    204       $('apps-header-bar-item').hidden = !this.hasApps_ ||
    205           (!gaiaIsActive && !accountPickerIsActive);
    206       $('cancel-multiple-sign-in-item').hidden = !isMultiProfilesUI;
    207 
    208       if (!$('apps-header-bar-item').hidden)
    209         $('show-apps-button').didShow();
    210     },
    211 
    212     /**
    213      * Animates Header bar to hide from the screen.
    214      * @param {function()} callback will be called once animation is finished.
    215      */
    216     animateOut: function(callback) {
    217       var launcher = this;
    218       launcher.addEventListener(
    219           'webkitTransitionEnd', function f(e) {
    220             launcher.removeEventListener('webkitTransitionEnd', f);
    221             callback();
    222           });
    223       this.classList.remove('login-header-bar-animate-slow');
    224       this.classList.add('login-header-bar-animate-fast');
    225       this.classList.add('login-header-bar-hidden');
    226     },
    227 
    228     /**
    229      * Animates Header bar to slowly appear on the screen.
    230      */
    231     animateIn: function() {
    232       this.classList.remove('login-header-bar-animate-fast');
    233       this.classList.add('login-header-bar-animate-slow');
    234       this.classList.remove('login-header-bar-hidden');
    235     },
    236   };
    237 
    238   /**
    239    * Convenience wrapper of animateOut.
    240    */
    241   HeaderBar.animateOut = function(callback) {
    242     $('login-header-bar').animateOut(callback);
    243   };
    244 
    245   /**
    246    * Convenience wrapper of animateIn.
    247    */
    248   HeaderBar.animateIn = function() {
    249     $('login-header-bar').animateIn();
    250   }
    251 
    252   return {
    253     HeaderBar: HeaderBar
    254   };
    255 });
    256