[MD Bookmarks] Convert bookmark list to iron-list.

chrome/browser/resources/md_bookmarks/list.js

Index: chrome/browser/resources/md_bookmarks/list.js
diff --git a/chrome/browser/resources/md_bookmarks/list.js b/chrome/browser/resources/md_bookmarks/list.js
index 365487a55254e8aa6b0366b8384f00ed68f0fa64..07951140491ba312e760b37f12ed3423dcf921ae 100644
--- a/chrome/browser/resources/md_bookmarks/list.js
+++ b/chrome/browser/resources/md_bookmarks/list.js
@@ -10,7 +10,12 @@ Polymer({
   ],
 
   properties: {
-    /** @private {Array<string>} */
+    /**
+     * A list of item ids wrapped in an Object. This is necessary because
+     * iron-list is unable to distinguish focusing index 6 from focusing id '6'
+     * so the item we supply to iron-list needs to be non-index-like.
+     * @private {Array<{id: string}>}
+     */
     displayedList_: {
       type: Array,
       value: function() {
@@ -20,6 +25,12 @@ Polymer({
       },
     },
 
+    /** @private {Array<string>} */
+    displayedIds_: {
+      type: Array,
+      observer: 'onDisplayedIdsChanged_',
+    },
+
     /** @private */
     searchTerm_: String,
   },
@@ -29,7 +40,10 @@ Polymer({
   },
 
   attached: function() {
-    this.watch('displayedList_', function(state) {
+    var list = /** @type {IronListElement} */ (this.$.bookmarksCard);
+    list.scrollTarget = this;
+
+    this.watch('displayedIds_', function(state) {
       return bookmarks.util.getDisplayedList(state);
     });
     this.watch('searchTerm_', function(state) {
@@ -38,10 +52,39 @@ Polymer({
     this.updateFromStore();
   },
 
+  /** @return {HTMLElement} */
   getDropTarget: function() {
     return this.$.message;
   },
 
+  /**
+   * Updates `displayedList_` using splices to be equivalent to `newValue`. This
+   * allows the iron-list to delete sublists of items which preserves scroll and
+   * focus on incremental update.
+   * @param {Array<string>} newValue
+   * @param {Array<string>} oldValue
+   */
+  onDisplayedIdsChanged_: function(newValue, oldValue) {
+    if (!oldValue) {
+      this.displayedList_ = this.displayedIds_.map(function(id) {
+        return {id: id};
+      });
+    } else {
+      var splices = Polymer.ArraySplice.calculateSplices(newValue, oldValue);
+      splices.forEach(function(splice) {
+        // TODO(calamity): Could use notifySplices to improve performance here.
+        var additions =
+            newValue.slice(splice.index, splice.index + splice.addedCount)
+                .map(function(id) {
+                  return {id: id};
+                });
+        this.splice.apply(this, [
+          'displayedList_', splice.index, splice.removed.length
+        ].concat(additions));
+      }.bind(this));
+    }
+  },
+
   /** @private */
   emptyListMessage_: function() {
     var emptyListMessage = this.searchTerm_ ? 'noSearchResults' : 'emptyList';