Fix CSS and timeout handling for the Files app butter bar

BUG=138176

Review URL: https://chromiumcodereview.appspot.com/10826137

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

chrome/browser/resources/file_manager/css/file_manager.css

@@ -83,42 +83,30 @@ input[type='submit'][disabled]:hover {
 #butter-bar {
   -webkit-box-align: end;
   -webkit-box-orient: horizontal;
-  -webkit-transform: translate3d(0, 1px, 0);
-  -webkit-transition-duration: 300ms;
-  -webkit-transition-property: opacity, -webkit-transform;
+  -webkit-transition: opacity 300ms;
   background-color: rgba(95, 95, 95, 0.17);
   color: #222;
   display: -webkit-box;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 2px;
+  padding: 0 1em;
   position: absolute;
-  top: 0;
-}
-
-#butter-bar.before-show {
-  -webkit-transform: translate3d(0, -30px, 0);
-  opacity: 0;
+  top: 1px;
 }
 
-#butter-bar.after-show {
-  -webkit-transform: translate3d(0, 50px, 0);
+#butter-bar:not(.visible) {
   opacity: 0;
+  pointer-events: none;
 }
 
 #butter-bar .content {
-  padding-bottom: 8px;
-  padding-right: 5px;
-}
-
-.hide-in-butter {
-  display: none;
+  padding-bottom: 4px;
+  padding-top: 4px;
 }
 
 #butter-bar .actions {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
+  height: 20px;
 }
 
 #butter-bar .actions a {
@@ -128,10 +116,18 @@ input[type='submit'][disabled]:hover {
     url('../images/files/ui/2x/close_bar.png') 2x);
   display: inline-block;
   height: 12px;
-  padding: 4px;
+  padding: 4px 2px;
   width: 12px;
 }
 
+#butter-bar .actions a:first-child {
+  margin-left: 2px;
+}
+
+#butter-bar .actions a:last-child {
+  margin-right: -2px;  /* Overlap the padding with butter-bar padding. */
+}
+
 #butter-bar.error {
   background-color: rgba(221, 75, 57, 0.2);
   border: 1px solid rgba(221, 75, 57, 0.5);
