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

Side by Side Diff: ui/login/account_picker/user_pod_row.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/account_picker/user_pod_row.css ('k') | ui/login/bubble.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 User pod row implementation. 6 * @fileoverview User pod row implementation.
7 */ 7 */
8 8
9 cr.define('login', function() { 9 cr.define('login', function() {
10 /** 10 /**
(...skipping 2016 matching lines...) Expand 10 before | Expand all | Expand 10 after
2027 if (this.querySelector('.language-select').multipleRecommendedLocales) 2027 if (this.querySelector('.language-select').multipleRecommendedLocales)
2028 this.classList.add('advanced'); 2028 this.classList.add('advanced');
2029 this.usualLeft = this.left; 2029 this.usualLeft = this.left;
2030 this.makeSpaceForExpandedPod_(); 2030 this.makeSpaceForExpandedPod_();
2031 } else if (typeof(this.usualLeft) != 'undefined') { 2031 } else if (typeof(this.usualLeft) != 'undefined') {
2032 this.left = this.usualLeft; 2032 this.left = this.usualLeft;
2033 } 2033 }
2034 2034
2035 var self = this; 2035 var self = this;
2036 this.classList.add('animating'); 2036 this.classList.add('animating');
2037 this.addEventListener('webkitTransitionEnd', function f(e) { 2037 this.addEventListener('transitionend', function f(e) {
2038 self.removeEventListener('webkitTransitionEnd', f); 2038 self.removeEventListener('transitionend', f);
2039 self.classList.remove('animating'); 2039 self.classList.remove('animating');
2040 2040
2041 // Accessibility focus indicator does not move with the focused 2041 // Accessibility focus indicator does not move with the focused
2042 // element. Sends a 'focus' event on the currently focused element 2042 // element. Sends a 'focus' event on the currently focused element
2043 // so that accessibility focus indicator updates its location. 2043 // so that accessibility focus indicator updates its location.
2044 if (document.activeElement) 2044 if (document.activeElement)
2045 document.activeElement.dispatchEvent(new Event('focus')); 2045 document.activeElement.dispatchEvent(new Event('focus'));
2046 }); 2046 });
2047 // Guard timer set to animation duration + 20ms. 2047 // Guard timer set to animation duration + 20ms.
2048 ensureTransitionEndEvent(this, 200); 2048 ensureTransitionEndEvent(this, 200);
(...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after
2241 * Transition the expanded pod from the basic to the advanced view. 2241 * Transition the expanded pod from the basic to the advanced view.
2242 */ 2242 */
2243 transitionToAdvanced_: function() { 2243 transitionToAdvanced_: function() {
2244 var pod = this; 2244 var pod = this;
2245 var languageAndInputSection = 2245 var languageAndInputSection =
2246 this.querySelector('.language-and-input-section'); 2246 this.querySelector('.language-and-input-section');
2247 this.classList.add('transitioning-to-advanced'); 2247 this.classList.add('transitioning-to-advanced');
2248 setTimeout(function() { 2248 setTimeout(function() {
2249 pod.classList.add('advanced'); 2249 pod.classList.add('advanced');
2250 pod.makeSpaceForExpandedPod_(); 2250 pod.makeSpaceForExpandedPod_();
2251 languageAndInputSection.addEventListener('webkitTransitionEnd', 2251 languageAndInputSection.addEventListener('transitionend',
2252 function observer() { 2252 function observer() {
2253 languageAndInputSection.removeEventListener('webkitTransitionEnd', 2253 languageAndInputSection.removeEventListener('transitionend',
2254 observer); 2254 observer);
2255 pod.classList.remove('transitioning-to-advanced'); 2255 pod.classList.remove('transitioning-to-advanced');
2256 pod.querySelector('.language-select').focus(); 2256 pod.querySelector('.language-select').focus();
2257 }); 2257 });
2258 // Guard timer set to animation duration + 20ms. 2258 // Guard timer set to animation duration + 20ms.
2259 ensureTransitionEndEvent(languageAndInputSection, 380); 2259 ensureTransitionEndEvent(languageAndInputSection, 380);
2260 }, 0); 2260 }, 0);
2261 }, 2261 },
2262 2262
2263 /** 2263 /**
(...skipping 1395 matching lines...) Expand 10 before | Expand all | Expand 10 after
3659 setTimeout(function() { 3659 setTimeout(function() {
3660 Oobe.getInstance().toggleClass('flying-pods', true); 3660 Oobe.getInstance().toggleClass('flying-pods', true);
3661 if (focusedPod) 3661 if (focusedPod)
3662 ensureTransitionEndEvent(focusedPod); 3662 ensureTransitionEndEvent(focusedPod);
3663 }, 0); 3663 }, 0);
3664 3664
3665 // Force input focus for user pod on show and once transition ends. 3665 // Force input focus for user pod on show and once transition ends.
3666 if (focusedPod) { 3666 if (focusedPod) {
3667 var screen = this.parentNode; 3667 var screen = this.parentNode;
3668 var self = this; 3668 var self = this;
3669 focusedPod.addEventListener('webkitTransitionEnd', function f(e) { 3669 focusedPod.addEventListener('transitionend', function f(e) {
3670 focusedPod.removeEventListener('webkitTransitionEnd', f); 3670 focusedPod.removeEventListener('transitionend', f);
3671 focusedPod.reset(true); 3671 focusedPod.reset(true);
3672 // Notify screen that it is ready. 3672 // Notify screen that it is ready.
3673 screen.onShow(); 3673 screen.onShow();
3674 }); 3674 });
3675 } 3675 }
3676 }, 3676 },
3677 3677
3678 /** 3678 /**
3679 * Called right before the pod row is shown. 3679 * Called right before the pod row is shown.
3680 */ 3680 */
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
3731 if (pod && pod.multiProfilesPolicyApplied) { 3731 if (pod && pod.multiProfilesPolicyApplied) {
3732 pod.userTypeBubbleElement.classList.remove('bubble-shown'); 3732 pod.userTypeBubbleElement.classList.remove('bubble-shown');
3733 } 3733 }
3734 } 3734 }
3735 }; 3735 };
3736 3736
3737 return { 3737 return {
3738 PodRow: PodRow 3738 PodRow: PodRow
3739 }; 3739 };
3740 }); 3740 });
OLDNEW
« no previous file with comments | « ui/login/account_picker/user_pod_row.css ('k') | ui/login/bubble.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698