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

BUG=397741

Review URL: https://codereview.chromium.org/535073005

Cr-Commit-Position: refs/heads/master@{#293811}

chrome/browser/resources/print_preview/print_preview.html

@@ -13,10 +13,12 @@
   <link rel="stylesheet" href="common/search_box.css">
   <link rel="stylesheet" href="common/search_bubble.css">
   <link rel="stylesheet" href="settings/destination_settings.css">
+  <link rel="stylesheet" href="settings/color_settings.css">
   <link rel="stylesheet" href="settings/copies_settings.css">
   <link rel="stylesheet" href="settings/page_settings.css">
   <link rel="stylesheet" href="settings/margin_settings.css">
   <link rel="stylesheet" href="settings/media_size_settings.css">
+  <link rel="stylesheet" href="settings/layout_settings.css">
   <link rel="stylesheet" href="settings/advanced_options_settings.css">
   <link rel="stylesheet" href="settings/advanced_settings/advanced_settings.css">
   <link rel="stylesheet" href="settings/advanced_settings/advanced_settings_item.css">

chrome/browser/resources/print_preview/print_preview.js

@@ -1028,13 +1028,13 @@ cr.define('print_preview', function() {
      * @private
      */
     setLayoutSettingsForTest_: function(portrait) {
-      var element = document.querySelector(portrait ?
-          '.layout-settings-portrait-radio' :
-          '.layout-settings-landscape-radio');
-      if (element.checked)
+      var combobox = document.querySelector('.layout-settings-select');
+      if (combobox.value == 'portrait') {
         this.nativeLayer_.previewReadyForTest();
-      else
-        element.click();
+      } else {
+        combobox.value = 'landscape';
+        this.layoutSettings_.onSelectChange_();
+      }
     },
 
     /**

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

+/* 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. */
+
+#color-settings .color-settings-select {
+  height: 28px;
+  margin: 10px 0;
+}

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

@@ -4,13 +4,9 @@
      hidden>
   <h1 i18n-content="optionColor"></h1>
   <div class="right-column">
-    <div class="radio"><label>
-      <input class="color-option" type="radio" name="color">
-      <span i18n-content="optionColor"></span>
-    </label></div>
-    <div class="radio"><label>
-      <input class="bw-option" type="radio" name="color" checked>
-      <span i18n-content="optionBw"></span>
-    </label></div>
+    <select class="color-settings-select">
+      <option i18n-content="optionBw" value="bw" selected></option>
+      <option i18n-content="optionColor" value="color"></option>
+    </select>
   </div>
 </div>

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

@@ -39,36 +39,53 @@ 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,
           this.updateState_.bind(this));
     },
 
+    /**
+     * 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();
     }

chrome/browser/resources/print_preview/settings/layout_settings.css

+/* 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. */
+
+#layout-settings .layout-settings-select {
+  height: 28px;
+  margin: 10px 0;
+}

chrome/browser/resources/print_preview/settings/layout_settings.html

 <div id="layout-settings" class="two-column layout-settings" hidden>
   <h1 i18n-content="layoutLabel"></h1>
   <div class="right-column">
-    <div class="radio"><label>
-      <input class="layout-settings-portrait-radio"
-             type="radio"
-             name="layout"
-             checked>
-      <span i18n-content="optionPortrait"></span>
-    </label></div>
-    <div class="radio"><label>
-      <input class="layout-settings-landscape-radio"
-             type="radio"
-             name="layout">
-      <span i18n-content="optionLandscape"></span>
-    </label></div>
+    <select class="layout-settings-select">
+      <option i18n-content="optionPortrait" value="portrait" selected></option>
+      <option i18n-content="optionLandscape" value="landscape"></option>
+    </select>
   </div>
 </div>

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

