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

Side by Side Diff: chrome/browser/resources/print_preview/print_preview_animations.js

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase 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
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 // Counter used to give webkit animations unique names. 5 // Counter used to give animations unique names.
6 var animationCounter = 0; 6 var animationCounter = 0;
7 7
8 var animationEventTracker_ = new EventTracker(); 8 var animationEventTracker_ = new EventTracker();
9 9
10 function addAnimation(code) { 10 function addAnimation(code) {
11 var name = 'anim' + animationCounter; 11 var name = 'anim' + animationCounter;
12 animationCounter++; 12 animationCounter++;
13 var rules = document.createTextNode( 13 var rules = document.createTextNode(
14 '@-webkit-keyframes ' + name + ' {' + code + '}'); 14 '@keyframes ' + name + ' {' + code + '}');
15 var el = document.createElement('style'); 15 var el = document.createElement('style');
16 el.type = 'text/css'; 16 el.type = 'text/css';
17 el.appendChild(rules); 17 el.appendChild(rules);
18 el.setAttribute('id', name); 18 el.setAttribute('id', name);
19 document.body.appendChild(el); 19 document.body.appendChild(el);
20 20
21 return name; 21 return name;
22 } 22 }
23 23
24 /** 24 /**
(...skipping 23 matching lines...) Expand all
48 el.setAttribute('aria-hidden', 'false'); 48 el.setAttribute('aria-hidden', 'false');
49 el.style.height = 'auto'; 49 el.style.height = 'auto';
50 var height = el.offsetHeight; 50 var height = el.offsetHeight;
51 if (opt_justShow) { 51 if (opt_justShow) {
52 el.style.height = ''; 52 el.style.height = '';
53 el.style.opacity = ''; 53 el.style.opacity = '';
54 } else { 54 } else {
55 el.style.height = height + 'px'; 55 el.style.height = height + 'px';
56 var animName = addAnimation(getFadeInAnimationCode(height)); 56 var animName = addAnimation(getFadeInAnimationCode(height));
57 animationEventTracker_.add( 57 animationEventTracker_.add(
58 el, 'webkitAnimationEnd', onFadeInAnimationEnd.bind(el), false); 58 el, 'animationend', onFadeInAnimationEnd.bind(el), false);
59 el.style.webkitAnimationName = animName; 59 el.style.animationName = animName;
60 } 60 }
61 el.classList.add('visible'); 61 el.classList.add('visible');
62 } 62 }
63 63
64 /** 64 /**
65 * Fades out an element. Used for both printing options and error messages 65 * Fades out an element. Used for both printing options and error messages
66 * appearing underneath the textfields. 66 * appearing underneath the textfields.
67 * @param {HTMLElement} el The element to be faded out. 67 * @param {HTMLElement} el The element to be faded out.
68 */ 68 */
69 function fadeOutElement(el) { 69 function fadeOutElement(el) {
70 if (!el.classList.contains('visible')) 70 if (!el.classList.contains('visible'))
71 return; 71 return;
72 fadeInAnimationCleanup(el); 72 fadeInAnimationCleanup(el);
73 el.style.height = 'auto'; 73 el.style.height = 'auto';
74 var height = el.offsetHeight; 74 var height = el.offsetHeight;
75 el.style.height = height + 'px'; 75 el.style.height = height + 'px';
76 el.offsetHeight; // Should force an update of the computed style. 76 el.offsetHeight; // Should force an update of the computed style.
77 animationEventTracker_.add( 77 animationEventTracker_.add(
78 el, 'webkitTransitionEnd', onFadeOutTransitionEnd.bind(el), false); 78 el, 'transitionend', onFadeOutTransitionEnd.bind(el), false);
79 el.classList.add('closing'); 79 el.classList.add('closing');
80 el.classList.remove('visible'); 80 el.classList.remove('visible');
81 el.setAttribute('aria-hidden', 'true'); 81 el.setAttribute('aria-hidden', 'true');
82 } 82 }
83 83
84 /** 84 /**
85 * Executes when a fade out animation ends. 85 * Executes when a fade out animation ends.
86 * @param {WebkitTransitionEvent} event The event that triggered this listener. 86 * @param {Event} event The event that triggered this listener.
87 * @this {HTMLElement} The element where the transition occurred. 87 * @this {HTMLElement} The element where the transition occurred.
88 */ 88 */
89 function onFadeOutTransitionEnd(event) { 89 function onFadeOutTransitionEnd(event) {
90 if (event.propertyName != 'height') 90 if (event.propertyName != 'height')
91 return; 91 return;
92 animationEventTracker_.remove(this, 'webkitTransitionEnd'); 92 animationEventTracker_.remove(this, 'transitionend');
93 this.hidden = true; 93 this.hidden = true;
94 } 94 }
95 95
96 /** 96 /**
97 * Executes when a fade in animation ends. 97 * Executes when a fade in animation ends.
98 * @param {WebkitAnimationEvent} event The event that triggered this listener. 98 * @param {Event} event The event that triggered this listener.
99 * @this {HTMLElement} The element where the transition occurred. 99 * @this {HTMLElement} The element where the transition occurred.
100 */ 100 */
101 function onFadeInAnimationEnd(event) { 101 function onFadeInAnimationEnd(event) {
102 this.style.height = ''; 102 this.style.height = '';
103 fadeInAnimationCleanup(this); 103 fadeInAnimationCleanup(this);
104 } 104 }
105 105
106 /** 106 /**
107 * Removes the <style> element corresponding to |animationName| from the DOM. 107 * Removes the <style> element corresponding to |animationName| from the DOM.
108 * @param {HTMLElement} element The animated element. 108 * @param {HTMLElement} element The animated element.
109 */ 109 */
110 function fadeInAnimationCleanup(element) { 110 function fadeInAnimationCleanup(element) {
111 if (element.style.webkitAnimationName) { 111 if (element.style.animationName) {
112 var animEl = document.getElementById(element.style.webkitAnimationName); 112 var animEl = document.getElementById(element.style.animationName);
113 if (animEl) 113 if (animEl)
114 animEl.parentNode.removeChild(animEl); 114 animEl.parentNode.removeChild(animEl);
115 element.style.webkitAnimationName = ''; 115 element.style.animationName = '';
116 animationEventTracker_.remove(element, 'webkitAnimationEnd'); 116 animationEventTracker_.remove(element, 'animationend');
117 } 117 }
118 } 118 }
119 119
120 /** 120 /**
121 * Fades in a printing option existing under |el|. 121 * Fades in a printing option existing under |el|.
122 * @param {HTMLElement} el The element to hide. 122 * @param {HTMLElement} el The element to hide.
123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no 123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no
124 * animation. 124 * animation.
125 */ 125 */
126 function fadeInOption(el, opt_justShow) { 126 function fadeInOption(el, opt_justShow) {
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
182 while (el.childNodes.length > 0) 182 while (el.childNodes.length > 0)
183 div.appendChild(el.firstChild); 183 div.appendChild(el.firstChild);
184 el.appendChild(div); 184 el.appendChild(div);
185 } 185 }
186 186
187 div.className = ''; 187 div.className = '';
188 div.classList.add('collapsible'); 188 div.classList.add('collapsible');
189 for (var i = 0; i < classes.length; i++) 189 for (var i = 0; i < classes.length; i++)
190 div.classList.add(classes[i]); 190 div.classList.add(classes[i]);
191 } 191 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698