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

chrome/browser/resources/bluetooth_internals/bluetooth_internals.js

Index: chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
diff --git a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
index e32988f1f747927759335f64fca83140a9e058bd..8cde1c5bbcba2483fa2bd71b78f61081252da7ae 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
@@ -7,47 +7,31 @@
  *     chrome://bluetooth-internals/.
  */
 
-(function() {
+cr.define('bluetooth_internals', function() {
   var adapter, adapterClient, bluetoothAdapter, bluetoothDevice, connection;
 
-  var REMOVED_CSS = 'removed';
-
-  /*
-   * Data model for a cached device.
-   * @constructor
-   * @param {!bluetoothDevice.DeviceInfo} info
-   */
-  var Device = function(info) { this.info = info; };
-
   /**
    * The implementation of AdapterClient in
    *     device/bluetooth/public/interfaces/adapter.mojom. This also manages the
    *     client-side collection of devices.
    * @constructor
    */
-  var AdapterClient = function() { this.devices_ = new Map(); };
+  var AdapterClient = function() {
+    this.devices = new device.DeviceCollection([]);
+  };
   AdapterClient.prototype = {
     /**
-     * Caches the device info and updates the device list.
+     * Creates a new Device, stores it for display, and forces an update in the
+     *     |devices| collection. If device is known, it's unmarked as removed.
      * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceAdded: function(deviceInfo) {
-      if (this.devices_.has(deviceInfo.address)) {
-        var deviceElement = $(deviceInfo.address);
-        deviceElement.classList.remove(REMOVED_CSS);
-      } else {
-        this.devices_.set(deviceInfo.address, new Device(deviceInfo));
-
-        var deviceRowTemplate = $('device-row-template');
-        var deviceRow = document.importNode(
-            deviceRowTemplate.content.children[0], true /* deep */);
-        deviceRow.id = deviceInfo.address;
-
-        var deviceList = $('device-list');
-        deviceList.appendChild(deviceRow);
+      var knownDevice = this.devices.getByAddress(deviceInfo.address);
+      if (knownDevice) {
+        knownDevice.removed = false;
       }
 
-      this.deviceChanged(deviceInfo);
+      this.devices.update(new device.Device(deviceInfo));
     },
 
     /**
@@ -55,29 +39,28 @@
      * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceRemoved: function(deviceInfo) {
-      $(deviceInfo.address).classList.add(REMOVED_CSS);
+      var device = this.devices.getByAddress(deviceInfo.address);
+      device.removed = true;
+      this.devices.update(device);
     },
 
     /**
-     * Updates cached device and updates the device list.
+     * Updates the cached device.
      * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceChanged: function(deviceInfo) {
       console.log(new Date(), deviceInfo);
+      assert(this.devices.getByAddress(deviceInfo.address),
+             'Device does not exist.');
 
-      assert(this.devices_.has(deviceInfo.address), 'Device does not exist.');
-
-      this.devices_.get(deviceInfo.address).info = deviceInfo;
-
-      var deviceRow = $(deviceInfo.address);
-      deviceRow.querySelector('.device-name').textContent =
-          deviceInfo.name_for_display;
-      deviceRow.querySelector('.device-address').textContent =
-          deviceInfo.address;
+      var device = this.devices.getByAddress(deviceInfo.address);
 
+      // Update rssi if it's valid
       var rssi = (deviceInfo.rssi && deviceInfo.rssi.value) ||
-          deviceRow.querySelector('.device-rssi').textContent;
-      deviceRow.querySelector('.device-rssi').textContent = rssi;
+          (device.info.rssi && device.info.rssi.value);
+      device.info = deviceInfo;
+      device.info.rssi = { value: rssi };
+      this.devices.update(device);
     }
   };
 
@@ -135,14 +118,26 @@
     });
   }
 
-  document.addEventListener('DOMContentLoaded', function() {
+  function initialize() {
     initializeProxies()
       .then(function() { return adapter.getInfo(); })
       .then(function(response) { console.log('adapter', response.info); })
       .then(function() { return adapter.getDevices(); })
       .then(function(response) {
-        response.devices.forEach(adapterClient.deviceAdded, adapterClient);
+        response.devices.forEach(adapterClient.deviceAdded,
+                                 adapterClient /** this */);
+
+        var deviceTable = new device.DeviceTable();
+        deviceTable.setDevices(adapterClient.devices);
+        document.body.appendChild(deviceTable);
       })
       .catch(function(error) { console.error(error); });
-  });
-})();
+  }
+
+  return {
+    initialize: initialize
+  };
+
+});
+
+document.addEventListener('DOMContentLoaded', bluetooth_internals.initialize);