MD Bookmarks: Integrate new data store with UI elements

chrome/browser/resources/md_bookmarks/folder_node.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.
 
 Polymer({
   is: 'bookmarks-folder-node',
 
+  behaviors: [
+    bookmarks.StoreClient,
+  ],
+
   properties: {
-    /** @type {BookmarkTreeNode} */
-    item: Object,
+    itemId: {
+      type: String,
+      observer: 'updateFromStore',
+    },
 
-    isSelectedFolder: {
+    /** @type {BookmarkNode} */
+    item_: Object,
+
+    /** @private */
+    isClosed_: Boolean,
+
+    /** @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';
   },
 
   /**
    * @private
    * @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));
   },
 
   /**
    * Occurs when the drop down arrow is tapped.
    * @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;
+  },
+
+  /**
    * @private
    * @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_()

 });