Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(432)

Side by Side Diff: ui/login/display_manager.js

Issue 2691883002: Uprefix CSS transitions in ui/ and chrome/ styles (Closed)
Patch Set: transitions only Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/login/bubble.js ('k') | ui/login/oobe.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2014 The Chromium Authors. All rights reserved. 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 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview Display manager for WebUI OOBE and login. 6 * @fileoverview Display manager for WebUI OOBE and login.
7 */ 7 */
8 8
9 // TODO(xiyuan): Find a better to share those constants. 9 // TODO(xiyuan): Find a better to share those constants.
10 /** @const */ var SCREEN_OOBE_NETWORK = 'connect'; 10 /** @const */ var SCREEN_OOBE_NETWORK = 'connect';
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after
97 /** @const */ var USER_ACTION_ROLLBACK_TOGGLED = 'rollback-toggled'; 97 /** @const */ var USER_ACTION_ROLLBACK_TOGGLED = 'rollback-toggled';
98 98
99 cr.define('cr.ui.login', function() { 99 cr.define('cr.ui.login', function() {
100 var Bubble = cr.ui.Bubble; 100 var Bubble = cr.ui.Bubble;
101 101
102 /** 102 /**
103 * Maximum time in milliseconds to wait for step transition to finish. 103 * Maximum time in milliseconds to wait for step transition to finish.
104 * The value is used as the duration for ensureTransitionEndEvent below. 104 * The value is used as the duration for ensureTransitionEndEvent below.
105 * It needs to be inline with the step screen transition duration time 105 * It needs to be inline with the step screen transition duration time
106 * defined in css file. The current value in css is 200ms. To avoid emulated 106 * defined in css file. The current value in css is 200ms. To avoid emulated
107 * webkitTransitionEnd fired before real one, 250ms is used. 107 * transitionend fired before real one, 250ms is used.
108 * @const 108 * @const
109 */ 109 */
110 var MAX_SCREEN_TRANSITION_DURATION = 250; 110 var MAX_SCREEN_TRANSITION_DURATION = 250;
111 111
112 /** 112 /**
113 * Groups of screens (screen IDs) that should have the same dimensions. 113 * Groups of screens (screen IDs) that should have the same dimensions.
114 * @type Array<Array<string>> 114 * @type Array<Array<string>>
115 * @const 115 * @const
116 */ 116 */
117 var SCREEN_GROUPS = [[SCREEN_OOBE_NETWORK, 117 var SCREEN_GROUPS = [[SCREEN_OOBE_NETWORK,
(...skipping 414 matching lines...) Expand 10 before | Expand all | Expand 10 after
532 // Default control to be focused (if specified). 532 // Default control to be focused (if specified).
533 var defaultControl = newStep.defaultControl; 533 var defaultControl = newStep.defaultControl;
534 534
535 var outerContainer = $('outer-container'); 535 var outerContainer = $('outer-container');
536 var innerContainer = $('inner-container'); 536 var innerContainer = $('inner-container');
537 var isOOBE = this.isOobeUI(); 537 var isOOBE = this.isOobeUI();
538 if (this.currentStep_ != nextStepIndex && 538 if (this.currentStep_ != nextStepIndex &&
539 !oldStep.classList.contains('hidden')) { 539 !oldStep.classList.contains('hidden')) {
540 if (oldStep.classList.contains('animated')) { 540 if (oldStep.classList.contains('animated')) {
541 innerContainer.classList.add('animation'); 541 innerContainer.classList.add('animation');
542 oldStep.addEventListener('webkitTransitionEnd', function f(e) { 542 oldStep.addEventListener('transitionend', function f(e) {
543 oldStep.removeEventListener('webkitTransitionEnd', f); 543 oldStep.removeEventListener('transitionend', f);
544 if (oldStep.classList.contains('faded') || 544 if (oldStep.classList.contains('faded') ||
545 oldStep.classList.contains('left') || 545 oldStep.classList.contains('left') ||
546 oldStep.classList.contains('right')) { 546 oldStep.classList.contains('right')) {
547 innerContainer.classList.remove('animation'); 547 innerContainer.classList.remove('animation');
548 oldStep.classList.add('hidden'); 548 oldStep.classList.add('hidden');
549 if (!isOOBE) 549 if (!isOOBE)
550 oldStep.hidden = true; 550 oldStep.hidden = true;
551 } 551 }
552 // Refresh defaultControl. It could have changed. 552 // Refresh defaultControl. It could have changed.
553 var defaultControl = newStep.defaultControl; 553 var defaultControl = newStep.defaultControl;
554 if (defaultControl) 554 if (defaultControl)
555 defaultControl.focus(); 555 defaultControl.focus();
556 }); 556 });
557 ensureTransitionEndEvent(oldStep, MAX_SCREEN_TRANSITION_DURATION); 557 ensureTransitionEndEvent(oldStep, MAX_SCREEN_TRANSITION_DURATION);
558 } else { 558 } else {
559 oldStep.classList.add('hidden'); 559 oldStep.classList.add('hidden');
560 oldStep.hidden = true; 560 oldStep.hidden = true;
561 if (defaultControl) 561 if (defaultControl)
562 defaultControl.focus(); 562 defaultControl.focus();
563 } 563 }
564 } else { 564 } else {
565 // First screen on OOBE launch. 565 // First screen on OOBE launch.
566 if (this.isOobeUI() && innerContainer.classList.contains('down')) { 566 if (this.isOobeUI() && innerContainer.classList.contains('down')) {
567 innerContainer.classList.remove('down'); 567 innerContainer.classList.remove('down');
568 innerContainer.addEventListener( 568 innerContainer.addEventListener(
569 'webkitTransitionEnd', function f(e) { 569 'transitionend', function f(e) {
570 innerContainer.removeEventListener('webkitTransitionEnd', f); 570 innerContainer.removeEventListener('transitionend', f);
571 outerContainer.classList.remove('down'); 571 outerContainer.classList.remove('down');
572 $('progress-dots').classList.remove('down'); 572 $('progress-dots').classList.remove('down');
573 chrome.send('loginVisible', ['oobe']); 573 chrome.send('loginVisible', ['oobe']);
574 // Refresh defaultControl. It could have changed. 574 // Refresh defaultControl. It could have changed.
575 var defaultControl = newStep.defaultControl; 575 var defaultControl = newStep.defaultControl;
576 if (defaultControl) 576 if (defaultControl)
577 defaultControl.focus(); 577 defaultControl.focus();
578 }); 578 });
579 ensureTransitionEndEvent(innerContainer, 579 ensureTransitionEndEvent(innerContainer,
580 MAX_SCREEN_TRANSITION_DURATION); 580 MAX_SCREEN_TRANSITION_DURATION);
(...skipping 491 matching lines...) Expand 10 before | Expand all | Expand 10 after
1072 */ 1072 */
1073 DisplayManager.refocusCurrentPod = function() { 1073 DisplayManager.refocusCurrentPod = function() {
1074 $('pod-row').refocusCurrentPod(); 1074 $('pod-row').refocusCurrentPod();
1075 }; 1075 };
1076 1076
1077 // Export 1077 // Export
1078 return { 1078 return {
1079 DisplayManager: DisplayManager 1079 DisplayManager: DisplayManager
1080 }; 1080 };
1081 }); 1081 });
OLDNEW
« no previous file with comments | « ui/login/bubble.js ('k') | ui/login/oobe.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698