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.
  *
  * @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.progressManager_ = new ProgressManager();
   this.customWallpaperData_ = null;
   this.currentWallpaper_ = null;
   this.wallpaperRequest_ = null;
+  this.wallpaperDirs_ = WallpaperDirectories.getInstance();
   this.fetchManifest_();
 }
 
 // Anonymous 'namespace'.
 // TODO(bshe): Get rid of anonymous namespace.
 (function() {
 
   /**
    * Base URL of the manifest file.
    */
@@ skipping 35 matching lines @@
    * Equivilant to localStrings.getString(id).
    *
    * @param {string} id The id of the string to return.
    * @return {string} The translated string.
    */
   function str(id) {
     return loadTimeData.getString(id);
   }
 
   /**
+   * Retruns the current selected layout.
+   * @return {string} The selected layout.
+   */
+  function getSelectedLayout() {
+    var setWallpaperLayout = $('set-wallpaper-layout');
+    return setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
+  }
+
+  /**
    * Loads translated strings.
    */
   WallpaperManager.initStrings = function(callback) {
     chrome.wallpaperPrivate.getStrings(function(strings) {
       loadTimeData.data = strings;
       if (callback)
         callback();
     });
   };
 
@@ skipping 108 matching lines @@
     this.initCategoriesList_();
     this.initThumbnailsGrid_();
     this.presetCategory_();
 
     $('file-selector').addEventListener(
         'change', this.onFileSelectorChanged_.bind(this));
     $('set-wallpaper-layout').addEventListener(
         'change', this.onWallpaperLayoutChanged_.bind(this));
     var self = this;
     window.addEventListener('offline', function() {
-      chrome.wallpaperPrivate.getOfflineWallpaperList('ONLINE',
-                                                      function(lists) {
+      chrome.wallpaperPrivate.getOfflineWallpaperList(
+          wallpapers.WallpaperSourceEnum.Online, function(lists) {
         if (!self.downloadedListMap_)
           self.downloadedListMap_ = {};
         for (var i = 0; i < lists.length; i++)
           self.downloadedListMap_[lists[i]] = true;
         var thumbnails = self.document_.querySelectorAll('.thumbnail');
         for (var i = 0; i < thumbnails.length; i++) {
           var thumbnail = thumbnails[i];
           var url = self.wallpaperGrid_.dataModel.item(i).baseURL;
           var fileName = url.substring(url.lastIndexOf('/') + 1) +
               HighResolutionSuffix;
           if (self.downloadedListMap_ &&
               self.downloadedListMap_.hasOwnProperty(encodeURI(fileName))) {
             thumbnail.offline = true;
           }
         }
       });
       $('wallpaper-grid').classList.add('image-picker-offline');
     });
     window.addEventListener('online', function() {
       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') {
+    // The currentWallpaper_ is either a url contains HightResolutionSuffix or a
+    // custom wallpaper file name converted from an integer value represent
+    // time (e.g., 13006377367586070).
+    if (this.currentWallpaper_ &&
+        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 &&
-            self.manifest_.wallpaper_list[key].categories.length > 0) {
-          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 &&
+              self.manifest_.wallpaper_list[key].categories.length > 0) {
+            presetCategory = self.manifest_.wallpaper_list[key].categories[0] +
+                OnlineCategoriesOffset;
+            break;
+          }
         }
       }
       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) {
+      chrome.wallpaperPrivate.getOfflineWallpaperList(
+          wallpapers.WallpaperSourceEnum.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.
+    */
+  WallpaperManager.prototype.setSelectedWallpaper_ = function(selectedItem) {
+    var self = this;
+    switch (selectedItem.source) {
+      case wallpapers.WallpaperSourceEnum.Custom:
+        var errorHandler = this.onFileSystemError_.bind(this);
+        var setActive = function() {
+          self.wallpaperGrid_.activeItem = selectedItem;
+          self.currentWallpaper_ = selectedItem.baseURL;
+        };
+        var success = function(dirEntry) {
+          dirEntry.getFile(selectedItem.baseURL, {create: false},
+                           function(fileEntry) {
+            fileEntry.file(function(file) {
+              var reader = new FileReader();
+              reader.readAsArrayBuffer(file);
+              reader.addEventListener('error', errorHandler);
+              reader.addEventListener('load', function(e) {
+                self.setCustomWallpaper(e.target.result,
+                                        selectedItem.layout,
+                                        false, selectedItem.baseURL,
+                                        setActive, errorHandler);
+              });
+            }, errorHandler);
+          }, errorHandler);
+        }
+        this.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.ORIGINAL,
+                                         success, errorHandler);
+        break;
+      case wallpapers.WallpaperSourceEnum.Online:
+        var wallpaperURL = selectedItem.baseURL + HighResolutionSuffix;
+        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;
+          }
+
+          // 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'));
+          });
+        });
+        break;
+      default:
+        console.error('Unsupported wallpaper source.');
+    }
+  };
+
+  /*
+   * Shows an error message to user and log the failed reason in console.
    */
