Print Preview: Add option to rasterize PDFs and add JPEG compression.

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

Index: chrome/browser/resources/print_preview/settings/other_options_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/other_options_settings.js b/chrome/browser/resources/print_preview/settings/other_options_settings.js
index c5e1563e29a8b76d05d9eea66f8ca0d5ea0fd5c7..fcb192b14c8a75cec34cefb83b59dabd0ad2a3d1 100644
--- a/chrome/browser/resources/print_preview/settings/other_options_settings.js
+++ b/chrome/browser/resources/print_preview/settings/other_options_settings.js
@@ -16,117 +16,48 @@ cr.define('print_preview', function() {
    *     only ticket item.
    * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header
    *     footer ticket item.
+   * @param {!print_preview.ticket_items.Rasterize} rasterize Rasterize ticket
+   *     item.
    * @constructor
    * @extends {print_preview.SettingsSection}
    */
   function OtherOptionsSettings(
-      duplex, fitToPage, cssBackground, selectionOnly, headerFooter) {
+      duplex, fitToPage, cssBackground, selectionOnly, headerFooter,
+      rasterize) {
     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.
-     * @type {!print_preview.ticket_items.FitToPage}
-     * @private
-     */
-    this.fitToPageTicketItem_ = fitToPage;
-
-    /**
-     * Enable CSS backgrounds ticket item, used to read/write.
-     * @type {!print_preview.ticket_items.CssBackground}
-     * @private
-     */
-    this.cssBackgroundTicketItem_ = cssBackground;
-
-    /**
-     * Print selection only ticket item, used to read/write.
-     * @type {!print_preview.ticket_items.SelectionOnly}
-     * @private
-     */
-    this.selectionOnlyTicketItem_ = selectionOnly;
-
-    /**
-     * Header-footer ticket item, used to read/write.
-     * @type {!print_preview.ticket_items.HeaderFooter}
-     * @private
-     */
-    this.headerFooterTicketItem_ = headerFooter;
-
-     /**
-     * Header footer container element.
-     * @type {HTMLElement}
-     * @private
-     */
-    this.headerFooterContainer_ = null;
-
-    /**
-     * Header footer checkbox.
-     * @type {HTMLInputElement}
-     * @private
-     */
-    this.headerFooterCheckbox_ = null;
-
-    /**
-     * Fit-to-page container element.
-     * @type {HTMLElement}
-     * @private
-     */
-    this.fitToPageContainer_ = null;
-
-    /**
-     * Fit-to-page checkbox.
-     * @type {HTMLInputElement}
+     * Ticket items, used to read/write. ticketItems_[i] corresponds to the HTML
+     * container element at index i.
+     * @type {Array<!print_preview.ticket_items.TicketItem>}
      * @private
      */
-    this.fitToPageCheckbox_ = null;
+    this.ticketItems_ = [headerFooter, fitToPage, duplex, cssBackground,

[dpapad, 2016/12/13 23:38:18]

Can this be simplified even more? We have M arrays describing N items. An item
is fully described by the index position within those arrays

array1[i]
array2[i]
array3[i]
...

Can we instead create a wrapper object (perhaps named TicketItemElement?), that
encapsulates all the info (collapsible, ticketItem, container, checkbox etc)?
Then we can have a single array of TicketItemElement instances.

[rbpotter, 2016/12/15 00:50:58]

Done.

+                         rasterize, selectionOnly];
 
     /**
-     * Duplex container element.
-     * @type {HTMLElement}
+     * Array indicating whether the container at index i is collapsible.
+     * @type {Array<boolean>}
      * @private
      */
-    this.duplexContainer_ = null;
+    this.collapsible_ = [true, false, false, true, true, true];
 
     /**
-     * Duplex checkbox.
-     * @type {HTMLInputElement}
+     * Array of container elements. The element at index i corresponds to the
+     * checkbox at index i of checkboxes_, the ticket item at index i of
+     * ticketItems_, and is collapsible if collapsible_[i] is true.
+     * @type {Array<HTMLElement>}
      * @private
      */
-    this.duplexCheckbox_ = null;
+    this.containers_ = [null, null, null, null, null, null];
 
     /**
-     * Print CSS backgrounds container element.
-     * @type {HTMLElement}
+     * Array of checkbox elements. Each checkbox is the checkbox child element
+     * of the corresponding container element in containers_.
+     * @type {Array<HTMLElement>}
      * @private
      */
-    this.cssBackgroundContainer_ = null;
-
-    /**
-     * Print CSS backgrounds checkbox.
-     * @type {HTMLInputElement}
-     * @private
-     */
-    this.cssBackgroundCheckbox_ = null;
-
-    /**
-     * Print selection only container element.
-     * @type {HTMLElement}
-     * @private
-     */
-    this.selectionOnlyContainer_ = null;
-
-    /**
-     * Print selection only checkbox.
-     * @type {HTMLInputElement}
-     * @private
-     */
-    this.selectionOnlyCheckbox_ = null;
+    this.checkboxes_ = [null, null, null, null, null, null];
   };
 
   OtherOptionsSettings.prototype = {
@@ -134,239 +65,106 @@ cr.define('print_preview', function() {
 
     /** @override */
     isAvailable: function() {
-      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
-             this.fitToPageTicketItem_.isCapabilityAvailable() ||
-             this.duplexTicketItem_.isCapabilityAvailable() ||
-             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
-             this.selectionOnlyTicketItem_.isCapabilityAvailable();
+      return this.ticketItems_.some(function(ticketItem) {
+               return ticketItem.isCapabilityAvailable();
+             });
     },
 
     /** @override */
     hasCollapsibleContent: function() {
-      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
-             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
-             this.selectionOnlyTicketItem_.isCapabilityAvailable();
+      return this.collapsible_.some(function(collapsible) {
+               return collapsible;
+             });
     },
 
     /** @override */
     set isEnabled(isEnabled) {
-      this.headerFooterCheckbox_.disabled = !isEnabled;
-      this.fitToPageCheckbox_.disabled = !isEnabled;
-      this.duplexCheckbox_.disabled = !isEnabled;
-      this.cssBackgroundCheckbox_.disabled = !isEnabled;
+      for (var i = 0; i < this.checkboxes_.length - 1; i++) {
+        this.checkboxes_[i].disabled = !isEnabled;
+      }
     },
 
     /** @override */
     enterDocument: function() {
       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_,
-          'click',
-          this.onDuplexCheckboxClick_.bind(this));
-      this.tracker.add(
-          this.cssBackgroundCheckbox_,
-          'click',
-          this.onCssBackgroundCheckboxClick_.bind(this));
-      this.tracker.add(
-          this.selectionOnlyCheckbox_,
-          'click',
-          this.onSelectionOnlyCheckboxClick_.bind(this));
-      this.tracker.add(
-          this.duplexTicketItem_,
-          print_preview.ticket_items.TicketItem.EventType.CHANGE,
-          this.onDuplexChange_.bind(this));
-      this.tracker.add(
-          this.fitToPageTicketItem_,
-          print_preview.ticket_items.TicketItem.EventType.CHANGE,
-          this.onFitToPageChange_.bind(this));
-      this.tracker.add(
-          this.cssBackgroundTicketItem_,
-          print_preview.ticket_items.TicketItem.EventType.CHANGE,
-          this.onCssBackgroundChange_.bind(this));
-      this.tracker.add(
-          this.selectionOnlyTicketItem_,
-          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));
+      for (var i = 0; i < this.checkboxes_.length; i++) {
+        this.tracker.add(
+            this.checkboxes_[i],
+            'click',
+            this.onCheckboxClick_.bind(this, i));
+        this.tracker.add(
+            this.ticketItems_[i],
+            print_preview.ticket_items.TicketItem.EventType.CHANGE,
+            this.onTicketItemChange_.bind(this, i));
+      }
     },
 
     /** @override */
     exitDocument: function() {
       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;
+      this.containers_ = [null, null, null, null, null, null];
+      this.checkboxes_ = [null, null, null, null, null, null];
     },
 
     /** @override */
     decorateInternal: function() {
-      this.headerFooterContainer_ = this.getElement().querySelector(
+      this.containers_[0] = this.getElement().querySelector(
           '.header-footer-container');
-      this.headerFooterCheckbox_ = this.headerFooterContainer_.querySelector(
-          '.header-footer-checkbox');
-      this.fitToPageContainer_ = this.getElement().querySelector(
+      this.containers_[1] = this.getElement().querySelector(
           '.fit-to-page-container');
-      this.fitToPageCheckbox_ = this.fitToPageContainer_.querySelector(
-          '.fit-to-page-checkbox');
-      this.duplexContainer_ = this.getElement().querySelector(
+      this.containers_[2] = this.getElement().querySelector(
           '.duplex-container');
-      this.duplexCheckbox_ = this.duplexContainer_.querySelector(
-          '.duplex-checkbox');
-      this.cssBackgroundContainer_ = this.getElement().querySelector(
+      this.containers_[3] = this.getElement().querySelector(
           '.css-background-container');
-      this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector(
-          '.css-background-checkbox');
-      this.selectionOnlyContainer_ = this.getElement().querySelector(
+      this.containers_[4] = this.getElement().querySelector(
+          '.rasterize-container');
+      this.containers_[5] = this.getElement().querySelector(
           '.selection-only-container');
-      this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector(
-          '.selection-only-checkbox');
+      for (var i = 0; i < this.containers_.length; i++) {
+        this.checkboxes_[i] =
+            this.containers_[i].querySelector('.checkbox');
+      }
     },
 
     /** @override */
     updateUiStateInternal: function() {
       if (this.isAvailable()) {
-        setIsVisible(this.headerFooterContainer_,
-                     this.headerFooterTicketItem_.isCapabilityAvailable() &&
-                     !this.collapseContent);
-        setIsVisible(this.fitToPageContainer_,
-                     this.fitToPageTicketItem_.isCapabilityAvailable());
-        setIsVisible(this.duplexContainer_,
-                     this.duplexTicketItem_.isCapabilityAvailable());
-        setIsVisible(this.cssBackgroundContainer_,
-                     this.cssBackgroundTicketItem_.isCapabilityAvailable() &&
-                     !this.collapseContent);
-        setIsVisible(this.selectionOnlyContainer_,
-                     this.selectionOnlyTicketItem_.isCapabilityAvailable() &&
-                     !this.collapseContent);
+        for (var i = 0; i < this.containers_.length; i++) {
+          var shouldShow = this.ticketItems_[i].isCapabilityAvailable() &&
+              (!this.collapsible_[i] || !this.collapseContent);
+          setIsVisible(this.containers_[i], shouldShow);
+        }
       }
       print_preview.SettingsSection.prototype.updateUiStateInternal.call(this);
     },
 
     /** @override */
     isSectionVisibleInternal: function() {
-      if (this.collapseContent) {
-        return this.fitToPageTicketItem_.isCapabilityAvailable() ||
-               this.duplexTicketItem_.isCapabilityAvailable();
+      for (var i = 0; i < this.containers_.length; i++) {
+        if (this.ticketItems_[i].isCapabilityAvailable() &&
+            (!this.collapsible_[i] || !this.collapseContent)) {
+          return true;
+        }
       }
-
-      return this.isAvailable();
-    },
-
-     /**
-     * Called when the header-footer checkbox is clicked. Updates the print
-     * ticket.
-     * @private
-     */
-    onHeaderFooterCheckboxClick_: function() {
-      this.headerFooterTicketItem_.updateValue(
-          this.headerFooterCheckbox_.checked);
+      return false;
     },
 
     /**
-     * Called when the fit-to-page checkbox is clicked. Updates the print
-     * ticket.
+     * Called when a checkbox is clicked. Updates the print ticket.
+     * @param {number} index : The index of the checkbox that was clicked.
      * @private
      */
-    onFitToPageCheckboxClick_: function() {
-      this.fitToPageTicketItem_.updateValue(this.fitToPageCheckbox_.checked);
-    },
-
-    /**
-     * Called when the duplex checkbox is clicked. Updates the print ticket.
-     * @private
-     */
-    onDuplexCheckboxClick_: function() {
-      this.duplexTicketItem_.updateValue(this.duplexCheckbox_.checked);
-    },
-
-    /**
-     * Called when the print CSS backgrounds checkbox is clicked. Updates the
-     * print ticket store.
-     * @private
-     */
-    onCssBackgroundCheckboxClick_: function() {
-      this.cssBackgroundTicketItem_.updateValue(
-          this.cssBackgroundCheckbox_.checked);
-    },
-
-    /**
-     * Called when the print selection only is clicked. Updates the
-     * print ticket store.
-     * @private
-     */
-    onSelectionOnlyCheckboxClick_: function() {
-      this.selectionOnlyTicketItem_.updateValue(
-          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.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.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.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.updateUiStateInternal();
+    onCheckboxClick_: function(index) {
+      this.ticketItems_[index].updateValue(this.checkboxes_[index].checked);
     },
 
     /**
-     * Called when the header-footer ticket item has changed. Updates the
-     * header-footer checkbox.
+     * Called a ticket item changes. Updates the UI state.
+     * @param {number} index : The index of the ticket item that changed.
      * @private
      */
-    onHeaderFooterChange_: function() {
-      this.headerFooterCheckbox_.checked =
-          this.headerFooterTicketItem_.getValue();
+    onTicketItemChange_: function(index) {
+      this.checkboxes_[index].checked = this.ticketItems_[index].getValue();
       this.updateUiStateInternal();
     },
   };