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