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