MD Settings: polish top-level bluetooth page

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

Index: chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
diff --git a/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html b/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
index 7c720a64697ebc33233eae56bc98237e539dd2d4..1374cc3721a629385686f907613687b035d3e549 100644
--- a/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
+++ b/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
@@ -16,12 +16,20 @@
 <dom-module id="settings-bluetooth-page">
   <link rel="import" type="css" href="bluetooth_page.css">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      iron-icon[icon="device:bluetooth"] {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+
+      .no-devices {
+        min-height: var(--settings-row-min-height);
+      }
+    </style>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="bluetooth">
       <neon-animatable id="main">
         <div class="settings-box first">
-          <div class="layout horizontal center">
+          <div class="layout horizontal center flex">

[Dan Beam, 2016/04/12 04:28:14]

class="flex" fixes toggle position

             <iron-icon icon="device:bluetooth"></iron-icon>
             <span class="flex" i18n-content="bluetoothEnable"></span>
             <cr-expand-button id="expandListButton"
@@ -33,26 +41,26 @@
                 on-change="onBluetoothEnabledChange_">
             </paper-toggle-button>
           </div>
-          <iron-collapse opened="[[deviceListExpanded]]">
-            <div id="deviceList" class="layout vertical"
-                on-device-event="onDeviceEvent_">
-              <span class="no-devices"
-                  hidden$="[[haveDevices_(deviceList.splices)]]"
-                  i18n-content="bluetoothNoDevices">
-              </span>
-              <template is="dom-repeat" items="[[deviceList]]"
-                  filter="deviceIsPairedOrConnecting_">
-                <bluetooth-device-list-item device="[[item]]">
-                </bluetooth-device-list-item>
-              </template>
-            </div>
-            <div class="settings-box" hidden$="[[!bluetoothEnabled]]">
-              <paper-button id="addDevice" i18n-content="bluetoothAddDevice"
-                  on-tap="onAddDeviceTap_">
-              </paper-button>
-            </div>
-          </iron-collapse>
         </div>
+        <iron-collapse opened="[[canShowDeviceList_(bluetoothEnabled, deviceListExpanded)]]">

[Dan Beam, 2016/04/12 04:28:14]

if the list was open and the toggle disabled bluetooth, wacky things would
happen

[stevenjb, 2016/04/12 15:58:48]

Michael has proposed splitting long computed properties lines in the Web UI
style guide draft
(https://docs.google.com/document/d/1G0t519y_cSW4etXVwruR145abZH0N5-9R7JyejzVo...).
We should discuss further there and migrate towards consistency.

[Dan Beam, 2016/04/12 19:51:02]

Done.

+          <div id="deviceList" class="list-frame vertical-list"
+              on-device-event="onDeviceEvent_">
+            <template is="dom-repeat" items="[[deviceList]]"
+                filter="deviceIsPairedOrConnecting_">
+              <bluetooth-device-list-item device="[[item]]" class="list-item">
+              </bluetooth-device-list-item>
+            </template>
+            <div class="no-devices layout horizontal center"
+                hidden$="[[haveDevices_(deviceList.splices)]]"
+                i18n-content="bluetoothNoDevices">
+            </div>
+          </div>
+          <div class="settings-box" hidden$="[[!bluetoothEnabled]]">
+            <paper-button i18n-content="bluetoothAddDevice"
+                class="primary-button" on-tap="onAddDeviceTap_">
+            </paper-button>
+          </div>
+        </iron-collapse>
       </neon-animatable>
     </settings-animated-pages>