New custom wallpaper picker UI

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

Index: chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
index c7b44d8a4187b59320960cc5df5917b3232c7d43..5682acc1e529b1cd3747ffc640914cf4778d96f4 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
@@ -236,6 +236,10 @@ function WallpaperManager(dialogDom) {
     $('close-error').addEventListener('click', function() {
       $('error-container').hidden = true;
     });
+    $('close-wallpaper-selection').addEventListener('click', function() {
+      $('wallpaper-selection-container').hidden = true;
+      $('set-wallpaper-layout').disabled = true;
+    });
 
     this.onResize_();
   };
@@ -245,7 +249,8 @@ function WallpaperManager(dialogDom) {
    */
   WallpaperManager.prototype.presetCategory_ = function() {
     this.currentWallpaper_ = str('currentWallpaper');
-    if (this.currentWallpaper_ && this.currentWallpaper_ == 'CUSTOM') {
+    if (this.currentWallpaper_ &&

[bshe, 2013/02/26 19:07:26]

the currentWallpaper is either a url contains HightResolutionSuffix or a custom
wallpaper file name (e.g. 13006377367586070, a string converted from an integer
value represent time).

[flackr, 2013/02/26 21:37:35]

Great, I was going to comment on this. Can you add this in a comment so it's
clear why this is a safe check. Initially I thought it was just checked against
the custom wallpaper's filename.

[bshe, 2013/02/27 03:16:38]

Done.

+        this.currentWallpaper_.indexOf(HighResolutionSuffix) == -1) {
       // Custom is the last one in the categories list.
       this.categoriesList_.selectionModel.selectedIndex =
           this.categoriesList_.dataModel.length - 1;
@@ -257,12 +262,14 @@ function WallpaperManager(dialogDom) {
       // wallpaper as the default selected category when showing wallpaper
       // picker UI.
       var presetCategory = AllCategoryIndex;
-      for (var key in self.manifest_.wallpaper_list) {
-        var url = self.manifest_.wallpaper_list[key].base_url +
-            HighResolutionSuffix;
-        if (url.indexOf(self.currentWallpaper_) != -1)
-          presetCategory = self.manifest_.wallpaper_list[key].categories[0] +
-              OnlineCategoriesOffset;
+      if (self.currentWallpaper_) {
+        for (var key in self.manifest_.wallpaper_list) {
+          var url = self.manifest_.wallpaper_list[key].base_url +
+              HighResolutionSuffix;
+          if (url.indexOf(self.currentWallpaper_) != -1)

[flackr, 2013/02/26 21:37:35]

nit: I believe you need braces for a multi-line logic block.

[bshe, 2013/02/27 03:16:38]

Done.

+            presetCategory = self.manifest_.wallpaper_list[key].categories[0] +
+                OnlineCategoriesOffset;

[flackr, 2013/02/26 21:37:35]

You should break when you've found the category.

[bshe, 2013/02/27 03:16:38]

Done.

+        }
       }
       self.categoriesList_.selectionModel.selectedIndex = presetCategory;
     };
@@ -291,7 +298,7 @@ function WallpaperManager(dialogDom) {
     wallpapers.WallpaperThumbnailsGrid.decorate(this.wallpaperGrid_);
 
     this.wallpaperGrid_.addEventListener('change',
-        this.onThumbnailClicked_.bind(this));
+        this.onThumbnailSelectionChanged_.bind(this));
     this.wallpaperGrid_.addEventListener('dblclick', this.onClose_.bind(this));
   };
 
@@ -310,54 +317,84 @@ function WallpaperManager(dialogDom) {
   };
 
   /**
-   * 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;
+    * Sets wallpaper to the corresponding wallpaper of selected thumbnail.
+    * @param {{baseURL: string, layout: string, source: string,
+    *          availableOffline: boolean, opt_dynamicURL: string,
+    *          opt_author: string, opt_authorWebsite: string}}
+    *     selectedItem the selected item in WallpaperThumbnailsGrid's data
+    *     model.
+    */

[bshe, 2013/02/26 19:07:26]

Most of the code in this function is moved from onThumbnailClicked_. I only add
support for custom wallpaper.

+  WallpaperManager.prototype.setSelectedWallpaper_ = function(selectedItem) {
+    var self = this;
+    var wallpaperURL = selectedItem.baseURL;
+    if (selectedItem.source == 'ONLINE')

[flackr, 2013/02/26 21:37:35]

nit: constants for source values.

[bshe, 2013/02/27 03:16:38]

Done.

+      wallpaperURL += HighResolutionSuffix;

[flackr, 2013/02/26 21:37:35]

TODO: Use non high resolution wallpaper when appropriate?

[bshe, 2013/02/27 03:16:38]

There are changes in the design on how to fetch wallpaper from server. As you
probably remember, we originally plan to download high and low resolution
wallpapers for each devices. But later we decided to just download a high
resolution wallpaper and resize it in chrome to get small resolution wallpaper.
The resize quality is comparable to server and we can reduce the bandwidth
usage. So a TODO is probably not necessary here?

On 2013/02/26 21:37:35, flackr wrote:

[flackr, 2013/02/27 14:39:52]

In light of that, I'm surprised we have a high resolution suffix. Are there only
high res images available online? If we're okay with downloading the extra large
image on devices which only need a low res image we should remove the suffix
altogether / add it early on when we fetch the manifest if we need to keep it
for backwards compatibility. We should discuss this.

On 2013/02/27 03:16:38, bshe wrote:

[bshe, 2013/03/01 17:43:56]

Discussed offline. We should investigate removing the high resolution suffix
from the server and client.

On 2013/02/27 14:39:52, flackr wrote:

+    var selectedGridItem = this.wallpaperGrid_.getListItem(selectedItem);
+
+    chrome.wallpaperPrivate.setWallpaperIfExist(wallpaperURL,
+                                                selectedItem.layout,
+                                                selectedItem.source,
+                                                function() {
+      if (chrome.runtime.lastError == undefined) {
+        self.currentWallpaper_ = wallpaperURL;
+        self.wallpaperGrid_.activeItem = selectedItem;
+        return;
+      }
 
-      chrome.wallpaperPrivate.setWallpaperIfExist(wallpaperURL,
-                                                  selectedItem.layout,
-                                                  'ONLINE',
-                                                  function() {
-        if (chrome.runtime.lastError == undefined) {
+      if (selectedItem.source == 'CUSTOM')
+        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.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, selectedGridItem, selectedItem));
           self.currentWallpaper_ = wallpaperURL;
-          self.wallpaperGrid_.activeItem = selectedItem;
-          return;
+        } else {
+          self.progressManager_.hideProgressBar(selectedGridItem);
+          self.showError_(str('downloadFailed'));
         }
+        self.wallpaperRequest_ = null;
+      });
+      self.wallpaperRequest_.addEventListener('error', function() {
+        self.showError_(str('downloadFailed'));
+      });
+    });
+  };
 
-        // 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.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, selectedGridItem, selectedItem));
-            self.currentWallpaper_ = wallpaperURL;
-          } else {
-            self.progressManager_.hideProgressBar(selectedGridItem);
-            self.showError_(str('downloadFailed'));
-          }
-          self.wallpaperRequest_ = null;
-        });
-        self.wallpaperRequest_.addEventListener('error', function() {
-          self.showError_(str('downloadFailed'));
+  /**
+   * Handles click on a different thumbnail in wallpaper grid.
+   */
+  WallpaperManager.prototype.onThumbnailSelectionChanged_ = function() {
+    var selectedItem = this.wallpaperGrid_.selectedItem;
+    if (selectedItem && selectedItem.source == 'ADDNEW')
+      return;
+
+    if (selectedItem && selectedItem.baseURL &&
+        !this.wallpaperGrid_.inProgramSelection) {

[flackr, 2013/02/26 21:37:35]

pardon my ignorance, but what does inProgramSelection mean?

[bshe, 2013/02/27 03:16:38]

Sorry for confusion. When the current thumbnail selection change is triggered by
program, not user's interaction, this inProgramSelection is true. Please see
http://code.google.com/searchframe#OAMlx_jo-ck/src/chrome/browser/resources/c...
for more detail.

When the wallpaper picker first open, we will automatically select the thumbnail
of current wallpaper. It triggers a selection change. But we dont want to call
api function to set wallpaper for the selection change. So inProgramSelection is
set to true to prevent us from doing that.

On 2013/02/26 21:37:35, flackr wrote:

+      if (selectedItem.source == 'CUSTOM') {
+        var items = {};
+        var key = selectedItem.baseURL;
+        var self = this;
+        this.storage_.get(key, function(items) {
+          selectedItem.layout = items[key] ? items[key] : 'CENTER_CROPPED';
+          self.setSelectedWallpaper_(selectedItem);
         });
-      });
+      } else {
+        this.setSelectedWallpaper_(selectedItem);
+      }
     }
     this.setWallpaperAttribution_(selectedItem);
   };
