bluetooth: Add service list to DeviceDetailsPage in internals page.

chrome/browser/resources/bluetooth_internals/device_details_page.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 DeviceDetailsPage which displays all of the details of a
  * device. The page is generated and managed dynamically in bluetooth_internals.
  * served from chrome://bluetooth-internals/.
  */
 
 cr.define('device_details_page', function() {
+  /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var Snackbar = snackbar.Snackbar;
   /** @const */ var SnackbarType = snackbar.SnackbarType;
 
   /**
    * Property names that will be displayed in the ObjectFieldSet which contains
    * the DeviceInfo object.
    */
   var PROPERTY_NAMES = {
     name: 'Name',
@@ skipping 13 matching lines @@
    * @param {string} id
    * @param {!interfaces.BluetoothDevice.DeviceInfo} deviceInfo
    * @extends {cr.ui.pageManager.Page}
    */
   function DeviceDetailsPage(id, deviceInfo) {
     Page.call(this, id, deviceInfo.name_for_display, id);
 
     /** @type {interfaces.BluetoothDevice.DeviceInfo} */
     this.deviceInfo = deviceInfo;
 
-    /** @type {interfaces.BluetoothDevice.Device.ptrClass} */
+    /** @type {?interfaces.BluetoothDevice.Device.ptrClass} */
     this.devicePtr = null;
 
     /** @type {!object_fieldset.ObjectFieldSet} */
     this.deviceFieldSet = new object_fieldset.ObjectFieldSet();
     this.deviceFieldSet.setPropertyDisplayNames(PROPERTY_NAMES);
 
+    /** @type {!service_list.ServiceList} */
+    this.serviceList = new service_list.ServiceList();
+    this.serviceList.setLoading(true);
+
     /** @private {!device_collection.ConnectionStatus} */
     this.status_ = device_collection.ConnectionStatus.DISCONNECTED;
 
     /** @private {?HTMLElement} */
     this.connectBtn_ = null;
 
     this.pageDiv.appendChild(
         document.importNode($('device-details-template').content,
                             true /* deep */));
 
     this.pageDiv.querySelector('.device-details').appendChild(
         this.deviceFieldSet);
+    this.pageDiv.querySelector('.services').appendChild(this.serviceList);
 
     this.pageDiv.querySelector('.forget').addEventListener(
         'click', function() {
           this.disconnect();
           this.pageDiv.dispatchEvent(new CustomEvent('forgetpressed', {
               detail: {
                 address: this.deviceInfo.address,
               },
           }));
         }.bind(this));
@@ skipping 21 matching lines @@
         return adapterBroker.connectToDevice(this.deviceInfo.address);
       }.bind(this)).then(function(devicePtr) {
         this.devicePtr = devicePtr;
 
         this.updateConnectionStatus_(
             device_collection.ConnectionStatus.CONNECTED);
 
         // Fetch services asynchronously.
         return this.devicePtr.getServices();
       }.bind(this)).then(function(response) {
-        this.deviceInfo.services = response.services;
+        this.serviceList.setData(new ArrayDataModel(response.services));
+        this.deviceInfo.services = this.serviceList.dataModel;
+        this.serviceList.setLoading(false);
+
         this.redraw();
         this.fireDeviceInfoChanged_();
       }.bind(this)).catch(function(error) {
         // If a connection error occurs while fetching the services, the
         // devicePtr reference must be removed.
         if (this.devicePtr) {
           this.devicePtr.disconnect();
           this.devicePtr = null;
         }
 
@@ skipping 37 matching lines @@
 
       var deviceViewObj = {
         name: this.deviceInfo.name_for_display,
         address: this.deviceInfo.address,
         is_gatt_connected: connectedText,
         'rssi.value': rssiValue,
         'services.length': serviceCount,
       };
 
       this.deviceFieldSet.setObject(deviceViewObj);
+      this.serviceList.redraw();
     },
 
     /**
      * Sets the page's device info and forces a redraw.
      * @param {!interfaces.BluetoothDevice.DeviceInfo}
      */
     setDeviceInfo: function(info) {
       this.deviceInfo = info;
       this.redraw();
     },
@@ skipping 41 matching lines @@
           status: status,
         }
       }));
     },
   };
 
   return {
     DeviceDetailsPage: DeviceDetailsPage,
   };
 });