Reland of "Decrease the lag when switching between categories in the Cros wallpaper selector."

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js

Index: chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
index db4bb4b6f04881d2d68e90dd071682dd52341d4d..a473875bc0f15efc55a47235b956953148d20c5a 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
@@ -13,21 +13,28 @@ cr.define('wallpapers', function() {
 
   /**
    * Creates a new wallpaper thumbnails grid item.
-   * @param {{baseURL: string, layout: string, source: string,
-   *          availableOffline: boolean, opt_dynamicURL: string,
-   *          opt_author: string, opt_authorWebsite: string}}
+   * @param {{wallpaperId: number, baseURL: string, layout: string,
+   *          source: string, availableOffline: boolean,
+   *          opt_dynamicURL: string, opt_author: string,
+   *          opt_authorWebsite: string}}
    *     wallpaperInfo Wallpaper data item in WallpaperThumbnailsGrid's data
    *     model.
    * @param {number} dataModelId A unique ID that this item associated to.
+   * @param {object} thumbnail The thumbnail image Object associated with this
+   *      grid item.
    * @param {function} callback The callback function when decoration finished.
    * @constructor
    * @extends {cr.ui.GridItem}
    */
-  function WallpaperThumbnailsGridItem(wallpaperInfo, dataModelId, callback) {
+  function WallpaperThumbnailsGridItem(wallpaperInfo,
+                                       dataModelId,
+                                       thumbnail,
+                                       callback) {
     var el = new GridItem(wallpaperInfo);
     el.__proto__ = WallpaperThumbnailsGridItem.prototype;
-    el.dataModelId = dataModelId;
-    el.callback = callback;
+    el.dataModelId_ = dataModelId;
+    el.thumbnail_ = thumbnail;
+    el.callback_ = callback;
     return el;
   }
 
@@ -38,7 +45,12 @@ cr.define('wallpapers', function() {
      * The unique ID this thumbnail grid associated to.
      * @type {number}
      */
-    dataModelId: null,
+    dataModelId_: null,
+
+    /**
+     * The thumbnail image associated with the current grid item.
+     */
+    thumbnail_: null,
 
     /**
      * Called when the WallpaperThumbnailsGridItem is decorated or failed to
@@ -46,13 +58,20 @@ cr.define('wallpapers', function() {
      * be called after image loaded.
      * @type {function}
      */
-    callback: null,
+    callback_: null,
 
     /** @override */
     decorate: function() {
       GridItem.prototype.decorate.call(this);
       // Removes garbage created by GridItem.
       this.innerText = '';
+
+      if (this.thumbnail_) {
+        this.appendChild(this.thumbnail_);
+        this.callback_(this.dataModelId_);
+        return;
+      }
+
       var imageEl = cr.doc.createElement('img');
       imageEl.classList.add('thumbnail');
       cr.defineProperty(imageEl, 'offline', cr.PropertyKind.BOOL_ATTR);
@@ -70,18 +89,20 @@ cr.define('wallpapers', function() {
           });
           // Delay dispatching the completion callback until all items have
           // begun loading and are tracked.
-          window.setTimeout(this.callback.bind(this, this.dataModelId), 0);
+          window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0);
           break;
         case Constants.WallpaperSourceEnum.Custom:
           var errorHandler = function(e) {
-            self.callback(self.dataModelId);
+            self.callback_(self.dataModelId_);
             console.error('Can not access file system.');
           };
           var wallpaperDirectories = WallpaperDirectories.getInstance();
           var getThumbnail = function(fileName) {
             var setURL = function(fileEntry) {
               imageEl.src = fileEntry.toURL();
-              self.callback(self.dataModelId);
+              self.callback_(self.dataModelId_,
+                             self.dataItem.wallpaperId,
+                             imageEl);
             };
             var fallback = function() {
               wallpaperDirectories.getDirectory(
@@ -108,7 +129,9 @@ cr.define('wallpapers', function() {
                                   {'type': 'image\/png'});
               imageEl.src = window.URL.createObjectURL(blob);
               imageEl.addEventListener('load', function(e) {
-                self.callback(self.dataModelId);
+                self.callback_(self.dataModelId_,
+                               self.dataItem.wallpaperId,
+                               imageEl);
                 window.URL.revokeObjectURL(this.src);
               });
             } else if (self.dataItem.source ==
@@ -128,11 +151,13 @@ cr.define('wallpapers', function() {
                   // thumbnail. Use a placeholder like "loading" image may
                   // better.
                   imageEl.addEventListener('load', function(e) {
-                    self.callback(self.dataModelId);
+                    self.callback_(self.dataModelId_,
+                                   self.dataItem.wallpaperId,
+                                   this);
                     window.URL.revokeObjectURL(this.src);
                   });
                 } else {
-                  self.callback(self.dataModelId);
+                  self.callback_(self.dataModelId_);
                 }
               });
             }
@@ -142,7 +167,7 @@ cr.define('wallpapers', function() {
           console.error('Unsupported image source.');
           // Delay dispatching the completion callback until all items have
           // begun loading and are tracked.
-          window.setTimeout(this.callback.bind(this, this.dataModelId), 0);
+          window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0);
       }
     },
   };
@@ -239,6 +264,12 @@ cr.define('wallpapers', function() {
      */
     pendingItems_: 0,
 
+    /**
+     * Maintains all grid items' thumbnail images for quickly switching between
+     * different categories.
+     */
+    thumbnailList_: undefined,
+
     /** @override */
     set dataModel(dataModel) {
       if (this.dataModel_ == dataModel)
@@ -282,11 +313,19 @@ cr.define('wallpapers', function() {
      * it does not reduce the count on a previous |dataModelId|.
      * @param {number} dataModelId A unique ID that a thumbnail item is
      *     associated to.
+     * @param {number} opt_wallpaperId The unique wallpaper ID that associated
+     *     with this thumbnail gird item.
+     * @param {object} opt_thumbnail The thumbnail image that associated with
+     *     the opt_wallpaperId.
      */
-    pendingItemComplete: function(dataModelId) {
+    pendingItemComplete: function(dataModelId,
+                                  opt_wallpaperId,
+                                  opt_thumbnail) {
       if (dataModelId != this.dataModelId_)
         return;
       this.pendingItems_--;
+      if (opt_wallpaperId != null)
+        this.thumbnailList_[opt_wallpaperId] = opt_thumbnail;
       if (this.pendingItems_ == 0) {
         this.style.visibility = 'visible';
         window.clearTimeout(this.spinnerTimeout_);
@@ -304,11 +343,13 @@ cr.define('wallpapers', function() {
       this.checkmark_ = cr.doc.createElement('div');
       this.checkmark_.classList.add('check');
       this.dataModel = new ArrayDataModel([]);
+      this.thumbnailList_ = new ArrayDataModel([]);
       var self = this;
       this.itemConstructor = function(value) {
         var dataModelId = self.dataModelId_;
         self.pendingItems_++;
         return WallpaperThumbnailsGridItem(value, dataModelId,
+            self.thumbnailList_[value.wallpaperId],
             self.pendingItemComplete.bind(self));
       };
       this.selectionModel = new ListSingleSelectionModel();