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

chrome/browser/resources/print_preview/settings/media_size_settings.js

 // Copyright 2014 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';
 
   /**
    * Encapsulates all settings and logic related to the media size selection UI.
    * @param {!print_preview.ticket_items.MediaSize} ticketItem Used to read and
    *     write the media size ticket item.
    * @constructor
-   * @extends {print_preview.Component}
+   * @extends {print_preview.SettingsSection}
    */
   function MediaSizeSettings(ticketItem) {
-    print_preview.Component.call(this);
+    print_preview.SettingsSection.call(this);
 
     /** @private {!print_preview.ticket_items.MediaSize} */
     this.ticketItem_ = ticketItem;
   };
 
   MediaSizeSettings.prototype = {
-    __proto__: print_preview.Component.prototype,
+    __proto__: print_preview.SettingsSection.prototype,
 
-    /** @param {boolean} isEnabled Whether this component is enabled. */
+    /** @override */
+    isAvailable: function() {
+      return this.ticketItem_.isCapabilityAvailable();
+    },
+
+    /** @override */
+    hasCollapsibleContent: function() {
+      return this.isAvailable();
+    },
+
+    /** @override */
     set isEnabled(isEnabled) {
       this.select_.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.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
           this.ticketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
           this.onTicketItemChange_.bind(this));
     },
 
     /**
      * @return {HTMLSelectElement} Select element containing media size options.
      * @private
      */
     get select_() {
       return this.getElement().getElementsByClassName(
           'media-size-settings-select')[0];
     },
 
     /**
      * Makes sure the content of the select element matches the capabilities of
      * the destination.
      * @private
      */
     updateSelect_: function() {
       var select = this.select_;
-      if (!this.ticketItem_.isCapabilityAvailable()) {
+      if (!this.isAvailable()) {
         select.innerHTML = '';
         return;
       }
       // Should the select content be updated?
       var sameContent =
           this.ticketItem_.capability.option.length == select.length &&
           this.ticketItem_.capability.option.every(function(option, index) {
             return select.options[index].value == JSON.stringify(option);
           });
       var indexToSelect = select.selectedIndex;
@@ skipping 50 matching lines @@
       var mediaSize = JSON.parse(select.options[select.selectedIndex].value);
       this.ticketItem_.updateValue(mediaSize);
     },
 
     /**
      * Called when the print ticket store changes. Selects the corresponding
      * select option.
      * @private
      */
     onTicketItemChange_: function() {
-      if (this.ticketItem_.isCapabilityAvailable()) {
-        this.updateSelect_();
-        fadeInOption(this.getElement());
-      } else {
-        fadeOutOption(this.getElement());
-      }
+      this.updateSelect_();
+      this.updateUiStateInternal();
     }
   };
 
   // Export
   return {
     MediaSizeSettings: MediaSizeSettings
   };
 });