bluetooth: Add characteristic list to DeviceDetailsPage in internals page.

chrome/browser/resources/bluetooth_internals/device_details_page.js

Index: chrome/browser/resources/bluetooth_internals/device_details_page.js
diff --git a/chrome/browser/resources/bluetooth_internals/device_details_page.js b/chrome/browser/resources/bluetooth_internals/device_details_page.js
index 6112bf011f7e995996efe0ce5fe0e1aa178dee14..c7d6e13fb642a664dd1b24debbbde28015e8cc03 100644
--- a/chrome/browser/resources/bluetooth_internals/device_details_page.js
+++ b/chrome/browser/resources/bluetooth_internals/device_details_page.js
@@ -83,6 +83,20 @@ cr.define('device_details_page', function() {
       this.devicePtr !== null ? this.disconnect() : this.connect();
     }.bind(this));
 
+    this.serviceList.addEventListener(
+        'characteristicsrequested', function(event) {
+          if (!this.devicePtr) {
+            event.target.onCharacteristicsReturned([]);

[dpapad, 2017/01/17 20:01:01]

I am confused about what is happening here.

+            return;
+          }
+
+          this.devicePtr.getCharacteristics(event.detail.serviceId).then(
+              function(response) {
+                event.target.onCharacteristicsReturned(

[dpapad, 2017/01/17 20:01:01]

This strikes me as odd. Instead of calling a method on the |event.target| why
don't we handle that event from within the |event.target| itself
(ServiceListItem)?

[mbrunson, 2017/01/17 21:05:49]

I've been juggling solutions to this issue. I'm creating a hierarchical user
interface which will have 3 levels of controls: services, characteristics, and
descriptors.

I figured it would be a better for these hierarchical controls to fire events to
request this data and then the control would only have the responsibility of
formatting and showing the data once it received it. The main issue with this is
that the target of the event can be ambiguous at the top level which is why I
resorted to using |event.target|. This separates the responsibility of creating
a device connection and fetching the data from displaying the data.

Alternatively, I could call a function at the top level and pass the data down
through the levels or set the data on the ArrayDataModel |dataModel| directly.
These are more explicit but would require more logic to find the right spot to
pass/set the data.

What do you think?

[dpapad, 2017/01/17 22:01:39]

Firing an event from a subcomponent that propagates to the parent, only for the
parent to make a function call to the subcomponent again to pass back the
returned data sounds too indirect. This is using events for 1:1 communication,
whereas events are more suitable for 1:many communication. 

Even so, you would need to cast |event.target| here to some type, so that I as a
reader understand what kind of instance |event.target| is.

Can we make the subcomponent have what it needs (references to global service
objects) to get the information and populate itself directly, so that there is
no need for the parent to pass down any info?

[mbrunson, 2017/01/18 22:04:23]

Ok. I've created a global service object for this, device_broker, that handles
connections to devices. Each component now has direct access to device
information and only need to know the device address and associated ids to get
the information they need.

+                    response.characteristics);
+              }.bind(this));
+        }.bind(this));
+
     this.redraw();
   }
 
@@ -124,7 +138,7 @@ cr.define('device_details_page', function() {
 
         Snackbar.show(
             this.deviceInfo.name_for_display + ': ' + error.message,
-            SnackbarType.DANGER, 'Retry', this.connect.bind(this));
+            SnackbarType.ERROR, 'Retry', this.connect.bind(this));
 
         this.updateConnectionStatus_(
             device_collection.ConnectionStatus.DISCONNECTED);