bluetooth: Add device list UI for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.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.
 
 /**
  * Javascript for bluetooth_internals.html, served from
  *     chrome://bluetooth-internals/.
  */
 
 (function() {
   var adapter, adapterClient, bluetoothAdapter, bluetoothDevice, connection;
 
   // Dictionary for address->Device cache.
   var devices = {};
 
   // Data model for a cached device.
   function Device() {};
   Device.prototype = { info: null };
 
   /**
    * The implementation of AdapterClient in
    *     device/bluetooth/public/interfaces/adapter.mojom.
    */
   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);
     }
   };
 
   /**
    * TODO(crbug.com/652361): Move to shared location.
    * Helper to convert callback-based define() API to a promise-based API.
    * @param {!Array<string>} moduleNames
    * @return {!Promise}
    */
   function importModules(moduleNames) {
     return new Promise(function(resolve, reject) {
       define(moduleNames, function(var_args) {
         resolve(Array.prototype.slice.call(arguments, 0));
       });
     });
   }
 
   /**
    * Initializes Mojo proxies for page and Bluetooth services.
    * @return {!Promise} resolves if adapter is acquired, rejects if Bluetooth
    *     is not supported.
    */
   function initializeProxies() {
     return importModules([
       'content/public/renderer/frame_interfaces',
       'device/bluetooth/public/interfaces/adapter.mojom',
       '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;
 
       // Hook up the instance properties.
       AdapterClient.prototype.__proto__ =
           bluetoothAdapter.AdapterClient.stubClass.prototype;
 
       var adapterFactory = connection.bindHandleToProxy(
           frameInterfaces.getInterface(bluetoothAdapter.AdapterFactory.name),
           bluetoothAdapter.AdapterFactory);
 
       // Get an Adapter service.
       return adapterFactory.getAdapter();
     }).then(function(response) {
       if (!response.adapter) {
         throw new Error('Bluetooth Not Supported on this platform.');
       }
 
       adapter = connection.bindHandleToProxy(response.adapter,
                                              bluetoothAdapter.Adapter);
 
       // Create a message pipe and bind one end to client
       // implementation and the other to the Adapter service.
       adapterClient = new AdapterClient();
       adapter.setClient(connection.bindStubDerivedImpl(adapterClient));
     });
   }
 
+  /**
+   * 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); });
   });
 })();