Use md-select instead of paper-dropdown-menu-light in display.html

BUG=653689
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://chromiumcodereview.appspot.com/2427833002
Cr-Commit-Position: refs/heads/master@{#426544}

chrome/browser/resources/settings/device_page/display.html

@@ -3,16 +3,15 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <link rel="import" href="/device_page/display_layout.html">
 <link rel="import" href="/device_page/display_overscan_dialog.html">
+<link rel="import" href="/md_select_css.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-display">
   <template>
-    <style include="settings-shared">
+    <style include="settings-shared md-select">
      .settings-box.embedded {
        align-self: stretch;
        margin-left: 20px;
@@ -76,19 +75,16 @@
       </div>
       <div class="settings-box embedded">
         <div class="start textarea">$i18n{displayOrientation}</div>
-        <paper-dropdown-menu-light vertical-align="auto" no-label-float>
-          <paper-listbox class="dropdown-content"
-              selected="[[selectedDisplay.rotation]]"
-              attr-for-selected="value"
-              on-iron-activate="onSetOrientation_">
-            <button class="dropdown-item" role="option" value="0">
-              $i18n{displayOrientationStandard}
-            </button>
-            <button class="dropdown-item" role="option" value="90">90</button>
-            <button class="dropdown-item" role="option" value="180">180</button>
-            <button class="dropdown-item" role="option" value="270">270</button>
-          </paper-listbox>
-        </paper-dropdown-menu-light>
+        <div class="md-select-wrapper">
+          <select class="md-select" value="[[selectedDisplay.rotation]]"
+              on-change="onOrientationChange_">
+            <option value="0">$i18n{displayOrientationStandard}</option>
+            <option value="90">90</option>
+            <option value="180">180</option>
+            <option value="270">270</option>
+          </select>
+          <span class="md-select-underline"></span>
+        </div>
       </div>
       <div class="settings-box embedded"
           hidden$="[[selectedDisplay.isInternal]]">

chrome/browser/resources/settings/device_page/display.js

@@ -279,12 +279,13 @@ Polymer({
   },
 
   /**
-   * @param {!{detail: !{selected: string}}} e
+   * @param {!Event} event
    * @private
    */
-  onSetOrientation_: function(e) {
+  onOrientationChange_: function(event) {
+    let target = /** @type {!HTMLSelectElement} */ (event.target);
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
-      rotation: parseInt(e.detail.selected, 10)
+      rotation: parseInt(target.value, 10)
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,

chrome/test/data/webui/settings/device_page_tests.js

@@ -476,7 +476,7 @@ cr.define('device_page_tests', function() {
             displayPage.displays[1].id, displayPage.selectedDisplay.id);
 
         displayPage.onMakePrimaryTap_();
-        displayPage.onSetOrientation_({detail: {selected: '90'}});
+        displayPage.onOrientationChange_({target: {value: '90'}});
         fakeSystemDisplay.onDisplayChanged.callListeners();
 
         return Promise.all([