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

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_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.
 
 /**
  * WallpaperManager constructor.
  *
  * WallpaperManager objects encapsulate the functionality of the wallpaper
  * manager extension.
  *
  * @constructor
  * @param {HTMLElement} dialogDom The DOM node containing the prototypical
  *     extension UI.
  */
 
 function WallpaperManager(dialogDom) {
   this.dialogDom_ = dialogDom;
   this.storage_ = chrome.storage.local;
   this.document_ = dialogDom.ownerDocument;
   this.selectedCategory = null;
-  this.butterBar_ = new ButterBar(this.dialogDom_);
+  this.progressManager_ = new ProgressManager();
   this.customWallpaperData_ = null;
   this.currentWallpaper_ = null;
   this.wallpaperRequest_ = null;
+  this.checkmark_ = cr.doc.createElement('div');
+  this.checkmark_.classList.add('check');
   this.fetchManifest_();
 }
 
 // Anonymous 'namespace'.
 // TODO(bshe): Get rid of anonymous namespace.
 (function() {
 
   /**
    * Base URL of the manifest file.
    */
@@ skipping 114 matching lines @@
     this.storage_.set(items, function() {});
     this.initDom_();
   };
 
   // Sets manifest to previously saved object if any and shows connection error.
   // Called after manifest failed to load.
   WallpaperManager.prototype.onLoadManifestFailed_ = function() {
     var self = this;
     this.storage_.get(AccessManifestKey, function(items) {
       self.manifest_ = items[AccessManifestKey] ? items[AccessManifestKey] : {};
-      self.butterBar_.showError_(str('connectionFailed'),
-                                 {help_url: LEARN_MORE_URL});
+      // TODO(bshe): Add error message back once we decide how to show error
+      // message in the new UI. http://crbug.com/162563
       self.initDom_();
       $('wallpaper-grid').classList.add('image-picker-offline');
     });
   };
 
   /**
    * One-time initialization of various DOM nodes.
    */
   WallpaperManager.prototype.initDom_ = function() {
     i18nTemplate.process(this.document_, loadTimeData);
@@ skipping 105 matching lines @@
   };
 
   /**
    * Sets wallpaper to the corresponding wallpaper of selected thumbnail.
    */
   WallpaperManager.prototype.onThumbnailClicked_ = function() {
     var selectedItem = this.wallpaperGrid_.selectedItem;
     if (selectedItem && selectedItem.dynamicURL &&
         !this.wallpaperGrid_.inProgramSelection) {
       var wallpaperURL = selectedItem.baseURL + HighResolutionSuffix;
+      var selectedGridItem = this.wallpaperGrid_.getListItem(selectedItem);
       var self = this;
 
       chrome.wallpaperPrivate.setWallpaperIfExist(wallpaperURL,
                                                   selectedItem.layout,
                                                   function() {
         if (chrome.runtime.lastError == undefined) {
           self.currentWallpaper_ = wallpaperURL;
-          self.setActiveThumb(selectedItem);
+          self.setActiveThumb(selectedGridItem);
           return;
         }
 
         // Falls back to request wallpaper from server.
         if (self.wallpaperRequest_)
           self.wallpaperRequest_.abort();
 
         self.wallpaperRequest_ = new XMLHttpRequest();
         self.wallpaperRequest_.open('GET', wallpaperURL, true);
         self.wallpaperRequest_.responseType = 'arraybuffer';
+        self.progressManager_.reset(self.wallpaperRequest_, selectedGridItem);
         self.wallpaperRequest_.send(null);
-        self.butterBar_.setRequest(self.wallpaperRequest_);
         self.wallpaperRequest_.addEventListener('load', function(e) {
           if (self.wallpaperRequest_.status === 200) {
             var image = self.wallpaperRequest_.response;
-            chrome.wallpaperPrivate.setWallpaper(image,
-                                                 selectedItem.layout,
-                                                 wallpaperURL,
-                                                 self.onFinished_.bind(self));
+            chrome.wallpaperPrivate.setWallpaper(
+                image,
+                selectedItem.layout,
+                wallpaperURL,
+                self.onFinished_.bind(self, selectedGridItem));
             self.currentWallpaper_ = wallpaperURL;
-            self.setActiveThumb(selectedItem);
           } else {
-            self.butterBar_.showError_(str('downloadFailed'),
-                                       {help_url: LEARN_MORE_URL});
+            // TODO(bshe): Add error message back once we decide how to show
+            // error message in the new UI. http://crbug.com/162563
           }
           self.wallpaperRequest_ = null;
         });
       });
     }
     this.setWallpaperAttribution_(selectedItem);
   };
 
   /**
    * Set attributions of wallpaper with given URL. If URL is not valid, clear
@@ skipping 90 matching lines @@
   /**
    * Handles the custom wallpaper which user selected from file manager. Called
    * when users select a file.
    */
   WallpaperManager.prototype.onFileSelectorChanged_ = function() {
     var files = $('file-selector').files;
     if (files.length != 1)
       console.error('More than one files are selected or no file selected');
     var file = files[0];
     if (!file.type.match('image/jpeg')) {
-      this.butterBar_.showError_(str('invalidWallpaper'),
-                                 {help_url: LEARN_MORE_URL});
+      // TODO(bshe): Add error message back once we decide how to show error
+      // message in the new UI. http://crbug.com/162563
       return;
     }
     var reader = new FileReader();
     reader.readAsArrayBuffer(files[0]);
     var self = this;
     reader.addEventListener('error', function(e) {
-      this.butterBar_.showError_(str('accessFileFailure'),
-                                 {help_url: LEARN_MORE_URL});
+      // TODO(bshe): Add error message back once we decide how to show error
+      // message in the new UI. http://crbug.com/162563
     });
     reader.addEventListener('load', function(e) {
       self.customWallpaperData_ = e.target.result;
       self.refreshWallpaper_(self.customWallpaperData_);
     });
     this.generateThumbnail_(files[0]);
   };
 
   /**
    * Refreshes the custom wallpaper with the current selected layout.
    * @param {ArrayBuffer} customWallpaper The raw wallpaper file data.
    */
   WallpaperManager.prototype.refreshWallpaper_ = function(customWallpaper) {
     var setWallpaperLayout = $('set-wallpaper-layout');
     var layout =
         setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
     chrome.wallpaperPrivate.setCustomWallpaper(customWallpaper,
                                                layout,
-                                               this.onFinished_.bind(this));
+                                               this.onFinished_.bind(this,
+                                                                     null));

[flackr, 2013/02/05 01:24:20]

Remove the null, this will pass undefined instead.

[bshe, 2013/02/05 17:33:10]

Done.

     this.currentWallpaper_ = 'CUSTOM';
   };
 
   /**
    * Sets wallpaper finished. Displays error message in butter bar if any.
+   * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper

[flackr, 2013/02/05 01:24:20]

Optional parameter: @param {WallpaperThumbnailsGridItem=} opt_selectedGridItem

[bshe, 2013/02/05 17:33:10]

Done.

+   *     thumbnail grid item. It extends from cr.ui.ListItem.
    */
