Added menuItem icon support, and little API for menu modification.

BUG=
TEST=


Review URL: https://chromiumcodereview.appspot.com/10377169

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@137687 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/shared/js/cr/ui/menu.js

@@ -33,6 +33,41 @@ cr.define('cr.ui', function() {
       }
     },
 
+    /**
+     * Adds menu item at the end of the list.
+     * @param {Object} item Menu item properties.
+     * @return {cr.ui.MenuItem} The created menu item.
+     */
+    addMenuItem: function(item) {
+      var menuItem = this.ownerDocument.createElement('menuitem');
+      this.appendChild(menuItem);
+
+      cr.ui.decorate(menuItem, MenuItem);
+
+      if (item.label)
+        menuItem.label = item.label;
+
+      if (item.iconUrl)
+        menuItem.iconUrl = item.iconUrl;
+
+      return menuItem;
+    },
+
+    /**
+     * Adds separator at the end of the list.
+     */
+    addSeparator: function() {
+      var separator = this.ownerDocument.createElement('hr');
+      this.appendChild(separator);
+    },
+
+    /**
+     * Clears menu.
+     */
+    clear: function() {
+      this.textContent = '';
+    },
+
     /**
      * Walks up the ancestors of |el| until a menu item belonging to this menu
      * is found.
@@ -78,6 +113,13 @@ cr.define('cr.ui', function() {
       this.selectedIndex = index;
     },
 
+    /**
+     * Menu length
+     */
+    get length() {
+      return this.children.length;
+    },
+
     /**
      * This is the function that handles keyboard navigation. This is usually
      * called by the element responsible for managing the menu.

chrome/browser/resources/shared/js/cr/ui/menu_item.js

@@ -39,6 +39,10 @@ cr.define('cr.ui', function() {
       // Adding the 'custom-appearance' class prevents widgets.css from changing
       // the appearance of this element.
       this.classList.add('custom-appearance');
+
+      var iconUrl;
+      if ((iconUrl = this.getAttribute('icon')))
+        this.iconUrl = iconUrl;
     },
 
     /**
@@ -91,6 +95,17 @@ cr.define('cr.ui', function() {
       this.textContent = label;
     },
 
+    /**
+     * Menu icon.
+     * @type {string}
+     */
+    get iconUrl() {
+      return this.style.backgroundImage;
+    },
+    set iconUrl(url) {
+      this.style.backgroundImage = 'url(' + url + ')';
+    },
+
     /**
      * @return {boolean} Whether the menu item is a separator.
      */