Move sorting logic from table to list.

chrome/browser/resources/shared/js/cr/ui/list.js

Index: chrome/browser/resources/shared/js/cr/ui/list.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index d8dc94c96c08344b02f293146bff89812485e7b5..5878ccd4ed97c5174eb9c7561e25af122168cbcd 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -160,26 +160,23 @@ cr.define('cr.ui', function() {
 
     /**
      * The data model driving the list.
-     * @type {ListDataModel}
+     * @type {ArrayDataModel}
      */
     set dataModel(dataModel) {
       if (this.dataModel_ != dataModel) {
-        if (!this.boundHandleDataModelSplice_) {
-          this.boundHandleDataModelSplice_ =
-              this.handleDataModelSplice_.bind(this);
+        if (!this.boundHandleDataModelPermuted_) {
+          this.boundHandleDataModelPermuted_ =
+              this.handleDataModelPermuted_.bind(this);
           this.boundHandleDataModelChange_ =
               this.handleDataModelChange_.bind(this);
-          this.boundHandleSorted_ =
-              this.handleSorted_.bind(this);
         }
 
         if (this.dataModel_) {
-          this.dataModel_.removeEventListener('splice',
-                                              this.boundHandleDataModelSplice_);
+          this.dataModel_.removeEventListener(
+              'permuted',
+              this.boundHandleDataModelPermuted_);
           this.dataModel_.removeEventListener('change',
                                               this.boundHandleDataModelChange_);
-          this.dataModel_.removeEventListener('sorted',
-                                             this.boundHandleSorted_);
         }
 
         this.dataModel_ = dataModel;
@@ -187,15 +184,14 @@ cr.define('cr.ui', function() {
         this.cachedItems_ = {};
         this.selectionModel.clear();
         if (dataModel)
-          this.selectionModel.adjust(0, 0, dataModel.length);
+          this.selectionModel.adjustLength(dataModel.length);
 
         if (this.dataModel_) {
-          this.dataModel_.addEventListener('splice',
-                                           this.boundHandleDataModelSplice_);
+          this.dataModel_.addEventListener(
+              'permuted',
+              this.boundHandleDataModelPermuted_);
           this.dataModel_.addEventListener('change',
                                            this.boundHandleDataModelChange_);
-          this.dataModel_.addEventListener('sorted',
-                                           this.boundHandleSorted_);
         }
 
         this.redraw();
@@ -554,42 +550,48 @@ cr.define('cr.ui', function() {
       }
     },
 
-    handleDataModelSplice_: function(e) {
-      this.selectionModel.adjust(e.index, e.removed.length, e.added.length);
-      // Remove the cache of everything above index.
+    /**
+     * This handles data model 'permuted' event.
+     * this event is dispatched as a part of sort or splice.
+     * We need to
+     *  - adjust the cache.
+     *  - adjust selection.
+     *  - redraw.
+     *  - scroll the list to show selection.
+     *  It is important that the cache adjustment happens before selection model
+     *  adjustments.
+     * @param {Event} e The 'permuted' event.
+     */
+    handleDataModelPermuted_: function(e) {
+      var newCachedItems = {};
       for (var index in this.cachedItems_) {
-        if (index >= e.index)
+        if (e.permutation[index] != -1)
+          newCachedItems[e.permutation[index]] = this.cachedItems_[index];
+        else
           delete this.cachedItems_[index];
       }
-      this.redraw();
-    },
+      this.cachedItems_ = newCachedItems;
 
-    handleDataModelChange_: function(e) {
-      if (e.index >= this.firstIndex_ && e.index < this.lastIndex_) {
-        this.cachedItems_ = null;
-        this.redraw();
-      }
-    },
+      this.startBatchUpdates();
 
-    /**
-     * This handles data model 'sorted' event.
-     * After sorting we need to
-     *  - adjust selection.
-     *  - delete the cache.
-     *  - redraw all the items.
-     *  - scroll the list to show selection.
-     * @param {Event} e The 'sorted' event.
-     */
-    handleSorted_: function(e) {
       var sm = this.selectionModel;
-      sm.adjustToReordering(e.sortPermutation);
+      sm.adjustLength(e.newLength);
+      sm.adjustToReordering(e.permutation);
+
+      this.endBatchUpdates();
 
-      this.cachedItems_ = null;
-      this.redraw();
       if (sm.leadIndex != -1)
         this.scrollIndexIntoView(sm.leadIndex);
     },
 
+    handleDataModelChange_: function(e) {
+      if (e.index >= this.firstIndex_ && e.index < this.lastIndex_) {
+        if (this.cachedItems_[e.index])
+          delete this.cachedItems_[e.index];
+        this.redraw();
+      }
+    },
+
     /**
      * @param {number} index The index of the item.
      * @return {number} The top position of the item inside the list, not taking
@@ -823,6 +825,7 @@ cr.define('cr.ui', function() {
       var listItem;
       var dataModel = this.dataModel;
 
+      window.l = this;
       for (var y = firstIndex; y < lastIndex; y++) {
         var dataItem = dataModel.item(y);
         listItem = cachedItems[y] || this.createItem(dataItem);
@@ -931,6 +934,13 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Invalidates list by removing cached items.
+     */
+    invalidate: function() {
+      this.cachedItems_ = {};
+    },
+
+    /**
      * Redraws a single item.
      * @param {number} index The row index to redraw.
      */