MD Settings: Bluetooth: Make top level UI consistent

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

 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.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-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">
@@ skipping 21 matching lines @@
 
       settings-bluetooth-add-device-dialog,
       settings-bluetooth-pair-device-dialog {
         height: 400px;
         padding: 0;
         width: 500px;
       }
     </style>
     <settings-animated-pages id="pages" section="bluetooth">
       <neon-animatable route-path="default">
-        <div class="settings-box first"
+        <div class="settings-box first" actionable
             on-tap="toggleDeviceListExpanded_">
-          <iron-icon icon="settings:bluetooth"></iron-icon>
-          <span class="middle">$i18n{bluetoothEnable}</span>
-          <cr-expand-button id="expandListButton"
-              alt="$i18n{bluetoothExpandA11yLabel}"
-              hidden$="[[!bluetoothEnabled_]]"
-              expanded="{{deviceListExpanded_}}">
-          </cr-expand-button>
-          <paper-toggle-button id="enableBluetooth"
-              checked="{{bluetoothEnabled_}}"
-              disabled="[[!adapterState_.available]]"
-              on-change="onBluetoothEnabledChange_">
-          </paper-toggle-button>
-          <cr-policy-pref-indicator
-              pref="[[prefs.cros.device.allow_bluetooth]]"
-              hidden="[[prefs.cros.device.allow_bluetooth.value]]">
-          </cr-policy-pref-indicator>
+          <div class="start layout horizontal">
+            <iron-icon icon="settings:bluetooth"></iron-icon>
+            <span class="middle flex">$i18n{bluetoothEnable}</span>

[dschuyler, 2016/12/13 00:48:01]

I suspect that line 44 and 56 could be deleted, along with deleting the flex
class entry in line 46. i.e. I'd expect the UI to layout the same after those
deletions.

[stevenjb, 2016/12/13 19:07:45]

Done.

+            <cr-policy-pref-indicator
+                pref="[[prefs.cros.device.allow_bluetooth]]"
+                hidden="[[prefs.cros.device.allow_bluetooth.value]]">
+            </cr-policy-pref-indicator>
+            <cr-expand-button id="expandListButton"
+                alt="$i18n{bluetoothExpandA11yLabel}"
+                hidden$="[[!bluetoothEnabled_]]"
+                expanded="{{deviceListExpanded_}}">
+            </cr-expand-button>
+          </div>
+          <div class="secondary-action">
+            <paper-toggle-button id="enableBluetooth"
+                checked="{{bluetoothEnabled_}}"
+                disabled="[[!adapterState_.available]]"
+                on-change="onBluetoothEnabledChange_"
+                on-tap="doNothing_">
+            </paper-toggle-button>
+          </div>
         </div>
         <iron-collapse opened="[[canShowDeviceList_(bluetoothEnabled_,
                                                     deviceListExpanded_)]]">
           <div id="deviceList" class="list-frame vertical-list"
               on-device-event="onDeviceEvent_">
             <div id="container" class="layout vertical" scrollable>
               <iron-list items="[[getPairedOrConnecting_(deviceList_.*)]]"
                   selection-enabled selected-item="{{selectedItem_}}"
                   scroll-target="container">
                 <template>
@@ skipping 27 matching lines @@
           on-device-event="onDeviceEvent_"
           on-response="onResponse_"
           pairing-device="[[pairingDevice_]]"
           pairing-event="[[pairingEvent_]]">
       </bluetooth-device-dialog>
     </template>
 
   </template>
   <script src="bluetooth_page.js"></script>
 </dom-module>