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 4582adef574a89ced2976da1a1960d16bd1dac24..98e9ca875b677eb387b424e36d5fdc467bc5731a 100644
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.js
@@ -10,6 +10,8 @@
 (function() {
   var adapter, adapterClient, bluetoothAdapter, bluetoothDevice, connection;
 
+  var REMOVED_CSS = 'removed';
+
   /*
    * Data model for a cached device.
    * @constructor
@@ -26,32 +28,56 @@
   var AdapterClient = function() { this.devices_ = new Map(); };
   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);
-      this.devices_.set(deviceInfo.address, new Device(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);
+      }
+
+      this.deviceChanged(deviceInfo);
     },
 
     /**
-     * Logs removed device to console and removes the cached device.
-     * @param {!bluetoothDevice.DeviceInfo} device
+     * Removes the cached device and updates the device list.

[dpapad, 2016/10/24 18:12:26]

Well, the comment says it "removes the cached device", but as you explained it
only changes how the device is shown. Can you update the comment?

[mbrunson, 2016/10/24 19:27:53]

Done.

+     * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceRemoved: function(deviceInfo) {
-      console.log('Device removed', deviceInfo);
-      this.devices_.delete(deviceInfo.address);
+      $(deviceInfo.address).classList.add(REMOVED_CSS);
     },
 
     /**
-     * Logs changed device info to console and updates the cached device.
+     * Updates cached device and updates the device list.
      * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceChanged: function(deviceInfo) {
       console.log(new Date(), deviceInfo);

[dpapad, 2016/10/24 18:12:26]

Now that this page starts having UI, do you still think the console.logs are
valuable? When can we remove them?

[mbrunson, 2016/10/24 19:27:53]

I'll remove the logs when I have a part of the UI that shows the thing being
logged. So far, logs for adapter-related information and device changes are
logged because I don't have a corresponding UI component for that data. 

An adapter-related information screen will be added after device connections are
landed.

A log screen that the user can easily search will contain the device change
information and various other information relating to the changes in state of
the internal device/bluetooth system. That component is much farther down the
line.

-      if (this.devices_.has(deviceInfo.address)) {
-        this.devices_.get(deviceInfo.address).info = deviceInfo;
-      }
+
+      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 rssi = (deviceInfo.rssi && deviceInfo.rssi.value) ||
+          deviceRow.querySelector('.device-rssi').textContent;
+      deviceRow.querySelector('.device-rssi').textContent = rssi;
     }
   };
 
@@ -81,8 +107,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;
 
@@ -117,11 +141,7 @@
       .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) {
-          adapterClient.deviceAdded(deviceInfo);
-        });
+        response.devices.forEach(adapterClient.deviceAdded, adapterClient);
       })
       .catch(function(error) { console.error(error); });
   });