MD Settings: Bluetooth: Use CrScrollableBehavior

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js

Index: chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
diff --git a/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js b/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
index be67ff8624d906d70a2e960c815e27e9e8f38e6a..5c1a8bf95677267536f742f85ca8f4c3a255b83b 100644
--- a/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
+++ b/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
@@ -32,41 +32,66 @@ settings.BluetoothAddDeviceBehavior = {
       value: /** @return {Array} */ function() {
         return [];
       },
+      observer: 'deviceListChanged_',
+    },
+
+    /**
+     * Reflects the iron-list selecteditem property.
+     * @type {!chrome.bluetooth.Device}
+     */
+    selectedItem: {
+      type: Object,
+      observer: 'selectedItemChanged_',
     },
   },
 
+  /** @type {boolean} */ itemWasFocused_: false,
+
   /** @private */
   adapterStateChanged_: function() {
     if (!this.adapterState.powered)
       this.close();
   },
 
-  /**
-   * @param {!chrome.bluetooth.Device} device
-   * @return {boolean}
-   * @private
-   */
-  deviceNotPaired_: function(device) {
-    return !device.paired;
+  /** @private */
+  deviceListChanged_: function() {
+    this.updateScrollableContents();
+    if (this.itemWasFocused_ || !this.getUnpaired_().length)
+      return;
+    // If the iron-list is populated with at least one visible item then
+    // focus it.
+    let item = this.$$('iron-list bluetooth-device-list-item');
+    if (item && item.offsetParent != null) {
+      item.focus();
+      this.itemWasFocused_ = true;
+      return;
+    }
+    // Otherwise try again.
+    setTimeout(function() { this.deviceListChanged_(); }.bind(this), 100);
+  },
+
+  /** @private */
+  selectedItemChanged_: function() {
+    if (this.selectedItem)
+      this.fire('device-event', {action: 'connect', device: this.selectedItem});
   },
 
   /**
-   * @return {boolean} True if deviceList contains any unpaired devices.
+   * @return {!Array<!chrome.bluetooth.Device>}
    * @private
    */
-  haveDevices_: function(deviceList) {
-    return this.deviceList.findIndex(function(d) {
-      return !d.paired;
-    }) != -1;
+  getUnpaired_: function() {
+    return this.deviceList.filter(function(device) {
+      return !device.paired;
+    });
   },
 
   /**
-   * @param {!{detail: {action: string, device: !chrome.bluetooth.Device}}} e
+   * @return {boolean} True if deviceList contains any unpaired devices.
    * @private
    */
-  onDeviceEvent_: function(e) {
-    this.fire('device-event', e.detail);
-    /** @type {Event} */ (e).stopPropagation();
+  haveUnpaired_: function(deviceList) {
+    return this.getUnpaired_().length > 0;
   },
 };
 
@@ -321,12 +346,16 @@ Polymer({
 
   behaviors: [
     I18nBehavior,
+    CrScrollableBehavior,
     settings.BluetoothAddDeviceBehavior,
     settings.BluetoothPairDeviceBehavior,
   ],
 
   properties: {
-    /** Which version of this dialog to show (adding or pairing). */
+    /**
+     * The version of this dialog to show: 'addDevice', 'pairDevice', or
+     * 'connectError'. Must be set before the dialog is opened.
+     */
     dialogId: String,
   },
 
@@ -337,6 +366,7 @@ Polymer({
   open: function() {
     this.pinOrPass = '';
     this.getDialog_().showModal();
+    this.itemWasFocused_ = false;
   },
 
   close: function() {