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

chrome/browser/resources/print_preview/settings/other_options_settings.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.
 
 cr.define('print_preview', function() {
   'use strict';
 
   /**
    * UI component that renders checkboxes for various print options.
    * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item.
    * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket
    *     item.
    * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS
    *     background ticket item.
    * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection
    *     only ticket item.
    * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header
    *     footer ticket item.
    * @constructor
-   * @extends {print_preview.Component}
+   * @extends {print_preview.SettingsSection}
    */
   function OtherOptionsSettings(
       duplex, fitToPage, cssBackground, selectionOnly, headerFooter) {
-    print_preview.Component.call(this);
+    print_preview.SettingsSection.call(this);
 
     /**
      * Duplex ticket item, used to read/write the duplex selection.
      * @type {!print_preview.ticket_items.Duplex}
      * @private
      */
     this.duplexTicketItem_ = duplex;
 
     /**
      * Fit-to-page ticket item, used to read/write the fit-to-page selection.
@@ skipping 88 matching lines @@
 
     /**
      * Print selection only checkbox.
      * @type {HTMLInputElement}
      * @private
      */
     this.selectionOnlyCheckbox_ = null;
   };
 
   OtherOptionsSettings.prototype = {
-    __proto__: print_preview.Component.prototype,
+    __proto__: print_preview.SettingsSection.prototype,
 
-    /** @param {boolean} isEnabled Whether the settings is enabled. */
+    /** @override */
+    isAvailable: function() {
+      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
+             this.fitToPageTicketItem_.isCapabilityAvailable() ||
+             this.duplexTicketItem_.isCapabilityAvailable() ||
+             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
+             this.selectionOnlyTicketItem_.isCapabilityAvailable();
+    },
+
+    /** @override */
+    hasCollapsibleContent: function() {
+      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
+             this.fitToPageTicketItem_.isCapabilityAvailable() ||
+             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
+             this.selectionOnlyTicketItem_.isCapabilityAvailable();
+    },
+
+    /** @override */
     set isEnabled(isEnabled) {
       this.headerFooterCheckbox_.disabled = !isEnabled;
       this.fitToPageCheckbox_.disabled = !isEnabled;
       this.duplexCheckbox_.disabled = !isEnabled;
       this.cssBackgroundCheckbox_.disabled = !isEnabled;
     },
 
     /** @override */
     enterDocument: function() {
-      print_preview.Component.prototype.enterDocument.call(this);
-      fadeOutOption(this.getElement(), true);
+      print_preview.SettingsSection.prototype.enterDocument.call(this);
       this.tracker.add(
           this.headerFooterCheckbox_,
           'click',
           this.onHeaderFooterCheckboxClick_.bind(this));
       this.tracker.add(
           this.fitToPageCheckbox_,
           'click',
           this.onFitToPageCheckboxClick_.bind(this));
       this.tracker.add(
           this.duplexCheckbox_,
@@ skipping 24 matching lines @@
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
           this.onSelectionOnlyChange_.bind(this));
       this.tracker.add(
           this.headerFooterTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
           this.onHeaderFooterChange_.bind(this));
     },
 
     /** @override */
     exitDocument: function() {
-      print_preview.Component.prototype.exitDocument.call(this);
+      print_preview.SettingsSection.prototype.exitDocument.call(this);
       this.headerFooterContainer_ = null;
       this.headerFooterCheckbox_ = null;
       this.fitToPageContainer_ = null;
       this.fitToPageCheckbox_ = null;
       this.duplexContainer_ = null;
       this.duplexCheckbox_ = null;
       this.cssBackgroundContainer_ = null;
       this.cssBackgroundCheckbox_ = null;
       this.selectionOnlyContainer_ = null;
       this.selectionOnlyCheckbox_ = null;
@@ skipping 16 matching lines @@
       this.cssBackgroundContainer_ = this.getElement().querySelector(
           '.css-background-container');
       this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector(
           '.css-background-checkbox');
       this.selectionOnlyContainer_ = this.getElement().querySelector(
           '.selection-only-container');
       this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector(
           '.selection-only-checkbox');
     },
 
-    /**
-     * Updates the state of the entire other options settings area.
-     * @private
-     */
-    updateContainerState_: function() {
-      if (this.headerFooterTicketItem_.isCapabilityAvailable() ||
-          this.fitToPageTicketItem_.isCapabilityAvailable() ||
-          this.duplexTicketItem_.isCapabilityAvailable() ||
-          this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
-          this.selectionOnlyTicketItem_.isCapabilityAvailable()) {
+    /** @override */
+    updateUiStateInternal: function() {
+      if (this.isAvailable()) {
         setIsVisible(this.headerFooterContainer_,
-                     this.headerFooterTicketItem_.isCapabilityAvailable());
+                     this.headerFooterTicketItem_.isCapabilityAvailable() &&
+                     !this.collapseContent);
         setIsVisible(this.fitToPageContainer_,
-                     this.fitToPageTicketItem_.isCapabilityAvailable());
+                     this.fitToPageTicketItem_.isCapabilityAvailable() &&
+                     !this.collapseContent);
         setIsVisible(this.duplexContainer_,
                      this.duplexTicketItem_.isCapabilityAvailable());
         setIsVisible(this.cssBackgroundContainer_,
-                     this.cssBackgroundTicketItem_.isCapabilityAvailable());
+                     this.cssBackgroundTicketItem_.isCapabilityAvailable() &&
+                     !this.collapseContent);
         setIsVisible(this.selectionOnlyContainer_,
-                     this.selectionOnlyTicketItem_.isCapabilityAvailable());
-        fadeInOption(this.getElement());
-      } else {
-        fadeOutOption(this.getElement());
+                     this.selectionOnlyTicketItem_.isCapabilityAvailable() &&
+                     !this.collapseContent);
       }
+      print_preview.SettingsSection.prototype.updateUiStateInternal.call(this);
+    },
+
+    /** @override */
+    isSectionVisibleInternal: function() {
+      return this.collapseContent ?
+          this.duplexTicketItem_.isCapabilityAvailable() : this.isAvailable();
     },
 
     /**
      * Called when the header-footer checkbox is clicked. Updates the print
      * ticket.
      * @private
      */
     onHeaderFooterCheckboxClick_: function() {
       this.headerFooterTicketItem_.updateValue(
           this.headerFooterCheckbox_.checked);
@@ skipping 36 matching lines @@
           this.selectionOnlyCheckbox_.checked);
     },
 
     /**
      * Called when the duplex ticket item has changed. Updates the duplex
      * checkbox.
      * @private
      */
     onDuplexChange_: function() {
       this.duplexCheckbox_.checked = this.duplexTicketItem_.getValue();
-      this.updateContainerState_();
+      this.updateUiStateInternal();
     },
 
     /**
      * Called when the fit-to-page ticket item has changed. Updates the
      * fit-to-page checkbox.
      * @private
      */
     onFitToPageChange_: function() {
       this.fitToPageCheckbox_.checked = this.fitToPageTicketItem_.getValue();
-      this.updateContainerState_();
+      this.updateUiStateInternal();
     },
 
     /**
      * Called when the CSS background ticket item has changed. Updates the
      * CSS background checkbox.
      * @private
      */
     onCssBackgroundChange_: function() {
       this.cssBackgroundCheckbox_.checked =
           this.cssBackgroundTicketItem_.getValue();
-      this.updateContainerState_();
+      this.updateUiStateInternal();
     },
 
     /**
      * Called when the print selection only ticket item has changed. Updates the
      * CSS background checkbox.
      * @private
      */
     onSelectionOnlyChange_: function() {
       this.selectionOnlyCheckbox_.checked =
           this.selectionOnlyTicketItem_.getValue();
-      this.updateContainerState_();
+      this.updateUiStateInternal();
     },
 
     /**
      * Called when the header-footer ticket item has changed. Updates the
      * header-footer checkbox.
      * @private
      */
     onHeaderFooterChange_: function() {
       this.headerFooterCheckbox_.checked =
           this.headerFooterTicketItem_.getValue();
-      this.updateContainerState_();
+      this.updateUiStateInternal();
     }
   };
 
   // Export
   return {
     OtherOptionsSettings: OtherOptionsSettings
   };
 });