ui/login/display_manager.js

   1 // Copyright 2014 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 Display manager for WebUI OOBE and login.
   7  */
   8
   9 // TODO(xiyuan): Find a better to share those constants.
  10 /** @const */ var SCREEN_OOBE_NETWORK = 'connect';
  11 /** @const */ var SCREEN_OOBE_HID_DETECTION = 'hid-detection';
  12 /** @const */ var SCREEN_OOBE_EULA = 'eula';
  13 /** @const */ var SCREEN_OOBE_ENABLE_DEBUGGING = 'debugging';
  14 /** @const */ var SCREEN_OOBE_UPDATE = 'update';
  15 /** @const */ var SCREEN_OOBE_RESET = 'reset';
  16 /** @const */ var SCREEN_OOBE_ENROLLMENT = 'oauth-enrollment';
  17 /** @const */ var SCREEN_OOBE_KIOSK_ENABLE = 'kiosk-enable';
  18 /** @const */ var SCREEN_OOBE_AUTO_ENROLLMENT_CHECK = 'auto-enrollment-check';
  19 /** @const */ var SCREEN_GAIA_SIGNIN = 'gaia-signin';
  20 /** @const */ var SCREEN_ACCOUNT_PICKER = 'account-picker';
  21 /** @const */ var SCREEN_USER_IMAGE_PICKER = 'user-image';
  22 /** @const */ var SCREEN_ERROR_MESSAGE = 'error-message';
  23 /** @const */ var SCREEN_TPM_ERROR = 'tpm-error-message';
  24 /** @const */ var SCREEN_PASSWORD_CHANGED = 'password-changed';
  25 /** @const */ var SCREEN_CREATE_SUPERVISED_USER_FLOW =
  26     'supervised-user-creation';
  27 /** @const */ var SCREEN_APP_LAUNCH_SPLASH = 'app-launch-splash';
  28 /** @const */ var SCREEN_CONFIRM_PASSWORD = 'confirm-password';
  29 /** @const */ var SCREEN_FATAL_ERROR = 'fatal-error';
  30 /** @const */ var SCREEN_KIOSK_ENABLE = 'kiosk-enable';
  31 /** @const */ var SCREEN_TERMS_OF_SERVICE = 'terms-of-service';
  32 /** @const */ var SCREEN_WRONG_HWID = 'wrong-hwid';
  33 /** @const */ var SCREEN_DEVICE_DISABLED = 'device-disabled';
  34
  35 /* Accelerator identifiers. Must be kept in sync with webui_login_view.cc. */
  36 /** @const */ var ACCELERATOR_CANCEL = 'cancel';
  37 /** @const */ var ACCELERATOR_ENABLE_DEBBUGING = 'debugging';
  38 /** @const */ var ACCELERATOR_ENROLLMENT = 'enrollment';
  39 /** @const */ var ACCELERATOR_KIOSK_ENABLE = 'kiosk_enable';
  40 /** @const */ var ACCELERATOR_VERSION = 'version';
  41 /** @const */ var ACCELERATOR_RESET = 'reset';
  42 /** @const */ var ACCELERATOR_FOCUS_PREV = 'focus_prev';
  43 /** @const */ var ACCELERATOR_FOCUS_NEXT = 'focus_next';
  44 /** @const */ var ACCELERATOR_DEVICE_REQUISITION = 'device_requisition';
  45 /** @const */ var ACCELERATOR_DEVICE_REQUISITION_REMORA =
  46     'device_requisition_remora';
  47 /** @const */ var ACCELERATOR_DEVICE_REQUISITION_SHARK =
  48     'device_requisition_shark';
  49 /** @const */ var ACCELERATOR_APP_LAUNCH_BAILOUT = 'app_launch_bailout';
  50 /** @const */ var ACCELERATOR_APP_LAUNCH_NETWORK_CONFIG =
  51     'app_launch_network_config';
  52 /** @const */ var ACCELERATOR_EMBEDDED_SIGNIN = 'embedded_signin';
  53 /** @const */ var ACCELERATOR_NEW_OOBE = 'new_oobe';
  54 /** @const */ var ACCELERATOR_TOGGLE_WEBVIEW_SIGNIN = 'toggle_webview_signin';
  55
  56 /* Signin UI state constants. Used to control header bar UI. */
  57 /** @const */ var SIGNIN_UI_STATE = {
  58   HIDDEN: 0,
  59   GAIA_SIGNIN: 1,
  60   ACCOUNT_PICKER: 2,
  61   WRONG_HWID_WARNING: 3,
  62   SUPERVISED_USER_CREATION_FLOW: 4,
  63   SAML_PASSWORD_CONFIRM: 5,
  64   CONSUMER_MANAGEMENT_ENROLLMENT: 6,
  65 };
  66
  67 /* Possible UI states of the error screen. */
  68 /** @const */ var ERROR_SCREEN_UI_STATE = {
  69   UNKNOWN: 'ui-state-unknown',
  70   UPDATE: 'ui-state-update',
  71   SIGNIN: 'ui-state-signin',
  72   SUPERVISED_USER_CREATION_FLOW: 'ui-state-supervised',
  73   KIOSK_MODE: 'ui-state-kiosk-mode',
  74   LOCAL_STATE_ERROR: 'ui-state-local-state-error',
  75   AUTO_ENROLLMENT_ERROR: 'ui-state-auto-enrollment-error',
  76   ROLLBACK_ERROR: 'ui-state-rollback-error'
  77 };
  78
  79 /* Possible types of UI. */
  80 /** @const */ var DISPLAY_TYPE = {
  81   UNKNOWN: 'unknown',
  82   OOBE: 'oobe',
  83   LOGIN: 'login',
  84   LOCK: 'lock',
  85   USER_ADDING: 'user-adding',
  86   APP_LAUNCH_SPLASH: 'app-launch-splash',
  87   DESKTOP_USER_MANAGER: 'login-add-user'
  88 };
  89
  90 /** @const */ var USER_ACTION_ROLLBACK_TOGGLED = 'rollback-toggled';
  91
  92 cr.define('cr.ui.login', function() {
  93   var Bubble = cr.ui.Bubble;
  94
  95   /**
  96    * Maximum time in milliseconds to wait for step transition to finish.
  97    * The value is used as the duration for ensureTransitionEndEvent below.
  98    * It needs to be inline with the step screen transition duration time
  99    * defined in css file. The current value in css is 200ms. To avoid emulated
 100    * webkitTransitionEnd fired before real one, 250ms is used.
 101    * @const
 102    */
 103   var MAX_SCREEN_TRANSITION_DURATION = 250;
 104
 105   /**
 106    * Groups of screens (screen IDs) that should have the same dimensions.
 107    * @type Array.<Array.<string>>
 108    * @const
 109    */
 110   var SCREEN_GROUPS = [[SCREEN_OOBE_NETWORK,
 111                         SCREEN_OOBE_EULA,
 112                         SCREEN_OOBE_UPDATE,
 113                         SCREEN_OOBE_AUTO_ENROLLMENT_CHECK]
 114                       ];
 115   /**
 116    * Group of screens (screen IDs) where factory-reset screen invocation is
 117    * available.
 118    * @type Array.<string>
 119    * @const
 120    */
 121   var RESET_AVAILABLE_SCREEN_GROUP = [
 122     SCREEN_OOBE_NETWORK,
 123     SCREEN_OOBE_EULA,
 124     SCREEN_OOBE_UPDATE,
 125     SCREEN_OOBE_ENROLLMENT,
 126     SCREEN_OOBE_AUTO_ENROLLMENT_CHECK,
 127     SCREEN_GAIA_SIGNIN,
 128     SCREEN_ACCOUNT_PICKER,
 129     SCREEN_KIOSK_ENABLE,
 130     SCREEN_ERROR_MESSAGE,
 131     SCREEN_USER_IMAGE_PICKER,
 132     SCREEN_TPM_ERROR,
 133     SCREEN_PASSWORD_CHANGED,
 134     SCREEN_TERMS_OF_SERVICE,
 135     SCREEN_WRONG_HWID,
 136     SCREEN_CONFIRM_PASSWORD,
 137     SCREEN_FATAL_ERROR
 138   ];
 139
 140   /**
 141    * Group of screens (screen IDs) where enable debuggingscreen invocation is
 142    * available.
 143    * @type Array.<string>
 144    * @const
 145    */
 146   var ENABLE_DEBUGGING_AVAILABLE_SCREEN_GROUP = [
 147     SCREEN_OOBE_HID_DETECTION,
 148     SCREEN_OOBE_NETWORK,
 149     SCREEN_OOBE_EULA,
 150     SCREEN_OOBE_UPDATE,
 151     SCREEN_TERMS_OF_SERVICE
 152   ];
 153
 154   /**
 155    * Group of screens (screen IDs) that are not participating in
 156    * left-current-right animation.
 157    * @type Array.<string>
 158    * @const
 159    */
 160   var NOT_ANIMATED_SCREEN_GROUP = [
 161     SCREEN_OOBE_ENABLE_DEBUGGING,
 162     SCREEN_OOBE_RESET,
 163   ];
 164
 165
 166   /**
 167    * OOBE screens group index.
 168    */
 169   var SCREEN_GROUP_OOBE = 0;
 170
 171   /**
 172    * Constructor a display manager that manages initialization of screens,
 173    * transitions, error messages display.
 174    *
 175    * @constructor
 176    */
 177   function DisplayManager() {
 178   }
 179
 180   DisplayManager.prototype = {
 181     /**
 182      * Registered screens.
 183      */
 184     screens_: [],
 185
 186     /**
 187      * Current OOBE step, index in the screens array.
 188      * @type {number}
 189      */
 190     currentStep_: 0,
 191
 192     /**
 193      * Whether version label can be toggled by ACCELERATOR_VERSION.
 194      * @type {boolean}
 195      */
 196     allowToggleVersion_: false,
 197
 198     /**
 199      * Whether keyboard navigation flow is enforced.
 200      * @type {boolean}
 201      */
 202     forceKeyboardFlow_: false,
 203
 204     /**
 205      * Whether virtual keyboard is shown.
 206      * @type {boolean}
 207      */
 208     virtualKeyboardShown_: false,
 209
 210     /**
 211      * Virtual keyboard width.
 212      * @type {number}
 213      */
 214     virtualKeyboardWidth_: 0,
 215
 216     /**
 217      * Virtual keyboard height.
 218      * @type {number}
 219      */
 220     virtualKeyboardHeight_: 0,
 221
 222     /**
 223      * Type of UI.
 224      * @type {string}
 225      */
 226     displayType_: DISPLAY_TYPE.UNKNOWN,
 227
 228     /**
 229      * Error message (bubble) was shown. This is checked in tests.
 230      */
 231     errorMessageWasShownForTesting_: false,
 232
 233     get displayType() {
 234       return this.displayType_;
 235     },
 236
 237     set displayType(displayType) {
 238       this.displayType_ = displayType;
 239       document.documentElement.setAttribute('screen', displayType);
 240     },
 241
 242     get newKioskUI() {
 243       return loadTimeData.getString('newKioskUI') == 'on';
 244     },
 245
 246     /**
 247      * Returns dimensions of screen exluding header bar.
 248      * @type {Object}
 249      */
 250     get clientAreaSize() {
 251       var container = $('outer-container');
 252       return {width: container.offsetWidth, height: container.offsetHeight};
 253     },
 254
 255     /**
 256      * Gets current screen element.
 257      * @type {HTMLElement}
 258      */
 259     get currentScreen() {
 260       return $(this.screens_[this.currentStep_]);
 261     },
 262
 263     /**
 264      * Hides/shows header (Shutdown/Add User/Cancel buttons).
 265      * @param {boolean} hidden Whether header is hidden.
 266      */
 267     get headerHidden() {
 268       return $('login-header-bar').hidden;
 269     },
 270
 271     set headerHidden(hidden) {
 272       $('login-header-bar').hidden = hidden;
 273     },
 274
 275     /**
 276      * Virtual keyboard state (hidden/shown).
 277      * @param {boolean} hidden Whether keyboard is shown.
 278      */
 279     get virtualKeyboardShown() {
 280       return this.virtualKeyboardShown_;
 281     },
 282
 283     set virtualKeyboardShown(shown) {
 284       this.virtualKeyboardShown_ = shown;
 285     },
 286
 287     /**
 288      * Sets the current size of the virtual keyboard.
 289      * @param {number} width keyboard width
 290      * @param {number} height keyboard height
 291      */
 292     setVirtualKeyboardSize: function(width, height) {
 293       this.virtualKeyboardWidth_ = width;
 294       this.virtualKeyboardHeight_ = height;
 295     },
 296
 297     /**
 298      * Sets the current size of the client area (display size).
 299      * @param {number} width client area width
 300      * @param {number} height client area height
 301      */
 302     setClientAreaSize: function(width, height) {
 303       var clientArea = $('outer-container');
 304       var bottom = parseInt(window.getComputedStyle(clientArea).bottom);
 305       clientArea.style.minHeight = cr.ui.toCssPx(height - bottom);
 306     },
 307
 308     /**
 309      * Toggles background of main body between transparency and solid.
 310      * @param {boolean} solid Whether to show a solid background.
 311      */
 312     set solidBackground(solid) {
 313       if (solid)
 314         document.body.classList.add('solid');
 315       else
 316         document.body.classList.remove('solid');
 317     },
 318
 319     /**
 320      * Forces keyboard based OOBE navigation.
 321      * @param {boolean} value True if keyboard navigation flow is forced.
 322      */
 323     set forceKeyboardFlow(value) {
 324       this.forceKeyboardFlow_ = value;
 325       if (value) {
 326         keyboard.initializeKeyboardFlow();
 327         cr.ui.DropDown.enableKeyboardFlow();
 328         for (var i = 0; i < this.screens_.length; ++i) {
 329           var screen = $(this.screens_[i]);
 330           if (screen.enableKeyboardFlow)
 331             screen.enableKeyboardFlow();
 332         }
 333       }
 334     },
 335
 336     /**
 337      * Shows/hides version labels.
 338      * @param {boolean} show Whether labels should be visible by default. If
 339      *     false, visibility can be toggled by ACCELERATOR_VERSION.
 340      */
 341     showVersion: function(show) {
 342       $('version-labels').hidden = !show;
 343       this.allowToggleVersion_ = !show;
 344     },
 345
 346     /**
 347      * Handle accelerators.
 348      * @param {string} name Accelerator name.
 349      */
 350     handleAccelerator: function(name) {
 351       if (this.currentScreen.ignoreAccelerators) {
 352         return;
 353       }
 354       var currentStepId = this.screens_[this.currentStep_];
 355       if (name == ACCELERATOR_CANCEL) {
 356         if (this.currentScreen.cancel) {
 357           this.currentScreen.cancel();
 358         }
 359       } else if (name == ACCELERATOR_ENABLE_DEBBUGING) {
 360         if (ENABLE_DEBUGGING_AVAILABLE_SCREEN_GROUP.indexOf(
 361                 currentStepId) != -1) {
 362           chrome.send('toggleEnableDebuggingScreen');
 363         }
 364       } else if (name == ACCELERATOR_ENROLLMENT) {
 365         if (currentStepId == SCREEN_GAIA_SIGNIN ||
 366             currentStepId == SCREEN_ACCOUNT_PICKER) {
 367           chrome.send('toggleEnrollmentScreen');
 368         } else if (currentStepId == SCREEN_OOBE_NETWORK ||
 369                    currentStepId == SCREEN_OOBE_EULA) {
 370           // In this case update check will be skipped and OOBE will
 371           // proceed straight to enrollment screen when EULA is accepted.
 372           chrome.send('skipUpdateEnrollAfterEula');
 373         }
 374       } else if (name == ACCELERATOR_KIOSK_ENABLE) {
 375         if (currentStepId == SCREEN_GAIA_SIGNIN ||
 376             currentStepId == SCREEN_ACCOUNT_PICKER) {
 377           chrome.send('toggleKioskEnableScreen');
 378         }
 379       } else if (name == ACCELERATOR_VERSION) {
 380         if (this.allowToggleVersion_)
 381           $('version-labels').hidden = !$('version-labels').hidden;
 382       } else if (name == ACCELERATOR_RESET) {
 383         if (currentStepId == SCREEN_OOBE_RESET)
 384           $('reset').send(login.Screen.CALLBACK_USER_ACTED,
 385                           USER_ACTION_ROLLBACK_TOGGLED);
 386         else if (RESET_AVAILABLE_SCREEN_GROUP.indexOf(currentStepId) != -1)
 387           chrome.send('toggleResetScreen');
 388       } else if (name == ACCELERATOR_DEVICE_REQUISITION) {
 389         if (this.isOobeUI())
 390           this.showDeviceRequisitionPrompt_();
 391       } else if (name == ACCELERATOR_DEVICE_REQUISITION_REMORA) {
 392         if (this.isOobeUI())
 393           this.showDeviceRequisitionRemoraPrompt_(
 394               'deviceRequisitionRemoraPromptText', 'remora');
 395       } else if (name == ACCELERATOR_DEVICE_REQUISITION_SHARK) {
 396         if (this.isOobeUI())
 397           this.showDeviceRequisitionRemoraPrompt_(
 398               'deviceRequisitionSharkPromptText', 'shark');
 399       } else if (name == ACCELERATOR_APP_LAUNCH_BAILOUT) {
 400         if (currentStepId == SCREEN_APP_LAUNCH_SPLASH)
 401           chrome.send('cancelAppLaunch');
 402       } else if (name == ACCELERATOR_APP_LAUNCH_NETWORK_CONFIG) {
 403         if (currentStepId == SCREEN_APP_LAUNCH_SPLASH)
 404           chrome.send('networkConfigRequest');
 405       } else if (name == ACCELERATOR_EMBEDDED_SIGNIN) {
 406         if (currentStepId == SCREEN_GAIA_SIGNIN)
 407           chrome.send('switchToEmbeddedSignin');
 408       } else if (name == ACCELERATOR_NEW_OOBE) {
 409         chrome.send('switchToNewOobe');
 410       } else if (name == ACCELERATOR_TOGGLE_WEBVIEW_SIGNIN) {
 411         if (currentStepId == SCREEN_GAIA_SIGNIN)
 412           chrome.send('toggleWebviewSignin');
 413       }
 414
 415       if (!this.forceKeyboardFlow_)
 416         return;
 417
 418       // Handle special accelerators for keyboard enhanced navigation flow.
 419       if (name == ACCELERATOR_FOCUS_PREV)
 420         keyboard.raiseKeyFocusPrevious(document.activeElement);
 421       else if (name == ACCELERATOR_FOCUS_NEXT)
 422         keyboard.raiseKeyFocusNext(document.activeElement);
 423     },
 424
 425     /**
 426      * Appends buttons to the button strip.
 427      * @param {Array.<HTMLElement>} buttons Array with the buttons to append.
 428      * @param {string} screenId Id of the screen that buttons belong to.
 429      */
 430     appendButtons_: function(buttons, screenId) {
 431       if (buttons) {
 432         var buttonStrip = $(screenId + '-controls');
 433         if (buttonStrip) {
 434           for (var i = 0; i < buttons.length; ++i)
 435             buttonStrip.appendChild(buttons[i]);
 436         }
 437       }
 438     },
 439
 440     /**
 441      * Disables or enables control buttons on the specified screen.
 442      * @param {HTMLElement} screen Screen which controls should be affected.
 443      * @param {boolean} disabled Whether to disable controls.
 444      */
 445     disableButtons_: function(screen, disabled) {
 446       var buttons = document.querySelectorAll(
 447           '#' + screen.id + '-controls button:not(.preserve-disabled-state)');
 448       for (var i = 0; i < buttons.length; ++i) {
 449         buttons[i].disabled = disabled;
 450       }
 451     },
 452
 453     screenIsAnimated_: function(screenId) {
 454       return NOT_ANIMATED_SCREEN_GROUP.indexOf(screenId) != -1;
 455     },
 456
 457     /**
 458      * Updates a step's css classes to reflect left, current, or right position.
 459      * @param {number} stepIndex step index.
 460      * @param {string} state one of 'left', 'current', 'right'.
 461      */
 462     updateStep_: function(stepIndex, state) {
 463       var stepId = this.screens_[stepIndex];
 464       var step = $(stepId);
 465       var header = $('header-' + stepId);
 466       var states = ['left', 'right', 'current'];
 467       for (var i = 0; i < states.length; ++i) {
 468         if (states[i] != state) {
 469           step.classList.remove(states[i]);
 470           header.classList.remove(states[i]);
 471         }
 472       }
 473
 474       step.classList.add(state);
 475       header.classList.add(state);
 476     },
 477
 478     /**
 479      * Switches to the next OOBE step.
 480      * @param {number} nextStepIndex Index of the next step.
 481      */
 482     toggleStep_: function(nextStepIndex, screenData) {
 483       var currentStepId = this.screens_[this.currentStep_];
 484       var nextStepId = this.screens_[nextStepIndex];
 485       var oldStep = $(currentStepId);
 486       var newStep = $(nextStepId);
 487       var newHeader = $('header-' + nextStepId);
 488
 489       // Disable controls before starting animation.
 490       this.disableButtons_(oldStep, true);
 491
 492       if (oldStep.onBeforeHide)
 493         oldStep.onBeforeHide();
 494
 495       $('oobe').className = nextStepId;
 496
 497       // Need to do this before calling newStep.onBeforeShow() so that new step
 498       // is back in DOM tree and has correct offsetHeight / offsetWidth.
 499       newStep.hidden = false;
 500
 501       if (newStep.onBeforeShow)
 502         newStep.onBeforeShow(screenData);
 503
 504       newStep.classList.remove('hidden');
 505
 506       if (this.isOobeUI() &&
 507           this.screenIsAnimated_(nextStepId) &&
 508           this.screenIsAnimated_(currentStepId)) {
 509         // Start gliding animation for OOBE steps.
 510         if (nextStepIndex > this.currentStep_) {
 511           for (var i = this.currentStep_; i < nextStepIndex; ++i)
 512             this.updateStep_(i, 'left');
 513           this.updateStep_(nextStepIndex, 'current');
 514         } else if (nextStepIndex < this.currentStep_) {
 515           for (var i = this.currentStep_; i > nextStepIndex; --i)
 516             this.updateStep_(i, 'right');
 517           this.updateStep_(nextStepIndex, 'current');
 518         }
 519       } else {
 520         // Start fading animation for login display or reset screen.
 521         oldStep.classList.add('faded');
 522         newStep.classList.remove('faded');
 523         if (!this.screenIsAnimated_(nextStepId)) {
 524           newStep.classList.remove('left');
 525           newStep.classList.remove('right');
 526         }
 527       }
 528
 529       this.disableButtons_(newStep, false);
 530
 531       // Adjust inner container height based on new step's height.
 532       this.updateScreenSize(newStep);
 533
 534       if (newStep.onAfterShow)
 535         newStep.onAfterShow(screenData);
 536
 537       // Workaround for gaia and network screens.
 538       // Due to other origin iframe and long ChromeVox focusing correspondingly
 539       // passive aria-label title is not pronounced.
 540       // Gaia hack can be removed on fixed crbug.com/316726.
 541       if (nextStepId == SCREEN_GAIA_SIGNIN) {
 542         newStep.setAttribute(
 543             'aria-label',
 544             loadTimeData.getString('signinScreenTitle'));
 545       } else if (nextStepId == SCREEN_OOBE_NETWORK) {
 546         newStep.setAttribute(
 547             'aria-label',
 548             loadTimeData.getString('networkScreenAccessibleTitle'));
 549       }
 550
 551       // Default control to be focused (if specified).
 552       var defaultControl = newStep.defaultControl;
 553
 554       var outerContainer = $('outer-container');
 555       var innerContainer = $('inner-container');
 556       var isOOBE = this.isOobeUI();
 557       if (this.currentStep_ != nextStepIndex &&
 558           !oldStep.classList.contains('hidden')) {
 559         if (oldStep.classList.contains('animated')) {
 560           innerContainer.classList.add('animation');
 561           oldStep.addEventListener('webkitTransitionEnd', function f(e) {
 562             oldStep.removeEventListener('webkitTransitionEnd', f);
 563             if (oldStep.classList.contains('faded') ||
 564                 oldStep.classList.contains('left') ||
 565                 oldStep.classList.contains('right')) {
 566               innerContainer.classList.remove('animation');
 567               oldStep.classList.add('hidden');
 568               if (!isOOBE)
 569                 oldStep.hidden = true;
 570             }
 571             // Refresh defaultControl. It could have changed.
 572             var defaultControl = newStep.defaultControl;
 573             if (defaultControl)
 574               defaultControl.focus();
 575           });
 576           ensureTransitionEndEvent(oldStep, MAX_SCREEN_TRANSITION_DURATION);
 577         } else {
 578           oldStep.classList.add('hidden');
 579           oldStep.hidden = true;
 580           if (defaultControl)
 581             defaultControl.focus();
 582         }
 583       } else {
 584         // First screen on OOBE launch.
 585         if (this.isOobeUI() && innerContainer.classList.contains('down')) {
 586           innerContainer.classList.remove('down');
 587           innerContainer.addEventListener(
 588               'webkitTransitionEnd', function f(e) {
 589                 innerContainer.removeEventListener('webkitTransitionEnd', f);
 590                 outerContainer.classList.remove('down');
 591                 $('progress-dots').classList.remove('down');
 592                 chrome.send('loginVisible', ['oobe']);
 593                 // Refresh defaultControl. It could have changed.
 594                 var defaultControl = newStep.defaultControl;
 595                 if (defaultControl)
 596                   defaultControl.focus();
 597               });
 598           ensureTransitionEndEvent(innerContainer,
 599                                    MAX_SCREEN_TRANSITION_DURATION);
 600         } else {
 601           if (defaultControl)
 602             defaultControl.focus();
 603           chrome.send('loginVisible', ['oobe']);
 604         }
 605       }
 606       this.currentStep_ = nextStepIndex;
 607
 608       $('step-logo').hidden = newStep.classList.contains('no-logo');
 609
 610       chrome.send('updateCurrentScreen', [this.currentScreen.id]);
 611     },
 612
 613     /**
 614      * Make sure that screen is initialized and decorated.
 615      * @param {Object} screen Screen params dict, e.g. {id: screenId, data: {}}.
 616      */
 617     preloadScreen: function(screen) {
 618       var screenEl = $(screen.id);
 619       if (screenEl.deferredInitialization !== undefined) {
 620         screenEl.deferredInitialization();
 621         delete screenEl.deferredInitialization;
 622       }
 623     },
 624
 625     /**
 626      * Show screen of given screen id.
 627      * @param {Object} screen Screen params dict, e.g. {id: screenId, data: {}}.
 628      */
 629     showScreen: function(screen) {
 630       // Do not allow any other screen to clobber the device disabled screen.
 631       if (this.currentScreen.id == SCREEN_DEVICE_DISABLED)
 632         return;
 633
 634       var screenId = screen.id;
 635
 636       // Make sure the screen is decorated.
 637       this.preloadScreen(screen);
 638
 639       if (screen.data !== undefined && screen.data.disableAddUser)
 640         DisplayManager.updateAddUserButtonStatus(true);
 641
 642
 643       // Show sign-in screen instead of account picker if pod row is empty.
 644       if (screenId == SCREEN_ACCOUNT_PICKER && $('pod-row').pods.length == 0) {
 645         // Manually hide 'add-user' header bar, because of the case when
 646         // 'Cancel' button is used on the offline login page.
 647         $('add-user-header-bar-item').hidden = true;
 648         Oobe.showSigninUI(true);
 649         return;
 650       }
 651
 652       var data = screen.data;
 653       var index = this.getScreenIndex_(screenId);
 654       if (index >= 0)
 655         this.toggleStep_(index, data);
 656     },
 657
 658     /**
 659      * Gets index of given screen id in screens_.
 660      * @param {string} screenId Id of the screen to look up.
 661      * @private
 662      */
 663     getScreenIndex_: function(screenId) {
 664       for (var i = 0; i < this.screens_.length; ++i) {
 665         if (this.screens_[i] == screenId)
 666           return i;
 667       }
 668       return -1;
 669     },
 670
 671     /**
 672      * Register an oobe screen.
 673      * @param {Element} el Decorated screen element.
 674      */
 675     registerScreen: function(el) {
 676       var screenId = el.id;
 677       this.screens_.push(screenId);
 678
 679       var header = document.createElement('span');
 680       header.id = 'header-' + screenId;
 681       header.textContent = el.header ? el.header : '';
 682       header.className = 'header-section';
 683       $('header-sections').appendChild(header);
 684
 685       var dot = document.createElement('div');
 686       dot.id = screenId + '-dot';
 687       dot.className = 'progdot';
 688       var progressDots = $('progress-dots');
 689       if (progressDots)
 690         progressDots.appendChild(dot);
 691
 692       this.appendButtons_(el.buttons, screenId);
 693     },
 694
 695     /**
 696      * Updates inner container size based on the size of the current screen and
 697      * other screens in the same group.
 698      * Should be executed on screen change / screen size change.
 699      * @param {!HTMLElement} screen Screen that is being shown.
 700      */
 701     updateScreenSize: function(screen) {
 702       // Have to reset any previously predefined screen size first
 703       // so that screen contents would define it instead.
 704       $('inner-container').style.height = '';
 705       $('inner-container').style.width = '';
 706       screen.style.width = '';
 707       screen.style.height = '';
 708
 709      $('outer-container').classList.toggle(
 710         'fullscreen', screen.classList.contains('fullscreen'));
 711
 712       var width = screen.getPreferredSize().width;
 713       var height = screen.getPreferredSize().height;
 714       for (var i = 0, screenGroup; screenGroup = SCREEN_GROUPS[i]; i++) {
 715         if (screenGroup.indexOf(screen.id) != -1) {
 716           // Set screen dimensions to maximum dimensions within this group.
 717           for (var j = 0, screen2; screen2 = $(screenGroup[j]); j++) {
 718             width = Math.max(width, screen2.getPreferredSize().width);
 719             height = Math.max(height, screen2.getPreferredSize().height);
 720           }
 721           break;
 722         }
 723       }
 724       $('inner-container').style.height = height + 'px';
 725       $('inner-container').style.width = width + 'px';
 726       // This requires |screen| to have 'box-sizing: border-box'.
 727       screen.style.width = width + 'px';
 728       screen.style.height = height + 'px';
 729     },
 730
 731     /**
 732      * Updates localized content of the screens like headers, buttons and links.
 733      * Should be executed on language change.
 734      */
 735     updateLocalizedContent_: function() {
 736       for (var i = 0, screenId; screenId = this.screens_[i]; ++i) {
 737         var screen = $(screenId);
 738         var buttonStrip = $(screenId + '-controls');
 739         if (buttonStrip)
 740           buttonStrip.innerHTML = '';
 741         // TODO(nkostylev): Update screen headers for new OOBE design.
 742         this.appendButtons_(screen.buttons, screenId);
 743         if (screen.updateLocalizedContent)
 744           screen.updateLocalizedContent();
 745       }
 746
 747       var currentScreenId = this.screens_[this.currentStep_];
 748       var currentScreen = $(currentScreenId);
 749       this.updateScreenSize(currentScreen);
 750
 751       // Trigger network drop-down to reload its state
 752       // so that strings are reloaded.
 753       // Will be reloaded if drowdown is actually shown.
 754       cr.ui.DropDown.refresh();
 755     },
 756
 757     /**
 758      * Initialized first group of OOBE screens.
 759      */
 760     initializeOOBEScreens: function() {
 761       if (this.isOobeUI() && $('inner-container').classList.contains('down')) {
 762         for (var i = 0, screen;
 763              screen = $(SCREEN_GROUPS[SCREEN_GROUP_OOBE][i]); i++) {
 764           screen.hidden = false;
 765         }
 766       }
 767     },
 768
 769     /**
 770      * Prepares screens to use in login display.
 771      */
 772     prepareForLoginDisplay_: function() {
 773       for (var i = 0, screenId; screenId = this.screens_[i]; ++i) {
 774         var screen = $(screenId);
 775         screen.classList.add('faded');
 776         screen.classList.remove('right');
 777         screen.classList.remove('left');
 778       }
 779     },
 780
 781     /**
 782      * Shows the device requisition prompt.
 783      */
 784     showDeviceRequisitionPrompt_: function() {
 785       if (!this.deviceRequisitionDialog_) {
 786         this.deviceRequisitionDialog_ =
 787             new cr.ui.dialogs.PromptDialog(document.body);
 788         this.deviceRequisitionDialog_.setOkLabel(
 789             loadTimeData.getString('deviceRequisitionPromptOk'));
 790         this.deviceRequisitionDialog_.setCancelLabel(
 791             loadTimeData.getString('deviceRequisitionPromptCancel'));
 792       }
 793       this.deviceRequisitionDialog_.show(
 794           loadTimeData.getString('deviceRequisitionPromptText'),
 795           this.deviceRequisition_,
 796           this.onConfirmDeviceRequisitionPrompt_.bind(this));
 797     },
 798
 799     /**
 800      * Confirmation handle for the device requisition prompt.
 801      * @param {string} value The value entered by the user.
 802      * @private
 803      */
 804     onConfirmDeviceRequisitionPrompt_: function(value) {
 805       this.deviceRequisition_ = value;
 806       chrome.send('setDeviceRequisition', [value == '' ? 'none' : value]);
 807     },
 808
 809     /**
 810      * Called when window size changed. Notifies current screen about change.
 811      * @private
 812      */
 813     onWindowResize_: function() {
 814       var currentScreenId = this.screens_[this.currentStep_];
 815       var currentScreen = $(currentScreenId);
 816       if (currentScreen)
 817         currentScreen.onWindowResize();
 818     },
 819
 820     /*
 821      * Updates the device requisition string shown in the requisition prompt.
 822      * @param {string} requisition The device requisition.
 823      */
 824     updateDeviceRequisition: function(requisition) {
 825       this.deviceRequisition_ = requisition;
 826     },
 827
 828     /**
 829      * Shows the special remora/shark device requisition prompt.
 830      * @private
 831      */
 832     showDeviceRequisitionRemoraPrompt_: function(promptText, requisition) {
 833       if (!this.deviceRequisitionRemoraDialog_) {
 834         this.deviceRequisitionRemoraDialog_ =
 835             new cr.ui.dialogs.ConfirmDialog(document.body);
 836         this.deviceRequisitionRemoraDialog_.setOkLabel(
 837             loadTimeData.getString('deviceRequisitionRemoraPromptOk'));
 838         this.deviceRequisitionRemoraDialog_.setCancelLabel(
 839             loadTimeData.getString('deviceRequisitionRemoraPromptCancel'));
 840       }
 841       this.deviceRequisitionRemoraDialog_.show(
 842           loadTimeData.getString(promptText),
 843           function() {  // onShow
 844             chrome.send('setDeviceRequisition', [requisition]);
 845           },
 846           function() {  // onCancel
 847             chrome.send('setDeviceRequisition', ['none']);
 848           });
 849     },
 850
 851     /**
 852      * Returns true if Oobe UI is shown.
 853      */
 854     isOobeUI: function() {
 855       return document.body.classList.contains('oobe-display');
 856     },
 857
 858     /**
 859      * Sets or unsets given |className| for top-level container. Useful for
 860      * customizing #inner-container with CSS rules. All classes set with with
 861      * this method will be removed after screen change.
 862      * @param {string} className Class to toggle.
 863      * @param {boolean} enabled Whether class should be enabled or disabled.
 864      */
 865     toggleClass: function(className, enabled) {
 866       $('oobe').classList.toggle(className, enabled);
 867     }
 868   };
 869
 870   /**
 871    * Initializes display manager.
 872    */
 873   DisplayManager.initialize = function() {
 874     var givenDisplayType = DISPLAY_TYPE.UNKNOWN;
 875     if (document.documentElement.hasAttribute('screen')) {
 876       // Display type set in HTML property.
 877       givenDisplayType = document.documentElement.getAttribute('screen');
 878     } else {
 879       // Extracting display type from URL.
 880       givenDisplayType = window.location.pathname.substr(1);
 881     }
 882     var instance = Oobe.getInstance();
 883     Object.getOwnPropertyNames(DISPLAY_TYPE).forEach(function(type) {
 884       if (DISPLAY_TYPE[type] == givenDisplayType) {
 885         instance.displayType = givenDisplayType;
 886       }
 887     });
 888     if (instance.displayType == DISPLAY_TYPE.UNKNOWN) {
 889       console.error("Unknown display type '" + givenDisplayType +
 890           "'. Setting default.");
 891       instance.displayType = DISPLAY_TYPE.LOGIN;
 892     }
 893
 894     instance.initializeOOBEScreens();
 895
 896     window.addEventListener('resize', instance.onWindowResize_.bind(instance));
 897   };
 898
 899   /**
 900    * Returns offset (top, left) of the element.
 901    * @param {!Element} element HTML element.
 902    * @return {!Object} The offset (top, left).
 903    */
 904   DisplayManager.getOffset = function(element) {
 905     var x = 0;
 906     var y = 0;
 907     while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
 908       x += element.offsetLeft - element.scrollLeft;
 909       y += element.offsetTop - element.scrollTop;
 910       element = element.offsetParent;
 911     }
 912     return { top: y, left: x };
 913   };
 914
 915   /**
 916    * Returns position (top, left, right, bottom) of the element.
 917    * @param {!Element} element HTML element.
 918    * @return {!Object} Element position (top, left, right, bottom).
 919    */
 920   DisplayManager.getPosition = function(element) {
 921     var offset = DisplayManager.getOffset(element);
 922     return { top: offset.top,
 923              right: window.innerWidth - element.offsetWidth - offset.left,
 924              bottom: window.innerHeight - element.offsetHeight - offset.top,
 925              left: offset.left };
 926   };
 927
 928   /**
 929    * Disables signin UI.
 930    */
 931   DisplayManager.disableSigninUI = function() {
 932     $('login-header-bar').disabled = true;
 933     $('pod-row').disabled = true;
 934   };
 935
 936   /**
 937    * Shows signin UI.
 938    * @param {string} opt_email An optional email for signin UI.
 939    */
 940   DisplayManager.showSigninUI = function(opt_email) {
 941     var currentScreenId = Oobe.getInstance().currentScreen.id;
 942     if (currentScreenId == SCREEN_GAIA_SIGNIN)
 943       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.GAIA_SIGNIN;
 944     else if (currentScreenId == SCREEN_ACCOUNT_PICKER)
 945       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.ACCOUNT_PICKER;
 946     chrome.send('showAddUser', [opt_email]);
 947   };
 948
 949   /**
 950    * Resets sign-in input fields.
 951    * @param {boolean} forceOnline Whether online sign-in should be forced.
 952    *     If |forceOnline| is false previously used sign-in type will be used.
 953    */
 954   DisplayManager.resetSigninUI = function(forceOnline) {
 955     var currentScreenId = Oobe.getInstance().currentScreen.id;
 956
 957     $(SCREEN_GAIA_SIGNIN).reset(
 958         currentScreenId == SCREEN_GAIA_SIGNIN, forceOnline);
 959     $('login-header-bar').disabled = false;
 960     $('pod-row').reset(currentScreenId == SCREEN_ACCOUNT_PICKER);
 961   };
 962
 963   /**
 964    * Shows sign-in error bubble.
 965    * @param {number} loginAttempts Number of login attemps tried.
 966    * @param {string} message Error message to show.
 967    * @param {string} link Text to use for help link.
 968    * @param {number} helpId Help topic Id associated with help link.
 969    */
 970   DisplayManager.showSignInError = function(loginAttempts, message, link,
 971                                             helpId) {
 972     var error = document.createElement('div');
 973
 974     var messageDiv = document.createElement('div');
 975     messageDiv.className = 'error-message-bubble';
 976     messageDiv.textContent = message;
 977     error.appendChild(messageDiv);
 978
 979     if (link) {
 980       messageDiv.classList.add('error-message-bubble-padding');
 981
 982       var helpLink = document.createElement('a');
 983       helpLink.href = '#';
 984       helpLink.textContent = link;
 985       helpLink.addEventListener('click', function(e) {
 986         chrome.send('launchHelpApp', [helpId]);
 987         e.preventDefault();
 988       });
 989       error.appendChild(helpLink);
 990     }
 991
 992     var currentScreen = Oobe.getInstance().currentScreen;
 993     if (currentScreen && typeof currentScreen.showErrorBubble === 'function') {
 994       currentScreen.showErrorBubble(loginAttempts, error);
 995       this.errorMessageWasShownForTesting_ = true;
 996     }
 997   };
 998
 999   /**
1000    * Shows password changed screen that offers migration.
1001    * @param {boolean} showError Whether to show the incorrect password error.
1002    */
1003   DisplayManager.showPasswordChangedScreen = function(showError) {
1004     login.PasswordChangedScreen.show(showError);
1005   };
1006
1007   /**
1008    * Shows dialog to create a supervised user.
1009    */
1010   DisplayManager.showSupervisedUserCreationScreen = function() {
1011     login.SupervisedUserCreationScreen.show();
1012   };
1013
1014   /**
1015    * Shows TPM error screen.
1016    */
1017   DisplayManager.showTpmError = function() {
1018     login.TPMErrorMessageScreen.show();
1019   };
1020
1021   /**
1022    * Clears error bubble.
1023    */
1024   DisplayManager.clearErrors = function() {
1025     $('bubble').hide();
1026     this.errorMessageWasShownForTesting_ = false;
1027
1028     var bubbles = document.querySelectorAll('.bubble-shown');
1029     for (var i = 0; i < bubbles.length; ++i)
1030       bubbles[i].classList.remove('bubble-shown');
1031   };
1032
1033   /**
1034    * Sets text content for a div with |labelId|.
1035    * @param {string} labelId Id of the label div.
1036    * @param {string} labelText Text for the label.
1037    */
1038   DisplayManager.setLabelText = function(labelId, labelText) {
1039     $(labelId).textContent = labelText;
1040   };
1041
1042   /**
1043    * Sets the text content of the enterprise info message.
1044    * @param {string} messageText The message text.
1045    */
1046   DisplayManager.setEnterpriseInfo = function(messageText) {
1047     $('enterprise-info-message').textContent = messageText;
1048     if (messageText) {
1049       $('enterprise-info').hidden = false;
1050     }
1051   };
1052
1053   /**
1054    * Disable Add users button if said.
1055    * @param {boolean} disable true to disable
1056    */
1057   DisplayManager.updateAddUserButtonStatus = function(disable) {
1058     $('add-user-button').disabled = disable;
1059     $('add-user-button').classList[
1060         disable ? 'add' : 'remove']('button-restricted');
1061     $('add-user-button').title = disable ?
1062         loadTimeData.getString('disabledAddUserTooltip') : '';
1063   }
1064
1065   /**
1066    * Clears password field in user-pod.
1067    */
1068   DisplayManager.clearUserPodPassword = function() {
1069     $('pod-row').clearFocusedPod();
1070   };
1071
1072   /**
1073    * Restores input focus to currently selected pod.
1074    */
1075   DisplayManager.refocusCurrentPod = function() {
1076     $('pod-row').refocusCurrentPod();
1077   };
1078
1079   // Export
1080   return {
1081     DisplayManager: DisplayManager
1082   };
1083 });