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

chrome/test/data/webui/print_preview.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.
 
 /**
  * Test fixture for print preview WebUI testing.
  * @constructor
  * @extends {testing.Test}
  */
 function PrintPreviewWebUITest() {
@@ skipping 375 matching lines @@
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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
 // show/hide the fit to page option and hide media size selection.
 TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
   this.initialSettings_.isDocumentModifiable_ = false;
 
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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(
-      $('other-options-settings').querySelector('.fit-to-page-container'),
-      true);
+      otherOptionsDiv.querySelector('.fit-to-page-container'), false);
+  checkSectionVisible($('media-size-settings'), false);
+  // Expand it.
+  checkSectionVisible(moreSettingsDiv, true);
+  moreSettingsDiv.click();
+
+  checkElementDisplayed(
+      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);
 });
 
 // When the print scaling is disabled for the source "PDF", we show the fit
 // to page option but the state is unchecked by default.
 TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
   this.initialSettings_.isDocumentModifiable_ = false;
 
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
   // Indicate that the PDF does not support scaling by default.
   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.
 TEST_F('PrintPreviewWebUITest', 'CustomMarginsControlsCheck', function() {
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
@@ skipping 29 matching lines @@
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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.
 TEST_F('PrintPreviewWebUITest', 'PageLayoutHasMarginsShowHeaderFooter',
     function() {
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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.
 TEST_F('PrintPreviewWebUITest',
        'ZeroTopAndBottomMarginsHideHeaderFooter',
        function() {
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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
 // option.
 TEST_F('PrintPreviewWebUITest',
        'ZeroTopAndNonZeroBottomMarginShowHeaderFooter',
        function() {
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   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.
 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsMonochrome', function() {
   this.setUpPreview();
 
   // Only one option, standard monochrome.
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
@@ skipping 157 matching lines @@
   var initialSettingsSetEvent =
      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 
   var localDestsSetEvent =
      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 
+  var moreSettingsDiv = $('more-settings');
   var otherOptionsDiv = $('other-options-settings');
   var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
 
   var capsSetEvent =
      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   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);
 });
 
 // Test that changing the selected printer updates the preview.
 TEST_F('PrintPreviewWebUITest', 'TestPrinterChangeUpdatesPreview', function() {
 
   var initialSettingsSetEvent =
       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
   initialSettingsSetEvent.initialSettings = this.initialSettings_;
@@ skipping 48 matching lines @@
   expectEquals(true, previewFailedMessageEl.hidden);
 
   var printFailedMessageEl =
       previewAreaEl.getElementsByClassName('preview-area-print-failed')[0];
   expectEquals(true, printFailedMessageEl.hidden);
 
   var customMessageEl =
       previewAreaEl.getElementsByClassName('preview-area-custom-message')[0];
   expectEquals(false, customMessageEl.hidden);
 });