bluetooth: Add characteristic 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/.
  */
 
@@ skipping 65 matching lines @@
                 address: this.deviceInfo.address,
               },
           }));
         }.bind(this));
 
     this.connectBtn_ = this.pageDiv.querySelector('.disconnect');
     this.connectBtn_.addEventListener('click', 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();
   }
 
   DeviceDetailsPage.prototype = {
     __proto__: Page.prototype,
 
     /** Creates a connection to the Bluetooth device. */
     connect: function() {
       if (this.status_ !== device_collection.ConnectionStatus.DISCONNECTED)
         return;
@@ skipping 21 matching lines @@
       }.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;
         }
 
         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);
       }.bind(this));
     },
 
     /** Disconnects the page from the Bluetooth device. */
     disconnect: function() {
       if (!this.devicePtr) return;
 
@@ skipping 86 matching lines @@
           status: status,
         }
       }));
     },
   };
 
   return {
     DeviceDetailsPage: DeviceDetailsPage,
   };
 });