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

chrome/browser/resources/print_preview/settings/copies_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';
 
   /**
    * Component that renders the copies settings UI.
    * @param {!print_preview.ticket_items.Copies} copiesTicketItem Used to read
    *     and write the copies value.
    * @param {!print_preview.ticket_items.Collate} collateTicketItem Used to read
    *     and write the collate value.
    * @constructor
-   * @extends {print_preview.Component}
+   * @extends {print_preview.SettingsSection}
    */
   function CopiesSettings(copiesTicketItem, collateTicketItem) {
-    print_preview.Component.call(this);
+    print_preview.SettingsSection.call(this);
 
     /**
      * Used to read and write the copies value.
      * @type {!print_preview.ticket_items.Copies}
      * @private
      */
     this.copiesTicketItem_ = copiesTicketItem;
 
     /**
      * Used to read and write the collate value.
@@ skipping 18 matching lines @@
   };
 
   /**
    * Delay in milliseconds before processing the textfield.
    * @type {number}
    * @private
    */
   CopiesSettings.TEXTFIELD_DELAY_ = 250;
 
   CopiesSettings.prototype = {
-    __proto__: print_preview.Component.prototype,
+    __proto__: print_preview.SettingsSection.prototype,
 
-    /** @param {boolean} isEnabled Whether the copies settings is enabled. */
+    /** @override */
+    isAvailable: function() {
+      return this.copiesTicketItem_.isCapabilityAvailable();
+    },
+
+    /** @override */
+    hasCollapsibleContent: function() {
+      return false;
+    },
+
+    /** @override */
     set isEnabled(isEnabled) {
       this.getChildElement('input.copies').disabled = !isEnabled;
       this.getChildElement('input.collate').disabled = !isEnabled;
       this.isEnabled_ = isEnabled;
       if (isEnabled) {
         this.updateState_();
       } else {
         this.getChildElement('button.increment').disabled = true;
         this.getChildElement('button.decrement').disabled = true;
       }
     },
 
     /** @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.getChildElement('input.copies'),
           'keydown',
           this.onTextfieldKeyDown_.bind(this));
       this.tracker.add(
           this.getChildElement('input.copies'),
           'input',
           this.onTextfieldInput_.bind(this));
       this.tracker.add(
           this.getChildElement('input.copies'),
@@ skipping 19 matching lines @@
           this.collateTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
           this.updateState_.bind(this));
     },
 
     /**
      * Updates the state of the copies settings UI controls.
      * @private
      */
     updateState_: function() {
-      if (!this.copiesTicketItem_.isCapabilityAvailable()) {
-        fadeOutOption(this.getElement());
-        return;
+      if (this.isAvailable()) {
+        if (this.getChildElement('input.copies').value !=
+            this.copiesTicketItem_.getValue()) {
+          this.getChildElement('input.copies').value =
+              this.copiesTicketItem_.getValue();
+        }
+
+        var currentValueGreaterThan1 = false;
+        if (this.copiesTicketItem_.isValid()) {
+          this.getChildElement('input.copies').classList.remove('invalid');
+          fadeOutElement(this.getChildElement('.hint'));
+          var currentValue = this.copiesTicketItem_.getValueAsNumber();
+          var currentValueGreaterThan1 = currentValue > 1;
+          this.getChildElement('button.increment').disabled =
+              !this.isEnabled_ ||
+              !this.copiesTicketItem_.wouldValueBeValid(currentValue + 1);
+          this.getChildElement('button.decrement').disabled =
+              !this.isEnabled_ ||
+              !this.copiesTicketItem_.wouldValueBeValid(currentValue - 1);
+        } else {
+          this.getChildElement('input.copies').classList.add('invalid');
+          fadeInElement(this.getChildElement('.hint'));
+          this.getChildElement('button.increment').disabled = true;
+          this.getChildElement('button.decrement').disabled = true;
+        }
+
+        if (!(this.getChildElement('.collate-container').hidden =
+               !this.collateTicketItem_.isCapabilityAvailable() ||
+               !currentValueGreaterThan1)) {
+          this.getChildElement('input.collate').checked =
+              this.collateTicketItem_.getValue();
+        }
       }
-
-      if (this.getChildElement('input.copies').value !=
-          this.copiesTicketItem_.getValue()) {
-        this.getChildElement('input.copies').value =
-            this.copiesTicketItem_.getValue();
-      }
-
-      var currentValueGreaterThan1 = false;
-      if (this.copiesTicketItem_.isValid()) {
-        this.getChildElement('input.copies').classList.remove('invalid');
-        fadeOutElement(this.getChildElement('.hint'));
-        this.getChildElement('.hint').setAttribute('aria-hidden', true);
-        var currentValue = this.copiesTicketItem_.getValueAsNumber();
-        var currentValueGreaterThan1 = currentValue > 1;
-        this.getChildElement('button.increment').disabled =
-            !this.isEnabled_ ||
-            !this.copiesTicketItem_.wouldValueBeValid(currentValue + 1);
-        this.getChildElement('button.decrement').disabled =
-            !this.isEnabled_ ||
-            !this.copiesTicketItem_.wouldValueBeValid(currentValue - 1);
-      } else {
-        this.getChildElement('input.copies').classList.add('invalid');
-        this.getChildElement('.hint').setAttribute('aria-hidden', false);
-        fadeInElement(this.getChildElement('.hint'));
-        this.getChildElement('button.increment').disabled = true;
-        this.getChildElement('button.decrement').disabled = true;
-      }
-
-      if (!(this.getChildElement('.collate-container').hidden =
-             !this.collateTicketItem_.isCapabilityAvailable() ||
-             !currentValueGreaterThan1)) {
-        this.getChildElement('input.collate').checked =
-            this.collateTicketItem_.getValue();
-      }
-
-      fadeInOption(this.getElement());
+      this.updateUiStateInternal();
     },
 
     /**
      * Called whenever the increment/decrement buttons are clicked.
      * @param {number} delta Must be 1 for an increment button click and -1 for
      *     a decrement button click.
      * @private
      */
     onButtonClicked_: function(delta) {
       // Assumes text field has a valid number.
@@ skipping 60 matching lines @@
       this.collateTicketItem_.updateValue(
           this.getChildElement('input.collate').checked);
     }
   };
 
   // Export
   return {
     CopiesSettings: CopiesSettings
   };
 });