bluetooth: Componentize device list in chrome://bluetooth-internals.

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
new file mode 100644
index 0000000000000000000000000000000000000000..b4db9b030f079ea9f7947d784a2b3442efd672e9
--- /dev/null
+++ b/chrome/browser/resources/bluetooth_internals/device_table.js
@@ -0,0 +1,148 @@
+// 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 DeviceTable UI, served from
+ *     chrome://bluetooth-internals/.

[Dan Beam, 2016/11/09 18:00:32]

nit: can we unwrap this?  fits on one line

[mbrunson, 2016/11/10 01:02:14]

Done.

+ */
+
+cr.define('device_table', function() {
+  var REMOVED_CSS = 'removed';

[Dan Beam, 2016/11/09 18:00:32]

can we name this REMOVED_CLASS_NAME or REMOVED_CLASS or something?

[mbrunson, 2016/11/10 01:02:13]

Done.

+
+  /**
+   * A table that lists the devices and responds to changes in the given
+   *     DeviceCollection.
+   * @constructor
+   * @extends {HTMLTableElement}
+   */
+  var DeviceTable = cr.ui.define(function() {
+    // @type {Array<device_collection.Device>}

[Dan Beam, 2016/11/09 18:00:32]

?Array

[mbrunson, 2016/11/10 01:02:14]

Done.

+    this.devices_ = null;
+
+    return document.importNode($('table-template').content.children[0],
+                               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;

[Dan Beam, 2016/11/09 18:00:32]

can you mark these as @private?

[mbrunson, 2016/11/10 01:02:14]

Done.

+    },
+
+    /**
+     * Sets the tables device collection.
+     * @param {!device_collection.DeviceCollection} deviceCollection
+     */
+    setDevices: function(deviceCollection) {
+      assert(!this.devices_, 'Devices can only be set once.');
+

[Dan Beam, 2016/11/09 18:00:32]

can you mark devices_ as @private?

[mbrunson, 2016/11/10 01:02:13]

Done.

+      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.
+     * @private
+     * @param {!CustomEvent} event
+     */
+    handleChange_: function(event) {
+      this.updateRow_(this.devices_.item(event.index), event.index);
+    },
+
+    /**
+     * Updates table row on splice event of the device collection.
+     * @private
+     * @param {!CustomEvent} event
+     */
+    handleSplice_: function(event) {
+      event.removed.forEach(function() {
+        this.body_.deleteRow(event.index);
+      }, this);
+
+      event.added.forEach(function(device, index) {
+        this.insertRow_(device, event.index + index);
+      }, this);
+    },
+
+    /**
+     * Inserts a new row at |index| and updates it with info from |device|.
+     * @private
+     * @param {!device_collection.Device} device
+     * @param {?number} index
+     */
+    insertRow_: 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();
+      }
+
+      this.updateRow_(device, row.sectionRowIndex);
+    },
+
+    /**
+     * Deletes and recreates the table using the cached |devices_|.
+     * @private
+     */
+    redraw_: function() {
+      this.removeChild(this.body_);
+      this.appendChild(document.createElement('tbody'));
+      this.body_ = this.tBodies[0];
+      this.body_.classList.add('table-body');
+
+      for (var i = 0; i < this.devices_.length; i++) {
+        this.insertRow_(this.devices_.item(i));
+      }
+    },
+
+    /**
+     * Updates the row at |index| with the info from |device|.
+     * @private
+     * @param {!device_collection.Device} device
+     * @param {number} index
+     */
+    updateRow_: function(device, index) {
+      assert(this.body_.rows[index], 'Row ' + index + ' is not in the table.');
+      var row = this.body_.rows[index];
+
+      if (device.removed) {
+        row.classList.add(REMOVED_CSS);
+      } else {
+        row.classList.remove(REMOVED_CSS);

[Dan Beam, 2016/11/09 18:00:32]

row.classList.toggle(REMOVED_CSS, device.removed);

[mbrunson, 2016/11/10 01:02:14]

Done.

+      }

[Dan Beam, 2016/11/09 18:00:32]

nit: no curlies

[mbrunson, 2016/11/10 01:02:13]

Done.

+
+      // 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];

[Dan Beam, 2016/11/09 18:00:32]

can you use cr.exportPath() here?

[mbrunson, 2016/11/10 01:02:13]

cr.exportPath doesn't quite do what I want. I don't want to change the object, I
just want the value at the end of the path or null if it's not there. I'd still
have to traverse the path if I use cr.exportPath to get the value I want.

[Dan Beam, 2016/11/10 03:22:54]

Acknowledged.

+        }
+
+        var cell = row.cells[i];
+        cell.textContent = obj || 'Unknown';
+        cell.dataset.label = header.textContent;
+      }
+    },
+  };
+
+  return {
+    DeviceTable: DeviceTable,
+  };
+});