MD Settings: Dual-role charger selection

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="/device_page/device_page_browser_proxy.html">
 <link rel="import" href="/device_page/display.html">
 <link rel="import" href="/device_page/keyboard.html">
 <link rel="import" href="/device_page/pointers.html">
 <link rel="import" href="/device_page/storage.html">
 <link rel="import" href="/device_page/stylus.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/prefs/prefs.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-device-page">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared md-select"></style>
     <settings-animated-pages id="pages" section="device">
       <neon-animatable id="main" route-path="default">
         <div id="pointersRow" class="settings-box first"
             on-tap="onPointersTap_" actionable>
           <iron-icon icon="[[getPointersIcon_(hasMouse_, hasTouchpad_)]]">
           </iron-icon>
           <div class="middle">
             [[getPointersTitle_(hasMouse_, hasTouchpad_)]]
           </div>
           <button class="subpage-arrow" is="paper-icon-button-light"></button>
@@ skipping 17 matching lines @@
           <iron-icon icon="settings:desktop-windows"></iron-icon>
           <div class="middle">$i18n{displayTitle}</div>
           <button class="subpage-arrow" is="paper-icon-button-light"></button>
         </div>
         <div id="storageRow" class="settings-box" on-tap="onStorageTap_"
             actionable>
           <iron-icon icon="settings:storage"></iron-icon>
           <div class="middle">$i18n{storageTitle}</div>
           <button class="subpage-arrow" is="paper-icon-button-light"></button>
         </div>
+        <template is="dom-if" if="[[enablePowerSettings_]]">
+          <div id="powerRow" class="settings-box two-line">
+            <iron-icon icon="[[batteryIcon_]]"></iron-icon>
+            <div class="middle">
+              <div>[[powerLabel_]]</div>
+              <div class="secondary">[[batteryStatus_.statusText]]</div>
+            </div>
+            <div class="md-select-wrapper"
+                hidden$="[[!showPowerDropdown_]]">
+              <select id="powerSource" class="md-select"
+                  on-change="onPowerSourceChange_">
+                <option value=""
+                    selected$="[[isEqual_('', selectedPowerSourceId_)]]">

[stevenjb, 2017/01/13 17:22:42]

nit: Can we easily use a descriptive value for battery instead of ""?

[Daniel Erat, 2017/01/13 17:44:54]

the IDs are opaque strings that come from powerd. the field from powerd is
actually specified to be external, so an empty string is used to indicate no
external power source:

  // ID of the PowerSource that is currently providing power to the system.
  optional string external_power_source_id = 17;

so i'm not sure that it makes sense to map it to something else here.

[stevenjb, 2017/01/13 18:03:41]

OK, that makes sense.

+                  $i18n{powerSourceBattery}
+                </option>
+                <template is="dom-repeat" items="[[powerSources_]]">
+                  <option value="[[item.id]]"
+                      selected$="[[isEqual_(item.id, selectedPowerSourceId_)]]">
+                    [[item.description]]
+                  </option>
+                </template>
+              </select>
+              <span class="md-select-underline"></span>
+            </div>
+            <div hidden$="[[showPowerDropdown_]]">
+              [[powerSourceName_]]
+            </div>
+          </div>
+        </template>
       </neon-animatable>
       <template is="dom-if" route-path="/pointer-overlay">
         <settings-subpage
             associated-control="[[$$('#pointersRow')]]"
             page-title="[[getPointersTitle_(hasMouse_, hasTouchpad_)]]">
           <settings-pointers prefs="{{prefs}}"
               has-mouse="[[hasMouse_]]" has-touchpad="[[hasTouchpad_]]">
           </settings-pointers>
         </settings-subpage>
       </template>
@@ skipping 24 matching lines @@
         <settings-subpage
             associated-control="[[$$('#storageRow')]]"
             page-title="$i18n{storageTitle}">
           <settings-storage></settings-storage>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="device_page.js"></script>
 </dom-module>