Hide all variable options initially and show only those supported by the selected printer. Make option slide in/out animation a bit smoother.

BUG=265999

Review URL: https://codereview.chromium.org/176853008

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@254255 0039d316-1c4b-4281-b951-d872f2087c98

15 files changed, 32 insertions, 22 deletions

diff --git a/chrome/browser/resources/print_preview/print_preview.css b/chrome/browser/resources/print_preview/print_preview.css
index 0e686cc..00a8410 100644
--- a/chrome/browser/resources/print_preview/print_preview.css
+++ b/chrome/browser/resources/print_preview/print_preview.css
@@ -59,7 +59,7 @@ header {
 .right-column {
   -webkit-padding-end: 20px;
   display: table-cell;
-  width: auto;
+  width: 99%;
 }
 
 .right-column .checkbox,
diff --git a/chrome/browser/resources/print_preview/print_preview_animations.js b/chrome/browser/resources/print_preview/print_preview_animations.js
index fffe46a..95eb61d 100644
--- a/chrome/browser/resources/print_preview/print_preview_animations.js
+++ b/chrome/browser/resources/print_preview/print_preview_animations.js
@@ -27,7 +27,7 @@ function addAnimation(code) {
  */
 function getFadeInAnimationCode(targetHeight) {
   return '0% { opacity: 0; height: 0; } ' +
-      '80% { height: ' + (targetHeight + 4) + 'px; }' +
+      '80% { opacity: 0.5; height: ' + (targetHeight + 4) + 'px; }' +
       '100% { opacity: 1; height: ' + targetHeight + 'px; }';
 }
 
@@ -118,6 +118,8 @@ function fadeInOutCleanup(animationName) {
 function fadeInOption(el) {
   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 rightColumn = el.querySelector('.right-column');
@@ -132,8 +134,10 @@ function fadeInOption(el) {
 /**
  * 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) {
+function fadeOutOption(el, opt_justHide) {
   if (!el.classList.contains('visible'))
     return;
 
@@ -142,8 +146,13 @@ function fadeOutOption(el) {
   wrapContentsInDiv(rightColumn, ['visible']);
 
   var toAnimate = el.querySelectorAll('.collapsible');
-  for (var i = 0; i < toAnimate.length; i++)
-    fadeOutElement(toAnimate[i]);
+  for (var i = 0; i < toAnimate.length; i++) {
+    if (opt_justHide) {
+      toAnimate[i].hidden = true;
+    } else {
+      fadeOutElement(toAnimate[i]);
+    }
+  }
   el.classList.remove('visible');
 }
 
diff --git a/chrome/browser/resources/print_preview/settings/color_settings.html b/chrome/browser/resources/print_preview/settings/color_settings.html
index 700ec7c..f053ede 100644
--- a/chrome/browser/resources/print_preview/settings/color_settings.html
+++ b/chrome/browser/resources/print_preview/settings/color_settings.html
@@ -1,7 +1,7 @@
 <div id="color-settings"
      class="color-settings two-column visible"
-     aria-hidden="false"
-     aria-live="polite">
+     aria-live="polite"
+     hidden>
   <h1 i18n-content="optionColor"></h1>
   <div class="right-column">
     <div class="radio"><label>
diff --git a/chrome/browser/resources/print_preview/settings/color_settings.js b/chrome/browser/resources/print_preview/settings/color_settings.js
index a741111..933d683 100644
--- a/chrome/browser/resources/print_preview/settings/color_settings.js
+++ b/chrome/browser/resources/print_preview/settings/color_settings.js
@@ -35,6 +35,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.getChildElement('.color-option'),
           'click',
diff --git a/chrome/browser/resources/print_preview/settings/copies_settings.html b/chrome/browser/resources/print_preview/settings/copies_settings.html
index 8c99f50..243abcd 100644
--- a/chrome/browser/resources/print_preview/settings/copies_settings.html
+++ b/chrome/browser/resources/print_preview/settings/copies_settings.html
@@ -1,4 +1,4 @@
-<div id="copies-settings" class="two-column visible">
+<div id="copies-settings" class="two-column visible" hidden>
   <h1 i18n-content="copiesLabel"></h1>
   <div class="right-column">
     <div id="copies-settings-box">
diff --git a/chrome/browser/resources/print_preview/settings/copies_settings.js b/chrome/browser/resources/print_preview/settings/copies_settings.js
index dacef4d..189ada7 100644
--- a/chrome/browser/resources/print_preview/settings/copies_settings.js
+++ b/chrome/browser/resources/print_preview/settings/copies_settings.js
@@ -72,7 +72,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
-
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.getChildElement('input.copies'),
           'input',
diff --git a/chrome/browser/resources/print_preview/settings/layout_settings.html b/chrome/browser/resources/print_preview/settings/layout_settings.html
index 98086bb..b7a663b 100644
--- a/chrome/browser/resources/print_preview/settings/layout_settings.html
+++ b/chrome/browser/resources/print_preview/settings/layout_settings.html
@@ -1,4 +1,4 @@
-<div id="layout-settings" class="two-column visible layout-settings">
+<div id="layout-settings" class="two-column visible layout-settings" hidden>
   <h1 i18n-content="layoutLabel"></h1>
   <div class="right-column">
     <div class="radio"><label>
diff --git a/chrome/browser/resources/print_preview/settings/layout_settings.js b/chrome/browser/resources/print_preview/settings/layout_settings.js
index 2634326..f1a25d6 100644
--- a/chrome/browser/resources/print_preview/settings/layout_settings.js
+++ b/chrome/browser/resources/print_preview/settings/layout_settings.js
@@ -46,6 +46,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.portraitRadioButton_,
           'click',
diff --git a/chrome/browser/resources/print_preview/settings/margin_settings.html b/chrome/browser/resources/print_preview/settings/margin_settings.html
index b3faaa3..6a67cce 100644
--- a/chrome/browser/resources/print_preview/settings/margin_settings.html
+++ b/chrome/browser/resources/print_preview/settings/margin_settings.html
@@ -1,4 +1,4 @@
-<div id="margin-settings" class="two-column visible margin-settings">
+<div id="margin-settings" class="two-column visible margin-settings" hidden>
   <h1 i18n-content="marginsLabel"></h1>
   <div class="right-column">
     <select class="margin-settings-select">
diff --git a/chrome/browser/resources/print_preview/settings/margin_settings.js b/chrome/browser/resources/print_preview/settings/margin_settings.js
index 3c5f862..a7c4400 100644
--- a/chrome/browser/resources/print_preview/settings/margin_settings.js
+++ b/chrome/browser/resources/print_preview/settings/margin_settings.js
@@ -44,6 +44,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
diff --git a/chrome/browser/resources/print_preview/settings/other_options_settings.html b/chrome/browser/resources/print_preview/settings/other_options_settings.html
index aa21bb5..9056ece 100644
--- a/chrome/browser/resources/print_preview/settings/other_options_settings.html
+++ b/chrome/browser/resources/print_preview/settings/other_options_settings.html
@@ -1,5 +1,5 @@
 <div id="other-options-settings"
-     class="other-options-settings two-column visible">
+     class="other-options-settings two-column visible" hidden>
   <h1 i18n-content="optionsLabel"></h1>
   <div class="right-column checkbox">
     <div class="header-footer-container checkbox">
diff --git a/chrome/browser/resources/print_preview/settings/other_options_settings.js b/chrome/browser/resources/print_preview/settings/other_options_settings.js
index f256138..ac9f0d1 100644
--- a/chrome/browser/resources/print_preview/settings/other_options_settings.js
+++ b/chrome/browser/resources/print_preview/settings/other_options_settings.js
@@ -143,6 +143,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.headerFooterCheckbox_,
           'click',
diff --git a/chrome/browser/resources/print_preview/settings/page_settings.html b/chrome/browser/resources/print_preview/settings/page_settings.html
index cd98c2f..57bad52 100644
--- a/chrome/browser/resources/print_preview/settings/page_settings.html
+++ b/chrome/browser/resources/print_preview/settings/page_settings.html
@@ -1,4 +1,4 @@
-<div id="page-settings" class="two-column visible page-settings">
+<div id="page-settings" class="two-column visible page-settings" hidden>
   <h1 i18n-content="pagesLabel"></h1>
   <div class="right-column">
     <div class="radio"><label>
diff --git a/chrome/browser/resources/print_preview/settings/page_settings.js b/chrome/browser/resources/print_preview/settings/page_settings.js
index bdd3b0c..ec5c50c 100644
--- a/chrome/browser/resources/print_preview/settings/page_settings.js
+++ b/chrome/browser/resources/print_preview/settings/page_settings.js
@@ -90,6 +90,7 @@ cr.define('print_preview', function() {
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
+      fadeOutOption(this.getElement(), true);
       this.tracker.add(
           this.allRadio_, 'click', this.onAllRadioClick_.bind(this));
       this.tracker.add(
diff --git a/chrome/test/data/webui/print_preview.js b/chrome/test/data/webui/print_preview.js
index 6f8d246..eed0453 100644
--- a/chrome/test/data/webui/print_preview.js
+++ b/chrome/test/data/webui/print_preview.js
@@ -226,9 +226,9 @@ function checkElementDisplayed(el, isDisplayed) {
 
 // Test that disabled settings hide the disabled sections.
 TEST_F('PrintPreviewWebUITest', 'TestSectionsDisabled', function() {
-  checkSectionVisible($('layout-settings'), true);
-  checkSectionVisible($('color-settings'), true);
-  checkSectionVisible($('copies-settings'), true);
+  checkSectionVisible($('layout-settings'), false);
+  checkSectionVisible($('color-settings'), false);
+  checkSectionVisible($('copies-settings'), false);
 
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
@@ -247,12 +247,12 @@ TEST_F('PrintPreviewWebUITest', 'TestSectionsDisabled', function() {
     'disableColorOption': true,
     'setColorAsDefault': true,
     'disableCopiesOption': true,
-    'disableLandscapeOption': true,
+    'disableLandscapeOption': false,
     'printerDefaultDuplexValue': 0
   };
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkSectionVisible($('layout-settings'), false);
+  checkSectionVisible($('layout-settings'), true);
   checkSectionVisible($('color-settings'), false);
   checkSectionVisible($('copies-settings'), false);
 });
@@ -571,8 +571,6 @@ TEST_F('PrintPreviewWebUITest', 'TestColorSettingsTrue', function() {
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
-  checkSectionVisible($('color-settings'), true);
-
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = {
@@ -605,8 +603,6 @@ TEST_F('PrintPreviewWebUITest', 'TestColorSettingsFalse', function() {
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
-  checkSectionVisible($('color-settings'), true);
-
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = {