bluetooth: Add characteristic list to DeviceDetailsPage in internals page.

chrome/browser/resources/bluetooth_internals/expandable_list.js

 // Copyright 2017 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 ExpandableList and ExpandableListItem, served from
  *     chrome://bluetooth-internals/.
  */
 
 cr.define('expandable_list', function() {
@@ skipping 22 matching lines @@
       this.briefContent_.addEventListener(
           'click', this.toggleExpand_.bind(this));
       this.appendChild(this.briefContent_);
 
       this.expandedContent_ = document.createElement('div');
       this.expandedContent_.classList.add('expanded-content');
       this.appendChild(this.expandedContent_);
     },
 
     /**
+     * Called when the list item is expanded or collapsed.
+     * @param {boolean} expanded
+     */
+    onExpand: function(expanded) {},
+
+    /**
      * Toggles the expanded class on the item.
      * @private
      */
     toggleExpand_: function() {

[dpapad, 2017/01/17 20:01:01]

Things need to be renamed. The event listener "toggleExpand_" makes it sound
that it just toggles a CSS class, but now it also calls an abstract onExpand
method. Should it be reverse?


this.briefContent_.addEventListener('click', this.onExpand_.bind(this));

...

// Defined by subclasses.
onExpandInternal: function(expanded)() {},

onExpand_: function() {
  this.classList.toggle('expanded')
  this.onExpandInternal(); //
}

[mbrunson, 2017/01/17 21:05:49]

Done.

-      this.classList.toggle('expanded');
+      this.onExpand(this.classList.toggle('expanded'));
     },
   };
 
   /**
    * A list that contains expandable list items.
    * @abstract
    * @constructor
    */
   var ExpandableList = cr.ui.define('list');
 
@@ skipping 46 matching lines @@
     /**
      * Sets the loading state of the list. If |loading| is true, the loading
      * spinner is dispayed.
      * @param {boolean} loading
      */
     setLoading: function(loading) {
       this.spinner_.hidden = !loading;
     },
 
     /**
+     * Gets the loading state of the list. Returns true if the list is loading.
+     * @return {boolean}
+     */
+    isLoading: function() {
+      return !this.spinner_.hidden;
+    },
+
+    /**
      * Updates the display state of the empty message. If there are no items in
      * the data model, the empty message is displayed.
      */
     updateMessageDisplay_: function() {
       this.emptyMessage_.hidden = this.dataModel.length > 0;
     },
   };
 
   return {
     ExpandableListItem: ExpandableListItem,
     ExpandableList: ExpandableList,
   }
 });