bluetooth: Add Device connection logic and accompanying user interface.

chrome/browser/resources/bluetooth_internals/device_table.js

Index: chrome/browser/resources/bluetooth_internals/device_table.js
diff --git a/chrome/browser/resources/bluetooth_internals/device_table.js b/chrome/browser/resources/bluetooth_internals/device_table.js
index c73bf962381afd71629fb4e0b85ce429e2e3371b..b90a8e17f0498e982555f5f55448722268bc95b9 100644
--- a/chrome/browser/resources/bluetooth_internals/device_table.js
+++ b/chrome/browser/resources/bluetooth_internals/device_table.js
@@ -7,8 +7,10 @@
  *     chrome://bluetooth-internals/.
  */
 
-cr.define('device_table', function() {
+/** @typedef {function(device.Device): Promise} */
+var ConnectionHandler;
 
+cr.define('device_table', function() {
   var REMOVED_CSS = 'removed';
 
   /**
@@ -21,7 +23,7 @@ cr.define('device_table', function() {
     this.devices_ = null;
 
     return document.importNode($('table-template').content.children[0],
-                                   true /* deep */);
+                               true /* deep */);
   });
   DeviceTable.prototype = {
     __proto__: HTMLTableElement.prototype,
@@ -65,6 +67,50 @@ cr.define('device_table', function() {
     },
 
     /**
+     * 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)}
+     */
+    handleConnectBtn_: 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 (!device.proxy) {
+          connectButton.textContent = 'Connecting...';
+          connectButton.disabled = true;
+
+          this.handleConnect_(device).catch(function(error) {
+            connectErrorCell.textContent = error.message;
+            connectButton.textContent = 'Connect';
+            connectButton.disabled = false;
+          });
+        } else if (device.proxy) {
+          connectButton.textContent = 'Disconnecting...';
+          connectButton.disabled = true;
+          device.disconnect();
+        }
+      }.bind(this);
+    },
+
+    /**
+     * Creates a connection to the device and updates the device collection.
+     * @param {device_collection.Device} device
+     * @return {Promise} rejects if connection failed, resolves otherwise.
+     */
+    handleConnect_: function(device) {
+      return device.connect().then(function() {
+        this.devices_.addOrUpdate(device.info);
+      }.bind(this));
+    },
+
+    /**
      * Updates table row on splice event of the device collection.
      * @param {!Event} event
      */
@@ -91,6 +137,17 @@ cr.define('device_table', function() {
         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.handleConnectBtn_(row).bind(this));
+
       this.updateRow_(device, row.sectionRowIndex);
     },
 
@@ -122,6 +179,23 @@ cr.define('device_table', function() {
         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.is_gatt_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];
@@ -135,8 +209,8 @@ cr.define('device_table', function() {
         }
 
         var cell = row.cells[i];
-        cell.textContent = obj || 'Unknown';
-        cell.dataset.label = header.innerText;
+        cell.textContent = (obj == null || obj == undefined) ? 'Unknown' : obj;
+        cell.dataset.label = header.textContent;
       }
     },
   };
@@ -144,4 +218,4 @@ cr.define('device_table', function() {
   return {
     DeviceTable: DeviceTable,
   };
-});
+});