-  WallpaperManager.prototype.onThumbnailClicked_ = function() {
+  WallpaperManager.prototype.onFileSystemError_ = function(e) {
+    var msg = '';
+    switch (e.code) {
+      case FileError.QUOTA_EXCEEDED_ERR:
+        msg = 'QUOTA_EXCEEDED_ERR';
+        break;
+      case FileError.NOT_FOUND_ERR:
+        msg = 'NOT_FOUND_ERR';
+        break;
+      case FileError.SECURITY_ERR:
+        msg = 'SECURITY_ERR';
+        break;
+      case FileError.INVALID_MODIFICATION_ERR:
+        msg = 'INVALID_MODIFICATION_ERR';
+        break;
+      case FileError.INVALID_STATE_ERR:
+        msg = 'INVALID_STATE_ERR';
+        break;
+      default:
+        msg = 'Unknown Error';
+        break;
+    }
+    console.error('Error: ' + msg);
+    this.showError_(str('accessFileFailure'));
+  };
+
+  /**
+   * Handles click on a different thumbnail in wallpaper grid.
+   */
+  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) {
-      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 == wallpapers.WallpaperSourceEnum.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 68 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')) {
+    if (!files[0].type.match('image/jpeg')) {
       this.showError_(str('invalidWallpaper'));
       return;
     }
-    var reader = new FileReader();
-    reader.readAsArrayBuffer(files[0]);
+    var layout = getSelectedLayout();
     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_);
-    });
-    this.generateThumbnail_(files[0]);
+    var errorHandler = this.onFileSystemError_.bind(this);
+    var setSelectedFile = function(file, layout, fileName) {
+      var saveThumbnail = function(thumbnail) {
+        var success = function(dirEntry) {
+          dirEntry.getFile(fileName, {create: true}, function(fileEntry) {
+            fileEntry.createWriter(function(fileWriter) {
+              fileWriter.onwriteend = function(e) {
+                $('set-wallpaper-layout').disabled = false;
+                var wallpaperInfo = {
+                  baseURL: fileName,
+                  layout: layout,
+                  source: wallpapers.WallpaperSourceEnum.Custom,
+                  availableOffline: true
+                };
+                self.currentWallpaper_ = fileName;
+                var items = {};
+                items[self.currentWallpaper_] = layout;
+                self.storage_.set(items, function() {});
+                self.wallpaperGrid_.dataModel.splice(0, 0, wallpaperInfo);
+                self.wallpaperGrid_.selectedItem = wallpaperInfo;
+                self.wallpaperGrid_.activeItem = wallpaperInfo;
+              };
+
+              fileWriter.onerror = errorHandler;
+
+              var blob = new Blob([new Int8Array(thumbnail)],
+                                  {'type' : 'image\/jpeg'});
+              fileWriter.write(blob);

[flackr, 2013/03/06 16:22:11]

What happens when we run out of quota? We should bump the oldest wallpapers out
right? If you want to simplify things for now you could request unlimited quota
though I imagine having a limit is the right thing to do long-term.

[bshe, 2013/03/07 05:34:35]

Added a simple function to remove the oldest file for now. We may need better
approach.

On 2013/03/06 16:22:11, flackr wrote:

+            }, errorHandler);
+          }, errorHandler);
+        };
+        self.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.THUMBNAIL,
+            success, errorHandler);
+      };
+
+      var success = function(dirEntry) {
+        dirEntry.getFile(fileName, {create: true}, function(fileEntry) {
+          fileEntry.createWriter(function(fileWriter) {
+            fileWriter.addEventListener('writeend', function(e) {
+              var reader = new FileReader();
+              reader.readAsArrayBuffer(file);
+              reader.addEventListener('error', errorHandler);
+              reader.addEventListener('load', function(e) {
+                self.setCustomWallpaper(e.target.result, layout, true, fileName,
+                                        saveThumbnail, function() {
+                  self.removeCustomWallpaper(fileName);
+                  errorHandler();
+                });
+              });
+            });
+
+            fileWriter.addEventListener('error', errorHandler);
+            fileWriter.write(file);

[bshe, 2013/03/06 15:44:33]

duplicate the selected file before we try to set it as wallpaper in the event
handler for writeend. The duplicated file will be deleted if setCustomWallpaper
failed.

+          }, errorHandler);
+        }, errorHandler);
+      };
+      self.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.ORIGINAL, success,
+                                       errorHandler);
+    };
+    setSelectedFile(files[0], layout, new Date().getTime().toString());
   };
 
   /**
-   * Refreshes the custom wallpaper with the current selected layout.
-   * @param {ArrayBuffer} customWallpaper The raw wallpaper file data.
+   * Removes wallpaper and thumbnail with fileName from FileSystem.
+   * @param {string} fileName The file name of wallpaper and thumbnail to be
+   *     removed.
    */
