Move wallpaper progress bar on top of thumbnails (completely remove butter bar)

chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js

Index: chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4cb187b1e0e80b4573c63e08a09ed52c6595e02
--- /dev/null
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js
@@ -0,0 +1,121 @@
+// Copyright (c) 2013 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.
+
+/**
+ * Monitor the downloading progress of a XMLHttpRequest |xhr_| and shows the
+ * progress on |progressBar_|.
+ * @constructor
+ */
+function ProgressManager() {
+  this.xhr_ = null;

[bshe, 2013/01/25 04:35:05]

Instead of creating a progressBar for each thumbnail grid and toggle their
visiblity. We can also cache a progressBar in javascript and dynamically
add/remove it from thumbnail grid item. This approach maybe more efficient when
we have hundreds of thumbnails?

+  this.progressBar_ = cr.doc.createElement('div');
+  this.progressBar_.classList.add('progress-bar');
+  var progressTrack = cr.doc.createElement('div');
+  progressTrack.classList.add('progress-track');
+  this.progressBar_.appendChild(progressTrack);
+  this.selectedGridItem_ = null;
+}
+
+/**
+ * Sets the XMLHttpRequest |xhr| to monitor and the wallpaper thumbnail grid
+ * item |selectedGridItem| to show progress bar. Cancels previous xhr and
+ * hides/removes previous progress bar if any.
+ * Note: this must be called before xhr.send() function. Otherwise, we wont get
+ * loadstart event.
+ * @param {XMLHttpRequest} xhr The XMLHttpRequest.
+ * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail
+ *     grid item. It extends from cr.ui.ListItem.
+ */
+ProgressManager.prototype.reset = function(xhr, selectedGridItem) {
+  if (this.xhr_)
+    this.xhr_.abort();
+  this.hide(this.selectedGridItem_);
+  this.xhr_ = xhr;
+  this.selectedGridItem_ = selectedGridItem;
+  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));
+};
+
+/**
+ * Removes the progress bar in |selectedGridItem| if any. May called
+ * asynchronously.
+ * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail
+       grid item. It extends from cr.ui.ListItem.
+ */
+ProgressManager.prototype.hide = function(selectedGridItem) {
+  if (selectedGridItem && selectedGridItem.querySelector('.progress-bar'))
+    selectedGridItem.removeChild(this.progressBar_);
+};
+
+/**
+ * Calculates and updates the width of progress track.
+ * @private
+ */
+ProgressManager.prototype.showProgress_ = function() {
+  this.progressBar_.querySelector('.progress-track').style.width =
+      (this.percentComplete_ * 100) + '%';
+};
+
+/**
+ * Shows a 0% progress bar to indicate downloading starts.
+ * @private
+ * @param {Event} e A loadstart ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadStart_ = function(e) {
+  this.percentComplete_ = 0;
+  this.showProgress_();
+  this.selectedGridItem_.appendChild(this.progressBar_);
+};
+
+/**
+ * Hides progress bar when progression is terminated.
+ * @private
+ * @param {Event} e An abort ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadAbort_ = function(e) {
+  this.xhr_ = null;
+  this.hide(this.selectedGridItem_);
+};
+
+/**
+ * Download completed successfully. Shows a 100% progress bar and clears |xhr_|.
+ * @private
+ * @param {Event} e A load ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadComplete_ = function(e) {
+  this.progressBar_.querySelector('.progress-track').style.width = '100%';
+  this.xhr_ = null;
+};
+
+/**
+ * Shows error message when progression failed.
+ * @private
+ * @param {Event} e An error ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadError_ = function(e) {
+  // TODO(bshe): Add error message back once we decide how to show error
+  // message in the new UI. http://crbug.com/162563
+  this.xhr_ = null;
+  this.hide(this.selectedGridItem_);
+};
+
+/**
+ * Calculates downloading percentage and shows downloading progress.
+ * @private
+ * @param {Event} e A progress ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadProgress_ = function(e) {
+  if (e.lengthComputable) {
+    this.percentComplete_ = e.loaded / e.total;
+    this.showProgress_();
+  }
+};