MD Settings: Bluetooth: Use CrScrollableBehavior

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.exportPath('settings');
 
 (function() {
 
 var PairingEventType = chrome.bluetoothPrivate.PairingEventType;
 
@@ skipping 14 matching lines @@
 
     /**
      * The ordered list of bluetooth devices.
      * @type {!Array<!chrome.bluetooth.Device>}
      */
     deviceList: {
       type: Array,
       value: /** @return {Array} */ function() {
         return [];
       },
+      observer: 'deviceListChanged_',
+    },
+
+    /**
+     * Reflects the iron-list selecteditem property.
+     * @type {!chrome.bluetooth.Device}
+     */
+    selectedItem: {
+      type: Object,
+      observer: 'selectedItemChanged_',
     },
   },
 
   /** @private */
   adapterStateChanged_: function() {
     if (!this.adapterState.powered)
       this.close();
   },
 
+  /** @private */
+  deviceListChanged_: function() {
+    this.updateScrollableContents();
+  },
+
+  /** @private */
+  selectedItemChanged_: function() {
+    if (this.selectedItem)
+      this.fire('device-event', {action: 'connect', device: this.selectedItem});
+  },
+
   /**
-   * @param {!chrome.bluetooth.Device} device
-   * @return {boolean}
+   * @return {!Array<!chrome.bluetooth.Device>}
    * @private
    */
-  deviceNotPaired_: function(device) {
-    return !device.paired;
+  getUnpaired_: function() {
+    return this.deviceList.filter(function(device) {
+      return !device.paired;
+    });
   },
 
   /**
    * @return {boolean} True if deviceList contains any unpaired devices.
    * @private
    */
-  haveDevices_: function(deviceList) {
-    return this.deviceList.findIndex(function(d) {
-      return !d.paired;
-    }) != -1;
-  },
-
-  /**
-   * @param {!{detail: {action: string, device: !chrome.bluetooth.Device}}} e
-   * @private
-   */
-  onDeviceEvent_: function(e) {
-    this.fire('device-event', e.detail);
-    /** @type {Event} */ (e).stopPropagation();
+  haveUnpaired_: function(deviceList) {
+    return this.getUnpaired_().length > 0;
   },
 };
 
 /** @polymerBehavior */
 settings.BluetoothPairDeviceBehavior = {
   properties: {
     /**
      * Current Pairing device.
      * @type {?chrome.bluetooth.Device|undefined}
      */
@@ skipping 234 matching lines @@
     }
     return cssClass;
   },
 };
 
 Polymer({
   is: 'bluetooth-device-dialog',
 
   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,
   },
 
   observers: [
     'dialogUpdated_(dialogId, pairingEvent)',
   ],
 
   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() {
     var dialog = this.getDialog_();
     if (dialog.open)
       dialog.close();
   },
 
   /** @private */
   dialogUpdated_: function() {
@@ skipping 37 matching lines @@
   },
 
   /** @private */
   onDialogCanceled_: function() {
     if (this.dialogId == 'pairDevice')
       this.sendResponse_(chrome.bluetoothPrivate.PairingResponse.CANCEL);
   },
 });
 
 })();