-  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.currentWallpaper_ = 'CUSTOM';
+  WallpaperManager.prototype.removeCustomWallpaper = function(fileName) {
+    var errorHandler = this.onFileSystemError_.bind(this);
+    var self = this;
+    var removeFile = function(fileName) {
+      var success = function(dirEntry) {
+        dirEntry.getFile(fileName, {create: false}, function(fileEntry) {
+          fileEntry.remove(function() {
+          }, errorHandler);
+        }, errorHandler);
+      }
+
+      // Removes copy of original.
+      self.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.ORIGINAL, success,
+                                       errorHandler);
+
+      // Removes generated thumbnail.
+      self.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.THUMBNAIL, success,
+                                       errorHandler);
+    };
+    removeFile(fileName);
   };
 
   /**
-   * Sets wallpaper finished. Displays error message in butter bar if any.
+   * Sets current wallpaper and generate thumbnail if generateThumbnail is true.
+   * @param {ArrayBuffer} wallpaper The binary representation of wallpaper.
+   * @param {string} layout The user selected wallpaper layout.
+   * @param {boolean} generateThumbnail True if need to generate thumbnail.
+   * @param {string} fileName The unique file name of wallpaper.
+   * @param {function(thumbnail):void} success Success callback. If
+   *     generateThumbnail is true, the callback parameter should have the
+   *     generated thumbnail.
+   * @param {function(e):void} failure Failure callback. Called when there is an
+   *     error from FileSystem.
+   */
+  WallpaperManager.prototype.setCustomWallpaper = function(wallpaper,
+                                                           layout,
+                                                           generateThumbnail,
+                                                           fileName,
+                                                           success,
+                                                           failure) {
+    var self = this;
+    var onFinished = function(opt_thumbnail) {
+      if (chrome.runtime.lastError != undefined) {
+        self.showError_(chrome.runtime.lastError.message);
+        $('set-wallpaper-layout').disabled = true;
+      } else {
+        success(opt_thumbnail);
+      }
+    };
+
+    chrome.wallpaperPrivate.setCustomWallpaper(wallpaper, layout,
+                                               generateThumbnail,
+                                               fileName, onFinished);
+  };
+
+  /**
+   * 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 = getSelectedLayout();
+    var self = this;
+    chrome.wallpaperPrivate.setCustomWallpaperLayout(layout, function() {
+      if (chrome.runtime.lastError != undefined) {
+        self.showError_(chrome.runtime.lastError.message);
+        self.removeCustomWallpaper(fileName);
+        $('set-wallpaper-layout').disabled = true;
+      } else {
+        var items = {};
+        items[self.currentWallpaper_] = layout;
+        self.storage_.set(items, function() {});
+      }
+    });
   };
 
   /**
-   * 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 errorHandler = this.onFileSystemError_.bind(this);
+      var toArray = function(list) {
+        return Array.prototype.slice.call(list || [], 0);
+      }
+
+      var self = this;
+      var processResults = function(entries) {
+        for (var i = 0; i < entries.length; i++) {
+          var entry = entries[i];
+          var wallpaperInfo = {
+                baseURL: entry.name,
+                // The layout will be replaced by the actual value saved in
+                // local storage when requested later. Layout is not important
+                // for constructing thumbnails grid, we use CENTER_CROPPED here
+                // to speed up the process of constructing. So we do not need to
+                // wait for fetching correct layout.
+                layout: 'CENTER_CROPPED',
+                source: wallpapers.WallpaperSourceEnum.Custom,
+                availableOffline: true
+          };
+          if (self.currentWallpaper_ == entry.name)
+            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;
+      }
+
+      var success = function(dirEntry) {
+        var dirReader = dirEntry.createReader();
+        var entries = [];
+        // All of a directory's entries are not guaranteed to return in a single
+        // call.
+        var readEntries = function() {
+          dirReader.readEntries(function(results) {
+            if (!results.length) {
+              processResults(entries.sort());
+            } else {
+              entries = entries.concat(toArray(results));
+              readEntries();
+            }
+          }, errorHandler);
+        };
+        readEntries(); // Start reading dirs.
+      }
+      this.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.ORIGINAL,
+                                       success, errorHandler);
     } 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: wallpapers.WallpaperSourceEnum.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;
     }
   };
 
 })();