bluetooth: Add device list UI for 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 c01bc9fafc570eb2c6dd04f261f9596fead3aed8..ad592be66cf64c4e67b7561120c9990e34a4dd31 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
@@ -24,31 +24,27 @@
   var AdapterClient = function() {};
   AdapterClient.prototype = {
     /**
-     * Logs added device to console and caches the device info.
-     * @param {!bluetoothDevice.DeviceInfo} device
+     * Caches the device info and updates the device list.
+     * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceAdded: function(deviceInfo) {
-      console.log('Device added', deviceInfo);
-      devices[deviceInfo.address] = new Device();
-      devices[deviceInfo.address].info = deviceInfo;
+      addDevice(deviceInfo);
     },
 
     /**
-     * Logs removed device to console and removes the cached device.
-     * @param {!bluetoothDevice.DeviceInfo} device
+     * Removes the cached device and updates the device list.
+     * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceRemoved: function(deviceInfo) {
-      console.log('Device removed', deviceInfo);
-      delete devices[deviceInfo.address];
+      removeDevice(deviceInfo);
     },
 
     /**
-     * Logs changed device info to console and updates the cached device.
+     * Caches the last valid RSSI and refreshes the device list.
      * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceChanged: function(deviceInfo) {
-      console.log(new Date(), deviceInfo);
-      devices[deviceInfo.address].info = deviceInfo;
+      updateDevice(deviceInfo);
     }
   };
 
@@ -78,8 +74,6 @@
       'device/bluetooth/public/interfaces/device.mojom',
       'mojo/public/js/connection',
     ]).then(function([frameInterfaces, ...modules]) {
-      console.log('Loaded modules');
-
       // Destructure here to assign global variables.
       [bluetoothAdapter, bluetoothDevice, connection] = modules;
 
@@ -108,20 +102,64 @@
     });
   }
 
+  /**
+   * Adds a device to the device list and caches the values in the device
+   *     dictionary.
+   * @param {!bluetoothDevice.DeviceInfo} deviceInfo
+   */
+  function addDevice(deviceInfo) {
+    devices[deviceInfo.address] = new Device();
+    devices[deviceInfo.address].info = deviceInfo;
+
+    var deviceRowTemplate = $('device-row-template');
+    var deviceList = $('device-list');

[ortuno, 2016/10/21 00:56:36]

nit: Move this down to where it's used.

[mbrunson, 2016/10/21 02:09:34]

Done.

+
+    var deviceRow = deviceRowTemplate.content.children[0].cloneNode(true);

[ortuno, 2016/10/21 00:56:36]

nit: cloneNode(true /* deep */);

[mbrunson, 2016/10/21 02:09:33]

Done.

+    deviceRow.id = deviceInfo.address;
+    deviceList.appendChild(deviceRow);
+
+    updateDevice(deviceInfo);
+  }
+
+  /**
+   * Removes a device from the device list and device dictionary with the
+   *     matching address in the given |deviceInfo|.
+   * @param {!bluetoothDevice.DeviceInfo} deviceInfo
+   */
+  function removeDevice(deviceInfo) {
+    delete devices[deviceInfo.address];
+    var deviceElement = $(deviceInfo.address);
+
+    if (deviceElement) {
+      var deviceList = $('device-list');
+      deviceList.removeChild(deviceElement);

[ortuno, 2016/10/21 00:56:36]

I don't think we want to completely remove elements since it could cause the
whole list to move. Could you change the background to show that the device is
no longer around? That's what we do in the Android Chooser.

[mbrunson, 2016/10/21 02:09:33]

Done.

+    }
+  }
+
+  /**
+   * Updates a device in the device list and device dictionary with the given
+   *     |deviceInfo|.
+   * @param {!bluetoothDevice.DeviceInfo} deviceInfo
+   */
+  function updateDevice(deviceInfo) {
+    var deviceRow = $(deviceInfo.address);
+    if (deviceRow) {

[ortuno, 2016/10/21 00:56:36]

When would you receive a DeviceChanged for a device that's not on the list?
Seems like that would be a bug in the device API which should be logged.

[mbrunson, 2016/10/21 02:09:33]

Isn't the order of messages in Mojo not guaranteed? I assumed there was a
possibility of receiving deviceChanged before deviceAdded for a newly discovered
device.

[ortuno, 2016/10/21 02:16:55]

The order is not guaranteed between pipes e.g. the order of Adapter and Device
messages is not guaranteed but it is guaranteed within a pipe which in this case
is the AdapterClient pipe.

[mbrunson, 2016/10/21 18:16:28]

Ah ok. I'll just throw an exception here for that.

+      deviceRow.querySelector('.device-name').innerText =
+        deviceInfo.name_for_display;
+      deviceRow.querySelector('.device-address').innerText = deviceInfo.address;
+
+      var rssi = (deviceInfo.rssi && deviceInfo.rssi.value) ||
+          deviceRow.querySelector('.device-rssi').innerText;
+      deviceRow.querySelector('.device-rssi').innerText = rssi;
+    }
+  }
+
   document.addEventListener('DOMContentLoaded', function() {
     initializeProxies()
       .then(function() { return adapter.getInfo(); })
       .then(function(response) { console.log('adapter', response.info); })
       .then(function() { return adapter.getDevices(); })
-      .then(function(response) {
-        console.log('devices', response.devices.length);
-
-        response.devices.forEach(function(deviceInfo) {
-          devices[deviceInfo.address] = new Device();
-          devices[deviceInfo.address].info = deviceInfo;
-          console.log(deviceInfo.name_for_display, deviceInfo);
-        });
-      })
+      .then(function(response) { response.devices.forEach(addDevice); })
       .catch(function(error) { console.error(error); });
   });
 })();