bluetooth: Add Device connection logic and accompanying user interface.

chrome/browser/resources/bluetooth_internals/device.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 Device-related features, served from
  *     chrome://bluetooth-internals/.
  */
 
+/** @typedef {function(device.Device): Promise} */
+var ConnectionHandler;
+
 cr.define('device', function() {
 
+
   var REMOVED_CSS = 'removed';
 
   /**
    * A table that lists the devices and responds to changes in the given
    *     DeviceCollection.
    * @constructor
    * @extends {HTMLTableElement}
    */
   var DeviceTable = cr.ui.define(function() {
     this.devices_ = null;
+    this.connectHandler_ = null;
+    this.disconnectHandler_ = null;
 
     return document.importNode($('table-template').content.children[0],
-                                   true /* deep */);
+                               true /* deep */);
   });
   DeviceTable.prototype = {
     __proto__: HTMLTableElement.prototype,
 
     /**
      * Decorates an element as a UI element class. Caches references to the
      *    table body and headers.
      */
     decorate: function() {
       this.body_ = this.tBodies[0];
       this.headers_ = this.tHead.rows[0].cells;
     },
 
     /**
+     * Sets the connection handlers for this device table. Handlers are expected
+     *     to return a Promise which resolves or throws an Error. The message
+     *     given in the error is displayed in the last column of the table.
+     * @param {ConnectionHandler} connectHandler Handler that is called
+     *     when a connection needs to be created.
+     * @param {ConnectionHandler} disconnectHandler Handler that is
+     *     called when a connection needs to be closed.
+     */
+    setConnectionHandlers: function(connectHandler, disconnectHandler) {
+      this.connectHandler_ = connectHandler;
+      this.disconnectHandler_ = disconnectHandler;
+    },
+
+    /**
      * Sets the tables device collection.
      * @param {!DeviceCollection} deviceCollection
      */
     setDevices: function(deviceCollection) {
       if (this.devices_) {
         this.devices_.removeEventListener('sorted', this.redraw_.bind(this));
         this.devices_.removeEventListener('change',
                                           this.handleChange_.bind(this));
         this.devices_.removeEventListener('splice',
                                           this.handleSplice_.bind(this));
       }
 
       this.devices_ = deviceCollection;
       this.devices_.addEventListener('sorted', this.redraw_.bind(this));
       this.devices_.addEventListener('change', this.handleChange_.bind(this));
       this.devices_.addEventListener('splice', this.handleSplice_.bind(this));
 
       this.redraw_();
     },
 
     /**
      * Updates table row on change event of the device collection.
      * @param {!Event} event
      */
     handleChange_: function(event) {
       this.updateRow_(this.devices_.item(event.index), event.index);
     },
 
     /**
+     * Generates a function to handle click events on the connect button for the
+     *     given |row|.
+     * @param {HTMLTableRowElement} row The table row that was clicked.
+     * @return {function(Event)}
+     */
+    handleConnect_: function(row) {
+      return function(event) {
+        var cellCount = row.cells.length;
+        var connectCell = row.cells[cellCount - 2];
+        var connectButton = connectCell.children[0];
+        var connectErrorCell = row.cells[cellCount - 1];
+
+        connectErrorCell.textContent = '';
+
+        var device = this.devices_.getByAddress(row.id);
+        if (this.connectHandler_ && !device.proxy) {
+          connectButton.textContent = 'Connecting...';
+          connectButton.disabled = true;
+
+          this.connectHandler_(device).catch(function(error) {
+            connectErrorCell.textContent = error.message;
+            connectButton.textContent = 'Connect';
+            connectButton.disabled = false;
+          });
+        } else if (this.disconnectHandler_ && device.proxy) {
+          connectButton.textContent = 'Disconnecting...';
+          connectButton.disabled = true;
+
+          this.disconnectHandler_(device);
+        }
+      }.bind(this);
+    },
+
+    /**
      * Updates table row on splice event of the device collection.
      * @param {!Event} event
      */
     handleSplice_: function(event) {
       event.removed.forEach(function() {
         this.removeRow(event.index);
       }, this);
 
       event.added.forEach(function(device, index) {
         this.newRowForDevice_(device, event.index + index);
       }, this);
     },
 
     /**
      * Inserts a new row at |index| and updates it with info from |device|.
      * @param {!Device} device
      * @param {?number} index
      */
     newRowForDevice_: function(device, index) {
       var row = this.body_.insertRow(index);
       row.id = device.info.address;
 
       for (var i = 0; i < this.headers_.length; i++) {
         row.insertCell();
       }
 
+      // Make two extra cells for the connect button and connect errors.
+      var connectCell = row.insertCell();
+      var connectErrorCell = row.insertCell();
+
+      var connectButton = document.createElement('button');
+      connectCell.appendChild(connectButton);
+
+      connectButton.textContent = 'Connect';
+      connectButton.addEventListener('click',
+                                     this.handleConnect_(row).bind(this));
+
       this.updateRow_(device, row.sectionRowIndex);
     },
 
     /**
      * Deletes and recreates the table using the cached |devices_|.
      */
     redraw_: function() {
       this.removeChild(this.body_);
       this.appendChild(document.createElement('tbody'));
       this.body_ = this.tBodies[0];
@@ skipping 11 matching lines @@
      */
     updateRow_: function(device, index) {
       var row = this.body_.rows[index];
 
       if (device.removed) {
         row.classList.add(REMOVED_CSS);
       } else {
         row.classList.remove(REMOVED_CSS);
       }
 
+      var cellCount = row.cells.length;
+      var connectCell = row.cells[cellCount - 2];
+      var connectButton = connectCell.children[0];
+      var connectErrorCell = row.cells[cellCount - 1];
+
+      if (device.info.connected) {
+        connectButton.textContent = 'Disconnect';
+      } else if (device.proxy) {
+        connectButton.textContent = 'Connect';
+        connectErrorCell.textContent = 'Lost connection';
+        device.proxy = null;
+      } else {
+        connectButton.textContent = 'Connect';
+      }
+
+      connectButton.disabled = false;
+
       // Update the properties based on the header field path.
       for (var i = 0; i < this.headers_.length; i++) {
         var header = this.headers_[i];
         var propName = header.dataset.field;
 
         var parts = propName.split('.');
         var obj = device.info;
         while (obj != null && parts.length > 0) {
           var part = parts.shift();
           obj = obj[part];
         }
 
         var cell = row.cells[i];
         cell.textContent = obj || 'Unknown';
-        cell.dataset.label = header.innerText;
+        cell.dataset.label = header.textContent;
       }
     },
   };
 
-  /*
+  /**
    * Collection of devices with helper functions for searching and updating by
    *     device address.
    * @constructor
    * @param {!Array} array the starting collection of devices.
    * @extends {cr.ui.ArrayDataModel}
    */
   var DeviceCollection = function(array) {
     cr.ui.ArrayDataModel.call(this, array);
   };
   DeviceCollection.prototype = {
     __proto__: cr.ui.ArrayDataModel.prototype,
     getByAddress: function(address) {
       for (var i = 0; i < this.length; i++) {
         var device = this.item(i);
         if (address == device.info.address)
           return device;
       }
       return null;
     },
     update: function(device) {
       var oldDevice = this.getByAddress(device.info.address);
       if (oldDevice) {
         this.replaceItem(oldDevice, device);
       } else {
         this.push(device);
       }
     }
   };
 
-  /*
+  /**
    * Data model for a cached device.
    * @constructor
    * @param {!bluetoothDevice.DeviceInfo} info
    */
   var Device = function(info) {
     this.info = info;
+    this.proxy = null;
     this.removed = false;
   };
 
   return {
     Device: Device,
     DeviceCollection, DeviceCollection,
     DeviceTable: DeviceTable,
   };
 });