bluetooth: Add sidebar and page manager for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/devices_page.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 DevicesPage and DevicesView, served from
+ *     chrome://bluetooth-internals/.
+ */
+
+cr.define('devices_page', function() {
+  /** @const */ var Page = cr.ui.pageManager.Page;
+
+  /**
+   * Page that contains a header and a DevicesView.
+   * @constructor
+   * @extends {cr.ui.pageManager.Page}
+   */
+  function DevicesPage() {
+    var devicesHeaderTitle = 'Devices';
+    Page.call(this, 'devices', devicesHeaderTitle, 'devices');
+    this.pageDiv.appendChild(document.importNode($('page-template').content,

[ortuno, 2016/12/05 05:45:28]

Could we just have a single header and change its contents when changing pages?
Otherwise we would have to replicate this code on each page...

[mbrunson, 2016/12/06 00:25:45]

Done.

+                                                true /* deep */));
+
+    this.pageDiv.querySelector('.page-title').textContent = devicesHeaderTitle;
+    this.pageDiv.querySelector('.menu-btn').addEventListener('click',
+      function() {
+        this.pageDiv.dispatchEvent(new CustomEvent('menupressed'));
+      }.bind(this));
+
+    this.devicesView = new DevicesView();
+    this.pageDiv.querySelector('.page-content').appendChild(this.devicesView);
+  }
+
+   cr.addSingletonGetter(DevicesPage);

[ortuno, 2016/12/05 05:45:28]

Why use a singleton?

[mbrunson, 2016/12/06 00:25:45]

Other internal pages that use PageManager tend to have singletons for all the
pages since there will always only be one instance of the page. I would be fine
with this not being a singleton but it seemed like the preferred pattern.

+
+   DevicesPage.prototype = {
+     __proto__: Page.prototype,
+
+    /**
+     * Sets the DevicesView's device collection.
+     * @param {!device_collection.DeviceCollection} devices
+     */
+    setDevices: function(devices) {
+      this.devicesView.setDevices(devices);
+    },
+   };
+
+  /**
+   * An element that contains a device table and its associated controls.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var DevicesView = cr.ui.define('div');
+
+  DevicesView.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    decorate: function() {
+      this.deviceTable = new device_table.DeviceTable();
+      this.appendChild(this.deviceTable);

[ortuno, 2016/12/05 05:45:28]

I'm so sad that we can't use Custom Elements :(

[mbrunson, 2016/12/06 00:25:46]

:'(

+    },
+
+    /**
+     * Sets the device table's device collection.
+     * @param {!device_collection.DeviceCollection} devices
+     */
+    setDevices: function(devices) {
+      this.deviceTable.setDevices(devices);
+    },
+  };
+
+  return {
+    DevicesPage: DevicesPage
+  };
+});