Print Preview: Fixing tab order of hidden elements.

chrome/browser/resources/print_preview/print_preview_animations.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Counter used to give webkit animations unique names.
 var animationCounter = 0;
 
 function addAnimation(code) {
   var name = 'anim' + animationCounter;
   animationCounter++;
   var rules = document.createTextNode(
       '@-webkit-keyframes ' + name + ' {' + code + '}');
   var el = document.createElement('style');
   el.type = 'text/css';
   el.appendChild(rules);
   el.setAttribute('id', name);
   document.body.appendChild(el);
 
   return name;
 }
 
 /**
+ * Generates css code for fading in an element by animating the height.
+ * @param {number} targetHeight The desired height in pixels after the animation
+ *     ends.
+ * @return {string} The css code for the fade in animation.
+ */
+function getFadeInAnimationCode(targetHeight) {
+  return  '0% { opacity: 0; height: 0; } ' +
+      '80% { height: ' + (targetHeight + 4) + 'px; }' +
+      '100% { opacity: 1; height: ' + targetHeight + 'px; }';
+}
+
+/**
+ * Generates css code for fading out an element by animating the height.
+ * @param {number} startingHeight The desired height in pixels before the
+ *     animation starts.
+ * @return {string} The css code for the fade in animation.
+ */
+function getFadeOutAnimationCode(startingHeight) {
+  return '0% { opacity: 1; height: ' + startingHeight + 'px; }' +
+      '100% { opacity: 1; height: 0; }';
+}
+
+/**
  * Fades in an element. Used for both printing options and error messages
  * appearing underneath the textfields.
  * @param {HTMLElement} el The element to be faded in.
  */
 function fadeInElement(el) {
   if (el.classList.contains('visible'))
     return;
   el.classList.remove('closing');
+  el.hidden = false;
   el.style.height = 'auto';
   var height = el.offsetHeight;
   el.style.height = height + 'px';
-  var animName = addAnimation(
-    '0% { opacity: 0; height: 0; } ' +
-    '80% { height: ' + (height + 4) + 'px; }' +
-    '100% { opacity: 1; height: ' + height + 'px; }');
+  var animName = addAnimation(getFadeInAnimationCode(height));
+  var eventTracker = new EventTracker();
+  eventTracker.add(el, 'webkitAnimationEnd',
+                      onFadeInAnimationEnd.bind(el, animName, eventTracker),
+                      false );
   el.style.webkitAnimationName = animName;
   el.classList.add('visible');
-  el.addEventListener('webkitAnimationEnd', function() {
-    el.style.height = '';
-    el.style.webkitAnimationName = '';
-    fadeInOutCleanup(animName);
-    el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
-  }, false );
 }
 
 /**
  * Fades out an element. Used for both printing options and error messages
  * appearing underneath the textfields.
  * @param {HTMLElement} el The element to be faded out.
  */
 function fadeOutElement(el) {
   if (!el.classList.contains('visible'))
     return;
   el.style.height = 'auto';
   var height = el.offsetHeight;
   el.style.height = height + 'px';
-  var animName = addAnimation(
-    '0% { opacity: 1; height: ' + height + 'px; }' +
-    '100% { opacity: 1; height: 0; }');
+  var animName = addAnimation(getFadeOutAnimationCode(height));
+  var eventTracker = new EventTracker();
+  eventTracker.add(el, 'webkitTransitionEnd',

[Evan Stade, 2011/11/16 04:16:31]

shuoldn't this be Animation not Transition

[dpapad, 2011/11/16 19:37:28]

No, it is transition on purpose, since the fading out is completed by a
transition.

+                      onFadeOutAnimationEnd.bind(el, animName, eventTracker),
+                      false );
   el.style.webkitAnimationName = animName;
   el.classList.add('closing');
   el.classList.remove('visible');
-  el.addEventListener('webkitAnimationEnd', function() {
-    fadeInOutCleanup(animName);
-    el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
-  }, false );
 }
 
 /**
+ * Executes when a fade out animation ends.
+ * @param {string} animationName The name of the animation to be removed.
+ * @param{EventTracker} The |EventTracker| object that was used for adding this
+ *     listener.
+ * @param {WebkitTransitionEvent} event The event that triggered this listener.
+ */
+function onFadeOutAnimationEnd(animationName, eventTracker, event) {
+  fadeInOutCleanup(animationName);
+  eventTracker.remove(event.target, 'webkitTransitionEnd');
+  event.target.hidden = true;
+}
+
+/**
+ * Executes when a fade in animation ends.
+ * @param {string} animationName The name of the animation to be removed.
+ * @param{EventTracker} The |EventTracker| object that was used for adding this
+ *     listener.
+ * @param {WebkitAnimationEvent} event The event that triggered this listener.
+ */
+function onFadeInAnimationEnd(animationName, eventTracker, event) {
+  event.target.style.height = '';
+  event.target.style.webkitAnimationName = '';
+  fadeInOutCleanup(animationName);
+  eventTracker.remove(event.target, 'webkitAnimationEnd');
+}
+
+/**
  * Removes the <style> element corrsponding to |animationName| from the DOM.
  * @param {string} animationName The name of the animation to be removed.
  */
 function fadeInOutCleanup(animationName) {
   animEl = document.getElementById(animationName);
   if (animEl)
     animEl.parentNode.removeChild(animEl);
 }
 
 /**
@@ skipping 46 matching lines @@
     while (el.childNodes.length > 0)
       div.appendChild(el.firstChild);
     el.appendChild(div);
   }
 
   div.className = '';
   div.classList.add('collapsible');
   for (var i = 0; i < classes.length; i++)
     div.classList.add(classes[i]);
 }