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 13 matching lines @@
     /**
      * Decorates the element as an expandable list item and caches the created
      * content holders for implementations.
      * @override
      */
     decorate: function() {
       this.classList.add('expandable-list-item');
       this.briefContent_ = document.createElement('div');
       this.briefContent_.classList.add('brief-content');
       this.briefContent_.addEventListener(
-          'click', this.toggleExpand_.bind(this));
+          'click', this.onExpand_.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
+     */
+    onExpandInternal: function(expanded) {},
+
+    /**
      * Toggles the expanded class on the item.
      * @private
      */
-    toggleExpand_: function() {
-      this.classList.toggle('expanded');
+    onExpand_: function() {
+      this.onExpandInternal(this.classList.toggle('expanded'));
     },
   };
 
   /**
    * A list that contains expandable list items.
    * @abstract
    * @constructor
    */
   var ExpandableList = cr.ui.define('list');
 
@@ skipping 13 matching lines @@
       this.emptyMessage_.classList.add('empty-message');
       this.emptyMessage_.hidden = true;
       this.insertBefore(this.emptyMessage_, this.firstChild);
 
       this.spinner_ = document.createElement('div');
       this.spinner_.classList.add('spinner');
       this.insertBefore(this.spinner_, this.firstChild);
 
       this.autoExpands = true;
       this.boundUpdateMessage_ = this.updateMessageDisplay_.bind(this);
+      this.setLoading(true);
     },
 
     /**
      * Sets the data model of the list.
      * @param {cr.ui.ArrayDataModel} data
      */
     setData: function(data) {
       if (this.dataModel)
         this.dataModel.removeEventListener('splice', this.boundUpdateMessage_);
 
@@ skipping 13 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,
   }
 });