[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..386eb5c018670ce851f5d5185434d31023c04e39 100644
--- a/chrome/browser/resources/md_bookmarks/list.js
+++ b/chrome/browser/resources/md_bookmarks/list.js
@@ -10,7 +10,7 @@ Polymer({
   ],
 
   properties: {
-    /** @private {Array<string>} */
+    /** @private {Array<{id: string}>} */
     displayedList_: {
       type: Array,
       value: function() {
@@ -20,6 +20,12 @@ Polymer({
       },
     },
 
+    /** @private {Array<string>} */
+    displayedIds_: {
+      type: Array,
+      observer: 'onDisplayedIdsChanged_',
+    },
+
     /** @private */
     searchTerm_: String,
   },
@@ -29,7 +35,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 +47,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.

[tsergeant, 2017/05/17 03:43:59]

I think you should also comment somewhere (here or elsewhere) about why we wrap
the `id` in a dummy object.

[calamity, 2017/05/17 05:33:53]

Added to displayedList_ above.

[tsergeant, 2017/05/17 07:05:38]

Great, thanks

+   * @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';