Add butter bar for wallpapaer manager(show downloading progress or error message)

chrome/browser/resources/chromeos/wallpaper_manager/js/butter_bar.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.
 
 /**
  * The minimum about of time to display the butter bar for, in ms.
  * Justification is 1000ms for minimum display time plus 300ms for transition
  * duration.
  */
 var MINIMUM_BUTTER_DISPLAY_TIME_MS = 1300;
 
 /**
- * Butter bar is shown on top of the file list and is used to show the copy
- * progress and other messages.
+ * Butter bar is shown on top of the wallpaper manager and is used to show the
+ * downloading progress and other messages.
  * @constructor
- * @param {HTMLElement} dialogDom FileManager top-level div.
- * @param {FileCopyManagerWrapper} copyManager The copy manager.
+ * @param {HTMLElement} dialogDom Wallpaper manager body tag.
  */
-function ButterBar(dialogDom, copyManager) {
+function ButterBar(dialogDom) {
   this.dialogDom_ = dialogDom;
   this.butter_ = this.dialogDom_.querySelector('#butter-bar');
   this.document_ = this.butter_.ownerDocument;
-  this.copyManager_ = copyManager;
   this.hideTimeout_ = null;
   this.showTimeout_ = null;
   this.lastShowTime_ = 0;
+}
 
-  this.copyManager_.addEventListener('copy-progress',
-                                     this.onCopyProgress_.bind(this));
-}
+// Functions may be reused for general butter bar : ----------------------------
+
+// These functions are copied from butter_bar.js in file manager. We will
+// revisit it to see if we can share some code after butter bar is integrated
+// with Photo Editor.
+// See http://codereview.chromium.org/10916149/ for details.
+// TODO(bshe): Remove these functions if we can share code with file manager.
 
 /**
  * @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) {
   this.clearShowTimeout_();
   this.clearHideTimeout_();
 
   var actions = this.butter_.querySelector('.actions');
   actions.textContent = '';
@@ skipping 116 matching lines @@
  * Clear the hide timeout if it is set.
  * @private
  */
 ButterBar.prototype.clearHideTimeout_ = function() {
   if (this.hideTimeout_) {
     clearTimeout(this.hideTimeout_);
     this.hideTimeout_ = null;
   }
 };
 
+// Functions specific to WallpaperManager butter bar : -------------------------
+
 /**
- * @private
- * @return {string?} The type of operation.
+ * Sets the XMLHttpRequest object that we want to show progress.
+ * @param {XMLHttpRequest} xhr The XMLHttpRequest.
  */
