WebUI: swap paper-dropdown-menu out for md-select.

chrome/browser/resources/chromeos/emulator/battery_settings.html

Index: chrome/browser/resources/chromeos/emulator/battery_settings.html
diff --git a/chrome/browser/resources/chromeos/emulator/battery_settings.html b/chrome/browser/resources/chromeos/emulator/battery_settings.html
index 9eceac96f0bddbc316c7a467f1608215a9ad8e9b..583d0d30fef400c7bc9714a27adb621b0a56e06d 100644
--- a/chrome/browser/resources/chromeos/emulator/battery_settings.html
+++ b/chrome/browser/resources/chromeos/emulator/battery_settings.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
@@ -17,7 +18,8 @@
   <template>
     <!-- TODO(michaelpg): Wrap the line below to fit within the 80-char limit.
          See https://github.com/Polymer/polymer/pull/3668. -->
-    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment iron-positioning">
+    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment
+        iron-positioning md-select">
     </style>
     <div class="layout vertical">
       <div class="element-label">
@@ -74,14 +76,19 @@
                 <div hidden$="[[isDualRole(item)]]">Source</div>
               </td>
               <td class="control-cell">
-                <paper-dropdown-menu class="device-class-group"
-                    disabled="[[!item.variablePower]]">
-                  <paper-listbox selected="{{item.power}}"
-                      class="dropdown-content" attr-for-selected="data-value">
-                    <paper-item data-value="high">High</paper-item>
-                    <paper-item data-value="low">Low</paper-item>
-                  </paper-listbox>
-                </paper-dropdown-menu>
+                <div class="md-select-wrapper">
+                  <select class="md-select" disabled$="[[!item.variablePower]]"
+                      on-change="onPowerChanged">
+                    <template is="dom-repeat" items="[[powerOptions]]"

[dpapad, 2017/06/15 01:35:36]

Is it necessary to use a dom-repeat for static content (high, low)? Would it
make things easier or harder to not use it?

[scottchen, 2017/06/15 23:50:51]

Discussed offline with dpapad, hard-coding this in the template is easier since
the enum's short anyway.

+                        as="option">
+                      <option value="[[option]]"
+                          selected="[[isPowerEqual(item.power, option)]]">
+                        [[option]]
+                      </option>
+                    </template>
+                  </select>
+                  <span class="md-select-underline"></span>
+                </div>
               </td>
           </template>
         </tbody>