-  WallpaperManager.prototype.onFinished_ = function() {
+  WallpaperManager.prototype.onFinished_ = function(selectedGridItem) {
+    if (selectedGridItem)
+      this.progressManager_.hide(selectedGridItem);
+
     if (chrome.runtime.lastError != undefined) {
-      this.butterBar_.showError_(chrome.runtime.lastError.message,
-                                 {help_url: LEARN_MORE_URL});
-    } else {
-      this.butterBar_.hide_();
+      // TODO(bshe): Add error message back once we decide how to show error
+      // message in the new UI. http://crbug.com/162563
+    } else if (selectedGridItem) {
+      this.setActiveThumb(selectedGridItem);
     }
   };
 
   /**
    * Handles the layout setting change of custom wallpaper.
    */
   WallpaperManager.prototype.onWallpaperLayoutChanged_ = function() {
     if (this.customWallpaperData_)
       this.refreshWallpaper_(this.customWallpaperData_);
   };
@@ skipping 62 matching lines @@
           wallpapersDataModel.push(wallpaperInfo);
           var url = this.manifest_.wallpaper_list[key].base_url +
               HighResolutionSuffix;
           if (url == this.currentWallpaper_) {
             selectedItem = wallpaperInfo;
           }
         }
       }
       this.wallpaperGrid_.dataModel = wallpapersDataModel;
       this.wallpaperGrid_.selectedItem = selectedItem;
-      this.setActiveThumb(selectedItem);
+      this.setActiveThumb(this.wallpaperGrid_.getListItem(selectedItem));
     }
   };
 
   /**
    * Shows a checkmark on the active thumbnail and clears previous active one if
    * any. Note if wallpaper was not set successfully, checkmark should not show
    * on that thumbnail.
-   * @param {{baseURL: string, dynamicURL: string, layout: string,
-   *          author: string, authorWebsite: string, availableOffline: boolean}}
-   *     activeItem the wallpaper item to active (show checkmark).
+   * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper
+   *     thumbnail grid item. It extends from cr.ui.ListItem.
    */
-  WallpaperManager.prototype.setActiveThumb = function(activeItem) {
-    var activeThumb = $('wallpaper-grid').getListItem(activeItem);
-    if (!activeThumb)
+  WallpaperManager.prototype.setActiveThumb = function(selectedGridItem) {
+    if (!selectedGridItem)
       return;
     // Clears previous checkmark.
-    var previousActiveThumb = $('wallpaper-grid').querySelector('[active]');
-    if (previousActiveThumb)
-      previousActiveThumb.active = false;
-    activeThumb.active = true;
+    var previousCheckmark = $('wallpaper-grid').querySelector('.check');

[flackr, 2013/02/05 01:24:20]

Seems like previousCheckmark == this.checkmark_, in which case you don't have to
use a querySelector to find it, you can just detach it from its parent if it's
attached.

[bshe, 2013/02/05 17:33:10]

Done.

+    if (previousCheckmark)
+      previousCheckmark.parentNode.removeChild(previousCheckmark);
+    selectedGridItem.appendChild(this.checkmark_);
   };
 
 })();