Print Preview: Changing the structure of the html/css.

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++;
@@ skipping 60 matching lines @@
 /**
  * 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);
 }
 
+/**
+ * Fades in a printing option existing under |el|.
+ * @param {HTMLElement} el The element to hide.
+ */
+function fadeInOption(el) {
+  if (el.classList.contains('visible'))
+    return;
+
+  wrapContentsInDiv(el.querySelector('h1'), ['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]);
+  el.classList.add('visible');
+}
+
+/**
+ * Fades out a printing option existing under |el|.
+ * @param {HTMLElement} el The element to hide.
+ */
+function fadeOutOption(el) {
+  if (!el.classList.contains('visible'))
+    return;
+
+  wrapContentsInDiv(el.querySelector('h1'), ['visible']);
+  var rightColumn = el.querySelector('.right-column');
+  wrapContentsInDiv(rightColumn, ['visible']);
+
+  var toAnimate = el.querySelectorAll('.collapsible');
+  for (var i = 0; i < toAnimate.length; i++)
+    fadeOutElement(toAnimate[i]);
+  el.classList.remove('visible');
+}
+
+/**
+ * Wraps the contents of |el| in a div element and attaches css classes
+ * |classes| in the new div, only if has not been already done. It is neccesary
+ * for animating the height of table cells.
+ * @param {HTMLElement} el The element to be processed.
+ * @param {array} classes The css classes to add.
+ */
+function wrapContentsInDiv(el, classes) {
+  var div = el.querySelector('div');
+  if (!div || !div.classList.contains('collapsible')) {
+    el.innerHTML = '<div>' + el.innerHTML + '</div>';
+    div = el.querySelector('div');
+    div.classList.add('collapsible');
+  }
+
+  div.classList = '';

[Evan Stade, 2011/10/26 23:13:14]

I'm kind of surprised this works. Don't you want div.className = ''?

+  for (var i = 0; i < classes.length; i++)
+    div.classList.add(classes[i]);
+}