Only show progress bar after 500ms

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

 // Copyright (c) 2012 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';
 
 /**
@@ skipping 1236 matching lines @@
         'dblclick', this.onDetailDoubleClick_.bind(this));
 
     cr.ui.contextMenuHandler.addContextMenuProperty(
         this.table_.querySelector('.list'));
     this.table_.querySelector('.list').contextMenu = this.fileContextMenu_;
 
     this.table_.addEventListener('mousedown',
                                  this.onGridOrTableMouseDown_.bind(this));
   };
 
+  FileManager.prototype.initButter_ = function() {
+    var self = this;
+    var progress = this.copyManager_.getProgress();
+
+    var options = {progress: progress.percentage, actions:{}};
+    options.actions[str('CANCEL_LABEL')] = function cancelPaste() {
+      self.copyManager_.requestCancel();
+    };
+    this.showButter(strf('PASTE_ITEMS_REMAINING', progress.pendingItems),
+                    options);
+  };
+
   FileManager.prototype.onCopyProgress_ = function(event) {
-    var status = this.copyManager_.getStatus();
+    var progress = this.copyManager_.getProgress();
 
-    // TODO(bshe): Need to figure out a way to get completed bytes in real
-    // time. We currently use completedItems and totalItems to estimate the
-    // progress. There are completeBytes and totalBytes ready to use.
-    // However, the completedBytes is not in real time. It only updates
-    // itself after each item finished. So if there is a large item to
-    // copy, the progress bar will stop moving until it finishes and jump
-    // a large portion of the bar.
-    // There is case that when user copy a large file, we want to show an
-    // 100% animated progress bar. So we use completedItems + 1 here.
-    var progress = (status.completedItems + 1) / status.totalItems;
+    if (event.reason == 'BEGIN') {
+      if (this.currentButter_)
+        this.hideButter();
 
-    // If the files we're copying is larger than 100MB or more than 25,
-    // update the user on the current status with a progress bar and give
-    // an option to cancel. The rule of thumb here is if the pasting
-    // process is less than 500ms. We dont want to show progress bar.
-    var shouldShow = status.totalItems > 0 &&
-                     status.completedItems < status.totalItems &&
-                     (status.totalBytes > 100000000 || status.totalItems > 25);
-
-    if (event.reason == 'BEGIN' && shouldShow) {
-      var self = this;
-      var options = {timeout:0, progress: progress, actions:{}};
-      // We can't cancel the operation when pasting one file.
-      if (status.totalItems > 1) {
-        options.actions[str('CANCEL_LABEL')] = function cancelPaste() {
-          self.copyManager_.requestCancel();
-        };
-      }
-      this.showButter(strf('PASTE_ITEMS_REMAINING', status.pendingItems),
-                           options);
+      clearTimeout(this.butterTimeout_);
+      // If the copy process lasts more than 500 ms, we show a progress bar.
+      this.butterTimeout_ = setTimeout(this.initButter_.bind(this), 500);
       return;
     }
-    if (event.reason == 'PROGRESS' && shouldShow) {
-      var options = {timeout:0, progress: progress};
-      this.updateButter(strf('PASTE_ITEMS_REMAINING', status.pendingItems),
-                             options);
+    if (event.reason == 'PROGRESS') {
+      // Perform this check inside Progress event handler, avoid to log error
+      // message 'Unknown event reason: PROGRESS' in console.
+      if (this.currentButter_) {
+        var options = {progress: progress.percentage};
+        this.updateButter(strf('PASTE_ITEMS_REMAINING', progress.pendingItems),
+                          options);
+      }
       return;
     }
     if (event.reason == 'SUCCESS') {
+      clearTimeout(this.butterTimeout_);
       if (this.currentButter_)
         this.hideButter();
 
       this.updateCommands_();
       self = this;
       var callback;
       while (callback = self.pasteSuccessCallbacks_.shift()) {
         try {
           callback();
         } catch (ex) {
           console.error('Caught exception while inovking callback: ' +
                         callback, ex);
         }
       }
     } else if (event.reason == 'ERROR') {
+      clearTimeout(this.butterTimeout_);
       switch (event.error.reason) {
         case 'TARGET_EXISTS':
           var name = event.error.data.name;
           if (event.error.data.isDirectory)
             name += '/';
           this.showButterError(strf('PASTE_TARGET_EXISTS_ERROR', name));
           break;
 
         case 'FILESYSTEM_ERROR':
           this.showButterError(
@@ skipping 1673 matching lines @@
 
   /**
    * Queue up a file copy operation based on the current system clipboard.
    */
   FileManager.prototype.pasteFromClipboard_ = function(event) {
     event.preventDefault();
 
     if (!event.clipboardData.getData('fs/isCut'))
       return;
 
-    // Pass an empty string so that the butter bar remains invisible until
-    // the first progress update. This prevents the flicker on short operations.
-    this.showButter('', {timeout: 0});

[bshe, 2012/03/12 00:13:34]

Side note:
It seems the flicker it caused by a call to
this.showButter('PASTE_START',{timeout:0}) which I previously add. I dont think
it is necessary to make this call. Maybe I forgot to remove it in the first
place. And directly remove it should also prevent the flickr. 

Plus, now we want to update the current butter bar when there is any new
incoming paste task while servicing. And we dont want to remove the current
butter and create a new one by this statement either. 

-
     var clipboard = {
       isCut: event.clipboardData.getData('fs/isCut'),
       sourceDir: event.clipboardData.getData('fs/sourcedir'),
       directories: event.clipboardData.getData('fs/directories'),
       files: event.clipboardData.getData('fs/files')
     };
 
     this.copyManager_.paste(clipboard,
                             this.directoryModel_.currentEntry,
                             this.filesystem_.root);
@@ skipping 1136 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();