Files.app: Remove animation of progress bar when it reopens.

This CL adds an argument to prevent the animation when the Files.app reopens
during file transfer operations.

BUG=316540
TEST=manually

Review URL: https://codereview.chromium.org/71903002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@236227 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 34 insertions, 21 deletions

diff --git a/chrome/browser/resources/file_manager/background/js/progress_center.js b/chrome/browser/resources/file_manager/background/js/progress_center.js
index e264e25..83e5cc8 100644
--- a/chrome/browser/resources/file_manager/background/js/progress_center.js
+++ b/chrome/browser/resources/file_manager/background/js/progress_center.js
@@ -115,8 +115,10 @@ ProgressCenter.prototype.updateItem = function(item) {
 
   // Update panels.
   var summarizedItem = this.getSummarizedItem_();
-  for (var i = 0; i < this.panels_.length; i++)
-    this.panels_[i].updateItem(item, summarizedItem);
+  for (var i = 0; i < this.panels_.length; i++) {
+    this.panels_[i].updateItem(item);
+    this.panels_[i].updateCloseView(summarizedItem);
+  }
 
   // Reset if there is no item.
   for (var i = 0; i < this.items_.length; i++) {
@@ -179,10 +181,12 @@ ProgressCenter.prototype.addPanel = function(panel) {
   this.panels_.push(panel);
 
   // Set the current items.
-  var summarizedItem = this.getSummarizedItem_();
   var items = this.applicationItems;
+  var summarizedItem = this.getSummarizedItem_();
   for (var i = 0; i < items.length; i++)
-    panel.updateItem(items[i], summarizedItem);
+    panel.updateItem(items[i]);
+  if (summarizedItem)
+    panel.updateCloseView(summarizedItem);
 
   // Register the cancel callback.
   panel.cancelCallback = this.requestCancel.bind(this);
diff --git a/chrome/browser/resources/file_manager/common/js/progress_center_common.js b/chrome/browser/resources/file_manager/common/js/progress_center_common.js
index 9d517d1..b799049 100644
--- a/chrome/browser/resources/file_manager/common/js/progress_center_common.js
+++ b/chrome/browser/resources/file_manager/common/js/progress_center_common.js
@@ -146,10 +146,10 @@ ProgressCenterItem.prototype = {
   },
 
   /**
-   * Gets progress rate by percent.
-   * @return {number} Progress rate by percent.
+   * Gets progress rate in percent.
+   * @return {number} Progress rate in percent.
    */
-  get progressRateByPercent() {
+  get progressRateInPercent() {
     return ~~(100 * this.progressValue / this.progressMax);
   },
 
diff --git a/chrome/browser/resources/file_manager/foreground/css/file_manager.css b/chrome/browser/resources/file_manager/foreground/css/file_manager.css
index 4fb2f77..c350150 100644
--- a/chrome/browser/resources/file_manager/foreground/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/foreground/css/file_manager.css
@@ -2026,6 +2026,9 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
 #progress-center .progress-track {
   background: #787878;
   height: 100%;
+}
+
+#progress-center .progress-track.animated {
   transition: width 300ms linear;
 }
 
diff --git a/chrome/browser/resources/file_manager/foreground/js/ui/progress_center_panel.js b/chrome/browser/resources/file_manager/foreground/js/ui/progress_center_panel.js
index 098c44e..ce5fae7 100644
--- a/chrome/browser/resources/file_manager/foreground/js/ui/progress_center_panel.js
+++ b/chrome/browser/resources/file_manager/foreground/js/ui/progress_center_panel.js
@@ -70,11 +70,13 @@ ProgressCenterPanel.updateItemElement_ = function(element, item) {
   if (item.cancelable)
     element.classList.add('cancelable');
 
-  // If the transition animation is needed, apply it.
+  // Only when the previousWidthRate is not NaN (when style width is already
+  // set) and the progress rate increases, we use transition animation.
   var previousWidthRate =
       parseInt(element.querySelector('.progress-track').style.width);
-  if (item.state === ProgressItemState.COMPLETE &&
-      previousWidthRate !== item.progressRateByPercent) {
+  var animation = !isNaN(previousWidthRate) &&
+      previousWidthRate < item.progressRateInPercent;
+  if (item.state === ProgressItemState.COMPLETE && animation) {
     // The attribute pre-complete means that the actual operation is already
     // done but the UI transition of progress bar is not complete.
     element.setAttribute('pre-complete', '');
@@ -86,22 +88,17 @@ ProgressCenterPanel.updateItemElement_ = function(element, item) {
   // change is done synchronously, assign the width value asynchronously.
   setTimeout(function() {
     var track = element.querySelector('.progress-track');
-    // When the progress rate is reverted, we does not use the transition
-    // animation. Specifying '0' overrides the CSS settings and specifying null
-    // re-enables it.
-    track.style.transitionDuration =
-        previousWidthRate > item.progressRateByPercent ? '0' : null;
-    track.style.width = item.progressRateByPercent + '%';
+    track.classList.toggle('animated', animation);
+    track.style.width = item.progressRateInPercent + '%';
+    track.hidden = false;
   }, 0);
 };
 
 /**
  * Updates an item to the progress center panel.
  * @param {!ProgressCenterItem} item Item including new contents.
- * @param {!ProgressCenterItem} summarizedItem Item to be desplayed in the close
- *     view.
  */
-ProgressCenterPanel.prototype.updateItem = function(item, summarizedItem) {
+ProgressCenterPanel.prototype.updateItem = function(item) {
   // If reset is requested, force to reset.
   if (this.resetRequested_)
     this.reset(true);
@@ -146,8 +143,14 @@ ProgressCenterPanel.prototype.updateItem = function(item, summarizedItem) {
       }
       break;
   }
+};
 
-  // Update close view.
+/**
+ * Updates close showing summarized item.
+ * @param {!ProgressCenterItem} summarizedItem Item to be displayed in the close
+ *     view.
+ */
+ProgressCenterPanel.prototype.updateCloseView = function(summarizedItem) {
   this.closeView_.classList.toggle('single', !summarizedItem.summarized);
   ProgressCenterPanel.updateItemElement_(this.closeViewItem_, summarizedItem);
 };
@@ -169,6 +172,9 @@ ProgressCenterPanel.prototype.reset = function(opt_force) {
   // Clear the all compete item.
   this.openView_.innerHTML = '';
 
+  // Clear track width of close view.
+  this.closeViewItem_.querySelector('.progress-track').style.width = '';
+
   // Hide the progress center.
   this.element_.hidden = true;
   this.element_.classList.remove('opened');
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index daf28ea..c87b8c9 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -291,7 +291,7 @@
                 <label></label>
                 <div class="progress-frame">
                   <div class="progress-bar">
-                    <div class="progress-track"></div>
+                    <div class="progress-track" hidden></div>
                   </div>
                   <button class="toggle" tabindex="-1"></button>
                 </div>