@@ -24,16 +24,6 @@ cr.define('print_preview', function() {
     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.SettingsSection.prototype,
 
@@ -49,21 +39,14 @@ cr.define('print_preview', function() {
 
     /** @override */
     set isEnabled(isEnabled) {
-      this.landscapeRadioButton_.disabled = !isEnabled;
-      this.portraitRadioButton_.disabled = !isEnabled;
+      this.select_.disabled = !isEnabled;
     },
 
     /** @override */
     enterDocument: function() {
       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.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker.add(
           this.landscapeTicketItem_,
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
@@ -71,30 +54,23 @@ cr.define('print_preview', function() {
     },
 
     /**
-     * @return {HTMLInputElement} The portrait orientation radio button.
-     * @private
-     */
-    get portraitRadioButton_() {
-      return this.getElement().getElementsByClassName(
-          LayoutSettings.Classes_.PORTRAIT_RADIO)[0];
-    },
-
-    /**
-     * @return {HTMLInputElement} The landscape orientation radio button.
+     * Called when the select element is changed. Updates the print ticket
+     * layout selection.
      * @private
      */
-    get landscapeRadioButton_() {
-      return this.getElement().getElementsByClassName(
-          LayoutSettings.Classes_.LANDSCAPE_RADIO)[0];
+    onSelectChange_: function() {
+      var select = this.select_;
+      var isLandscape =
+          select.options[select.selectedIndex].value == 'landscape';
+      this.landscapeTicketItem_.updateValue(isLandscape);
     },
 
     /**
-     * Called when one of the radio buttons is clicked. Updates the print ticket
-     * store.
+     * @return {HTMLSelectElement} Select element containing the layout options.
      * @private
      */
-    onLayoutButtonClick_: function() {
-      this.landscapeTicketItem_.updateValue(this.landscapeRadioButton_.checked);
+    get select_() {
+      return this.getChildElement('.layout-settings-select');
     },
 
     /**
@@ -104,9 +80,15 @@ cr.define('print_preview', function() {
      */
     onLandscapeTicketItemChange_: function() {
       if (this.isAvailable()) {
-        var isLandscapeEnabled = this.landscapeTicketItem_.getValue();
-        this.portraitRadioButton_.checked = !isLandscapeEnabled;
-        this.landscapeRadioButton_.checked = isLandscapeEnabled;
+        var select = this.select_;
+        var valueToSelect =
+            this.landscapeTicketItem_.getValue() ? 'landscape' : 'portrait';
+        for (var i = 0; i < select.options.length; i++) {
+          if (select.options[i].value == valueToSelect) {
+            select.selectedIndex = i;
+            break;
+          }
+        }
       }
       this.updateUiStateInternal();
     }

chrome/test/data/webui/print_preview.js

@@ -775,8 +775,9 @@ TEST_F('PrintPreviewWebUITest', 'TestColorSettingsBothStandardDefaultColor',
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
   checkSectionVisible($('color-settings'), true);
-  expectTrue($('color-settings').querySelector('.color-option').checked);
-  expectFalse($('color-settings').querySelector('.bw-option').checked);
+  expectEquals(
+      'color',
+      $('color-settings').querySelector('.color-settings-select').value);
 });
 
 // Test that the color settings, two options, both standard, defaults to
@@ -797,8 +798,8 @@ TEST_F('PrintPreviewWebUITest',
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
   checkSectionVisible($('color-settings'), true);
-  expectFalse($('color-settings').querySelector('.color-option').checked);
-  expectTrue($('color-settings').querySelector('.bw-option').checked);
+  expectEquals(
+      'bw', $('color-settings').querySelector('.color-settings-select').value);
 });
 
 // Test that the color settings, two options, both custom, defaults to color.
@@ -818,8 +819,9 @@ TEST_F('PrintPreviewWebUITest',
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
   checkSectionVisible($('color-settings'), true);
-  expectTrue($('color-settings').querySelector('.color-option').checked);
-  expectFalse($('color-settings').querySelector('.bw-option').checked);
+  expectEquals(
+      'color',
+      $('color-settings').querySelector('.color-settings-select').value);
 });
 
 // Test to verify that duplex settings are set according to the printer