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 b4db9b030f079ea9f7947d784a2b3442efd672e9..d85acf2fbccca903940a7efd4ddeca426ff4d7f9 100644
--- a/chrome/browser/resources/bluetooth_internals/device_table.js
+++ b/chrome/browser/resources/bluetooth_internals/device_table.js
@@ -47,6 +47,8 @@ cr.define('device_table', function() {
       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.devices_.addEventListener(
+          'connectstatus', this.handleStatus_.bind(this));
 
       this.redraw_();
     },
@@ -61,6 +63,20 @@ cr.define('device_table', function() {
     },
 
     /**
+     * Fires a connect request event for the row |index|.
+     * @private
+     * @param {number} index
+     */
+    handleConnectBtn_: function(index) {
+      var event = new CustomEvent('connectrequest', {
+        detail: {
+          index: index,

[ortuno, 2016/11/09 03:24:03]

I would include the address rather than the index since the index can change
during the connection.

[mbrunson, 2016/11/09 23:39:37]

Done.

+        }
+      });
+      bluetooth_internals.publish(event);
+    },
+
+    /**
      * Updates table row on splice event of the device collection.
      * @private
      * @param {!CustomEvent} event
@@ -75,6 +91,16 @@ cr.define('device_table', function() {
       }, this);
     },
 
+    handleStatus_: function(event) {
+      var index = event.detail.index;
+      this.updateRow_(this.devices_.item(index), index);
+
+      var row = this.body_.rows[index];
+      var cellCount = row.cells.length;
+      var connectErrorCell = row.cells[cellCount - 1];
+      connectErrorCell.textContent = event.detail.message;
+    },
+
     /**
      * Inserts a new row at |index| and updates it with info from |device|.
      * @private
@@ -89,6 +115,16 @@ 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();

[ortuno, 2016/11/09 03:24:03]

Would it make sense to show a snackbar[1] instead? No need to do it in this
patch but if you decide to go in that direction you can just leave a TODO.

[1] https://material.google.com/components/snackbars-toasts.html#

[mbrunson, 2016/11/09 23:39:37]

Yeah. That would be ideal. TODO added.

+
+      var connectButton = document.createElement('button');
+      connectCell.appendChild(connectButton);
+      connectButton.addEventListener('click', function() {
+        this.handleConnectBtn_(row.sectionRowIndex);
+      }.bind(this));
+
       this.updateRow_(device, row.sectionRowIndex);
     },
 
@@ -123,6 +159,14 @@ cr.define('device_table', function() {
         row.classList.remove(REMOVED_CSS);
       }
 
+      var cellCount = row.cells.length;
+      var connectButton = row.cells[cellCount - 2].children[0];
+      if (device.proxy) {

[ortuno, 2016/11/09 03:24:03]

switch (device.connectionStatus) {
  case 'disconnected':
    connectButton.textContent = 'Forget';
    break;
  case 'connected':
    connectButton.textContent = 'Inspect';
    break;
  case 'connecting':
    // disable button.
    break;
  default: assert('case not handled');
}

[mbrunson, 2016/11/09 23:39:37]

Done.

+        connectButton.textContent = 'Forget';
+      } else {
+        connectButton.textContent = 'Inspect';
+      }
+
       // 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 +179,12 @@ cr.define('device_table', function() {
           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;
       }
     },