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

chrome/browser/resources/print_preview/settings/layout_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';
 
   /**
    * Creates a LayoutSettings object. This object encapsulates all settings and
    * logic related to layout mode (portrait/landscape).
    * @param {!print_preview.ticket_items.Landscape} landscapeTicketItem Used to
    *     get the layout written to the print ticket.
    * @constructor
-   * @extends {print_preview.Component}
+   * @extends {print_preview.SettingsSection}
    */
   function LayoutSettings(landscapeTicketItem) {
-    print_preview.Component.call(this);
+    print_preview.SettingsSection.call(this);
 
     /**
      * Used to get the layout written to the print ticket.
      * @type {!print_preview.ticket_items.Landscape}
      * @private
      */
     this.landscapeTicketItem_ = landscapeTicketItem;
   };
 
   /**
    * CSS classes used by the layout settings.
    * @enum {string}
    * @private
    */
   LayoutSettings.Classes_ = {
     LANDSCAPE_RADIO: 'layout-settings-landscape-radio',
     PORTRAIT_RADIO: 'layout-settings-portrait-radio'
   };
 
   LayoutSettings.prototype = {
-    __proto__: print_preview.Component.prototype,
+    __proto__: print_preview.SettingsSection.prototype,
 
-    /** @param {boolean} isEnabled Whether this component is enabled. */
+    /** @override */
+    isAvailable: function() {
+      return this.landscapeTicketItem_.isCapabilityAvailable();
+    },
+
+    /** @override */
+    hasCollapsibleContent: function() {
+      return false;
+    },
+
+    /** @override */
     set isEnabled(isEnabled) {
       this.landscapeRadioButton_.disabled = !isEnabled;
       this.portraitRadioButton_.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.portraitRadioButton_,
           'click',
           this.onLayoutButtonClick_.bind(this));
       this.tracker.add(
           this.landscapeRadioButton_,
           'click',
           this.onLayoutButtonClick_.bind(this));
       this.tracker.add(
           this.landscapeTicketItem_,
@@ skipping 27 matching lines @@
     onLayoutButtonClick_: function() {
       this.landscapeTicketItem_.updateValue(this.landscapeRadioButton_.checked);
     },
 
     /**
      * Called when the print ticket store changes state. Updates the state of
      * the radio buttons and hides the setting if necessary.
      * @private
      */
     onLandscapeTicketItemChange_: function() {
-      if (this.landscapeTicketItem_.isCapabilityAvailable()) {
+      if (this.isAvailable()) {
         var isLandscapeEnabled = this.landscapeTicketItem_.getValue();
         this.portraitRadioButton_.checked = !isLandscapeEnabled;
         this.landscapeRadioButton_.checked = isLandscapeEnabled;
-        fadeInOption(this.getElement());
-      } else {
-        fadeOutOption(this.getElement());
       }
+      this.updateUiStateInternal();
     }
   };
 
   // Export
   return {
     LayoutSettings: LayoutSettings
   };
 });