Make Print Preview elements transitions smoother.

chrome/browser/resources/print_preview/print_preview_animations.js

 // Copyright (c) 2012 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;
 
 var animationEventTracker_ = new EventTracker();
 
 function addAnimation(code) {
@@ skipping 19 matching lines @@
 function getFadeInAnimationCode(targetHeight) {
   return '0% { opacity: 0; height: 0; } ' +
       '80% { opacity: 0.5; height: ' + (targetHeight + 4) + 'px; }' +
       '100% { opacity: 1; height: ' + targetHeight + 'px; }';
 }
 
 /**
  * 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.
+ * @param {boolean=} opt_justShow Whether {@code el} should be shown with no
+ *     animation.
  */
-function fadeInElement(el) {
+function fadeInElement(el, opt_justShow) {
   if (el.classList.contains('visible'))
     return;
   el.classList.remove('closing');
   el.hidden = false;
   el.setAttribute('aria-hidden', 'false');
   el.style.height = 'auto';
   var height = el.offsetHeight;
   el.style.height = height + 'px';
-  var animName = addAnimation(getFadeInAnimationCode(height));
-  animationEventTracker_.add(
-      el, 'webkitAnimationEnd', onFadeInAnimationEnd.bind(el), false);
-  el.style.webkitAnimationName = animName;
+  if (opt_justShow) {
+    el.style.opacity = 1;
+  } else {
+    var animName = addAnimation(getFadeInAnimationCode(height));
+    animationEventTracker_.add(
+        el, 'webkitAnimationEnd', onFadeInAnimationEnd.bind(el), false);
+    el.style.webkitAnimationName = animName;
+  }
   el.classList.add('visible');
 }
 
 /**
  * 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'))
@@ skipping 42 matching lines @@
     if (animEl)
       animEl.parentNode.removeChild(animEl);
     element.style.webkitAnimationName = '';
     animationEventTracker_.remove(element, 'webkitAnimationEnd');
   }
 }
 
 /**
  * Fades in a printing option existing under |el|.
  * @param {HTMLElement} el The element to hide.
+ * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no
+ *     animation.
  */
-function fadeInOption(el) {
+function fadeInOption(el, opt_justShow) {
   if (el.classList.contains('visible'))
     return;
   // To make the option visible during the first fade in.
   el.hidden = false;
 
-  wrapContentsInDiv(el.querySelector('h1'), ['invisible']);
+  var leftColumn = el.querySelector('.left-column');
+  wrapContentsInDiv(leftColumn, ['invisible']);
   var rightColumn = el.querySelector('.right-column');
   wrapContentsInDiv(rightColumn, ['invisible']);
 
   var toAnimate = el.querySelectorAll('.collapsible');
   for (var i = 0; i < toAnimate.length; i++)
-    fadeInElement(toAnimate[i]);
+    fadeInElement(toAnimate[i], opt_justShow);
   el.classList.add('visible');
 }
 
 /**
  * Fades out a printing option existing under |el|.
  * @param {HTMLElement} el The element to hide.
  * @param {boolean=} opt_justHide Whether {@code el} should be hidden with no
  *     animation.
  */
 function fadeOutOption(el, opt_justHide) {
   if (!el.classList.contains('visible'))
     return;
 
-  wrapContentsInDiv(el.querySelector('h1'), ['visible']);
+  var leftColumn = el.querySelector('.left-column');
+  wrapContentsInDiv(leftColumn, ['visible']);
   var rightColumn = el.querySelector('.right-column');
   wrapContentsInDiv(rightColumn, ['visible']);
 
   var toAnimate = el.querySelectorAll('.collapsible');
   for (var i = 0; i < toAnimate.length; i++) {
     if (opt_justHide) {
       toAnimate[i].hidden = true;
       toAnimate[i].classList.add('closing');
       toAnimate[i].classList.remove('visible');
     } else {
@@ skipping 17 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]);
 }