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..f98bcfcb1b93544b307c55c70150ad70f7af7d86 100644
--- a/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
+++ b/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js
@@ -32,6 +32,16 @@ settings.BluetoothAddDeviceBehavior = {
       value: /** @return {Array} */ function() {
         return [];
       },
+      observer: 'deviceListChanged_',
+    },
+
+    /**
+     * Reflects the iron-list selecteditem property.
+     * @type {!chrome.bluetooth.Device}
+     */
+    selectedItem: {
+      type: Object,
+      observer: 'selectedItemChanged_',
     },
   },
 
@@ -41,32 +51,33 @@ settings.BluetoothAddDeviceBehavior = {
       this.close();
   },
 
-  /**
-   * @param {!chrome.bluetooth.Device} device
-   * @return {boolean}
-   * @private
-   */
-  deviceNotPaired_: function(device) {
-    return !device.paired;
+  /** @private */
+  deviceListChanged_: function() {
+    this.updateScrollableContents();
+  },
+
+  /** @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 +332,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 +352,20 @@ Polymer({
   open: function() {
     this.pinOrPass = '';
     this.getDialog_().showModal();
+
+    assert(!!this.dialogId);
+    if (this.dialogId != 'addDevice')
+      return;
+
+    // Wait until the iron-list is populated with at least one visible item
+    // then focus it.
+    var intervalId = setInterval(function() {
+      let item = this.$$('iron-list bluetooth-device-list-item');
+      if (item && item.offsetParent != null) {
+        clearInterval(intervalId);
+        item.focus();
+      }
+    }.bind(this), 100);

[dschuyler, 2016/08/23 02:33:11]

nit: since this an interval instead of a timeout, we can use
a small value for the time delay. imo 10ms would be snappy
and still not impose any serious overhead. This is just an 
opinion though, feel free to use another value or leave it
as is.

[stevenjb, 2016/08/23 15:31:43]

Actually, a small delay could have a noticible performance impact. If we are
waiting for the list to fill, which can in practice take a while, executing even
a small amount of JS (which is slooooow) every 10ms can chew up a lot of time.
At some point I think we should measure it, but I was going to suggest that we
increase the interval the one other place where we use setInterval.

[dschuyler, 2016/08/23 22:16:28]

I think this is another, "agree to disagree". This would be another good thing
to 
get a call on (or consensus) from the team. It also seems like something that
can have some real world data applied to the decision :)

   },
 
   close: function() {