Add wallpaper experimental api framework and add a simple category list.

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
+ * picker dialogs.
+ *
+ * @constructor
+ * @param {HTMLElement} dialogDom The DOM node containing the prototypical
+ *     dialog UI.
+ */
+
+function WallpaperManager(dialogDom) {
+  this.dialogDom_ = dialogDom;
+  this.document_ = dialogDom.ownerDocument;
+  this.selectedCategory = null;
+  this.initDom_();
+}
+
+// Anonymous "namespace".
+(function() {
+
+  /**
+   * Translated strings.
+   */
+  var localStrings;
+
+  function CategoryItem(wallpaperManager, label) {
+    var li = wallpaperManager.document_.createElement('li');
+    li.innerText = label;
+    li.addEventListener('click',
+        wallpaperManager.onCategoryItemClicked.bind(wallpaperManager));
+    return li;
+  }
+
+  /**
+   * Return a translated string.
+   *
+   * Wrapper function to make dealing with translated strings more concise.
+   * Equivilant to localStrings.getString(id).
+   *
+   * @param {string} id The id of the string to return.
+   * @return {string} The translated string.
+   */
+  function str(id) {
+    return localStrings.getString(id) || ('UNLOCALIZED STRING ' + id);
+  }
+
+  /**
+   * Load translated strings.
+   */
+  WallpaperManager.initStrings = function(callback) {
+    chrome.experimental.wallpaperManager.getStrings(function(strings) {
+      localStrings = new LocalStrings(strings);
+      if (callback)
+        callback();
+    });
+  };
+
+  WallpaperManager.prototype.createCategoryItem_ = function(label) {

[flackr, 2012/07/12 19:40:51]

Document.

+    var li = this.document_.createElement('li');
+    li.innerText = label;
+    li.addEventListener('click', this.onCategoryItemClicked.bind(this));
+    return li;
+  };
+
+  /**
+   * One-time initialization of various DOM nodes.
+   */
+  WallpaperManager.prototype.initDom_ = function() {
+    this.categoriesList = this.dialogDom_.querySelector('#categories-list');
+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('FEATURED_LABEL')));

[flackr, 2012/07/12 19:40:51]

Perhaps createCategoryItem should also add the category to the categories list?

+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('NATURE_LABEL')));
+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('ABSTRACT_LABEL')));
+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('URBAN_LABEL')));
+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('COLORS_LABEL')));
+    this.categoriesList.appendChild(
+        this.createCategoryItem_(str('CUSTOM_LABEL')));
+  };
+
+  WallpaperManager.prototype.onCategoryItemClicked = function(e) {
+    var newSelection = e.currentTarget;
+    if (this.selectedCategory == newSelection)
+      return;
+
+    newSelection.classList.add('selected');
+    if (this.selectedCategory)
+      this.selectedCategory.classList.remove('selected');
+    this.selectedCategory = newSelection;
+  };
+
+})();