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

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

 <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">
 <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.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">

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

paper-item, paper-listbox, paper-dropdown-menu imports can be removed now.

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

Done.

 <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">
 
 <dom-module id="battery-settings">
   <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">
         <paper-icon-button icon="device-emulator:battery-charging-full">
         </paper-icon-button>
         Power
       </div>
       <label>
         <span class="form-label">Battery state</span>
         <paper-radio-group selected="{{batteryState}}">
@@ skipping 36 matching lines @@
                 <paper-button on-tap="onSetAsSourceTap"
                     hidden$="[[!isDualRole(item)]]"
                     raised="[[!isSelectedSource(item, selectedPowerSourceId)]]"
                     disabled="[[!canBecomeSource(
                         item, selectedPowerSourceId, powerSourceOptions.*)]]">
                   Set as source
                 </paper-button>
                 <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>
       </table>
     </div>
   </template>
   <script src="battery_settings.js"></script>
 </dom-module>