bluetooth: Componentize device list fixes

chrome/browser/resources/bluetooth_internals/device_table.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 DeviceTable UI, served from
- *     chrome://bluetooth-internals/.
+ * Javascript for DeviceTable UI, served from chrome://bluetooth-internals/.
  */
 
 cr.define('device_table', 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() {
-    // @type {Array<device_collection.Device>}
+    /** @type {?Array<device_collection.Device>}
+     *  @private

[Dan Beam, 2016/11/11 06:32:31]

nit: you can combine this into

/** @private {?Array<device_collection.Device>} */

[mbrunson, 2016/11/11 20:43:09]

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() {
+      /** @private */
       this.body_ = this.tBodies[0];
+      /** @private */
       this.headers_ = this.tHead.rows[0].cells;
     },
 
     /**
      * Sets the tables device collection.
      * @param {!device_collection.DeviceCollection} deviceCollection
      */
     setDevices: function(deviceCollection) {
       assert(!this.devices_, 'Devices can only be set once.');
 
@@ skipping 64 matching lines @@
     /**
      * 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);
-      }
+      row.classList.toggle('removed', device.removed);
 
       // 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.textContent;
       }
     },
   };
 
   return {
     DeviceTable: DeviceTable,
   };
 });