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() {
@@ skipping 11 matching lines @@
   *     device/bluetooth/public/interfaces/adapter.mojom.
   */
   var AdapterClient = function() {};
   AdapterClient.prototype = {
     /**
     * Logs added device to console, caches the device info, and sets the
     *     GattClient.
     * @param {!bluetoothDevice.DeviceInfo} device
     */
     deviceAdded: function(device) {
       console.log('Device added', device);

[scheib, 2016/10/15 03:51:45]

Remove .log lines now that there's a display?

[mbrunson, 2016/10/18 00:21:25]

I'll remove them but leave the log for adapter.getInfo which I will add a
display for in a different CL.

       devices[device.address] = new Device();
       devices[device.address].info = device;
       setDeviceClient(device);
+      refreshDeviceList();
     },
 
     /**
     * Logs removed device to console and removes the cached device.
     * @param {!bluetoothDevice.DeviceInfo} device
     */
     deviceRemoved: function(device) {
       console.log('Device removed', device);
       delete devices[device.address];
+      refreshDeviceList();
     }
   };
 
   /**
   * The implementation of GattClient in
   *     device/bluetooth/public/interfaces/device.mojom.
   */
   var GattClient = function() {};
   GattClient.prototype = {
     /**
     * Logs received advertising packet to console. caches the last valid
     *     RSSI, and refreshes the device list.
     * @param {!bluetoothDevice.AdvertisingPacket} advertisingPacket the
     *     advertising packet received from the device.
     */
     packetReceived: function(advertisingPacket) {
       console.log(new Date(advertisingPacket.timestamp), advertisingPacket);
 
       if (advertisingPacket.rssi) {
         devices[advertisingPacket.device.address].info.rssi =
             advertisingPacket.rssi;
       }
+      refreshDeviceList();
     }
   };
 
   /**
    * 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) {
@@ skipping 90 matching lines @@
 
       if (!devices[deviceInfo.address]) {
         devices[deviceInfo.address] = new Device();
       }
 
       devices[deviceInfo.address].proxy = device;
       return device;
     });
   }
 
+  /**
+   * Updates the device list with the current devices from the |devices|
+   *     dictionary.
+   */
+  function refreshDeviceList() {
+    var deviceRowTemplate = $('device-row-template');
+    var deviceList = $('device-list');
+    deviceList.innerHTML = '';
+
+    for (var address in devices) {
+      var info = devices[address].info;
+      var deviceRow = deviceRowTemplate.content.cloneNode(true);
+      deviceRow.querySelector('.device-name').innerText =
+          info.name_for_display;
+      deviceRow.querySelector('.device-address').innerText = info.address;
+      deviceRow.querySelector('.device-rssi').innerText = info.rssi || '0';
+      deviceList.appendChild(deviceRow);
+    }
+  }
+
   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);
         });
 
         return Promise.all(response.devices.map(setDeviceClient));
       })
+      .then(refreshDeviceList)
       .catch(function(error) { console.error(error); });
   });
 })();