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 12 matching lines @@
    * @constructor
    * @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);
 
     this.deviceInfo = deviceInfo;
 
-    /** @type {interfaces.BluetoothDevice.Device.ptrClass} */
+    /** @type {?interfaces.BluetoothDevice.Device.ptrClass} */
     this.devicePtr = null;
     /** @private {!device_collection.ConnectionStatus} */
     this.status_ = device_collection.ConnectionStatus.DISCONNECTED;
 
     this.pageDiv.appendChild(
         document.importNode($('device-details-template').content,
                             true /* deep */));
 
     this.pageDiv.querySelector('.forget-btn').addEventListener('click',
         function() {
@@ skipping 12 matching lines @@
         return;
       }
       this.connect();
     }.bind(this));
 
     this.deviceFieldSet = new object_fieldset.ObjectFieldSet();
     this.deviceFieldSet.setPropertyDisplayNames(PROPERTY_NAMES);
     this.pageDiv.querySelector('.device-details').appendChild(
         this.deviceFieldSet);
 
+    this.serviceList = new service_list.ServiceList();
+    this.serviceList.setLoading(true);
+    this.pageDiv.querySelector('.services').appendChild(this.serviceList);
+
     this.redraw();
   }
 
   DeviceDetailsPage.prototype = {
     __proto__: Page.prototype,
 
     /** Creates a connection to the Bluetooth device. */
     connect: function() {
       if (this.status_ !== device_collection.ConnectionStatus.DISCONNECTED)
         return;
 
       this.updateConnectionStatus_(
           device_collection.ConnectionStatus.CONNECTING);
       this.connecting_ = true;
 
       adapter_broker.getAdapterBroker().then(function(adapterBroker) {
           adapterBroker.connectToDevice(this.deviceInfo.address).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 32 matching lines @@
 
       var deviceViewObj = {
         name: this.deviceInfo.name_for_display,
         address: this.deviceInfo.address,
         is_gatt_connected: connectedText,
         'rssi.value': (rssi && rssi.value) || 'Unknown',
         'services.length': (services && services.length) || 'Unknown',
       };
 
       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 35 matching lines @@
           status: status,
         }
       }));
     },
   };
 
   return {
     DeviceDetailsPage: DeviceDetailsPage,
   };
 });