bluetooth: Add device details page with basic properties to internals page.

chrome/browser/resources/bluetooth_internals/bluetooth_internals.js

 // Copyright 2016 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 bluetooth_internals.html, served from
  *     chrome://bluetooth-internals/.
  */
 
 // Expose for testing.
+/** @type {adapter_broker.AdapterBroker} */
 var adapterBroker = null;
+/** @type {device_collection.DeviceCollection} */
 var devices = null;
+/** @type {sidebar.Sidebar} */
 var sidebarObj = null;
 
 cr.define('bluetooth_internals', function() {
   /** @const */ var AdapterPage = adapter_page.AdapterPage;
+  /** @const */ var DeviceDetailsPage = device_details_page.DeviceDetailsPage;
   /** @const */ var DevicesPage = devices_page.DevicesPage;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   /** @const */ var Snackbar = snackbar.Snackbar;
   /** @const */ var SnackbarType = snackbar.SnackbarType;
 
+  devices = new device_collection.DeviceCollection([]);
+
+  /** @type {adapter_page.AdapterPage} */
+  var adapterPage = null;
+  /** @type {devices_page.DevicesPage} */
+  var devicesPage = null;
+
+  /** @type {interfaces.BluetoothAdapter.DiscoverySession.ptrClass} */
+  var discoverySession = null;
+
+  /** @type {boolean} */
+  var userRequestedScanStop = false;
+
   /**
    * Observer for page changes. Used to update page title header.
    * @extends {cr.ui.pageManager.PageManager.Observer}
    */
   var PageObserver = function() {};
 
   PageObserver.prototype = {
     __proto__: PageManager.Observer.prototype,
 
     updateHistory: function(path) {
       window.location.hash = '#' + path;
     },
 
     /**
      * Sets the page title. Called by PageManager.
      * @override
      * @param {string} title
      */
     updateTitle: function(title) {
       document.querySelector('.page-title').textContent = title;
     },
   };
 
-  /** @type {!Map<string, !interfaces.BluetoothDevice.DevicePtr>} */
-  var deviceAddressToProxy = new Map();
+  /**
+   * Removes DeviceDetailsPage with matching device |address|. The associated
+   * sidebar item is also removed.
+   * @param {string} address
+   */
+  function removeDeviceDetailsPage(address) {
+    var id = 'devices/' + address.toLowerCase();
+    sidebarObj.removeItem(id);
 
-  /** @type {!device_collection.DeviceCollection} */
-  devices = new device_collection.DeviceCollection([]);
+    var deviceDetailsPage = PageManager.registeredPages[id];
+    assert(deviceDetailsPage, 'Device Details page must exist');
 
-  /** @type {adapter_page.AdapterPage} */
-  var adapterPage = null;
-  /** @type {devices_page.DevicesPage} */
-  var devicesPage = null;
+    deviceDetailsPage.disconnect();
+    deviceDetailsPage.pageDiv.parentNode.removeChild(deviceDetailsPage.pageDiv);
+    deviceDetailsPage.deviceInfo.inspecting = false;
+    devices.addOrUpdate(deviceDetailsPage.deviceInfo);

[scheib, 2017/01/11 02:16:14]

comment why the addOrUpdate here and below, or rename addOrUpdate to make it
clearer why.

[mbrunson, 2017/01/11 21:22:59]

Now that I'm looking at this again, this is a bad design. I shouldn't be adding
completely unrelated properties to this data structure. 

I've changed this so that the device table tracks what's being inspected
independent of the DeviceInfo structure. It's also easier to follow since that
functionality is explicitly stated in the function name.

+    PageManager.unregister(deviceDetailsPage);
+  }
 
-  /** @type {interfaces.BluetoothAdapter.DiscoverySession.ptrClass} */
-  var discoverySession = null;
+  /**
+   * Creates a DeviceDetailsPage with the given |deviceInfo|, appends it to
+   * '#page-container', and adds a sidebar item to show the new page. If a
+   * page exists that matches |deviceInfo.address|, nothing is created and the
+   * existing page is returned.
+   * @param {!interfaces.BluetoothDevice.Device} deviceInfo
+   * @return {!device_details_page.DeviceDetailsPage}
+   */
+  function makeDeviceDetailsPage(deviceInfo) {
+    var deviceDetailsPageId = 'devices/' + deviceInfo.address.toLowerCase();
+    var deviceDetailsPage = PageManager.registeredPages[deviceDetailsPageId];
+    if (deviceDetailsPage) return deviceDetailsPage;
 
-  /** @type {boolean} */
-  var userRequestedScanStop = false;
+    var pageSection = document.createElement('section');
+    pageSection.hidden = true;
+    pageSection.id = deviceDetailsPageId;
+    $('page-container').appendChild(pageSection);
 
-  function handleInspect(event) {
-    // TODO(crbug.com/663470): Move connection logic to DeviceDetailsView
-    // when it's added in chrome://bluetooth-internals.
-    var address = event.detail.address;
-    var proxy = deviceAddressToProxy.get(address);
+    deviceDetailsPage = new DeviceDetailsPage(deviceDetailsPageId, deviceInfo);
+    deviceDetailsPage.pageDiv.addEventListener('connectionchanged',
+        function(event) {
+          devices.updateConnectionStatus(
+              event.detail.address, event.detail.status);
+        });
 
-    if (proxy) {
-      // Device is already connected, so disconnect.
-      proxy.disconnect();
-      deviceAddressToProxy.delete(address);
-      devices.updateConnectionStatus(
-          address, device_collection.ConnectionStatus.DISCONNECTED);
-      return;
-    }
+    deviceDetailsPage.pageDiv.addEventListener('infochanged', function(event) {
+      devices.addOrUpdate(event.detail.info);
+    });
 
-    devices.updateConnectionStatus(
-        address, device_collection.ConnectionStatus.CONNECTING);
+    deviceDetailsPage.pageDiv.addEventListener('forgetpressed',
+        function(event) {
+          PageManager.showPageByName(devicesPage.name);
+          removeDeviceDetailsPage(event.detail.address);
+        });
 
-    adapterBroker.connectToDevice(address).then(function(deviceProxy) {
-      var deviceInfo = devices.getByAddress(address);
-      if (!deviceInfo) {
-        // Device no longer in list, so drop the connection.
-        deviceProxy.disconnect();
-        return;
-      }
+    deviceInfo.inspecting = true;
+    devices.addOrUpdate(deviceInfo);
+    PageManager.register(deviceDetailsPage);
 
-      deviceAddressToProxy.set(address, deviceProxy);
-      devices.updateConnectionStatus(
-          address, device_collection.ConnectionStatus.CONNECTED);
-      Snackbar.show(deviceInfo.name_for_display + ': Connected',
-          SnackbarType.SUCCESS);
+    sidebarObj.addItem({
+      pageName: deviceDetailsPageId,
+      text: deviceInfo.name_for_display,
+    });
 
-      // Fetch services asynchronously.
-      return deviceProxy.getServices();
-    }).then(function(response) {
-      if (!response) return;
+    deviceDetailsPage.connect();
+    return deviceDetailsPage;
+  }
 
-      var deviceInfo = devices.getByAddress(address);
-      deviceInfo.services = response.services;
-      devices.addOrUpdate(deviceInfo);
-    }).catch(function(error) {
-      // If a connection error occurs while fetching the services, the proxy
-      // reference must be removed.
-      var proxy = deviceAddressToProxy.get(address);
-      if (proxy) {
-        proxy.disconnect();
-        deviceAddressToProxy.delete(address);
-      }
-
-      devices.updateConnectionStatus(
-          address, device_collection.ConnectionStatus.DISCONNECTED);
-
-      var deviceInfo = devices.getByAddress(address);
-      Snackbar.show(deviceInfo.name_for_display + ': ' + error.message,
-          SnackbarType.ERROR, 'Retry', function() { handleInspect(event); });
-    });
+  /**
+   * Updates the DeviceDetailsPage with the matching device |address| and
+   * redraws it.
+   * @param {string} address
+   */
+  function updateDeviceDetailsPage(address) {
+    var detailPageId = 'devices/' + address.toLowerCase();
+    var page = PageManager.registeredPages[detailPageId];
+    if (page) page.redraw();
   }
 
   function updateStoppedDiscoverySession() {
     devicesPage.setScanStatus(devices_page.ScanStatus.OFF);
     discoverySession.ptr.reset();
     discoverySession = null;
   }
 
   function setupAdapterSystem(response) {
     adapterBroker.addEventListener('adapterchanged', function(event) {
@@ skipping 15 matching lines @@
       adapterBroker.getInfo().then(function(response) {
         adapterPage.setAdapterInfo(response.info);
       });
     });
   }
 
   function setupDeviceSystem(response) {
     // Hook up device collection events.
     adapterBroker.addEventListener('deviceadded', function(event) {
       devices.addOrUpdate(event.detail.deviceInfo);
+      updateDeviceDetailsPage(event.detail.deviceInfo.address);
     });
     adapterBroker.addEventListener('devicechanged', function(event) {
       devices.addOrUpdate(event.detail.deviceInfo);
+      updateDeviceDetailsPage(event.detail.deviceInfo.address);
     });
     adapterBroker.addEventListener('deviceremoved', function(event) {
       devices.remove(event.detail.deviceInfo);
+      updateDeviceDetailsPage(event.detail.deviceInfo.address);
     });
 
     response.devices.forEach(devices.addOrUpdate, devices /* this */);
 
     devicesPage.setDevices(devices);
-    devicesPage.pageDiv.addEventListener('inspectpressed', handleInspect);
+
+    devicesPage.pageDiv.addEventListener('inspectpressed', function(event) {
+      var detailsPage = makeDeviceDetailsPage(
+          devices.getByAddress(event.detail.address));
+      PageManager.showPageByName(detailsPage.name);
+    });
+
+    devicesPage.pageDiv.addEventListener('forgetpressed', function(event) {
+      PageManager.showPageByName(devicesPage.name);
+      removeDeviceDetailsPage(event.detail.address);
+    });
 
     devicesPage.pageDiv.addEventListener('scanpressed', function(event) {
       if (discoverySession && discoverySession.ptr.isBound()) {
         userRequestedScanStop = true;
         devicesPage.setScanStatus(devices_page.ScanStatus.STOPPING);
 
         discoverySession.stop().then(function(response) {
           if (response.success) {
             updateStoppedDiscoverySession();
             userRequestedScanStop = false;
@@ skipping 33 matching lines @@
     PageManager.addObserver(sidebarObj);
     PageManager.addObserver(new PageObserver());
 
     devicesPage = new DevicesPage();
     PageManager.register(devicesPage);
     adapterPage = new AdapterPage();
     PageManager.register(adapterPage);
 
     // Set up hash-based navigation.
     window.addEventListener('hashchange', function() {
-      PageManager.showPageByName(window.location.hash.substr(1));
+      // If a user navigates and the page doesn't exist, do nothing.
+      var pageName = window.location.hash.substr(1);
+      if ($(pageName))
+        PageManager.showPageByName(pageName);
     });
 
     if (!window.location.hash) {
       PageManager.showPageByName(adapterPage.name);
       return;
     }
 
-    PageManager.showPageByName(window.location.hash.substr(1));
+    // Only the root pages are available on page load.
+    PageManager.showPageByName(window.location.hash.split('/')[0].substr(1));
   }
 
   function initializeViews() {
     setupPages();
 
     adapter_broker.getAdapterBroker()
       .then(function(broker) { adapterBroker = broker; })
       .then(function() { return adapterBroker.getInfo(); })
       .then(setupAdapterSystem)
       .then(function() { return adapterBroker.getDevices(); })
       .then(setupDeviceSystem)
       .catch(function(error) {
         Snackbar.show(error.message, SnackbarType.ERROR);
         console.error(error);
       });
   }
 
   return {
-    initializeViews: initializeViews
+    initializeViews: initializeViews,
   };
 });
 
 document.addEventListener(
     'DOMContentLoaded', bluetooth_internals.initializeViews);