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

chrome/browser/resources/print_preview/print_preview_animations.js

Index: chrome/browser/resources/print_preview/print_preview_animations.js
diff --git a/chrome/browser/resources/print_preview/print_preview_animations.js b/chrome/browser/resources/print_preview/print_preview_animations.js
index 60caa7ae533bf6205e6c3b540e04591c960a9b80..3a610f61cb9bb9e77b44b1538e6d7ace3fce9abf 100644
--- a/chrome/browser/resources/print_preview/print_preview_animations.js
+++ b/chrome/browser/resources/print_preview/print_preview_animations.js
@@ -78,3 +78,60 @@ function fadeInOutCleanup(animationName) {
     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');
+  rightColumn.classList.remove('no-padding');
+  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');
+  rightColumn.classList.add('no-padding');
+  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.classList = '';
+  for (var i = 0; i < classes.length; i++)
+    div.classList.add(classes[i]);
+}