MD Settings: polish top-level bluetooth page

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.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/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.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-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 <link rel="import" href="bluetooth_device_list_item.html">
 <link rel="import" href="bluetooth_add_device_dialog.html">
 <link rel="import" href="bluetooth_pair_device_dialog.html">
 
 <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"
                 hidden$="[[!bluetoothEnabled]]"
                 expanded="{{deviceListExpanded}}">
             </cr-expand-button>
             <paper-toggle-button id="enableBluetooth"
                 checked="{{bluetoothEnabled}}"
                 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>
+        <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 class="settings-box" hidden$="[[!bluetoothEnabled]]">
-              <paper-button id="addDevice" i18n-content="bluetoothAddDevice"
-                  on-tap="onAddDeviceTap_">
-              </paper-button>
-            </div>
-          </iron-collapse>
-        </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>
 
     <paper-dialog modal id="deviceDialog" class="layout vertical"
         on-iron-overlay-opened="onDialogOpened_"
         on-iron-overlay-closed="onDialogClosed_">
       <template is="dom-if" if="[[dialogIsVisible_(dialog, 'addDevice')]]"
           restamp>
         <settings-bluetooth-add-device-dialog
             class="layout vertical flex"
@@ skipping 11 matching lines @@
             pairing-event="[[pairingEvent]]"
             on-response="onResponse_"
             on-close-dialog="onCloseDialog_">
         </settings-bluetooth-pair-device-dialog>
       </template>
     </paper-dialog>
 
   </template>
   <script src="bluetooth_page.js"></script>
 </dom-module>