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..fea8cb55d2de5e7895f404981ab0e9f5dc6b4e54
--- /dev/null
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/progress_manager.js
@@ -0,0 +1,138 @@
+// 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.
+ * @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.removeEventListeners_();
+  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 all event listeners progress manager currently registered.
+ * @private
+ */
+ProgressManager.prototype.removeEventListeners_ = function() {
+  this.xhr_.removeEventListener('loadstart',
+                                this.onDownloadStart_.bind(this));

[flackr, 2013/02/07 21:00:16]

Sorry, I'm pretty sure this won't work. When you call .bind it creates a
function in the current closure, whose address won't match the other function
you created earlier. I believe you have to save the bound functions and cancel
those, but correct me if I'm mistaken.

[bshe, 2013/02/07 21:45:58]

dooh. You are absolutely right, bind creates new functions. This is a silly
mistake. I tested my patch and everything looks fine so I assumed it works. I
guess the mistake is actually covered by the fact that we call abort in
wallpaper manager and then discard the previous xhr object so even if these
event listeners still exist, they wont do anything.

Anyway, I have made the change.

On 2013/02/07 21:00:16, flackr wrote:

+  this.xhr_.removeEventListener('progress',
+                                this.onDownloadProgress_.bind(this));
+  this.xhr_.removeEventListener('abort',
+                                this.onDownloadAbort_.bind(this));
+  this.xhr_.removeEventListener('error',
+                                this.onDownloadError_.bind(this));
+  this.xhr_.removeEventListener('load',
+                                this.onDownloadComplete_.bind(this));
+};
+
+/**
+ * Removes the progress bar in |selectedGridItem| if any. May be 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.removeEventListeners_();
+  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.removeEventListeners_();
+  this.xhr_ = null;
+};
+
+/**
+ * Shows error message when progression failed.
+ * @private
+ * @param {Event} e An error ProgressEvent from XMLHttpRequest.
+ */
+ProgressManager.prototype.onDownloadError_ = function(e) {
+  this.removeEventListeners_();
+  // 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);
+};