Implement a slide-in pane for bookmarks.

chrome/browser/resources/pdf/elements/bookmarks-pane/bookmarks-pane.js

Index: chrome/browser/resources/pdf/elements/bookmarks-pane/bookmarks-pane.js
diff --git a/chrome/browser/resources/pdf/elements/bookmarks-pane/bookmarks-pane.js b/chrome/browser/resources/pdf/elements/bookmarks-pane/bookmarks-pane.js
new file mode 100644
index 0000000000000000000000000000000000000000..ab19e601fa2e3039c818e9de8eefec33b258d509
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/bookmarks-pane/bookmarks-pane.js
@@ -0,0 +1,43 @@
+// Copyright 2015 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.
+
+Polymer('bookmarks-pane', {
+  bookmarks: null,

[raymes, 2015/01/27 09:10:54]

Let's add documentation for all of the functions and members

[Alexandre Carlton, 2015/01/28 00:22:46]

Done.

+
+  bookmarksChanged: function() {
+    for (var i = 0; i < this.bookmarks.length; i++) {
+      var bookmark = this.makeBookmark_(this.bookmarks[i]);
+      this.$.pane.appendChild(bookmark);
+    }
+  },
+
+  makeBookmark_: function(bookmark) {
+    var node = document.createElement('paper-item');
+    node.textContent = bookmark.title;
+    if (bookmark.hasOwnProperty('page')) {
+      node.addEventListener('click', function() {
+        this.fire('changePage', {page: bookmark.page});
+      });
+    }
+    if (bookmark.children.length === 0) {
+      return node;
+    } else {
+      var titleNode = document.createElement('div');

[raymes, 2015/01/27 09:10:54]

titleNode seems a bit confusing to me because I don't think it contains a title
at all? Doesn't it contain the children? "node" seems to be the title?

[Alexandre Carlton, 2015/01/28 00:22:46]

Fixed; node is now titleNode, and titleNode has been renamed to subNode.

+      titleNode.className += ' sub-bookmark';
+
+      for (var i = 0; i < bookmark.children.length; i++) {
+        var childNode = this.makeBookmark_(bookmark.children[i]);
+        titleNode.appendChild(childNode);
+      }
+      var wrapperNode = document.createElement('div');
+      wrapperNode.appendChild(node);
+      wrapperNode.appendChild(titleNode);
+      return wrapperNode;

[raymes, 2015/01/27 09:10:54]

I think the structure should be something like this:
<div> <- wrapper
  <paper-item> <- title
  <div> <- child 1
  <div> <- child 2
  ...
</div>

[Alexandre Carlton, 2015/01/28 00:22:46]

For reference, the structure currently is:
<div>
  <paper-item> <- title
  <div class="sub-bookmark">
    <div> <- child 2
      <paper-item> <- child 1 title
      <div class="sub-bookmark">...</div>
    </div>
    <div> <- child 2
      <paper-item> <- child 2 title
      <div class="sub-bookmark">...</div>
    </div>
  </div>
  ...
</div>
I have wrapped each parent and its children inside a div as it is easier to
return and append to another element.

+    }
+  },
+
+  toggle: function() {
+    this.$.pane.toggle();
+  }
+});