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

chrome/browser/resources/bluetooth_internals/sidebar.js

Index: chrome/browser/resources/bluetooth_internals/sidebar.js
diff --git a/chrome/browser/resources/bluetooth_internals/sidebar.js b/chrome/browser/resources/bluetooth_internals/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..38b7fbf06ddeab45609d0e1e8ac12d06ff7d4fd8
--- /dev/null
+++ b/chrome/browser/resources/bluetooth_internals/sidebar.js
@@ -0,0 +1,68 @@
+// 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 Sidebar, served from chrome://bluetooth-internals/.
+ */
+
+cr.define('sidebar', function() {
+  /** @const {!cr.ui.pageManager.PageManager}*/
+  var PageManager = cr.ui.pageManager.PageManager;
+
+  /**
+   * A side menu that lists the currently navigable pages.
+   * @constructor
+   * @param {string} sidebarDivId ID of the div corresponding to the sidebar.
+   * @extends {PageManager.Observer}
+   */
+  function Sidebar(sidebarDivId) {
+    /** @private {!Element} */
+    this.sidebarDiv_ = $(sidebarDivId);
+    /** @private {!Element} */
+    this.sidebarContent_ = this.sidebarDiv_.querySelector('.sidebar-content');
+
+    this.sidebarContent_.querySelectorAll('li').forEach(function(item) {
+      item.addEventListener('click', function() { this.close(); }.bind(this));
+    }, this);

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

q: Why do you need the this here?

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

The this object in the forEach is the Window object so I had to override that.
It's the same as using the bind function. I've done this in multiple places with
forEach loops. See device_table.js (96,97) and bluetooth_internals.js (36)

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

Ah got it. Thanks for the explanation.

+
+    /** @private {!Element} */
+    this.overlayDiv_ = this.sidebarDiv_.querySelector('.overlay');
+    this.overlayDiv_.addEventListener('click', this.close.bind(this));

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

Oh cool. Could we do the same on line 26?

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

Done.

+  }
+
+  Sidebar.prototype = {
+    __proto__: PageManager.Observer.prototype,
+
+    /**
+     * Closes the sidebar. Only applies to layouts with window width <= 600px.
+     */
+    close: function() {
+      this.sidebarContent_.classList.remove('open');

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

You can just set the class in aside by changing some of the css rules. See
bluetooth_internals.css for more details.

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

Done.

+      this.overlayDiv_.classList.remove('open');
+    },
+
+    /**
+     * Opens the sidebar. Only applies to layouts with window width <= 600px.
+     */
+    open: function() {

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

Could you set overflow: hidden; in body when the bar is opened and the
resolution is < 600px? That way the scroll bars are not shown when the toolbar
is opened.

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

Done.

+      this.sidebarContent_.classList.add('open');
+      this.overlayDiv_.classList.add('open');
+    },
+

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

One of the reasons I thought using a listener in js would be better was for
resetting the sidebar when the resolution changes. For example the following
steps result in the bar staying opened:

1. Start with width < 600
2. Open sidebar.
3. Increase width to > 600
4. Decrease width to < 600 <--- Sidebar starts opened.

Could we do that with media queries? Maybe a combination of the two?

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

Oh. I see. In that case, the listener would be good because it's managing the
state of the component based on the screen size. Done.

+    /**
+     * Called when a page is navigated to.
+     * @override
+     * @param {string} path The path of the page being visited.
+     */
+    updateHistory: function(path) {
+      this.sidebarContent_.querySelectorAll('li').forEach(function(item) {
+        item.classList.toggle('selected', item.dataset.pageName === path);
+      });
+    }
+  };
+
+  return {
+    Sidebar: Sidebar
+  };
+});