MD Settings: Bluetooth: Use labels instead of icons to show connection status.

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html

Index: chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
diff --git a/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html b/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
index 8f0adbed9887551b2d88c05ddcc101c72239aa56..a30d5d79f5bf46e7125f45255075c322351a97d0 100644
--- a/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
+++ b/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html
@@ -9,32 +9,27 @@
 
 <dom-module id="bluetooth-device-list-item">
   <style include="settings-shared">
-    #check {
-      -webkit-padding-start: 10px;
-    }
-
-    #deviceIcon {
-      -webkit-padding-end: 10px;
-    }
-
-    span.name {
-      padding: 10px 0;
+    .name[connected] {
+      font-weight: 500;
     }
 
-    span.name[connected] {
-      font-weight: 500;
+    .state[connected] {
+      color: var(--google-green-500);
     }
   </style>
   <template>
-    <div class="flex layout horizontal center" dropdown$="[[dropdownOpened]]">
+    <div class="list-item" dropdown$="[[dropdownOpened]]">

[stevenjb, 2017/01/18 18:06:17]

I'm pretty sure this dropdown$ isn't needed any more, can you go ahead and
remove it?

[fukino, 2017/01/19 01:06:17]

Done.

       <iron-icon id="deviceIcon" icon="[[getDeviceIcon_(device)]]">
       </iron-icon>
-      <span class="name" connected$="[[device.connected]]">
-        [[getDeviceName_(device)]]
-      </span>
-      <iron-icon id="check" icon="cr:check" hidden$="[[!device.connected]]">
-      </iron-icon>
-      <span class="flex"></span>
+      <div class="middle">
+        <div class="name" connected$="[[device.connected]]">
+          [[getDeviceName_(device)]]
+        </div>
+        <div class="state secondary" connected$="[[device.connected]]"
+            hidden$="[[!hasConnectionStatusText_(device)]]">
+          [[getConnectionStatusText_(device)]]
+        </div>
+      </div>
       <span hidden$="[[!device.connecting]]">$i18n{bluetoothConnecting}</span>
       <div hidden$="[[!device.paired]]">
         <paper-icon-button icon="cr:more-vert" on-tap="onMenuButtonTap_"