[filebrowser] Improve scrolling by converting some async calls to sync.

chrome/browser/resources/file_manager/js/file_manager.js

 // Copyright (c) 2011 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.
 
 // Setting the src of an img to an empty string can crash the browser, so we
 // use an empty 1x1 gif instead.
 const EMPTY_IMAGE_URI = 'data:image/gif;base64,'
         + 'R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
 
 var g_slideshow_data = null;
@@ skipping 397 matching lines @@
       }
 
       delete entry[observerList];
     };
 
     entry[methodName](function(rv) { onComplete(true, rv) },
                       function(rv) { onComplete(false, rv) });
   }
 
   /**
+   * Invoke callback in sync/async manner.
+   * @param {function(*)?} callback The callback. If null, nothing is called.
+   * @param {boolean} sync True iff the callback should be called synchronously.
+   * @param {*} callback_args... The rest are callback arguments.
+   */
+  function invokeCallback(callback, sync, callback_args) {
+    if (!callback)
+      return;
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (sync) {
+      callback.apply(null, args);
+    } else {
+      setTimeout(function() { callback.apply(null, args); }, 0);
+    }
+  }
+
+  /**
    * Get the size of a file, caching the result.
    *
    * When this method completes, the fileEntry object will get a
    * 'cachedSize_' property (if it doesn't already have one) containing the
    * size of the file in bytes.
    *
    * @param {Entry} entry An HTML5 Entry object.
    * @param {function(Entry)} successCallback The function to invoke once the
    *     file size is known.
+   * @param {function=} opt_errorCallback Error callback.
+   * @param {boolean=} opt_sync True, if callback should be called sync instead
+   *     of async.
    */
-  function cacheEntrySize(entry, successCallback, opt_errorCallback) {
+  function cacheEntrySize(entry, successCallback, opt_errorCallback, opt_sync) {
     if (entry.isDirectory) {
       // No size for a directory, -1 ensures it's sorted before 0 length files.
       entry.cachedSize_ = -1;
     }
 
     if ('cachedSize_' in entry) {
-      if (successCallback) {
-        // Callback via a setTimeout so the sync/async semantics don't change
-        // based on whether or not the value is cached.
-        setTimeout(function() { successCallback(entry) }, 0);
-      }
+      invokeCallback(successCallback, !!opt_sync, entry);
       return;
     }
 
     batchAsyncCall(entry, 'file', function(file) {
       entry.cachedSize_ = file.size;
       if (successCallback)
         successCallback(entry);
     }, opt_errorCallback);
   }
 
   /**
    * Get the mtime of a file, caching the result.
    *
    * When this method completes, the fileEntry object will get a
    * 'cachedMtime_' property (if it doesn't already have one) containing the
    * last modified time of the file as a Date object.
    *
    * @param {Entry} entry An HTML5 Entry object.
    * @param {function(Entry)} successCallback The function to invoke once the
    *     mtime is known.
+   * @param {function=} opt_errorCallback Error callback.
+   * @param {boolean=} opt_sync True, if callback should be called sync instead
+   *     of async.
    */
-  function cacheEntryDate(entry, successCallback, opt_errorCallback) {
+  function cacheEntryDate(entry, successCallback, opt_errorCallback, opt_sync) {
     if ('cachedMtime_' in entry) {
-      if (successCallback) {
-        // Callback via a setTimeout so the sync/async semantics don't change
-        // based on whether or not the value is cached.
-        setTimeout(function() { successCallback(entry) }, 0);
-      }
+      invokeCallback(successCallback, !!opt_sync, entry);
       return;
     }
 
     if (entry.isFile) {
       batchAsyncCall(entry, 'file', function(file) {
         entry.cachedMtime_ = file.lastModifiedDate;
         if (successCallback)
           successCallback(entry);
       });
     } else {
@@ skipping 277 matching lines @@
   /**
    * Get the file type of the entry, caching the result.
    *
    * When this method completes, the entry object will get a
    * 'cachedIconType_' property (if it doesn't already have one) containing the
    * icon type of the file as a string.
    *
    * @param {Entry} entry An HTML5 Entry object.
    * @param {function(Entry)} successCallback The function to invoke once the
    *     file size is known.
+   * @param {boolean=} opt_sync If true, we are safe to do synchronous callback.
    */
-  FileManager.prototype.cacheEntryFileType = function(entry, successCallback) {
+  FileManager.prototype.cacheEntryFileType = function(
+      entry, successCallback, opt_sync) {
     this.getFileType(entry);
-
-    if (successCallback)
-      setTimeout(function() { successCallback(entry) }, 0);
+    invokeCallback(successCallback, !!opt_sync, entry);
   };
 
   /**
    * Compare by mtime first, then by name.
    */
   FileManager.prototype.compareMtime_ = function(a, b) {
     if (a.cachedMtime_ > b.cachedMtime_)
       return 1;
 
     if (a.cachedMtime_ < b.cachedMtime_)
@@ skipping 764 matching lines @@
    */
   FileManager.prototype.renderIconType_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
     div.className = 'detail-icon-container';
 
     if (this.showCheckboxes_)
       div.appendChild(this.renderCheckbox_(entry));
 
     var icon = this.document_.createElement('div');
     icon.className = 'detail-icon';
-    this.cacheEntryIconType(entry);
+    this.getIconType(entry);
     icon.setAttribute('iconType', entry.cachedIconType_);
     div.appendChild(icon);
 
     return div;
   };
 
   FileManager.prototype.getLabelForRootPath_ = function(path) {
     // This hack lets us localize the top level directories.
     if (path == 'Downloads')
       return str('DOWNLOADS_DIRECTORY_LABEL');
@@ skipping 40 matching lines @@
     var div = this.document_.createElement('div');
     div.className = 'detail-size';
 
     div.textContent = '...';
     cacheEntrySize(entry, function(entry) {
       if (entry.cachedSize_ == -1) {
         div.textContent = '';
       } else {
         div.textContent = util.bytesToSi(entry.cachedSize_);
       }
-    });
+    }, null, true);
 
     return div;
   };
 
   /**
    * Render the Type column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderType_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
     div.className = 'detail-type';
 
-    div.textContent = '...';
     this.cacheEntryFileType(entry, function(entry) {
       var info = entry.cachedFileType_;
       if (info.name) {
         if (info.subtype)
           div.textContent = strf(info.name, info.subtype);
         else
           div.textContent = str(info.name);
       } else
         div.textContent = '';
-    });
+    }, true);
 
     return div;
   };
 
   /**
    * Render the Date column of the detail table.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderDate_ = function(entry, columnId, table) {
     var div = this.document_.createElement('div');
     div.className = 'detail-date';
 
     div.textContent = '...';
 
     var self = this;
     cacheEntryDate(entry, function(entry) {
       if (isSystemDirEntry(self.currentDirEntry_) &&
           entry.cachedMtime_.getTime() == 0) {
         // Mount points for FAT volumes have this time associated with them.
         // We'd rather display nothing than this bogus date.
         div.textContent = '';
       } else {
         div.textContent = self.shortDateFormatter_.format(entry.cachedMtime_);
       }
-    });
+    }, null, true);
 
     return div;
   };
 
   /**
    * Compute summary information about the current selection.
    *
    * This method dispatches the 'selection-summarized' event when it completes.
    * Depending on how many of the selected files already have known sizes, the
    * dispatch may happen immediately, or after a number of async calls complete.
@@ skipping 1901 matching lines @@
 
     if (msg) {
       console.log('no no no');
       this.alert.show(msg, onAccept);
       return false;
     }
 
     return true;
   };
 })();