@@ -143,6 +139,7 @@ input[type='submit'][disabled]:hover {
   background-image: -webkit-linear-gradient(top, #e9e9e9 0, #f9f9f9 100%);
   border: 1px solid #a1a1a1;
   border-radius: 3px;
+  margin-bottom: 2px;
   margin-top: 3px;
   width: 320px;
 }

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

@@ -23,45 +23,59 @@ function ButterBar(dialogDom, copyManager) {
   this.copyManager_ = copyManager;
   this.hideTimeout_ = null;
   this.showTimeout_ = null;
-  this.visible_ = false;
   this.lastShowTime_ = 0;
-  this.isError_ = false;
 
   this.copyManager_.addEventListener('copy-progress',
                                      this.onCopyProgress_.bind(this));
 }
 
 /**
+ * @return {boolean} True if visible.
+ * @private
+ */
+ButterBar.prototype.isVisible_ = function() {
+  return this.butter_.classList.contains('visible');
+};
+
+/**
+ * @return {boolean} True if displaying an error.
+ * @private
+ */
+ButterBar.prototype.isError_ = function() {
+  return this.butter_.classList.contains('error');
+};
+
+  /**
  * Show butter bar.
  * @param {string} message The message to be shown.
  * @param {object} opt_options Options: 'actions', 'progress', 'timeout'.
  */
 ButterBar.prototype.show = function(message, opt_options) {
-  if (opt_options) {
-    if ('actions' in opt_options) {
-      var actions = this.butter_.querySelector('.actions');
-      while (actions.childNodes.length)
-        actions.removeChild(actions.firstChild);
-      for (var label in opt_options.actions) {
-        var link = this.document_.createElement('a');
-        link.addEventListener('click', function() {
-            opt_options.actions[label]();
-            return false;
-        });
-        actions.appendChild(link);
-      }
-      actions.classList.remove('hide-in-butter');
-    }
-    if ('progress' in opt_options) {
-      this.butter_.querySelector('.progress-bar').classList.remove(
-          'hide-in-butter');
+  this.clearShowTimeout_();
+  this.clearHideTimeout_();
+
+  var actions = this.butter_.querySelector('.actions');
+  actions.textContent = '';
+  if (opt_options && 'actions' in opt_options) {
+    for (var label in opt_options.actions) {
+      var link = this.document_.createElement('a');
+      link.addEventListener('click', function(callback) {
+        callback();
+        return false;
+      }.bind(null, opt_options.actions[label]));
+      actions.appendChild(link);
     }
+    actions.hidden = false;
+  } else {
+    actions.hidden = true;
   }
 
-  this.visible_ = true;
-  this.isError_ = false;
+  this.butter_.querySelector('.progress-bar').hidden =
+    !(opt_options && 'progress' in opt_options);
+
+  this.butter_.classList.remove('error');
+  this.butter_.classList.remove('visible');  // Will be shown in update_
   this.update_(message, opt_options);
-  this.lastShowTime_ = Date.now();
 };
 
 /**
@@ -72,7 +86,6 @@ ButterBar.prototype.show = function(message, opt_options) {
  */
 ButterBar.prototype.showError_ = function(message, opt_options) {
   this.show(message, opt_options);
-  this.isError_ = true;
   this.butter_.classList.add('error');
 };
 
@@ -86,22 +99,21 @@ ButterBar.prototype.update_ = function(message, opt_options) {
   if (!opt_options)
     opt_options = {};
 
-  var timeout = ('timeout' in opt_options) ? opt_options.timeout : 10 * 1000;
-
-  if (this.hideTimeout_)
-    clearTimeout(this.hideTimeout_);
+  this.clearHideTimeout_();
 
+  var timeout = ('timeout' in opt_options) ? opt_options.timeout : 10 * 1000;
   if (timeout) {
     this.hideTimeout_ = setTimeout(function() {
-        this.hideButter();
-        this.hideTimeout_ = null;
+      this.hideTimeout_ = null;
+      this.hide_();
     }.bind(this), timeout);
   }
 
   this.butter_.querySelector('.butter-message').textContent = message;
-  if (message) {
+  if (message && !this.isVisible_()) {
     // The butter bar is made visible on the first non-empty message.
-    this.butter_.classList.remove('before-show');
+    this.butter_.classList.add('visible');
+    this.lastShowTime_ = Date.now();
   }
   if (opt_options && 'progress' in opt_options) {
     this.butter_.querySelector('.progress-track').style.width =
@@ -115,26 +127,26 @@ ButterBar.prototype.update_ = function(message, opt_options) {
 /**
  * Hide butter bar. There might be some delay before hiding so that butter bar
  * would be shown for no less than the minimal time.
+ * @param {boolean} opt_force If true hide immediately.
  * @private
  */
-ButterBar.prototype.hide_ = function() {
-  if (this.visible_) {
-    var delay = Math.max(
-        MINIMUM_BUTTER_DISPLAY_TIME_MS - (Date.now() - this.lastShowTime_), 0);
-
-    var butter = this.butter_;
-
-    function hideButter() {
-      butter.classList.remove('error');
-      butter.classList.remove('after-show');
-      butter.classList.add('before-show');
-      butter.querySelector('.actions').classList.add('hide-in-butter');
-      butter.querySelector('.progress-bar').classList.add('hide-in-butter');
-    }
+ButterBar.prototype.hide_ = function(opt_force) {
+  this.clearHideTimeout_();
+
+  if (!this.isVisible_())
+    return;
 
-    setTimeout(function() { butter.classList.add('after-show'); }, delay);
-    setTimeout(hideButter, delay + 1000);
-    this.visible_ = false;
+  var delay =
+      MINIMUM_BUTTER_DISPLAY_TIME_MS - (Date.now() - this.lastShowTime_);
+
+  if (opt_force || delay <= 0) {
+    this.butter_.classList.remove('visible');
+  } else {
+    // Reschedule hide to comply with the minimal display time.
+    this.hideTimeout_ = setTimeout(function() {
+      this.hideTimeout_ = null;
+      this.hide_(true);
+    }.bind(this), delay);
   }
 };
 
@@ -143,9 +155,8 @@ ButterBar.prototype.hide_ = function() {
  * @return {boolean} True if butter bar was closed.
  */
 ButterBar.prototype.hideError = function() {
-  if (this.visible_ && this.isError_) {
-    this.hide_();
-    clearTimeout(this.hideTimeout_);
+  if (this.isVisible_() && this.isError_()) {
+    this.hide_(true /* force */);
     return true;
   } else {
     return false;
@@ -153,10 +164,32 @@ ButterBar.prototype.hideError = function() {
 };
 
 /**
- * Init butter bar for showing copy progress.
+ * Clear the show timeout if it is set.
+ * @private
+ */
+ButterBar.prototype.clearShowTimeout_ = function() {
+  if (this.showTimeout_) {
+    clearTimeout(this.hideTimeout_);
+    this.showTimeout_ = null;
+  }
+};
+
+/**
+ * Clear the hide timeout if it is set.
+ * @private
+ */
+ButterBar.prototype.clearHideTimeout_ = function() {
+  if (this.hideTimeout_) {
+    clearTimeout(this.hideTimeout_);
+    this.hideTimeout_ = null;
+  }
+};
+
+/**
+ * Set up butter bar for showing copy progress.
  * @private
  */
-ButterBar.prototype.init_ = function() {
+ButterBar.prototype.showProgress_ = function() {
   var progress = this.copyManager_.getProgress();
   var options = {progress: progress.percentage, actions: {}, timeout: 0};
   options.actions[str('CANCEL_LABEL')] =
@@ -172,16 +205,19 @@ ButterBar.prototype.init_ = function() {
 ButterBar.prototype.onCopyProgress_ = function(event) {
   var progress = this.copyManager_.getProgress();
 
+  if (event.reason != 'PROGRESS')
+    this.clearShowTimeout_();
+
   switch (event.reason) {
     case 'BEGIN':
-      this.hide_();
-      clearTimeout(this.timeout_);
-      // If the copy process lasts more than 500 ms, we show a progress bar.
-      this.showTimeout_ = setTimeout(this.init_.bind(this), 500);
+      this.showTimeout_ = setTimeout(function() {
+        this.showTimeout_ = null;
+        this.showProgress_();
+      }.bind(this), 500);
       break;
 
     case 'PROGRESS':
-      if (this.visible_) {
+      if (this.isVisible_()) {
         var options = {'progress': progress.percentage, timeout: 0};
         this.update_(strf('PASTE_ITEMS_REMAINING', progress.pendingItems),
                      options);
@@ -189,7 +225,6 @@ ButterBar.prototype.onCopyProgress_ = function(event) {
       break;
 
     case 'SUCCESS':
-      clearTimeout(this.showTimeout_);
       this.hide_();
       break;
 
@@ -198,7 +233,6 @@ ButterBar.prototype.onCopyProgress_ = function(event) {
       break;
 
     case 'ERROR':
-      clearTimeout(this.showTimeout_);
       if (event.error.reason === 'TARGET_EXISTS') {
         var name = event.error.data.name;
         if (event.error.data.isDirectory)

chrome/browser/resources/file_manager/main.html

@@ -238,14 +238,14 @@
       </div>
       <button class=cancel i18n-content=CANCEL_LABEL>[CANCEL]</button>
     </div>
-    <div id="butter-bar" class="before-show">
+    <div id="butter-bar">
       <div class="content">
         <div class="butter-message"></div>
-        <div class="progress-bar hide-in-butter">
+        <div class="progress-bar" hidden>
           <div class="progress-track"></div>
         </div>
       </div>
-      <div class="actions hide-in-butter"></div>
+      <div class="actions" hidden></div>
     </div>
     <div id="drag-image-container"></div>
     <iframe id="command-dispatcher" hidden></iframe>