[MD Bookmarks] Add search.

chrome/browser/resources/md_bookmarks/store.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.
 
 var BookmarksStore = Polymer({
   is: 'bookmarks-store',
 
   properties: {
     /** @type {BookmarkTreeNode} */
     rootNode: {
       type: Object,
       notify: true,
     },
 
     selectedId: {
       type: String,
-      observer: 'updateSelectedNode_',
+      observer: 'updateSelectedDisplay_',
+      notify: true,
+    },
+
+    searchTerm: {
+      type: String,
+      observer: 'updateSearchDisplay_',
       notify: true,
     },
 
     /** @type {BookmarkTreeNode} */

[tsergeant, 2017/01/12 06:45:06]

Might be good to leave a comment here explaining what this does now: It's no
longer super straightforward.

[angelayang, 2017/01/12 07:51:24]

Done.

-    selectedNode: {
-      type: Object,
+    displayedList: {
+      type: Array,
       notify: true,
       readOnly: true,
     },
 
     idToNodeMap_: Object,
   },
 
   /** @private {Object} */
   documentListeners_: null,
 
   /** @override */
   attached: function() {
     this.documentListeners_ = {
       'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
       'folder-open-changed': this.onFolderOpenChanged_.bind(this),
+      'search-term-changed': this.onSearchTermChanged_.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]);
   },
@@ skipping 20 matching lines @@
    */
   setupStore_: function(rootNode) {
     this.rootNode = rootNode;
     this.idToNodeMap_ = {};
     this.rootNode.path = 'rootNode';
     BookmarksStore.generatePaths(rootNode, 0);
     BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_);
     this.fire('selected-folder-changed', this.rootNode.children[0].id);
   },
 
+  /** @private */
+  deselectFolders_: function() {

[tsergeant, 2017/01/12 06:45:06]

You should probably do an unlinkPaths that's the equivalent of the linkPaths in
updateSelectedDisplay(). This stops Polymer from thinking that displayedList
connects to anything in the tree.

[angelayang, 2017/01/12 07:51:24]

Done.

+    this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false);
+    this.selectedId = '';

[angelayang, 2017/01/12 06:08:06]

Closure doesn't like it when i set this to null, so i've set it to '' instead.

[tsergeant, 2017/01/12 06:45:06]

What specifically doesn't it like? I think using null is probably better, so we
can try and fix any problems with Closure to allow it.

[angelayang, 2017/01/12 07:51:24]

Closure says it should be of type string. So i'll put it to null and we can fix
the closure issue after yep

+  },
+
   /**
    * @param {BookmarkTreeNode} folder
    * @private
    * @return {boolean}
    */
   isAncestorOfSelected_: function(folder) {
-    return this.selectedNode.path.startsWith(folder.path);
+    if (!this.selectedId)
+      return false;
+
+    var selectedNode = this.idToNodeMap_[this.selectedId];
+    return selectedNode.path.startsWith(folder.path);
   },
 
   /** @private */
