Add an icon to "Install new extensions" in the providers popup menu.

ui/file_manager/file_manager/foreground/js/ui/providers_menu.js

Index: ui/file_manager/file_manager/foreground/js/ui/providers_menu.js
diff --git a/ui/file_manager/file_manager/foreground/js/ui/providers_menu.js b/ui/file_manager/file_manager/foreground/js/ui/providers_menu.js
index 2242d1a637c4141e8cbd90ba8e6c0908deffe4f1..3191458ad4fe2ff9b27f77907b18a5e212df50d9 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/providers_menu.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/providers_menu.js
@@ -2,6 +2,75 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+cr.define('cr.ui', function() {
+  /**
+   * Extends cr.ui.MenuItem with a hi-dpi friendly icon on the left.
+   * TODO(mtomasz): Upstream to cr.ui.MenuItem.
+   * @constructor
+   * @extends {cr.ui.MenuItem}
+   */
+  var ProvidersMenuItem = cr.ui.define(cr.ui.MenuItem);
+
+  ProvidersMenuItem.prototype = {
+    __proto__: cr.ui.MenuItem.prototype,
+
+    /**
+     * @private {Element}
+     */
+    icon_: null,
+
+    /**
+     * @private {Element}
+     */
+    label_: null,
+
+    /**
+     * @override
+     */
+    decorate: function() {
+      cr.ui.MenuItem.call(this);
+      this.classList.add('providers-menu-item');
+      this.icon_ = this.ownerDocument.createElement('div');
+      this.icon_.className = 'menu-icon';
+      this.appendChild(this.icon_);
+      this.label_ = this.ownerDocument.createElement('span');
+      this.appendChild(this.label_);
+    },
+
+    /**
+     * @return {string}
+     */
+    get leftIconImage() {

[hirono, 2015/05/12 05:56:45]

Cannot we override iconUrl?

[mtomasz, 2015/05/12 06:01:04]

IMHO the naming would be confusing. The value of it is not a url anymore.

[hirono, 2015/05/12 06:56:56]

Having both iconUrl and leftIconImage is also a bit confusing to me. And
leftIconImage sounds the property takes Image object. My preference is
overriding iconUrl and renaming the property when you upstream the change to
cr.ui.MenuItem. But it's up to you.

If you choose adding new property for icon, just 'iconImage' may be better.
'left' is sometimes ambiguous in the context of RTL. Actually this is an icon
placed at the begin edge. But 'beginIconImage' sounds wrong.

[mtomasz, 2015/05/12 07:11:21]

My idea here was to just extend MenuItem and add new features, without changing
existing ones. So ProvidedMenuItem supports two types of icons: legacy one (only
low-dpi) and the new one on the left.

Indeed leftIconImage may be confusing, as well as iconUrl which doesn't hold a
url. How about renaming leftIconImage to extraIcon and when upstreaming combine
"iconUrl" and "extraIcon" into simply "icon"?

+      return this.icon_.style.backgroundImage;
+    },
+
+    /**
+     * @param {string} image
+     */
+    set leftIconImage(image) {
+      this.icon_.setAttribute('style', 'background-image: ' + image);
+    },
+
+    /**
+     * @override
+     */
+    get label() {
+      return this.label_.textContent;
+    },
+
+    /**
+     * @override
+     */
+    set label(label) {
+      this.label_.textContent = label;
+    }
+  };
+
+  return {
+    ProvidersMenuItem: ProvidersMenuItem
+  }
+});
+
 /**
  * Fills out the menu for mounting or installing new providers.
  *
@@ -32,7 +101,7 @@ function ProvidersMenu(model, menu) {
    */
   this.separator_ = assert(this.menu_.firstElementChild);
 
-  var installItem = this.menu_.addMenuItem({});
+  var installItem = this.addMenuItem_();
   installItem.command = '#install-new-extension';
 
   this.menu_.addEventListener('update', this.onUpdate_.bind(this));
@@ -51,22 +120,27 @@ ProvidersMenu.prototype.clearExtensions_ = function() {
 };
 
 /**
+ * @return {cr.ui.ProvidersMenuItem}
+ */
+ProvidersMenu.prototype.addMenuItem_ = function() {
+  var menuItem = this.menu_.addMenuItem({});
+  cr.ui.decorate(/** @type {!Element} */ (menuItem), cr.ui.ProvidersMenuItem);
+  return /** @type {cr.ui.ProvidersMenuItem} */ (menuItem);
+};
+
+/**
  * @param {string} extensionId
  * @param {string} extensionName
  * @private
  */
 ProvidersMenu.prototype.addExtension_ = function(extensionId, extensionName) {
-  var item = this.menu_.addMenuItem({
-    label: extensionName
-  });
+  var item = this.addMenuItem_();
+  item.label = extensionName;
 
-  var icon = this.menu_.ownerDocument.createElement('div');
-  icon.className = 'menu-icon';
   var iconImage = '-webkit-image-set(' +
       'url(chrome://extension-icon/' + extensionId + '/16/1) 1x, ' +
       'url(chrome://extension-icon/' + extensionId + '/32/1) 2x);';
-  icon.setAttribute('style', 'background-image: ' + iconImage);
-  item.insertBefore(icon, item.firstChild);
+  item.leftIconImage = iconImage;
 
   item.addEventListener(
       'activate', this.onItemActivate_.bind(this, extensionId));