Hook up custom wallpaper code path to new wallpaper picker.

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

 // Copyright (c) 2012 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.document_ = dialogDom.ownerDocument;
   this.selectedCategory = null;
   this.currentButter_ = null;
   this.fetchManifest_();
   this.initDom_();

[flackr, 2012/08/29 18:43:45]

Initialize "loadedFile_".

[bshe, 2012/08/30 19:22:40]

Done.

 }
 
 // Anonymous 'namespace'.
 // TODO(bshe): Get rid of anonymous namespace.
 (function() {
 
   /**
    * Base URL of the manifest file.
    */
   /** @const */ var ManifestBaseURL = 'http://commondatastorage.googleapis.' +
@@ skipping 74 matching lines @@
     i18nTemplate.process(this.document_, loadTimeData);
     this.initCategoriesList_();
     this.initThumbnailsGrid_();
 
     // Selects the first category in the list as default.
     this.categoriesList_.selectionModel.selectedIndex = 0;
 
     this.dialogDom_.querySelector('#file-selector').addEventListener(
         'change', this.onFileSelectorChanged_.bind(this));
 
+    this.dialogDom_.querySelector('#set-wallpaper-layout').addEventListener(
+        'change', this.onWallpaperLayoutChanged_.bind(this));
+
     this.dialogDom_.ownerDocument.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
 
     this.onResize_();
   };
 
   /**
    * Constructs the thumbnails grid.
    */
   WallpaperManager.prototype.initThumbnailsGrid_ = function() {
@@ skipping 114 matching lines @@
   };
 
   /**
    * Handles the custom wallpaper which user selected from file manager. Called
    * when users select a file.
    */
   WallpaperManager.prototype.onFileSelectorChanged_ = function() {
     var files = this.dialogDom_.querySelector('#file-selector').files;
     if (files.length != 1)
       console.error('More than one files are selected or no file selected');
+    var reader = new FileReader();
+    reader.readAsArrayBuffer(files[0]);
+    var self = this;

[flackr, 2012/08/29 18:43:45]

Add TODO to handle onerror.

[bshe, 2012/08/30 19:22:40]

Done.

+    reader.onload = function(e) {

[Ivan Korotkov, 2012/08/30 14:07:36]

Use addEventListener

[bshe, 2012/08/30 19:22:40]

Looks like some other places use the same .onload/.onloadend pattern.
http://code.google.com/searchframe#OAMlx_jo-ck/src/chrome/browser/resources/f...
Should I keep it consistent or do you still prefer to use addEventListener?
On 2012/08/30 14:07:36, Ivan Korotkov wrote:

+      self.loadedFile_ = e.target.result;
+      self.refreshWallpaper_();
+    };
     this.generateThumbnail_(files[0]);
   };
 
   /**
+   * Refreshes the custom wallpaper with the current selected layout.
+   */
+  WallpaperManager.prototype.refreshWallpaper_ = function() {
+    var setWallpaperLayout =
+        this.dialogDom_.querySelector('#set-wallpaper-layout');

[Ivan Korotkov, 2012/08/30 14:07:36]

Could be just $('set-wallpaper-layout');

[bshe, 2012/08/30 19:22:40]

I followed file manager js coding style. Not sure why $ is not used in there.
Happy to change it to $('') pattern if wallpaper manager do not apply the
restriction file manager may have. +dgozman

On 2012/08/30 14:07:36, Ivan Korotkov wrote:

[dgozman, 2012/08/31 09:20:08]

Well, we just don't like it. It can be also confused with jQuery, which is not
used.

+    var layout =
+        setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
+    if (this.loadedFile_) {

[flackr, 2012/08/29 18:43:45]

I think you should guarantee that loadedFile_ is set before calling this
function and perhaps pass it in as a required parameter.

Also, can we change loadedFile to be more descriptive. Perhaps
customWallpaperData_.

[bshe, 2012/08/30 19:22:40]

Done.

+      chrome.wallpaperPrivate.setCustomWallpaper(this.loadedFile_,
+                                                 layout);
+    }
+  };
+
+  /**
+   * Handles the layout setting change of custom wallpaper.
+   */
+  WallpaperManager.prototype.onWallpaperLayoutChanged_ = function() {
+    this.refreshWallpaper_();

[flackr, 2012/08/29 18:43:45]

i.e. if (this.loadedFile_)
        this.refreshWallpaper_(this.loadedFile_);

[bshe, 2012/08/30 19:22:40]

Done.

+  };
+
+  /**
    * 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 = this.dialogDom_.querySelector('#preview');
     img.file = file;
     var reader = new FileReader();
     reader.onload = function(e) {
       img.src = e.target.result;
     };
@@ skipping 41 matching lines @@
             authorWebsite: this.manifest_.wallpaper_list[key].author_website
           };
           wallpapersDataModel.push(wallpaperInfo);
         }
       }
       this.wallpaperGrid_.dataModel = wallpapersDataModel;
     }
   };
 
 })();