-  updateSelectedNode_: function() {
+  updateSearchDisplay_: function() {
+    if (this.searchTerm == '') {
+      this.fire('selected-folder-changed', this.rootNode.children[0].id);
+    } else {
+      chrome.bookmarks.search(this.searchTerm, function(results) {
+        if (this.selectedId)
+          this.deselectFolders_();
+
+        this._setDisplayedList(results);
+      }.bind(this));
+    }
+  },
+
+  /** @private */
+  updateSelectedDisplay_: function() {
+    // Don't do change to selected display if ID was cleared.
+    if (!this.selectedId)
+      return;
+
     var selectedNode = this.idToNodeMap_[this.selectedId];
-    this.linkPaths('selectedNode', selectedNode.path);
-    this._setSelectedNode(selectedNode);
+    this.linkPaths('displayedList', selectedNode.path + '.children');
+    this._setDisplayedList(selectedNode.children);
   },
 
   /**
    * Remove all descendants of a given node from the map.
    * @param {string} id
    * @private
    */
   removeDescendantsFromMap_: function(id) {
     var node = this.idToNodeMap_[id];
     if (!node)
@@ skipping 12 matching lines @@
   /**
    * Callback for when a bookmark node is removed.
    * If a folder is selected or is an ancestor of a selected folder, the parent
    * of the removed folder will be selected.
    * @param {string} id The id of the removed bookmark node.
    * @param {!{index: number,
    *           parentId: string,
    *           node: BookmarkTreeNode}} removeInfo
    */
   onBookmarkRemoved_: function(id, removeInfo) {
-    if (this.isAncestorOfSelected_(this.idToNodeMap_[id]))
+    if (this.isAncestorOfSelected_(this.idToNodeMap_[id])) {
+      // TODO (angelayang): does this ever happen?

[angelayang, 2017/01/12 06:08:06]

Sorry i'll delete this comment. Just checking whether i can remove this piece of
logic.  i think it's no longer possible to remove the selectedNode unless you're
in search. In which case we don't need to update the selectedId. 

[tsergeant, 2017/01/12 06:45:06]

Try:
- Create 'folder'
- Create 'subfolder'
- Select 'subfolder' in MD Bookmarks 
- Delete 'folder' from bookmarks bar

Then the selected item no longer exists and this line selects the parent of
'folder'

It's important to remember that modifications we see here could be coming from
anywhere: the bookmarks bar, the bookmark manager open in another tab, or even
synced from another device.

[angelayang, 2017/01/12 07:51:24]

Cool thanks! I'll definitely keep that in mind! I forgot about the bookmarks bar
etc.

       this.fire('selected-folder-changed', removeInfo.parentId);
+    }
 
     var parentNode = this.idToNodeMap_[removeInfo.parentId];
     this.splice(parentNode.path + '.children', removeInfo.index, 1);
     this.removeDescendantsFromMap_(id);
     BookmarksStore.generatePaths(parentNode, removeInfo.index);
+
+    // Regenerate the search list if its displayed.
+    if (this.searchTerm)
+      this.updateSearchDisplay_();
   },
 
   /**
+   * Initializes the nodes in the bookmarks tree as follows:
+   * - Populates |idToNodeMap_| with a mapping of all node ids to their
+   *   corresponding BookmarkTreeNode.
+   * - Sets all the nodes to not selected and open by default.
+   * @param {BookmarkTreeNode} bookmarkNode
+   * @private
+   */
+  initNodes_: function(bookmarkNode) {

[tsergeant, 2017/01/12 06:45:06]

This function got moved by Charlotte: It now exists below as
BookmarksStore.initNodes(). You should delete it again.

[angelayang, 2017/01/12 07:51:24]

oh thanks i didn't spot that

+    this.idToNodeMap_[bookmarkNode.id] = bookmarkNode;
+    if (bookmarkNode.url)
+      return;
+
+    bookmarkNode.isSelected = false;
+    bookmarkNode.isOpen = true;
+    for (var i = 0; i < bookmarkNode.children.length; i++) {
+      this.initNodes_(bookmarkNode.children[i]);
+    }
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onSearchTermChanged_: function(e) {

[tsergeant, 2017/01/12 06:45:06]

Also, Charlotte's patch added sections to store.js to try and keep everything in
order. This new function should go under "bookmarks app event listeners"

[angelayang, 2017/01/12 07:51:24]

Done.

+    this.searchTerm = /** @type {string} */ (e.detail);
+  },
+
+  /**
    * Called when the title of a bookmark changes.
    * @param {string} id The id of changed bookmark node.
    * @param {!Object} changeInfo
    */
   onBookmarkChanged_: function(id, changeInfo) {
     if (changeInfo.title)
       this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title);
     if (changeInfo.url)
       this.set(this.idToNodeMap_[id].path + '.url', changeInfo.url);
   },
 
 ////////////////////////////////////////////////////////////////////////////////
 // bookmarks-store, bookmarks app event listeners:
 
   /**
    * Selects the folder specified by the event and deselects the previously
    * selected folder.
    * @param {CustomEvent} e
    * @private
    */
   onSelectedFolderChanged_: function(e) {
+    if (this.searchTerm)
+      this.searchTerm = '';
+
     // 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;
   },
 
@@ skipping 41 matching lines @@
     idToNodeMap[bookmarkNode.id] = bookmarkNode;
 
   if (bookmarkNode.url)
     return;
 
   bookmarkNode.isSelected = false;
   bookmarkNode.isOpen = true;
   for (var i = 0; i < bookmarkNode.children.length; i++)
     BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap);
 };