New custom wallpaper picker UI

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.
  *
@@ skipping 218 matching lines @@
       self.downloadedListMap_ = null;
       $('wallpaper-grid').classList.remove('image-picker-offline');
     });
     $('close').addEventListener('click', function() {window.close()});
     this.document_.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
     $('learn-more').href = LearnMoreURL;
     $('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_();
   };
 
   /**
    * Preset to the category which contains current wallpaper.
    */
   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;
       return;
     }
     var self = this;
     var presetCategoryInner_ = function() {
       // Selects the first category in the categories list of current
       // 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;
     };
     if (navigator.onLine) {
       presetCategoryInner_();
     } else {
       // If device is offline, gets the available offline wallpaper list first.
       // Wallpapers which are not in the list will display a grayscaled
       // thumbnail.
       chrome.wallpaperPrivate.getOfflineWallpaperList('ONLINE',
                                                       function(lists) {
         if (!self.downloadedListMap_)
           self.downloadedListMap_ = {};
         for (var i = 0; i < lists.length; i++)
           self.downloadedListMap_[lists[i]] = true;
         presetCategoryInner_();
       });
     }
   };
 
   /**
    * Constructs the thumbnails grid.
    */
   WallpaperManager.prototype.initThumbnailsGrid_ = function() {
     this.wallpaperGrid_ = $('wallpaper-grid');
     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));
   };
 
   /**
    * Closes window if no pending wallpaper request.
    */
   WallpaperManager.prototype.onClose_ = function() {
     if (this.wallpaperRequest_) {
       this.wallpaperRequest_.addEventListener('loadend', function() {
         // Close window on wallpaper loading finished.
         window.close();
       });
     } else {
       window.close();
     }
   };
 
   /**
-   * Sets wallpaper to the corresponding wallpaper of selected thumbnail.
+    * 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;
+      }
+
+      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;
+        } 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.onThumbnailClicked_ = function() {
+  WallpaperManager.prototype.onThumbnailSelectionChanged_ = function() {
     var selectedItem = this.wallpaperGrid_.selectedItem;
-    if (selectedItem && selectedItem.dynamicURL &&
+    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:

-      var wallpaperURL = selectedItem.baseURL + HighResolutionSuffix;
-      var selectedGridItem = this.wallpaperGrid_.getListItem(selectedItem);
-      var self = this;
-
-      chrome.wallpaperPrivate.setWallpaperIfExist(wallpaperURL,
-                                                  selectedItem.layout,
-                                                  'ONLINE',
-                                                  function() {
-        if (chrome.runtime.lastError == undefined) {
-          self.currentWallpaper_ = wallpaperURL;
-          self.wallpaperGrid_.activeItem = selectedItem;
-          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;
-          } else {
-            self.progressManager_.hideProgressBar(selectedGridItem);
-            self.showError_(str('downloadFailed'));
-          }
-          self.wallpaperRequest_ = null;
+      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);
         });
-        self.wallpaperRequest_.addEventListener('error', function() {
-          self.showError_(str('downloadFailed'));
-        });
-      });
+      } else {
+        this.setSelectedWallpaper_(selectedItem);
+      }
     }
     this.setWallpaperAttribution_(selectedItem);
   };
 
   /**
    * Set attributions of wallpaper with given URL. If URL is not valid, clear
    * the attributions.
    * @param {{baseURL: string, dynamicURL: string, layout: string,
    *          author: string, authorWebsite: string, availableOffline: boolean}}
    *     selectedItem selected wallpaper item in grid.
    * @private
    */
   WallpaperManager.prototype.setWallpaperAttribution_ = function(selectedItem) {
     if (selectedItem) {
       $('author-name').textContent = selectedItem.author;
       $('author-website').textContent = $('author-website').href =
           selectedItem.authorWebsite;
       chrome.wallpaperPrivate.getThumbnail(selectedItem.baseURL,
+                                           selectedItem.source,
                                            function(data) {
         var img = $('attribute-image');
         if (data) {
           var blob = new Blob([new Int8Array(data)], {'type' : 'image\/png'});
           img.src = window.URL.createObjectURL(blob);
           img.addEventListener('load', function(e) {
             window.URL.revokeObjectURL(this.src);
           });
         } else {
           img.src = '';
@@ skipping 81 matching lines @@
       return;
     }
     var reader = new FileReader();
     reader.readAsArrayBuffer(files[0]);
     var self = this;
     reader.addEventListener('error', function(e) {
       self.showError_(str('accessFileFailure'));
     });
     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.
    */
   WallpaperManager.prototype.onFinished_ = function(opt_selectedGridItem,
                                                     opt_selectedItem) {
     if (opt_selectedGridItem)
       this.progressManager_.hideProgressBar(opt_selectedGridItem);
 
     if (chrome.runtime.lastError != undefined) {
       this.showError_(chrome.runtime.lastError.message);
     } else if (opt_selectedItem) {
       this.wallpaperGrid_.activeItem = opt_selectedItem;
     }
   };
 
   /**
    * 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));
+    var layout = this.getSelectedLayout_();
+    var items = {};
+    items[this.currentWallpaper_] = layout;
+    this.storage_.set(items, function() {});
+    chrome.wallpaperPrivate.setCustomWallpaperLayout(layout,
+        this.onSetCustomWallpaperFinished_.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;
-  };
-
-  /**
    * Handles user clicking on a different category.
    */
   WallpaperManager.prototype.onCategoriesChange_ = function() {
     var categoriesList = this.categoriesList_;
     var selectedIndex = categoriesList.selectionModel.selectedIndex;
     if (selectedIndex == -1)
       return;
     var selectedListItem = categoriesList.getListItemByIndex(selectedIndex);
     var bar = $('bar');
     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) +
               HighResolutionSuffix;
           if (this.downloadedListMap_ &&
               this.downloadedListMap_.hasOwnProperty(encodeURI(fileName))) {
             wallpaperInfo.availableOffline = true;
           }
           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.wallpaperGrid_.activeItem = selectedItem;
     }
   };
 
 })();