bluetooth: Add characteristic list to DeviceDetailsPage in internals page.

chrome/browser/resources/bluetooth_internals/service_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 ServiceList and ServiceListItem, served from
  *     chrome://bluetooth-internals/.
  */
 
 cr.define('service_list', function() {
+  /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var ExpandableList = expandable_list.ExpandableList;
   /** @const */ var ExpandableListItem = expandable_list.ExpandableListItem;
 
   /**
    * Property names that will be displayed in the ObjectFieldSet which contains
    * the ServiceInfo object.
    */
   var PROPERTY_NAMES = {
     id: 'ID',
     'uuid.uuid': 'UUID',
@@ skipping 22 matching lines @@
     __proto__: ExpandableListItem.prototype,
 
     /**
      * Decorates the element as a service list item. Creates layout and caches
      * references to the created header and fieldset.
      * @override
      */
     decorate: function() {
       this.classList.add('service-list-item');
 
+      /** @private {boolean} */
+      this.characteristicsRequested_ = false;
+
       /** @private {!HTMLElement} */
       this.infoDiv_ = document.createElement('div');
       this.infoDiv_.classList.add('info-container');
 
       /** @private {!object_fieldset.ObjectFieldSet} */
       this.serviceFieldSet_ = object_fieldset.ObjectFieldSet();
       this.serviceFieldSet_.setPropertyDisplayNames(PROPERTY_NAMES);
       this.serviceFieldSet_.setObject({
         id: this.info.id,
         'uuid.uuid': this.info.uuid.uuid,
@@ skipping 12 matching lines @@
       serviceHeader.appendChild(serviceHeaderValue);
       this.briefContent_.appendChild(serviceHeader);
 
       // Create content for display in expanded content container.
       var serviceInfoHeader = document.createElement('h4');
       serviceInfoHeader.textContent = 'Service Info';
 
       var serviceDiv = document.createElement('div');
       serviceDiv.classList.add('flex');
       serviceDiv.appendChild(this.serviceFieldSet_);
-
       this.infoDiv_.appendChild(serviceInfoHeader);
       this.infoDiv_.appendChild(serviceDiv);
+
+      var characteristicsListHeader = document.createElement('h4');
+      characteristicsListHeader.textContent = 'Characteristics';
+      this.infoDiv_.appendChild(characteristicsListHeader);
+
+      this.characteristicList_ = new characteristic_list.CharacteristicList();
+      this.characteristicList_.setLoading(true);
+      this.infoDiv_.appendChild(this.characteristicList_);
+
       this.expandedContent_.appendChild(this.infoDiv_);
     },
+
+    /**
+     * Called when the 'characteristicsrequested' event is handled. The incoming
+     * |characteristics| are wrapped in an ArrayDataModel then set as the data
+     * model of the characteristics list and cached in the service info.
+     * @param {!Array<!interfaces.BluetoothDevice.CharacteristicInfo}>}
+     *     characteristics
+     */
+    onCharacteristicsReturned: function(characteristics) {
+      this.characteristicList_.setData(new ArrayDataModel(characteristics));
+      this.characteristicList_.setLoading(false);
+
+      this.info.characteristics = this.characteristicList_.dataModel;
+      this.characteristicsRequested_ = false;
+    },
+
+    /** @override */
+    onExpandInternal: function(expanded) {
+      if (!expanded || this.characteristicsRequested_ ||
+          !this.characteristicList_.isLoading()) {
+        return;
+      }
+
+      this.dispatchEvent(new CustomEvent('characteristicsrequested', {
+        bubbles: true,
+        detail: {
+          serviceId: this.info.id,
+        }
+      }));
+      this.characteristicsRequested_ = true;
+    },
   };
 
   /**
    * A list that displays ServiceListItems.
    * @constructor
    */
   var ServiceList = cr.ui.define('list');
 
   ServiceList.prototype = {
     __proto__: ExpandableList.prototype,
 
     /** @override */
     decorate: function() {
       ExpandableList.prototype.decorate.call(this);
       this.classList.add('service-list');
       this.setEmptyMessage('No Services Found');
     },
 
     /** @override */
     createItem: function(data) {
       return new ServiceListItem(data);
     },
   };
 
   return {
     ServiceList: ServiceList,
     ServiceListItem: ServiceListItem,
   };
 });