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;
 
   /*
    * 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(); };
   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)) {

[dpapad, 2016/10/21 22:46:21]

How can device that was just added can already exist in devices_?

[mbrunson, 2016/10/24 17:15:08]

A device can be removed if it is not detected for 3 minutes. We don't remove it
from the |devices_| dictionary though; Instead, we mark it as removed so the
user can still see it. If it's detected again, deviceAdded is called to re-add
the device, but it already exists in the dictionary, so we just remove the
"removed" class.

+        var deviceElement = $(deviceInfo.address);
+        deviceElement.classList.remove('removed');

[dpapad, 2016/10/21 22:46:21]

Let's put all CSS string literals used in JS in an enum, such that they don't
have to be repeated (which increases the risk of typo's).

var CSS_CLASSES = {
  REMOVED: 'removed',
  ...
};

Or if there is only one CSS class,
var REMOVED_CSS = 'removed';

[mbrunson, 2016/10/24 17:15:08]

Done.

+      } else {
+        this.devices_.set(deviceInfo.address, new Device(deviceInfo));
+
+        var deviceRowTemplate = $('device-row-template');
+        var deviceRow = deviceRowTemplate.content.children[0].cloneNode(
+            true /* deep */);

[dpapad, 2016/10/21 22:46:21]

The recommended way to instantiate templates is document.importNode(), see
example at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Does that not work here?

[mbrunson, 2016/10/24 17:15:08]

Ok. I haven't used it before, but it seems to produce the same results. Done.

+        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.
+     * @param {!bluetoothDevice.DeviceInfo} deviceInfo
      */
     deviceRemoved: function(deviceInfo) {
-      console.log('Device removed', deviceInfo);
-      this.devices_.delete(deviceInfo.address);
+      $(deviceInfo.address).classList.add('removed');
     },
 
     /**
-     * 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);
-      if (this.devices_.has(deviceInfo.address)) {
-        this.devices_.get(deviceInfo.address).info = deviceInfo;
-      }
+
+      if (!this.devices_.has(deviceInfo.address))
+        throw new Error('Device does not exist.');

[dpapad, 2016/10/21 22:46:21]

Can you use assert.js instead, see
https://cs.chromium.org/chromium/src/ui/webui/resources/js/assert.js?l=18.

assert(this.devices_.has(deviceInfo.address), 'Device does not exist');

[mbrunson, 2016/10/24 17:15:08]

Done.

+
+      this.devices_.get(deviceInfo.address).info = deviceInfo;
+
+      var deviceRow = $(deviceInfo.address);
+      deviceRow.querySelector('.device-name').innerText =

[dpapad, 2016/10/21 22:46:22]

You probably want to use textContent (more context
http://kellegous.com/j/2013/02/27/innertext-vs-textcontent/).

[mbrunson, 2016/10/24 17:15:08]

Done.

+          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;
     }
   };
 
   /**
    * 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);
@@ skipping 14 matching lines @@
       adapter.setClient(connection.bindStubDerivedImpl(adapterClient));
     });
   }
 
   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) {
-          adapterClient.deviceAdded(deviceInfo);
-        });
+        response.devices.forEach(adapterClient.deviceAdded, adapterClient);
       })
       .catch(function(error) { console.error(error); });
   });
 })();