@@ -376,6 +413,7 @@ function WallpaperManager(dialogDom) {
       $('author-website').textContent = $('author-website').href =
           selectedItem.authorWebsite;
       chrome.wallpaperPrivate.getThumbnail(selectedItem.baseURL,
+                                           selectedItem.source,
                                            function(data) {
         var img = $('attribute-image');
         if (data) {
@@ -477,32 +515,59 @@ function WallpaperManager(dialogDom) {
     });
     reader.addEventListener('load', function(e) {
       self.customWallpaperData_ = e.target.result;
-      self.refreshWallpaper_(self.customWallpaperData_);
+      var layout = self.getSelectedLayout_();
+      chrome.wallpaperPrivate.setCustomWallpaper(self.customWallpaperData_,
+          layout, self.onSetCustomWallpaperFinished_.bind(self));
     });
-    this.generateThumbnail_(files[0]);
   };
 
   /**
-   * Refreshes the custom wallpaper with the current selected layout.
-   * @param {ArrayBuffer} customWallpaper The raw wallpaper file data.
+   * Retruns the current selected layout.
+   * @return {string} The selected layout.
    */
-  WallpaperManager.prototype.refreshWallpaper_ = function(customWallpaper) {
+  WallpaperManager.prototype.getSelectedLayout_ = function() {
     var setWallpaperLayout = $('set-wallpaper-layout');
-    var layout =
-        setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
-    chrome.wallpaperPrivate.setCustomWallpaper(customWallpaper,
-                                               layout,
-                                               this.onFinished_.bind(this));
-    this.currentWallpaper_ = 'CUSTOM';
+    return setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
   };
 
   /**
-   * Sets wallpaper finished. Displays error message in butter bar if any.
+   * Add new thumbnail to custom wallpaper grid and set it as active thumbnail.
+   * @param {string=} opt_fileName The file name used to save the new selected

[flackr, 2013/02/26 21:37:35]

When is the filename optional / not passed?

[bshe, 2013/02/27 03:16:38]

When custom wallpaper layout change finished, this function will be called
without a fileName (in function onWallpaperLayoutChanged_). As for layout
change, we dont save a new file into file system. So the fileName is null.

On 2013/02/26 21:37:35, flackr wrote:

[flackr, 2013/02/27 14:39:52]

Comment this please.

On 2013/02/27 03:16:38, bshe wrote:

[bshe, 2013/03/01 17:43:56]

Done.

+   *     custom wallpaper.
+   */
+  WallpaperManager.prototype.onSetCustomWallpaperFinished_ =
+      function(opt_fileName) {
+    if (chrome.runtime.lastError != undefined) {
+      this.showError_(chrome.runtime.lastError.message);
+      $('set-wallpaper-layout').disabled = true;
+    } else {
+      var layout = this.getSelectedLayout_();
+      $('set-wallpaper-layout').disabled = false;
+      if (opt_fileName) {
+        var wallpaperInfo = {
+            baseURL: opt_fileName,
+            layout: layout,
+            source: 'CUSTOM',
+            availableOffline: true
+        };
+        this.currentWallpaper_ = opt_fileName;
+        var items = {};
+        items[this.currentWallpaper_] = layout;
+        this.storage_.set(items, function() {});
+        this.wallpaperGrid_.dataModel.splice(0, 0, wallpaperInfo);
+        this.wallpaperGrid_.selectedItem = wallpaperInfo;
+        this.wallpaperGrid_.activeItem = wallpaperInfo;
+      }
+    }
+  };
+
+  /**
+   * Sets wallpaper finished. Displays error message if any.
    * @param {WallpaperThumbnailsGridItem=} opt_selectedGridItem The wallpaper
    *     thumbnail grid item. It extends from cr.ui.ListItem.
-   * @param {{baseURL: string, dynamicURL: string, layout: string,
-   *          author: string, authorWebsite: string,
-   *          availableOffline: boolean}=}
+   * @param {{baseURL: string, layout: string, source: string,
+   *          availableOffline: boolean, opt_dynamicURL: string,
+   *          opt_author: string, opt_authorWebsite: string}=}
    *     opt_selectedItem the selected item in WallpaperThumbnailsGrid's data
    *     model.
    */
@@ -522,35 +587,12 @@ function WallpaperManager(dialogDom) {
    * Handles the layout setting change of custom wallpaper.
    */
   WallpaperManager.prototype.onWallpaperLayoutChanged_ = function() {
-    var setWallpaperLayout = $('set-wallpaper-layout');
-    var layout =
-        setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
-     chrome.wallpaperPrivate.setCustomWallpaperLayout(layout,
-         this.onFinished_.bind(this));
-  };
-
-  /**
-   * Generates a thumbnail of user selected image file.
-   * @param {Object} file The file user selected from file manager.
-   */
-  WallpaperManager.prototype.generateThumbnail_ = function(file) {
-    var img = $('preview');
-    img.file = file;
-    var reader = new FileReader();
-    reader.addEventListener('load', function(e) {
-      img.src = e.target.result;
-    });
-    reader.readAsDataURL(file);
-  };
-
-  /**
-   * Toggle visibility of custom container and category container.
-   * @param {boolean} showCustom True if display custom container and hide
-   *     category container.
-   */
-  WallpaperManager.prototype.showCustomContainer_ = function(showCustom) {
-    $('category-container').hidden = showCustom;
-    $('custom-container').hidden = !showCustom;
+    var layout = this.getSelectedLayout_();
+    var items = {};
+    items[this.currentWallpaper_] = layout;
+    this.storage_.set(items, function() {});
+    chrome.wallpaperPrivate.setCustomWallpaperLayout(layout,
+        this.onSetCustomWallpaperFinished_.bind(this));
   };
 
   /**
@@ -566,23 +608,49 @@ function WallpaperManager(dialogDom) {
     bar.style.left = selectedListItem.offsetLeft + 'px';
     bar.style.width = selectedListItem.offsetWidth + 'px';
 
+    var wallpapersDataModel = new cr.ui.ArrayDataModel([]);
+    var selectedItem;
     if (selectedListItem.custom) {
-      this.showCustomContainer_(true);
+      $('online-wallpaper-attribute').hidden = true;
+      var self = this;
+      chrome.wallpaperPrivate.getOfflineWallpaperList('CUSTOM',
+                                                      function(lists) {
+        for (var i = 0; i < lists.length; i++) {
+          var wallpaperInfo = {
+              baseURL: lists[i],
+              layout: 'CENTER_CROPPED',

[flackr, 2013/02/26 21:37:35]

So this is later replaced with the last used layout when you set the wallpaper?

[bshe, 2013/02/27 03:16:38]

Right. It will be replaced by the value in local storage when set. The reason I
use CENTER_CROPPED layout here is to avoid wait for fetching layout from local
storage, hence speed up the process of displaying thumbnail grid.

On 2013/02/26 21:37:35, flackr wrote:

[flackr, 2013/02/27 14:39:52]

Please add comment to this effect.

On 2013/02/27 03:16:38, bshe wrote:

[bshe, 2013/03/01 17:43:56]

Done.

+              source: 'CUSTOM',
+              availableOffline: true
+          };
+          if (self.currentWallpaper_ == lists[i])
+            selectedItem = wallpaperInfo;
+          wallpapersDataModel.push(wallpaperInfo);
+        }
+        var lastElement = {
+            baseURL: '',
+            layout: '',
+            source: 'ADDNEW',
+            availableOffline: true
+        };
+        wallpapersDataModel.push(lastElement);
+        self.wallpaperGrid_.dataModel = wallpapersDataModel;
+        self.wallpaperGrid_.selectedItem = selectedItem;
+        self.wallpaperGrid_.activeItem = selectedItem;
+      });
     } else {
-      this.showCustomContainer_(false);
-      var selectedItem;
-      var wallpapersDataModel = new cr.ui.ArrayDataModel([]);
+      $('online-wallpaper-attribute').hidden = false;
       for (var key in this.manifest_.wallpaper_list) {
         if (selectedIndex == AllCategoryIndex ||
             this.manifest_.wallpaper_list[key].categories.indexOf(
                 selectedIndex - OnlineCategoriesOffset) != -1) {
           var wallpaperInfo = {
             baseURL: this.manifest_.wallpaper_list[key].base_url,
-            dynamicURL: this.manifest_.wallpaper_list[key].dynamic_url,
             layout: this.manifest_.wallpaper_list[key].default_layout,
+            source: 'ONLINE',
+            availableOffline: false,
             author: this.manifest_.wallpaper_list[key].author,
             authorWebsite: this.manifest_.wallpaper_list[key].author_website,
-            availableOffline: false
+            dynamicURL: this.manifest_.wallpaper_list[key].dynamic_url
           };
           var startIndex = wallpaperInfo.baseURL.lastIndexOf('/') + 1;
           var fileName = wallpaperInfo.baseURL.substring(startIndex) +