Printe Preview: add 'More/less options' button and make non-essential sections collapsible

chrome/test/data/webui/print_preview.js

Index: chrome/test/data/webui/print_preview.js
diff --git a/chrome/test/data/webui/print_preview.js b/chrome/test/data/webui/print_preview.js
index 97b644bf3b7dc3e27d89d32248b41d87e9584387..72d14104832c47ef4cfa8a868fc53a9cfd639b46 100644
--- a/chrome/test/data/webui/print_preview.js
+++ b/chrome/test/data/webui/print_preview.js
@@ -393,10 +393,22 @@ TEST_F('PrintPreviewWebUITest', 'SourceIsHTMLCapabilities', function() {
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.fit-to-page-container'),
-      false);
-  checkSectionVisible($('media-size-settings'), true);
+  var moreSettingsDiv = $('more-settings');
+  var mediaSizeDiv = $('media-size-settings');
+  var otherOptionsDiv = $('other-options-settings');
+  var fitToPageEl = otherOptionsDiv.querySelector('.fit-to-page-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(fitToPageEl, false);
+  checkSectionVisible(mediaSizeDiv, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(fitToPageEl, false);
+  checkSectionVisible(mediaSizeDiv, true);
 });
 
 // When the source is "PDF", depending on the selected destination printer, we
@@ -419,12 +431,23 @@ TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(
+      otherOptionsDiv.querySelector('.fit-to-page-container'), false);
+  checkSectionVisible($('media-size-settings'), false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
   checkElementDisplayed(
-      $('other-options-settings').querySelector('.fit-to-page-container'),
-      true);
+      otherOptionsDiv.querySelector('.fit-to-page-container'), true);
   expectTrue(
-      $('other-options-settings').querySelector('.fit-to-page-checkbox').
-          checked);
+      otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
   checkSectionVisible($('media-size-settings'), true);
 });
 
@@ -452,12 +475,20 @@ TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
   cr.dispatchSimpleEvent(
       this.nativeLayer_, print_preview.NativeLayer.EventType.DISABLE_SCALING);
 
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
   checkElementDisplayed(
-      $('other-options-settings').querySelector('.fit-to-page-container'),
-      true);
+      otherOptionsDiv.querySelector('.fit-to-page-container'), true);
   expectFalse(
-      $('other-options-settings').querySelector('.fit-to-page-checkbox').
-          checked);
+      otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
 });
 
 // Make sure that custom margins controls are properly set up.
@@ -507,18 +538,27 @@ TEST_F('PrintPreviewWebUITest', 'PageLayoutHasNoMarginsHideHeaderFooter',
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+  var headerFooterEl =
+      otherOptionsDiv.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(headerFooterEl, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(headerFooterEl, true);
 
   printPreview.printTicketStore_.marginsType.updateValue(
       print_preview.ticket_items.MarginsType.Value.CUSTOM);
   printPreview.printTicketStore_.customMargins.updateValue(
       new print_preview.Margins(0, 0, 0, 0));
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      false);
+  checkElementDisplayed(headerFooterEl, false);
 });
 
 // Page layout has half-inch margins. Show header and footer option.
@@ -539,18 +579,27 @@ TEST_F('PrintPreviewWebUITest', 'PageLayoutHasMarginsShowHeaderFooter',
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+  var headerFooterEl =
+      otherOptionsDiv.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(headerFooterEl, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(headerFooterEl, true);
 
   printPreview.printTicketStore_.marginsType.updateValue(
       print_preview.ticket_items.MarginsType.Value.CUSTOM);
   printPreview.printTicketStore_.customMargins.updateValue(
       new print_preview.Margins(36, 36, 36, 36));
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  checkElementDisplayed(headerFooterEl, true);
 });
 
 // Page layout has zero top and bottom margins. Hide header and footer option.
@@ -572,18 +621,27 @@ TEST_F('PrintPreviewWebUITest',
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+  var headerFooterEl =
+      otherOptionsDiv.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(headerFooterEl, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(headerFooterEl, true);
 
   printPreview.printTicketStore_.marginsType.updateValue(
       print_preview.ticket_items.MarginsType.Value.CUSTOM);
   printPreview.printTicketStore_.customMargins.updateValue(
       new print_preview.Margins(0, 36, 0, 36));
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      false);
+  checkElementDisplayed(headerFooterEl, false);
 });
 
 // Page layout has zero top and half-inch bottom margin. Show header and footer
@@ -606,18 +664,27 @@ TEST_F('PrintPreviewWebUITest',
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  var moreSettingsDiv = $('more-settings');
+  var otherOptionsDiv = $('other-options-settings');
+  var headerFooterEl =
+      otherOptionsDiv.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptionsDiv, true);
+  checkElementDisplayed(headerFooterEl, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(headerFooterEl, true);
 
   printPreview.printTicketStore_.marginsType.updateValue(
       print_preview.ticket_items.MarginsType.Value.CUSTOM);
   printPreview.printTicketStore_.customMargins.updateValue(
       new print_preview.Margins(0, 36, 36, 36));
 
-  checkElementDisplayed(
-      $('other-options-settings').querySelector('.header-footer-container'),
-      true);
+  checkElementDisplayed(headerFooterEl, true);
 });
 
 // Test that the color settings, one option, standard monochrome.
@@ -795,6 +862,7 @@ TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsFalse', function() {
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
+  var moreSettingsDiv = $('more-settings');
   var otherOptionsDiv = $('other-options-settings');
   var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
 
@@ -804,6 +872,12 @@ TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsFalse', function() {
   delete capsSetEvent.settingsInfo.capabilities.printer.duplex;
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
+  // Check that it is collapsed.
+  checkSectionVisible(otherOptionsDiv, false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+  // Now it should be visible.
   checkSectionVisible(otherOptionsDiv, true);
   expectTrue(duplexDiv.hidden);
 });