Introduce a priority queue to the image loader.

chrome/browser/resources/image_loader/image_loader.js

 // Copyright 2013 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.
 
 /**
  * Loads and resizes an image.
  * @constructor
  */
 var ImageLoader = function() {
   /**
    * Hash array of active requests.
    * @type {Object}
    * @private
    */
   this.requests_ = {};
 
   /**
    * Persistent cache object.
    * @type {ImageLoader.Cache}
    * @private
    */
   this.cache_ = new ImageLoader.Cache();
 
+  /**
+   * Manages pending requests and runs them in order of priorities.
+   * @type {ImageLoader.Worker}
+   * @private
+   */
+  this.worker_ = new ImageLoader.Worker();
+
   chrome.fileBrowserPrivate.requestLocalFileSystem(function(filesystem) {
     // TODO(mtomasz): Handle.
   });
 
   chrome.extension.onMessageExternal.addListener(function(request,
                                                           sender,
                                                           sendResponse) {
     if (ImageLoader.ALLOWED_CLIENTS.indexOf(sender.id) !== -1)
       return this.onMessage_(sender.id, request, sendResponse);
   }.bind(this));
@@ skipping 22 matching lines @@
 ImageLoader.prototype.onMessage_ = function(senderId, request, callback) {
   var requestId = senderId + ':' + request.taskId;
   if (request.cancel) {
     // Cancel a task.
     if (requestId in this.requests_) {
       this.requests_[requestId].cancel();
       delete this.requests_[requestId];
     }
     return false;  // No callback calls.
   } else {
-    // Start a task.
-    this.requests_[requestId] =
-        new ImageLoader.Request(this.cache_, request, callback);
+    // Create a request task and add it to the worker (queue).
+    var requestTask = new ImageLoader.Request(this.cache_, request, callback);
+    this.requests_[requestId] = requestTask;
+    this.worker_.add(requestTask);
     return true;  // Request will call the callback.
   }
 };
 
 /**
  * Returns the singleton instance.
  * @return {ImageLoader} ImageLoader object.
  */
 ImageLoader.getInstance = function() {
   if (!ImageLoader.instance_)
@@ skipping 144 matching lines @@
    * @private
    */
   this.canvas_ = document.createElement('canvas');
 
   /**
    * @type {CanvasRenderingContext2D}
    * @private
    */
   this.context_ = this.canvas_.getContext('2d');
 
-  // Process the request. Try to load from cache. If it fails, then download.
+  /**
+   * Callback to be called once downloading is finished.
+   * @type {function()}
+   * @private
+   */
+  this.downloadCallback_ = null;
+};
+
+/**
+ * Returns priority of the request. The higher priority, the faster it will
+ * be handled. The highest priority is 0. The default one is 2.
+ *
+ * @return {number} Priority.
+ */
+ImageLoader.Request.prototype.getPriority = function() {
+  return (this.request_.priority !== undefined) ? this.request_.priority : 2;
+};
+
+/**
+ * Tries to load the image from cache if exists and sends the response.
+ *

[James Hawkins, 2013/05/15 17:37:18]

nit: Remove blank line.

[mtomasz, 2013/05/16 02:18:01]

Why? We put an empty line after the description for jsdoc block with more than 3
lines for better readibility. We try to be consistent with it.

+ * @param {function()} onSuccess Success callback.
+ * @param {function()} onFailure Failure callback.
+ */
+ImageLoader.Request.prototype.loadFromCacheAndProcess = function(
+    onSuccess, onFailure) {
   this.loadFromCache_(
-      this.sendImageData_.bind(this),
-      function() {  // Failure, not in cache.
-        this.downloadOriginal_(this.onImageLoad_.bind(this),
-                               this.onImageError_.bind(this));
-      }.bind(this));
+      function(data) {  // Found in cache.
+        this.sendImageData_(data);
+        onSuccess();
+      }.bind(this),
+      onFailure);  // Not found in cache.
+};
+
+/**
+ * Tries to download the image, resizes and sends the response.
+ * @param {function()} callback Completion callback.
+ */
+ImageLoader.Request.prototype.downloadAndProcess = function(callback) {
+  if (this.downloadCallback_)
+    throw new Error('Downloading already started.');
+
+  this.downloadCallback_ = callback;
+  this.downloadOriginal_(this.onImageLoad_.bind(this),
+                         this.onImageError_.bind(this));
 };
 
 /**
  * Fetches the image from the persistent cache.
+ *

[James Hawkins, 2013/05/15 17:37:18]

nit: Please remove all of these added blank lines.

  * @param {function()} onSuccess Success callback.
  * @param {function()} onFailure Failure callback.
  * @private
  */
 ImageLoader.Request.prototype.loadFromCache_ = function(onSuccess, onFailure) {
   var cacheKey = ImageLoader.Cache.createKey(this.request_);
 
   if (!this.request_.cache) {
     // Cache is disabled for this request; therefore, remove it from cache
     // if existed.
     this.cache_.removeImage(cacheKey);
     onFailure();
     return;
   }
 
   if (!this.request_.timestamp) {
     // Persistent cache is available only when a timestamp is provided.
     onFailure();
     return;
   }
 
   this.cache_.loadImage(cacheKey,
                         this.request_.timestamp,
                         onSuccess,
                         onFailure);
 };
 
 /**
  * Saves the image to the persistent cache.
+ *
  * @param {string} data The image's data.
  * @private
  */
 ImageLoader.Request.prototype.saveToCache_ = function(data) {
   if (!this.request_.cache || !this.request_.timestamp) {
     // Persistent cache is available only when a timestamp is provided.
     return;
   }
 
   var cacheKey = ImageLoader.Cache.createKey(this.request_);
   this.cache_.saveImage(cacheKey,
                         data,
                         this.request_.timestamp);
 };
 
 /**
  * Downloads an image directly or for remote resources using the XmlHttpRequest.
+ *
  * @param {function()} onSuccess Success callback.
  * @param {function()} onFailure Failure callback.
  * @private
  */
 ImageLoader.Request.prototype.downloadOriginal_ = function(
     onSuccess, onFailure) {
   this.image_.onload = onSuccess;
   this.image_.onerror = onFailure;
 
-  if (window.harness || !this.request_.url.match(/^https?:/)) {
+  if (!this.request_.url.match(/^https?:/)) {
     // Download directly.
     this.image_.src = this.request_.url;
     return;
   }
 
   // Download using an xhr request.
   this.xhr_.responseType = 'blob';
 
   this.xhr_.onerror = this.image_.onerror;
   this.xhr_.onload = function() {
@@ skipping 46 matching lines @@
 ImageLoader.Request.prototype.sendImageData_ = function(data) {
   this.sendResponse_({status: 'success',
                       data: data,
                       taskId: this.request_.taskId});
 };
 
 /**
  * Handler, when contents are loaded into the image element. Performs resizing
  * and finalizes the request process.
  *
+ * @param {function()} callback Completion callback.
  * @private
  */
-ImageLoader.Request.prototype.onImageLoad_ = function() {
+ImageLoader.Request.prototype.onImageLoad_ = function(callback) {
   ImageLoader.resize(this.image_, this.canvas_, this.request_);
   this.sendImage_();
   this.cleanup_();
+  this.downloadCallback_();
 };
 
 /**
  * Handler, when loading of the image fails. Sends a failure response and
  * finalizes the request process.
  *
+ * @param {function()} callback Completion callback.
  * @private
  */
-ImageLoader.Request.prototype.onImageError_ = function() {
+ImageLoader.Request.prototype.onImageError_ = function(callback) {
   this.sendResponse_({status: 'error',
                       taskId: this.request_.taskId});
   this.cleanup_();
+  this.downloadCallback_();
 };
 
 /**
  * Cancels the request.
  */
 ImageLoader.Request.prototype.cancel = function() {
   this.cleanup_();
+
+  // If downloading has started, then call the callback.
+  if (this.downloadCallback_)
+    this.downloadCallback_();
 };
 
 /**
  * Cleans up memory used by this request.
  * @private
  */
 ImageLoader.Request.prototype.cleanup_ = function() {
   this.image_.onerror = function() {};
   this.image_.onload = function() {};
 
   // Transparent 1x1 pixel gif, to force garbage collecting.
   this.image_.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAA' +
       'ABAAEAAAICTAEAOw==';
 
   this.xhr_.onerror = function() {};
   this.xhr_.onload = function() {};
   this.xhr_.abort();
 
   // Dispose memory allocated by Canvas.
   this.canvas_.width = 0;
   this.canvas_.height = 0;
 };
 
 /**
+ * Worker for requests. Fetches requests from a queue and processes them
+ * synchronously, taking into account priorities. The highest priority is 0.
+ */
+ImageLoader.Worker = function() {
+  /**
+   * List of pending requests.
+   * @type {ImageLoader.Request}
+   * @private
+   */
+  this.pendingRequests_ = [];
+
+  /**
+   * List of requests being processed.
+   * @type {ImageLoader.Request}
+   * @private
+   */
+  this.activeRequests_ = [];
+};
+
+/**
+ * Maximum requests to be run in parallel.
+ * @type {number}
+ * @const
+ */
+ImageLoader.Worker.MAXIMUM_IN_PARALLEL = 5;
+
+/**
+ * Adds a request to the internal priority queue and executes it when requests
+ * with higher priorities are finished. If the result is cached, then it is
+ * processed immediately.
+ *
+ * @param {ImageLoader.Request} request Request object.
+ */
+ImageLoader.Worker.prototype.add = function(request) {
+  request.loadFromCacheAndProcess(function() { }, function() {
+    // Not found in cache, then add to pending requests.
+    this.pendingRequests_.push(request);
+
+    // Sort requests by priorities.
+    this.pendingRequests_.sort(function(a, b) {
+      return a.getPriority() - b.getPriority();
+    });
+
+    // Handle the most important requests (if possible).
+    this.continue_();
+  }.bind(this));
+};
+
+/**
+ * Processes pending requests from the queue. There is no guarantee that
+ * all of the tasks will be processed at once.
+ *
+ * @private
+ */
+ImageLoader.Worker.prototype.continue_ = function() {
+  for (var index = 0; index < this.pendingRequests_.length; index++) {
+    var request = this.pendingRequests_[index];
+
+    // Run only up to MAXIMUM_IN_PARALLEL in the same time.
+    if (Object.keys(this.activeRequests_).length ==
+        ImageLoader.Worker.MAXIMUM_IN_PARALLEL) {
+      return;
+    }
+
+    delete this.pendingRequests_.splice(index, 1);
+    this.activeRequests_.push(request);
+
+    request.downloadAndProcess(this.finish_.bind(this, request));
+  }
+};
+
+/**
+ * Handles finished requests.
+ *
+ * @param {ImageLoader.Request} request Finished request.
+ * @private
+ */
+ImageLoader.Worker.prototype.finish_ = function(request) {
+  var index = this.activeRequests_.indexOf(request);
+  if (index < 0)
+    console.warn('Request not found.');
+  delete this.activeRequests_.splice(index, 1);
+
+  // Handle the most important requests (if possible).
+  this.continue_();
+};
+
+/**
  * Persistent cache storing images in an indexed database on the hard disk.
  * @constructor
  */
 ImageLoader.Cache = function() {
   /**
    * IndexedDB database handle.
    * @type {IDBDatabase}
    * @private
    */
   this.db_ = null;
@@ skipping 28 matching lines @@
  * @type {string}
  * @const
  */
 ImageLoader.Cache.DB_NAME = 'image-loader';
 
 /**
  * Cache database version.
  * @type {number}
  * @const
  */
-ImageLoader.Cache.DB_VERSION = 8;
+ImageLoader.Cache.DB_VERSION = 11;
 
 /**
  * Memory limit for images data in bytes.
  *
  * @const
  * @type {number}
  */
 ImageLoader.Cache.MEMORY_LIMIT = 250 * 1024 * 1024;  // 250 MB.
 
 /**
@@ skipping 329 matching lines @@
 
   metadataRequest.onerror = function() {
     console.error('Failed to remove an image.');
     metadataReceived = true;
     onPartialSuccess();
   };
 };
 
 // Load the extension.
 ImageLoader.getInstance();