bluetooth: Componentize device list in chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/device_collection.js

Index: chrome/browser/resources/bluetooth_internals/device_collection.js
diff --git a/chrome/browser/resources/bluetooth_internals/device_collection.js b/chrome/browser/resources/bluetooth_internals/device_collection.js
new file mode 100644
index 0000000000000000000000000000000000000000..96e31bada1385a478dbe8f91654fdfa0828cffa4
--- /dev/null
+++ b/chrome/browser/resources/bluetooth_internals/device_collection.js
@@ -0,0 +1,82 @@
+// 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.
+
+/**
+ * Javascript for Device-related features, served from
+ *     chrome://bluetooth-internals/.
+ */
+
+cr.define('device_collection', function() {

[dpapad, 2016/11/04 17:20:00]

Shouldn't all namespaces for code under bluetooth_internals/ have something like
'bluetooth_internal' as a prefix? What prevents this from colliding with a
'device_collection' namespace outside of bluetooth_internals/ ?

[mbrunson, 2016/11/04 22:57:40]

I mainly did this for ease of use in other files. Naming collisions seemed like
a very low possiblility given how cr.define works unless I'm missing something? 

When I made these files I searched around and didn't find an established pattern
in WebUI resources for cr.define. Some directories just use the directory name
most of the time [1], some use what you suggested [2], and some just use the
file name [3]. There's probably a few other styles but I figured [3] reduced the
amount of typing to reference other objects. If your way is generally prefered,
let me know and I'll change it.

[1]
https://cs.chromium.org/chromium/src/chrome/browser/resources/hotword/trainin...

[2]
https://cs.chromium.org/chromium/src/chrome/browser/resources/inline_login/in...

[3]
https://cs.chromium.org/chromium/src/chrome/browser/resources/welcome/win10/s...

[dpapad, 2016/11/04 23:43:51]

I see, there is 3 competing patterns for namespace naming, so either way is fine
with me. Hoping that we do have a WebUI styleguide laying down the rules some
time soon.

FWIW, I think approach [1] is best of both worlds, minimal typing and simple,
just one flat namespace bluetoth_internals for everything under that folder.

+  /*
+   * Collection of devices.
+   * @constructor
+   * @param {!Array} array the starting collection of devices.

[dpapad, 2016/11/04 17:20:00]

s/the/The

[mbrunson, 2016/11/04 22:57:41]

Done.

+   * @extends {cr.ui.ArrayDataModel}
+   */
+  var DeviceCollection = function(array) {
+    cr.ui.ArrayDataModel.call(this, array);

[dpapad, 2016/11/04 17:20:00]

Can you explain a bit why you need to extend ArrayDataModel?

[mbrunson, 2016/11/04 22:57:41]

ArrayDataModel provides a set of functions and events that notifies observers
when the array changes. I used it to prevent a tight coupling between
DeviceCollection and DeviceTable. I wanted a separation of concerns between data
and UI.

I'll add a comment for this.

+  };
+  DeviceCollection.prototype = {
+    __proto__: cr.ui.ArrayDataModel.prototype,
+
+    /**
+     * Finds the Device in the collection with the matching address.
+     * @param {!string} address
+     */
+    getByAddress: function(address) {
+      for (var i = 0; i < this.length; i++) {
+        var device = this.item(i);
+        if (address == device.info.address)
+          return device;
+      }
+      return null;
+    },
+
+    /**
+     * Adds or updates a Device with new DeviceInfo.
+     * @param {!interfaces.BluetoothDevice.DeviceInfo} deviceInfo
+     */
+    addOrUpdate: function(deviceInfo) {
+      var oldDevice = this.getByAddress(deviceInfo.address);
+      if (oldDevice) {
+        // Update rssi if it's valid
+        var rssi = (deviceInfo.rssi && deviceInfo.rssi.value) ||
+            (oldDevice.info.rssi && oldDevice.info.rssi.value);
+
+        oldDevice.info = deviceInfo;
+        oldDevice.info.rssi = { value: rssi };
+        oldDevice.removed = false;
+
+        this.updateIndex(this.indexOf(oldDevice));
+      } else {
+        this.push(new Device(deviceInfo));
+      }
+    },
+
+    /**
+     * Marks the Device as removed.
+     * @param {!interfaces.bluetoothDevice.DeviceInfo} deviceInfo
+     */
+    remove: function(deviceInfo) {
+      var device = this.getByAddress(deviceInfo.address);
+      assert(device, 'Device does not exist.');
+      device.removed = true;
+      this.updateIndex(this.indexOf(device));
+    }
+  };
+
+  /*
+   * Data model for a cached device.
+   * @constructor
+   * @param {!interfaces.BluetoothDevice.DeviceInfo} info
+   */
+  var Device = function(info) {
+    this.info = info;
+    this.removed = false;
+  };
+
+  return {
+    DeviceCollection: DeviceCollection,
+  };
+});