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..b71836be62429f1886f9463458d5a986f5e4044a
--- /dev/null
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js
@@ -0,0 +1,118 @@
+// 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;
+  this.progressBar_ = document.querySelector('.progress-bar');
+  this.selectedGridItem_ = null;
+}
+
+/**
+ * Sets the XMLHttpRequest |xhr| to monitor, and the wallpaper thumbnail grid
+ * item |selectedGridItem| to show a progress bar for. 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.

[flackr, 2013/02/06 15:30:46]

The semantics of passing the XHR in and controlling some aspects of it here but
others in wallpaper_manager seems a little tricky. This should either strictly
observe the XHR (i.e. not cancel them, and unregister on XHR's it's no longer
interested in) or take control of the XHR (i.e. this method calls send, perhaps
even construct the XHR here and you just pass in the request URL and add a
listener on progress manager for completion.)

[bshe, 2013/02/06 17:51:31]

You are right. And it seems we already did the abort call in wallpaper manager.
So no need to call it again here.

I removed the abort function and add function to unregister all events for
previous xhr if any. Now progress manager should only strictly observer XHR. 

On 2013/02/06 15:30:46, flackr wrote:

+ * @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.hideProgressBar(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. Maybe called
+ * asynchronously.
+ * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail
+       grid item. It extends from cr.ui.ListItem.
+ */
+ProgressManager.prototype.hideProgressBar = function(selectedGridItem) {
+  if (selectedGridItem && selectedGridItem.querySelector('.progress-bar')) {
+    this.progressBar_.hidden = true;
+    selectedGridItem.removeChild(this.progressBar_);
+  }
+};
+
+/**
+ * Calculates and updates the width of progress track.
+ * @private
+ * @param {float} percentComplete The percent of loaded content.
+ */
+ProgressManager.prototype.setProgress_ = function(percentComplete) {
+  this.progressBar_.querySelector('.progress-track').style.width =
+      (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.setProgress_(0);
+  this.selectedGridItem_.appendChild(this.progressBar_);
+  this.progressBar_.hidden = false;
+};
+
+/**
+ * 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.hideProgressBar(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.setProgress_(1);
+  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.hideProgressBar(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.setProgress_(e.loaded / e.total);
+};