-ButterBar.prototype.transferType_ = function() {
-  var progress = this.progress_;
-  if (!progress ||
-      progress.pendingMoves === 0 && progress.pendingCopies === 0)
-    return 'TRANSFER';
-
-  if (progress.pendingMoves > 0) {
-    if (progress.pendingCopies > 0)
-      return 'TRANSFER';
-    return 'MOVE';
-  }
-
-  return 'COPY';
+ButterBar.prototype.setRequest = function(xhr) {
+  if (this.xhr_)

[Vladislav Kaznacheev, 2012/09/12 13:45:12]

Formatting: extra space after this.xhr everywhere in this method. 

[bshe, 2012/09/12 18:48:58]

you mean this.xhr_? I dont think I have an extra space after it. 

On 2012/09/12 13:45:12, Vladislav Kaznacheev wrote:

+    this.xhr_.abort();
+  this.xhr_ = xhr;
+  this.xhr_.addEventListener('loadstart',
+                             this.onDownloadStart_.bind(this));
+  this.xhr_.addEventListener('progress',
+                             this.onDownloadProgress_.bind(this));
+  this.xhr_.addEventListener('abort',
+                             this.onDownloadAbort_.bind(this));
+  this.xhr_.addEventListener('error',
+                             this.onDownloadError_.bind(this));
+  this.xhr_.addEventListener('load',
+                             this.onDownloadComplete_.bind(this));
 };
 
 /**
- * Set up butter bar for showing copy progress.
+ * Sets the options and strings and shows progress on butter bar.
  * @private
  */
 ButterBar.prototype.showProgress_ = function() {
-  this.progress_ = this.copyManager_.getStatus();
-  var options = {progress: this.progress_.percentage, actions: {}, timeout: 0};
+  var options = {progress: this.percentComplete_, actions: {},
+                 timeout: 0};
 
-  var type = this.transferType_();
-  var progressString = (this.progress_.pendingItems === 1) ?
-          strf(type + '_FILE_NAME', this.progress_.filename) :
-          strf(type + '_ITEMS_REMAINING', this.progress_.pendingItems);
+  var progressString = 'Downloading';
 
   if (this.isVisible_()) {
     this.update_(progressString, options);
   } else {
-    options.actions[str('CANCEL_LABEL')] =
-        this.copyManager_.requestCancel.bind(this.copyManager_);
+    options.actions['Cancel'] = function() {
+      this.xhr_.abort();
+    };
     this.show(progressString, options);
   }
 };
 
 /**
- * 'copy-progress' event handler. Show progress or an appropriate message.
+ * Sets a timeout to show a butter bar when wallpaper downloading starts.
  * @private
- * @param {cr.Event} event A 'copy-progress' event from FileCopyManager.
+ * @param {ProgressEvent} e A loadstart ProgressEvent from XMLHttpRequest.
  */
-ButterBar.prototype.onCopyProgress_ = function(event) {
-  if (event.reason != 'PROGRESS')
-    this.clearShowTimeout_();
+ButterBar.prototype.onDownloadStart_ = function(e) {
+   this.percentComplete_ = 0;
+   this.showTimeout_ = setTimeout(function() {
+     this.showTimeout_ = null;
+     this.showProgress_();
+   }.bind(this), 500);
+};
 
-  switch (event.reason) {
-    case 'BEGIN':
-      this.showTimeout_ = setTimeout(function() {
-        this.showTimeout_ = null;
-        this.showProgress_();
-      }.bind(this), 500);
-      break;
+/**
+ * Shows abort message in butter bar for 1 second if wallpaper downloading
+ * aborted.
+ * @private
+ * @param {ProgressEvent} e An abort ProgressEvent from XMLHttpRequest.
+ */
+ButterBar.prototype. onDownloadAbort_ = function(e) {
+   this.show('Downloading aborted', {timeout: 1000});
+};
 
-    case 'PROGRESS':
-      this.showProgress_();
-      break;
+/**
+ * Hides butter bar when download complete.
+ * @private
+ * @param {ProgressEvent} e A load ProgressEvent from XMLHttpRequest.
+ */
+ButterBar.prototype. onDownloadComplete_ = function(e) {
+   this.hide_();
+};
 
-    case 'SUCCESS':
-      this.hide_();
-      break;
+/**
+ * Shows error message when receiving an error event.
+ * @private
+ * @param {ProgressEvent} e An error ProgressEvent from XMLHttpRequest.
+ */
+ButterBar.prototype. onDownloadError_ = function(e) {
+  this.showError_('An error occured while downloading wallpaper');
+};
 
-    case 'CANCELLED':
-      this.show(str(this.transferType_() + '_CANCELLED'), {timeout: 1000});
-      break;
-
-    case 'ERROR':
-      if (event.error.reason === 'TARGET_EXISTS') {
-        var name = event.error.data.name;
-        if (event.error.data.isDirectory)
-          name += '/';
-        this.showError_(strf(this.transferType_() +
-                             '_TARGET_EXISTS_ERROR', name));
-      } else if (event.error.reason === 'FILESYSTEM_ERROR') {
-        if (event.error.data.toGDrive &&
-            event.error.data.code === FileError.QUOTA_EXCEEDED_ERR) {
-          // The alert will be shown in FileManager.onCopyProgress_.
-          this.hide_();
-        } else {
-          this.showError_(strf(this.transferType_() + '_FILESYSTEM_ERROR',
-                               util.getFileErrorString(event.error.data.code)));
-          }
-      } else {
-        this.showError_(strf(this.transferType_() + '_UNEXPECTED_ERROR',
-                             event.error));
-      }
-      break;
-
-    default:
-      console.log('Unknown "copy-progress" event reason: ' + event.reason);
+/**
+ * Calculates downloading percentage and shows downloading progress.
+ * @private
+ * @param {ProgressEvent} e A progress ProgressEvent from XMLHttpRequest.

[Vladislav Kaznacheev, 2012/09/12 13:45:12]

The description does not parse.

[bshe, 2012/09/12 18:48:58]

Done.

+ */
+ButterBar.prototype.onDownloadProgress_ = function(e) {
+  if (e.lengthComputable) {
+    this.percentComplete_ = e.loaded / e.total;
   }
+  this.showProgress_();
 };