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 04a03dd23bb8e84359d582d04bccc75089d4ad47..79460393f952f44c55fd545cb89fd3bf015bf872 100644
--- a/chrome/browser/resources/bluetooth_internals/device_table.js
+++ b/chrome/browser/resources/bluetooth_internals/device_table.js
@@ -9,14 +9,25 @@
 cr.define('device_table', function() {
   var REMOVED_CLASS_NAME = 'removed';
 
+  var COLUMNS = {
+    NAME: 0,
+    ADDRESS: 1,
+    RSSI: 2,
+    SERVICES: 3,
+    CONNECTION_STATE: 4,
+    CONNECTION_BUTTON: 5,

[ortuno, 2016/11/10 02:16:38]

s/CONNECTION/INSPECT/

[mbrunson, 2016/11/10 04:18:29]

Done.

+    CONNECTION_ERROR: 6,
+  };
+
   /**
    * A table that lists the devices and responds to changes in the given
-   *     DeviceCollection.
+   * DeviceCollection. Fires events for connection requests from listed

[ortuno, 2016/11/10 02:16:38]

s/connection/inspection/

[mbrunson, 2016/11/10 04:18:29]

Done.

+   * devices.
    * @constructor
    * @extends {HTMLTableElement}
    */
   var DeviceTable = cr.ui.define(function() {
-    // @type {?Array<device_collection.Device>}
+    // @type {Array<interfaces.BluetoothDevice.DeviceInfo>}
     // @private
     this.devices_ = null;
 
@@ -56,16 +67,30 @@ cr.define('device_table', function() {
     /**
      * Updates table row on change event of the device collection.
      * @private
-     * @param {!CustomEvent} event
+     * @param {!Event} event
      */
     handleChange_: function(event) {
       this.updateRow_(this.devices_.item(event.index), event.index);
     },
 
     /**
+     * Fires a connect pressed event for the row |index|.

[ortuno, 2016/11/10 02:16:38]

nit: s/connect/inspect/

[mbrunson, 2016/11/10 04:18:29]

Done.

+     * @private
+     * @param {number} index
+     */
+    handleConnectBtn_: function(index) {

[ortuno, 2016/11/10 02:16:39]

s/Connect/Inspect/

[mbrunson, 2016/11/10 04:18:29]

Done.

+      var event = new CustomEvent('inspectpressed', {
+        detail: {
+          address: this.devices_.item(index).address,
+        }
+      });
+      this.dispatchEvent(event);
+    },
+
+    /**
      * Updates table row on splice event of the device collection.
      * @private
-     * @param {!CustomEvent} event
+     * @param {!Event} event
      */
     handleSplice_: function(event) {
       event.removed.forEach(function() {
@@ -80,17 +105,30 @@ cr.define('device_table', function() {
     /**
      * Inserts a new row at |index| and updates it with info from |device|.
      * @private
-     * @param {!device_collection.Device} device
+     * @param {!interfaces.BluetoothDevice.DeviceInfo} device
      * @param {?number} index
      */
     insertRow_: function(device, index) {
       var row = this.body_.insertRow(index);
-      row.id = device.info.address;
+      row.id = device.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();
+
+      // TODO(crbug.com/663830): Replace connection error column with better
+      // notification system.
+      var connectErrorCell = row.insertCell();
+
+      var connectButton = document.createElement('button');

[ortuno, 2016/11/10 02:16:38]

s/connect/inspect/

[mbrunson, 2016/11/10 04:18:29]

Done.

+      connectCell.appendChild(connectButton);
+      connectButton.addEventListener('click', function() {
+        this.handleConnectBtn_(row.sectionRowIndex);
+      }.bind(this));
+
       this.updateRow_(device, row.sectionRowIndex);
     },
 
@@ -112,7 +150,7 @@ cr.define('device_table', function() {
     /**
      * Updates the row at |index| with the info from |device|.
      * @private
-     * @param {!device_collection.Device} device
+     * @param {!interfaces.BluetoothDevice.DeviceInfo} device
      * @param {number} index
      */
     updateRow_: function(device, index) {
@@ -121,20 +159,43 @@ cr.define('device_table', function() {
 
       row.classList.toggle(REMOVED_CLASS_NAME, device.removed);
 
+      var connectButton = row.cells[COLUMNS.CONNECTION_BUTTON].children[0];
+      switch (device.connectionStatus) {

[ortuno, 2016/11/10 02:16:38]

Ah I missed re-enabling the button.

[mbrunson, 2016/11/10 04:18:29]

Done.

+        case 'disconnected':
+          connectButton.textContent = 'Inspect';
+          break;
+        case 'connected':
+          connectButton.textContent = 'Forget';
+          break;
+        case 'connecting':
+          connectButton.disabled = true;
+          break;
+        default: assert('case not handled');
+      }
+
+      // TODO(crbug.com/663830): Replace connection error column with better
+      // notification system.
+      var connectErrorCell = row.cells[COLUMNS.CONNECTION_ERROR];
+      connectErrorCell.textContent = device.connectionMessage;
+
       // 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;
+        var obj = device;
         while (obj != null && parts.length > 0) {
           var part = parts.shift();
           obj = obj[part];
         }
 
+        if (propName == 'is_gatt_connected') {
+          obj ? obj = 'Connected' : obj = 'Not Connected';
+        }
+
         var cell = row.cells[i];
-        cell.textContent = obj || 'Unknown';
+        cell.textContent = (obj == null || obj == undefined) ? 'Unknown' : obj;
         cell.dataset.label = header.textContent;
       }
     },