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');
+
+    var pageContent = document.createElement('section');
+    pageContent.classList.add('page-content');
+    this.pageDiv.appendChild(pageContent);
+
+    this.devicesView = new DevicesView();
+    this.pageDiv.querySelector('.page-content').appendChild(this.devicesView);
+  }
+
+   cr.addSingletonGetter(DevicesPage);
+
+   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.

[ortuno, 2016/12/06 10:16:05]

Why not just add the table directly to pageDiv?

[mbrunson, 2016/12/07 01:12:14]

This is a holdover from adding the PageManager. I wanted to separate the
view-related stuff from the PageManager system. Each Page object would inherit
from a superclass that centralized the creation of the view-specific header.
Since the header is now shared, this separation isn't needed. I'll merge
DevicesView into DevicesPage. Done.

+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var DevicesView = cr.ui.define('div');
+
+  DevicesView.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    decorate: function() {

[ortuno, 2016/12/06 10:16:05]

q: Who calls this?

[mbrunson, 2016/12/07 01:12:14]

It's called in the cr library when the constructor is run.

https://cs.chromium.org/chromium/src/ui/webui/resources/js/cr/ui.js?rcl=0&l=96

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