Adds option to enable CSS backgrounds for printing.

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 6b8218584ada700beec93b489c3c5eff0d40faf7..9c64789c94b697890126e6dc1036be13878c31ce 100644
--- a/chrome/browser/resources/print_preview/settings/other_options_settings.js
+++ b/chrome/browser/resources/print_preview/settings/other_options_settings.js
@@ -63,6 +63,20 @@ cr.define('print_preview', function() {
      * @private
      */
     this.duplexCheckbox_ = null;
+
+    /**
+     * Print CSS backgrounds container element.
+     * @type {HTMLElement}
+     * @private
+     */
+    this.cssBackgroundContainer_ = null;
+
+    /**
+     * Print CSS backgrounds checkbox.
+     * @type {HTMLInputElement}
+     * @private
+     */
+    this.cssBackgroundCheckbox_ = null;
   };
 
   OtherOptionsSettings.prototype = {
@@ -73,6 +87,7 @@ cr.define('print_preview', function() {
       this.headerFooterCheckbox_.disabled = !isEnabled;
       this.fitToPageCheckbox_.disabled = !isEnabled;
       this.duplexCheckbox_.disabled = !isEnabled;
+      this.cssBackgroundCheckbox_.disabled = !isEnabled;
     },
 
     /** @override */
@@ -91,6 +106,10 @@ cr.define('print_preview', function() {
           'click',
           this.onDuplexCheckboxClick_.bind(this));
       this.tracker.add(
+          this.cssBackgroundCheckbox_,
+          'click',
+          this.onCssBackgroundCheckboxClick_.bind(this));
+      this.tracker.add(
           this.printTicketStore_,
           print_preview.PrintTicketStore.EventType.INITIALIZE,
           this.onPrintTicketStoreChange_.bind(this));
@@ -117,6 +136,8 @@ cr.define('print_preview', function() {
       this.fitToPageCheckbox_ = null;
       this.duplexContainer_ = null;
       this.duplexCheckbox_ = null;
+      this.cssBackgroundContainer_ = null;
+      this.cssBackgroundCheckbox_ = null;
     },
 
     /** @override */
@@ -133,6 +154,10 @@ cr.define('print_preview', function() {
           '.duplex-container');
       this.duplexCheckbox_ = this.duplexContainer_.querySelector(
           '.duplex-checkbox');
+      this.cssBackgroundContainer_ = this.getElement().querySelector(
+          '.css-background-container');
+      this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector(
+          '.css-background-checkbox');
     },
 
     /**
@@ -163,8 +188,18 @@ cr.define('print_preview', function() {
     },
 
     /**
+     * Called when the print CSS backgrounds checkbox is clicked. Updates the
+     * print ticket store.
+     * @private
+     */
+    onCssBackgroundCheckboxClick_: function() {
+      this.printTicketStore_.updateCssBackground(
+          this.cssBackgroundCheckbox_.checked);
+    },
+
+    /**
      * Called when the print ticket store has changed. Hides or shows the
-     * setting.
+     * settings.
      * @private
      */
     onPrintTicketStoreChange_: function() {
@@ -182,9 +217,15 @@ cr.define('print_preview', function() {
                    this.printTicketStore_.hasDuplexCapability());
       this.duplexCheckbox_.checked = this.printTicketStore_.isDuplexEnabled();
 
+      setIsVisible(this.cssBackgroundContainer_,
+                   this.printTicketStore_.hasCssBackgroundCapability());
+      this.cssBackgroundCheckbox_.checked =
+          this.printTicketStore_.isCssBackgroundEnabled();
+
       if (this.printTicketStore_.hasHeaderFooterCapability() ||
           this.printTicketStore_.hasFitToPageCapability() ||
-          this.printTicketStore_.hasDuplexCapability()) {
+          this.printTicketStore_.hasDuplexCapability() ||
+          this.printTicketStore_.hasCssBackgroundCapability()) {
         fadeInOption(this.getElement());
       } else {
         fadeOutOption(this.getElement());