[MD Bookmarks] Add skeleton for MD Bookmarks.

chrome/browser/resources/md_bookmarks/store.js

Index: chrome/browser/resources/md_bookmarks/store.js
diff --git a/chrome/browser/resources/md_bookmarks/store.js b/chrome/browser/resources/md_bookmarks/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..e63635ec05e96e3c844cab440c1bb1148472cf74
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/store.js
@@ -0,0 +1,140 @@
+// 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.
+
+Polymer({
+  is: 'bookmarks-store',
+
+  properties: {
+    /** @type {BookmarkTreeNode} */
+    rootNode: {
+      type: Object,
+      notify: true,
+    },
+
+    selectedId: {
+      type: String,
+      observer: 'updateSelectedNode_',
+      notify: true,
+    },
+
+    /** @type {BookmarkTreeNode} */
+    selectedNode: {
+      type: Object,
+      notify: true,
+      readOnly: true,
+    },
+
+    idToNodeMap_: Object,
+  },
+
+  /** @private {Object} */
+  documentListeners_: null,
+
+  /**
+   * Initializes the store with data from the bookmarks API.
+   * Called by app on attached.
+   */
+  initializeStore: function() {

[tsergeant, 2016/12/28 23:51:50]

Move initializeStore below attached/detached

(the Polymer section of the style guide has a rough order for functions that you
should try and stick to:
https://www.chromium.org/developers/web-development-style-guide)

[angelayang, 2016/12/29 02:53:34]

Done.

+    chrome.bookmarks.getTree(function(results) {
+      this.setupStore_(results[0]);
+    }.bind(this));
+  },
+
+  /** @override */
+  attached: function() {
+    this.documentListeners_ = {
+      'selected-folder-changed': this.selectedFolderChanged_.bind(this),
+      'folder-open-changed': this.folderOpenChanged_.bind(this),
+    };
+    for (var event in this.documentListeners_)
+      document.addEventListener(event, this.documentListeners_[event]);
+  },
+
+  /** @override */
+  detached: function() {
+    for (var event in this.documentListeners_)
+      document.removeEventListener(event, this.documentListeners_[event]);
+  },
+
+  /**
+   * @param {BookmarkTreeNode} rootNode
+   * @private
+   */
+  setupStore_: function(rootNode) {
+    this.rootNode = rootNode;
+    this.idToNodeMap_ = {};
+    this.rootNode.path = 'rootNode';
+    this.initNodes_(this.rootNode);
+    this.fire('selected-folder-changed', this.rootNode.children[0].id);
+  },
+
+  /**
+   * Selects the folder specified by the event and deselects the previously
+   * selected folder.
+   * @param {CustomEvent} e
+   * @private
+   */
+  selectedFolderChanged_: function(e) {
+    // Deselect the old folder if defined.
+    if (this.selectedId)
+      this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false);
+
+    var selectedId = /** @type {string} */ (e.detail);
+    var newFolder = this.idToNodeMap_[selectedId];
+    this.set(newFolder.path + '.isSelected', true);
+    this.selectedId = selectedId;
+  },
+
+  /**
+   * @param {CustomEvent} e

[calamity, 2016/12/29 00:54:50]

This could use with a comment since the method name isn't _super_ clear.

[angelayang, 2016/12/29 02:53:34]

Done.

+   * @private
+   */
+  folderOpenChanged_: function(e) {

[calamity, 2016/12/29 00:54:50]

nit: Both these event handlers should be onEventName.

[angelayang, 2016/12/29 02:53:34]

Done.

+    var folder = this.idToNodeMap_[e.detail.id];
+    this.set(folder.path + '.isOpen', e.detail.open);
+    if (folder.isOpen)
+      return;
+
+    if (this.isAncestorOfSelected_(folder))

[tsergeant, 2016/12/28 23:51:50]

Personal style, I guess, but I would write this with only one if statement:

if (!folder.isOpen && this.isAncestorOfSelected_(folder))

[angelayang, 2016/12/29 02:53:34]

Done.

+      this.fire('selected-folder-changed', folder.id);
+  },
+
+  /**
+   * @param {BookmarkTreeNode} folder
+   * @private
+   * @return {boolean}
+   */
+  isAncestorOfSelected_: function(folder) {
+    return this.selectedNode.path.startsWith(folder.path);
+  },
+
+  /** @private */
+  updateSelectedNode_: function() {
+    var selectedNode = this.idToNodeMap_[this.selectedId];
+    this.linkPaths('selectedNode', selectedNode.path);
+    this._setSelectedNode(selectedNode);
+  },
+
+  /**
+   * Initializes the nodes in the bookmarks tree as follows:
+   * - Populates |idToNodeMap_| with a mapping of all node ids to their
+   *   corresponding BookmarkTreeNode.
+   * - Stores the path from the store to a node inside the node.
+   * - Sets all the nodes to not selected and open by default.
+   * @param {BookmarkTreeNode} bookmarkNode
+   * @private
+   */
+  initNodes_: function(bookmarkNode) {
+    this.idToNodeMap_[bookmarkNode.id] = bookmarkNode;
+    if (bookmarkNode.url)
+      return;
+
+    bookmarkNode.isSelected = false;
+    bookmarkNode.isOpen = true;
+    for (var i = 0; i < bookmarkNode.children.length; i++) {
+      bookmarkNode.children[i].path = bookmarkNode.path + '.children.' + i;
+      this.initNodes_(bookmarkNode.children[i]);
+    }
+  },
+});