Implement user selected wallpaper feature.

chrome/browser/resources/options2/chromeos/set_wallpaper_options.js

Index: chrome/browser/resources/options2/chromeos/set_wallpaper_options.js
diff --git a/chrome/browser/resources/options2/chromeos/set_wallpaper_options.js b/chrome/browser/resources/options2/chromeos/set_wallpaper_options.js
index cfc398c8db977f3abdb4fadcbb6ab59b66792f4d..c516be699b7aa81c55198ee6b3cd54bb0bbf77f8 100644
--- a/chrome/browser/resources/options2/chromeos/set_wallpaper_options.js
+++ b/chrome/browser/resources/options2/chromeos/set_wallpaper_options.js
@@ -7,6 +7,8 @@ cr.define('options', function() {
   var OptionsPage = options.OptionsPage;
   var UserImagesGrid = options.UserImagesGrid;
 
+  /** @const */ var CustomWallpaperPrefix = 'chrome://wallpaper/custom_';

[James Hawkins, 2012/05/06 15:49:50]

nit: Variables start lowerCase.

However, this is a const so it should be all caps.

[bshe, 2012/05/08 22:22:18]

Done.

+
   /////////////////////////////////////////////////////////////////////////////
   // SetWallpaperOptions class:
 
@@ -47,6 +49,10 @@ cr.define('options', function() {
 
       $('random-wallpaper-checkbox').addEventListener('click',
           this.handleCheckboxClick_.bind(this));
+      $('set-custome-wallpaper').addEventListener('click',
+          this.handleChooseFile_);
+      $('set-wallpaper-layout').addEventListener('change',
+          this.handleLayoutChange_);
       $('set-wallpaper-overlay-confirm').onclick = function() {
         OptionsPage.closeOverlay();
       };
@@ -54,6 +60,8 @@ cr.define('options', function() {
       // @type {Array.<author: string, url: string, website: string>}
       this.wallpapers_ = [];
 
+      this.oldImage_ = null;

[James Hawkins, 2012/05/06 15:49:50]

Document.

[bshe, 2012/05/08 22:22:18]

Done.

+
       chrome.send('onSetWallpaperPageInitialized');
     },
 
@@ -76,6 +84,11 @@ cr.define('options', function() {
     willHidePage: function() {
       var wallpaperGrid = $('wallpaper-grid');
       wallpaperGrid.blur();
+      if (this.oldImage_) {
+        wallpaperGrid.removeItem(this.oldImage_);
+        this.oldImage_ = null;
+      }
+      $('set-wallpaper-layout').innerText = '';
     },
 
     /**
@@ -96,6 +109,45 @@ cr.define('options', function() {
     },
 
     /**
+     * Populate the drop down box for custom wallpaper layout.
+     * param {string} layouts Available wallpaper layout.

[flackr, 2012/05/04 19:06:17]

s/layout/layouts

[bshe, 2012/05/08 22:22:18]

Done.

+     * param {number} selectedLayout The value of selected/default layout.
+     * @private
+     */
+    populateWallpaperLayout_: function(layouts, selectedLayout) {

[flackr, 2012/05/04 19:06:17]

s/populateWallpaperLayout/populateWallpaperLayouts

[bshe, 2012/05/08 22:22:18]

Done.

+      var wallpaperLayout = $('set-wallpaper-layout');
+      var selectedIndex = -1;
+      for (var i = 0; i < layouts.length; i++) {
+        var option = new Option(layouts[i]['name'], layouts[i]['index']);
+        if (selectedLayout == option.value)
+          selectedIndex = i;
+        wallpaperLayout.appendChild(option);
+      }
+      if (selectedIndex >= 0)
+        wallpaperLayout.selectedIndex = selectedIndex;
+    },
+
+    /**
+     * Handles "Custom..." button activation.
+     * @private
+     */
+    handleChooseFile_: function() {
+      chrome.send('chooseWallpaper');
+    },
+
+    /**
+     * Handle the wallpaper layout setting change.
+     * @private
+     */
+    handleLayoutChange_: function() {
+      var setWallpaperLayout = $('set-wallpaper-layout');
+      var layout = setWallpaperLayout.options[
+          setWallpaperLayout.selectedIndex].value;
+      //var value = event.target.options[event.target.selectedIndex].value;

[flackr, 2012/05/04 19:06:17]

Remove commented code.

[bshe, 2012/05/08 22:22:18]

Done.

+      chrome.send('changeWallpaperLayout', [layout]);
+    },
+
+    /**
      * Handles image selection change.
      * @private
      */
@@ -104,8 +156,19 @@ cr.define('options', function() {
       var url = wallpaperGrid.selectedItemUrl;
       if (url &&
           !wallpaperGrid.inProgramSelection) {
+        if (url.indexOf(CustomWallpaperPrefix) != -1) {

[flackr, 2012/05/04 19:06:17]

This is strictly a prefix right? Maybe if == 0?

[bshe, 2012/05/08 22:22:18]

Done.

+          // User custom wallpaper is selected
+          $('set-wallpaper-layout').hidden = false;
+          $('attribution-label').hidden = true;
+          // When users select the custom wallpaper thumbnail from picker UI,
+          // use the saved layout value and redraw the wallpaper.
+          this.handleLayoutChange_();
+        } else {
+          $('set-wallpaper-layout').hidden = true;
+          $('attribution-label').hidden = false;
+          chrome.send('selectDefaultWallpaper', [url]);
+        }
         this.setWallpaperAttribution_(url);
-        chrome.send('selectDefaultWallpaper', [url]);
       }
     },
 
@@ -130,8 +193,10 @@ cr.define('options', function() {
       var wallpaperGrid = $('wallpaper-grid');
       if ($('random-wallpaper-checkbox').checked) {
         wallpaperGrid.disabled = true;
+        $('attribution-label').hidden = false;
         chrome.send('selectRandomWallpaper');
         wallpaperGrid.classList.add('grayout');
+        $('set-wallpaper-layout').hidden = true;
       } else {
         wallpaperGrid.disabled = false;
         wallpaperGrid.classList.remove('grayout');
@@ -179,12 +244,59 @@ cr.define('options', function() {
       }
     },
 
+    /**
+     * Called when user select a valid file from file system. Display layout
+     * drop down box and disable random mode if enabled.
+     */
+    didSelectFile_: function() {
+      $('set-wallpaper-layout').hidden = false;
+      var wallpaperGrid = $('wallpaper-grid');
+      if ($('random-wallpaper-checkbox').checked) {
+        $('random-wallpaper-checkbox').checked = false;
+        wallpaperGrid.disabled = false;
+        wallpaperGrid.classList.remove('grayout');
+      }
+    },
+
+    /**
+     * Get url of current user's custom wallpaper thumbnail.
+     */
+    get currentWallpaperImageUrl() {
+      return CustomWallpaperPrefix + BrowserOptions.getLoggedInUsername() +
+          '?id=' + (new Date()).getTime();

[flackr, 2012/05/04 19:06:17]

This is non-trivial and non-deterministic, I think you should use a regular
function for this.

[bshe, 2012/05/08 22:22:18]

Done.

+    },
+
+    /**
+     * Adds or updates custom user wallpaper thumbnail from file.
+     * @private
+     */
+    setCustomImage_: function() {
+      var wallpaperGrid = $('wallpaper-grid');
+      var url = this.currentWallpaperImageUrl;
+      if (this.oldImage_) {
+        this.oldImage_ = wallpaperGrid.updateItem(this.oldImage_, url);
+      } else {
+        // Insert to the end of wallpaper list.
+        var pos = wallpaperGrid.length;
+        this.oldImage_ = wallpaperGrid.addItem(url, undefined, undefined, pos);
+      }
+
+      // Clear attributions for custom wallpaper.
+      $('attribution-label').hidden = true;
+      this.setWallpaperAttribution_('');
+      wallpaperGrid.selectedItem = this.oldImage_;
+      // Enable the layout drop down box when custom wallpaper is selected.
+      $('set-wallpaper-layout').hidden = false;

[flackr, 2012/05/04 19:06:17]

We're updating the visibility of attribution-label and set-wallpaper-layout in
many places with the same conditions (custom, !custom), this should be
consolidated this into a single method.

[bshe, 2012/05/08 22:22:18]

Done.

+    },
   };
 
   // Forward public APIs to private implementations.
   [
     'setDefaultImages',
-    'setSelectedImage'
+    'setSelectedImage',
+    'populateWallpaperLayout',
+    'didSelectFile',
+    'setCustomImage'
   ].forEach(function(name) {
     SetWallpaperOptions[name] = function() {
       var instance = SetWallpaperOptions.getInstance();