MD Bookmarks: Integrate new data store with UI elements

chrome/browser/resources/md_bookmarks/folder_node.js

Index: chrome/browser/resources/md_bookmarks/folder_node.js
diff --git a/chrome/browser/resources/md_bookmarks/folder_node.js b/chrome/browser/resources/md_bookmarks/folder_node.js
index 6793a5e06df6f6ecab0eb68d9c40f260c0c52cf2..33c4cd5d0f41c8e6be2ca650906f7f89fd36d6e5 100644
--- a/chrome/browser/resources/md_bookmarks/folder_node.js
+++ b/chrome/browser/resources/md_bookmarks/folder_node.js
@@ -5,23 +5,54 @@
 Polymer({
   is: 'bookmarks-folder-node',
 
+  behaviors: [
+    bookmarks.StoreClient,
+  ],
+
   properties: {
-    /** @type {BookmarkTreeNode} */
-    item: Object,
+    itemId: {
+      type: String,
+      observer: 'updateFromStore',
+    },
+
+    /** @type {BookmarkNode} */
+    item_: Object,
+
+    /** @private */
+    isClosed_: Boolean,
 
-    isSelectedFolder: {
+    /** @private */
+    selectedFolder_: String,
+
+    /** @private */
+    isSelectedFolder_: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
+      computed: 'computeIsSelected_(itemId, selectedFolder_)'
     },
   },
 
+  attached: function() {
+    this.watch('item_', function(state) {
+      return state.nodes[this.itemId];
+    }.bind(this));
+    this.watch('isClosed_', function(state) {
+      return !!state.closedFolders[this.itemId];
+    }.bind(this));
+    this.watch('selectedFolder_', function(state) {
+      return state.selectedFolder;
+    });
+
+    this.updateFromStore();
+  },
+
   /**
    * @private
    * @return {string}
    */
   getFolderIcon_: function() {
-    return this.isSelectedFolder ? 'bookmarks:folder-open' : 'cr:folder';
+    return this.isSelectedFolder_ ? 'bookmarks:folder-open' : 'cr:folder';
   },
 
   /**
@@ -29,12 +60,12 @@ Polymer({
    * @return {string}
    */
   getArrowIcon_: function() {
-    return this.item.isOpen ? 'cr:arrow-drop-up' : 'cr:arrow-drop-down';
+    return this.isClosed_ ? 'cr:arrow-drop-down' : 'cr:arrow-drop-up';
   },
 
   /** @private */
   selectFolder_: function() {
-    this.fire('selected-folder-changed', this.item.id);
+    this.dispatch(bookmarks.actions.selectFolder(this.item_.id));
   },
 
   /**
@@ -42,10 +73,18 @@ Polymer({
    * @private
    */
   toggleFolder_: function() {
-    this.fire('folder-open-changed', {
-      id: this.item.id,
-      open: !this.item.isOpen,
-    });
+    this.dispatch(
+        bookmarks.actions.changeFolderOpen(this.item_.id, this.isClosed_));
+  },
+
+  /**
+   * @param {string} itemId
+   * @param {string} selectedFolder
+   * @return {boolean}
+   * @private
+   */
+  computeIsSelected_: function(itemId, selectedFolder) {
+    return itemId == selectedFolder;
   },
 
   /**
@@ -53,19 +92,20 @@ Polymer({
    * @return {boolean}
    */
   hasChildFolder_: function() {
-    for (var i = 0; i < this.item.children.length; i++) {
-      if (!this.item.children[i].url)
+    for (var i = 0; i < this.item_.children.length; i++) {
+      var child = this.getState().nodes[this.item_.children[i]];
+      if (!child.url)
         return true;
     }
     return false;
   },
 
   /**
-   * @param {BookmarkTreeNode} item
+   * @param {string} itemId
    * @private
    * @return {boolean}
    */
-  isFolder_: function(item) {
-    return !item.url;
+  isFolder_: function(itemId) {
+    return !this.getState().nodes[itemId].url;
   }

[calamity, 2017/03/09 04:58:57]

It's weird that this essentially does the same thing as above but with a
different control flow...

[tsergeant, 2017/03/09 06:27:54]

This actually caught me out earlier ('why do we have both of these? is one of
them unused?')

I've changed hasChildFolder_() to call isFolder_()

 });