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..e2cbde9f3fe22d965ed9b7beee3d74dd0b072c63 100644
--- a/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
+++ b/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html
@@ -14,14 +14,37 @@
 <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);
+      }
+
+      cr-expand-button {
+        -webkit-margin-end: 10px;
+      }
+
+      #deviceList {
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .no-devices {
+        min-height: var(--settings-row-min-height);
+      }
+
+      settings-bluetooth-add-device-dialog,
+      settings-bluetooth-pair-device-dialog {
+        height: 400px;
+        padding: 0;
+        width: 500px;
+      }
+    </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">
             <iron-icon icon="device:bluetooth"></iron-icon>
             <span class="flex" i18n-content="bluetoothEnable"></span>
             <cr-expand-button id="expandListButton"
@@ -33,26 +56,27 @@
                 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)]]">
+          <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>