bluetooth: Add service list to DeviceDetailsPage in internals page.

chrome/browser/resources/bluetooth_internals/service_list.js

Index: chrome/browser/resources/bluetooth_internals/service_list.js
diff --git a/chrome/browser/resources/bluetooth_internals/service_list.js b/chrome/browser/resources/bluetooth_internals/service_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0ef500e9e5e84b90a9721a9fff91be940eeec11
--- /dev/null
+++ b/chrome/browser/resources/bluetooth_internals/service_list.js
@@ -0,0 +1,117 @@
+// 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 ExpandableList = expandable_list.ExpandableList;
+  /** @const */ var ExpandableListItem = expandable_list.ExpandableListItem;
+
+  var PROPERTY_NAMES = {
+    id: 'ID',
+    'uuid.uuid': 'UUID',
+    is_primary: 'Type',
+  }
+
+  /**
+   * A list item that displays the data in a ServiceInfo object. The brief
+   * section contains the shortened UUID of the given |serviceInfo|. The
+   * expanded section contains an ObjectFieldSet that displays all of the
+   * properties in the given |serviceInfo|.
+   * @param {!interfaces.BluetoothDevice.ServiceInfo} serviceInfo
+   * @constructor
+   */
+  function ServiceListItem(serviceInfo) {
+    var listItem = new ExpandableListItem();
+    listItem.__proto__ = ServiceListItem.prototype;
+
+    listItem.info = serviceInfo;
+    listItem.decorate();
+
+    return listItem;
+  }
+
+  ServiceListItem.prototype = {
+    __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');
+
+      var uuidString = this.info.uuid.uuid.split('-')[0];

[scheib, 2017/01/12 21:53:16]

For a basic display of UUID (which I think we should stick with for now), you'd
best display the entire UUID because vendor chosen UUIDs may have meaningful
data at any location in the UUID, including the last character. E.g. there could
easily be a vendor who chose to use these:
12341234-1234-efde-1523-785fea000001
12341234-1234-efde-1523-785fea000002
12341234-1234-efde-1523-785fea000003


Later, we could have a smarter display that detects if the UUID is using the
bluetooth base UUID
https://www.bluetooth.com/specifications/assigned-numbers/service-discovery and
if so then simplify it. More so, we can look up all standard UUIDs and replace
them with their name and number, e.g. 'generic_access (0x1800)'.


Keep the uuid field in the info-container.

[mbrunson, 2017/01/12 22:59:59]

Done.

+      var uuidValue = parseInt(uuidString, 16);
+      var uuidHexString = '0x' + uuidValue.toString(16);
+
+      var serviceHeader = document.createElement('div');
+
+      var serviceHeaderText = document.createElement('div');
+      serviceHeaderText.textContent = 'Service:';
+      serviceHeader.appendChild(serviceHeaderText);
+
+      var serviceHeaderValue = document.createElement('div');
+      serviceHeaderValue.textContent = uuidHexString;
+      serviceHeader.appendChild(serviceHeaderValue);
+
+      this.briefContent_.appendChild(serviceHeader);
+
+      this.infoDiv_ = document.createElement('div');
+      this.infoDiv_.classList.add('info-container');
+
+      var serviceInfoHeader = document.createElement('h4');
+      serviceInfoHeader.textContent = 'Service Info';
+      this.infoDiv_.appendChild(serviceInfoHeader);
+
+      var serviceDiv = document.createElement('div');
+      serviceDiv.classList.add('flex');
+
+      this.serviceFieldSet_ = object_fieldset.ObjectFieldSet();
+      this.serviceFieldSet_.setPropertyDisplayNames(PROPERTY_NAMES);
+      var serviceViewObj = {
+        id: this.info.id,
+        'uuid.uuid': this.info.uuid.uuid,
+        is_primary: this.info.is_primary ? 'Primary' : 'Secondary',
+      };
+
+      this.serviceFieldSet_.setObject(serviceViewObj);
+      serviceDiv.appendChild(this.serviceFieldSet_);
+
+      this.infoDiv_.appendChild(serviceDiv);
+      this.expandedContent_.appendChild(this.infoDiv_);
+    },
+  };
+
+  /**
+   * 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,
+  };
+});