MD Bookmarks: Proof-of-concept reimplementation of data storage/binding layer

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} */
+    itemId: {
+      type: String,
+      observer: 'updateFromStore',
+    },
+
+    /** @type {BookmarkNode} */
     item: Object,
 
+    isClosed: Boolean,
+
+    selectedFolder: String,
+
     isSelectedFolder: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
+      computed: 'computeIsSelected_(itemId, selectedFolder)'
     },
   },
 
+  attached: function() {
+    this.observe('item', function(state) {
+      return state.nodes[this.itemId];
+    }.bind(this));
+    this.observe('isClosed', function(state) {
+      return !!state.closedFolders[this.itemId];
+    }.bind(this));
+    this.observe('selectedFolder', function(state) {
+      return state.selectedFolder;
+    });
+
+    this.updateFromStore();
+  },
+
   /**
    * @private
    * @return {string}
    */
   getFolderIcon_: function() {
     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));
+  },
+
+  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)
+      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;
   }
 });