Convert Print Preview layout and color radio buttons to select elements.

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

Index: chrome/browser/resources/print_preview/settings/color_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/color_settings.js b/chrome/browser/resources/print_preview/settings/color_settings.js
index 79cdf09df343ee222c0e04d797400345ab547433..e1814f79bd6e584c123b6cb5f2a89c010f16a26a 100644
--- a/chrome/browser/resources/print_preview/settings/color_settings.js
+++ b/chrome/browser/resources/print_preview/settings/color_settings.js
@@ -39,21 +39,14 @@ cr.define('print_preview', function() {
 
     /** @override */
     set isEnabled(isEnabled) {
-      this.getChildElement('.color-option').disabled = !isEnabled;
-      this.getChildElement('.bw-option').disabled = !isEnabled;
+      this.select_.disabled = !isEnabled;
     },
 
     /** @override */
     enterDocument: function() {
       print_preview.SettingsSection.prototype.enterDocument.call(this);
       this.tracker.add(
-          this.getChildElement('.color-option'),
-          'click',
-          this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, true));
-      this.tracker.add(
-          this.getChildElement('.bw-option'),
-          'click',
-          this.colorTicketItem_.updateValue.bind(this.colorTicketItem_, false));
+          this.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
           this.colorTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -61,14 +54,38 @@ cr.define('print_preview', function() {
     },
 
     /**
+     * Called when the select element is changed. Updates the print ticket
+     * color selection.
+     * @private
+     */
+    onSelectChange_: function() {
+      var select = this.select_;
+      var isColor = select.options[select.selectedIndex].value == 'color';
+      this.colorTicketItem_.updateValue(isColor);
+    },
+
+    /**
+     * @return {HTMLSelectElement} Select element containing the color options.
+     * @private
+     */
+    get select_() {
+      return this.getChildElement('.color-settings-select');
+    },
+
+    /**
      * Updates state of the widget.
      * @private
      */
     updateState_: function() {
       if (this.isAvailable()) {
-        var isColorEnabled = this.colorTicketItem_.getValue();
-        this.getChildElement('.color-option').checked = isColorEnabled;
-        this.getChildElement('.bw-option').checked = !isColorEnabled;
+        var select = this.select_;
+        var valueToSelect = this.colorTicketItem_.getValue() ? 'color' : 'bw';
+        for (var i = 0; i < select.options.length; i++) {
+          if (select.options[i].value == valueToSelect) {
+            select.selectedIndex = i;
+            break;
+          }
+        }
       }
       this.updateUiStateInternal();
     }