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

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

+// 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.loadstartHandler_ = this.onDownloadStart_.bind(this);
+  this.progressHandler_ = this.onDownloadProgress_.bind(this);
+  this.abortHandler_ = this.onDownloadAbort_.bind(this);
+  this.errorHandler_ = this.onDownloadError_.bind(this);
+  this.loadHandler_ = this.onDownloadComplete_.bind(this);

[flackr, 2013/02/07 22:01:53]

Nit: Can we clean this up a little? i.e.
this.xhrListeners_ = {
  'loadstart': this.onDownloadStart_.bind(this),
  ...
};

for (var eventType in this.xhrListeners)
  this.xhr_.addEventListener(eventType, this.xhrListeners[type]);

and similar for remove? Then we don't have to worry about keeping the remove
list in sync.

[bshe, 2013/02/07 23:07:47]

Done.

+  this.xhr_.addEventListener('loadstart',
+                             this.loadstartHandler_);
+  this.xhr_.addEventListener('progress',
+                             this.progressHandler_);
+  this.xhr_.addEventListener('abort',
+                             this.abortHandler_);
+  this.xhr_.addEventListener('error',
+                             this.errorHandler_);
+  this.xhr_.addEventListener('load',
+                             this.loadHandler_);
+};
+
+/**
+ * Removes all event listeners progress manager currently registered.
+ * @private
+ */
+ProgressManager.prototype.removeEventListeners_ = function() {
+  this.xhr_.removeEventListener('loadstart',
+                                this.loadstartHandler_);
+  this.xhr_.removeEventListener('progress',
+                                this.progressHandler_);
+  this.xhr_.removeEventListener('abort',
+                                this.abortHandler_);
+  this.xhr_.removeEventListener('error',
+                                this.errorHandler_);
+  this.xhr_.removeEventListener('load',
+                                this.loadHandler_);
+};
+
+/**
+ * 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);
+};