New custom wallpaper picker UI

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.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.
 
 cr.define('wallpapers', function() {
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var Grid = cr.ui.Grid;
   /** @const */ var GridItem = cr.ui.GridItem;
   /** @const */ var GridSelectionController = cr.ui.GridSelectionController;
   /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
   /** @const */ var ThumbnailSuffix = '_thumbnail.png';
 
   /**
+   * Wallpaper sources enum.
+   */
+  /** #const */ var WallpaperSourceEnum = {
+                    Online: 'ONLINE',
+                    Custom: 'CUSTOM',
+                    AddNew: 'ADDNEW'
+                };
+
+  /**
    * Creates a new wallpaper thumbnails grid item.
-   * @param {{baseURL: string, dynamicURL: string, layout: string,
-   *          author: string, authorWebsite: string, availableOffline: boolean}}
-   *     wallpaperInfo Wallpaper baseURL, dynamicURL, layout, author and
-   *     author website.
+   * @param {{baseURL: string, layout: string, source: string,
+   *          availableOffline: boolean, opt_dynamicURL: string,
+   *          opt_author: string, opt_authorWebsite: string}}
+   *     wallpaperInfo Wallpaper data item in WallpaperThumbnailsGrid's data
+   *     model.
    * @constructor
    * @extends {cr.ui.GridItem}
    */
   function WallpaperThumbnailsGridItem(wallpaperInfo) {
     var el = new GridItem(wallpaperInfo);
     el.__proto__ = WallpaperThumbnailsGridItem.prototype;
     return el;
   }
 
   WallpaperThumbnailsGridItem.prototype = {
     __proto__: GridItem.prototype,
 
     /** @override */
     decorate: function() {
       GridItem.prototype.decorate.call(this);
       // Removes garbage created by GridItem.
       this.innerText = '';
       var imageEl = cr.doc.createElement('img');
       imageEl.classList.add('thumbnail');
       cr.defineProperty(imageEl, 'offline', cr.PropertyKind.BOOL_ATTR);
       imageEl.offline = this.dataItem.availableOffline;
       this.appendChild(imageEl);
+      var self = this;
 
-      var self = this;
-      chrome.wallpaperPrivate.getThumbnail(this.dataItem.baseURL, 'ONLINE',
-                                           function(data) {
-        if (data) {
-          var blob = new Blob([new Int8Array(data)], {'type' : 'image\/png'});
-          imageEl.src = window.URL.createObjectURL(blob);
-          imageEl.addEventListener('load', function(e) {
-            window.URL.revokeObjectURL(this.src);
+      switch (this.dataItem.source) {
+        case WallpaperSourceEnum.AddNew:
+          this.id = 'add-new';
+          this.addEventListener('click', function(e) {
+            $('wallpaper-selection-container').hidden = false;
           });
-        } else {
-          var xhr = new XMLHttpRequest();
-          xhr.open('GET', self.dataItem.baseURL + ThumbnailSuffix, true);
-          xhr.responseType = 'arraybuffer';
-          xhr.send(null);
-          xhr.addEventListener('load', function(e) {
-            if (xhr.status === 200) {
-              chrome.wallpaperPrivate.saveThumbnail(self.dataItem.baseURL,
-                                                    xhr.response);
-              var blob = new Blob([new Int8Array(xhr.response)],
-                                  {'type' : 'image\/png'});
+          break;
+        case WallpaperSourceEnum.Custom:
+          var errorHandler = function(e) {
+            console.error('Can not access file system.');
+          };
+          var wallpaperDirectories = WallpaperDirectories.getInstance();
+          var getThumbnail = function(fileName) {
+            var setURL = function(fileEntry) {
+              imageEl.src = fileEntry.toURL();
+            };
+            var fallback = function() {
+              wallpaperDirectories.getDirectory(WallpaperDirNameEnum.ORIGINAL,
+                                          function(dirEntry) {
+                dirEntry.getFile(fileName, {create: false}, setURL,
+                                 errorHandler);
+              }, errorHandler);
+            };
+            var success = function(dirEntry) {
+              dirEntry.getFile(fileName, {create: false}, setURL, fallback);
+            };
+            wallpaperDirectories.getDirectory(WallpaperDirNameEnum.THUMBNAIL,
+                                              success,
+                                              errorHandler);
+          }
+          getThumbnail(self.dataItem.baseURL);
+          break;
+        case WallpaperSourceEnum.Online:
+          chrome.wallpaperPrivate.getThumbnail(this.dataItem.baseURL,
+                                               this.dataItem.source,
+                                               function(data) {
+            if (data) {
+              var blob = new Blob([new Int8Array(data)],
+                                  {'type': 'image\/png'});
               imageEl.src = window.URL.createObjectURL(blob);
-              // TODO(bshe): We currently use empty div to reserve space for
-              // thumbnail. Use a placeholder like "loading" image may better.
               imageEl.addEventListener('load', function(e) {
                 window.URL.revokeObjectURL(this.src);
               });
+            } else if (self.dataItem.source == WallpaperSourceEnum.Online) {
+              var xhr = new XMLHttpRequest();
+              xhr.open('GET', self.dataItem.baseURL + ThumbnailSuffix, true);
+              xhr.responseType = 'arraybuffer';
+              xhr.send(null);
+              xhr.addEventListener('load', function(e) {
+                if (xhr.status === 200) {
+                  chrome.wallpaperPrivate.saveThumbnail(self.dataItem.baseURL,
+                                                        xhr.response);
+                  var blob = new Blob([new Int8Array(xhr.response)],
+                                      {'type' : 'image\/png'});
+                  imageEl.src = window.URL.createObjectURL(blob);
+                  // TODO(bshe): We currently use empty div to reserve space for
+                  // thumbnail. Use a placeholder like "loading" image may
+                  // better.
+                  imageEl.addEventListener('load', function(e) {
+                    window.URL.revokeObjectURL(this.src);
+                  });
+                }
+              });
             }
           });
-        }
-      });
+          break;
+        default:
+          console.error('Unsupported image source.');
+      }
     },
   };
 
   /**
    * Creates a selection controller that wraps selection on grid ends
    * and translates Enter presses into 'activate' events.
    * @param {cr.ui.ListSelectionModel} selectionModel The selection model to
    *     interact with.
    * @param {cr.ui.Grid} grid The grid to interact with.
    * @constructor
@@ skipping 151 matching lines @@
      */
     redraw: function() {
       Grid.prototype.redraw.call(this);
       // The active thumbnail maybe deleted in the above redraw(). Sets it again
       // to make sure checkmark shows correctly.
       this.updateActiveThumb_();
     }
   };
 
   return {
+    WallpaperSourceEnum: WallpaperSourceEnum,
     WallpaperThumbnailsGrid: WallpaperThumbnailsGrid
   };
 });