[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 407 matching lines @@
    * 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.
    */
-  function cacheEntrySize(entry, successCallback, opt_errorCallback) {
+  function cacheEntrySize(entry, successCallback, opt_errorCallback, opt_sync) {

[Vladislav Kaznacheev, 2011/11/08 09:33:31]

Please update JSDoc

[dgozman, 2011/11/14 09:59:26]

Done.

     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

[Vladislav Kaznacheev, 2011/11/08 09:33:31]

Comment is now obsolete here and below. Here is an idea: why don't we extract an
utility function invokeCallback(callback, opt_sync) and use it in the three
places? And comment why we need it?

[dgozman, 2011/11/14 09:59:26]

Done.

         // based on whether or not the value is cached.
-        setTimeout(function() { successCallback(entry) }, 0);
+        if (opt_sync) {
+          // If opt_sync, we are safe with synchronous call (which is faster).
+          successCallback(entry);
+        } else {
+          setTimeout(function() { successCallback(entry) }, 0);
+        }
       }
       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.
    */
-  function cacheEntryDate(entry, successCallback, opt_errorCallback) {
+  function cacheEntryDate(entry, successCallback, opt_errorCallback, opt_sync) {

[Vladislav Kaznacheev, 2011/11/08 09:33:32]

Please update JSDoc

[dgozman, 2011/11/14 09:59:26]

Done.

     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);
+        if (opt_sync) {
+          // We are safe to make synchronous callback.
+          successCallback(entry);
+        } else {
+          // 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);
+        }
       }
       return;
     }
 
     if (entry.isFile) {
       batchAsyncCall(entry, 'file', function(file) {
         entry.cachedMtime_ = file.lastModifiedDate;
         if (successCallback)
           successCallback(entry);
       });
@@ skipping 278 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);
+    if (successCallback) {
+      if (opt_sync) {
+        successCallback(entry);
+      } else {
+        setTimeout(function() { successCallback(entry) }, 0);
+      }
+    }
   };
 
   /**
    * 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;
   };
 })();