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