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 status = this.copyManager_.getStatus();
+    var self = this;
+    var progress = (status.completedItems + 1) / status.totalItems;

[Rick Byers, 2012/03/09 21:45:45]

Since this formula is non-trivial (i.e. the +1 requires explanation in the
comment below) it would be nice to avoid duplicating the code.  Eg., perhaps you
should just pass in progress, or even all of 'options' as a parameter which you
supply in the bind below.  

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

I moved the progress calculation into a file_copy_manager function called
getProgress to avoid duplicated code. The reason I dont pass in progress as
parameter is I want to get the latest progress data. 

+
+    var options = {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);
+    this.shouldShowProgress_ = true;
+  }
+
   FileManager.prototype.onCopyProgress_ = function(event) {
     var status = this.copyManager_.getStatus();
 
     // 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 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') {
+      // TODO(bshe): Need to find a way to update the current progress bar if

[Rick Byers, 2012/03/09 21:45:45]

At a quick glance it looks to me like this should never happen - FileCopyManager
maintains a queue of tasks and so I think you should never see a BEGIN until
after the END for the previous task.  Can you verify?  Does anything else use a
butter bar today?  I suppose we should still be prepared for something different
now or in the future to show a butter bar, in which case just hiding it here is
probably appropriate.

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

Correct. I verified that for copy/paste task, the BEGIN event only dispatch
after the END event of previous task. I assumed all the queued tasks were
parallel. But they seems to be serial.
In this case, showing the butter bar immediately when the second task continues
makes more sense. I changed the code in copy_manager to dispatch a CONTINUE
event instead of BEGIN event when the second task begins to service. And the
butter bar in file manager will immediately show on a CONTINUE event.

+      // there is a new copy task coming when the old one hasn't finished.
+      // Currently, just delete the old progress bar.
+      if (this.currentButter_)
+        this.hideButter();

[Rick Byers, 2012/03/09 21:45:45]

I think you should call initButter right away in this case to swap out the
progress bar.  We don't want to display a butter bar, then hide it for 500ms
before displaying another.

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

Now the progress bar auto updates itself when there are new tasks coming.

 
-    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);

[Rick Byers, 2012/03/09 21:45:45]

replace butterTimeout with butterTimeout_ ?

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

Done.

       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};
+        this.updateButter(strf('PASTE_ITEMS_REMAINING', status.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) {
@@ skipping 2848 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();