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

This CL in order to add the icon implements a cr.ui.ProvidersMenuItem class
since cr.ui.MenuItem doesn't handle icons with hidpi properly, nor it supports
well custom icons (setting a label overwrites any inserted DOM elements to the
menu item).

TEST=Tested manually.
BUG=474146

Review URL: https://codereview.chromium.org/1132843004

Cr-Commit-Position: refs/heads/master@{#329369}

ui/file_manager/file_manager/foreground/css/file_types.css

@@ -325,16 +325,22 @@ tree .tree-item[selected] > .tree-row > .shared[file-type-icon='folder'] {
 }
 
 .tree-row:not([selected]) [volume-type-icon='provided'],
-cr-menu-item .menu-icon {
+cr-menu-item.providers-menu-item .menu-icon {
   /* Apply the rgb(90, 90, 90) mask. */
   -webkit-filter: contrast(0) brightness(0.7143);
 }
 
-cr-menu-item[selected] .menu-icon {
+cr-menu-item.providers-menu-item[selected] .menu-icon {
   /* Apply the rgb(255, 255, 255) mask. */
   -webkit-filter: contrast(0) brightness(2);
 }
 
+cr-menu-item.providers-menu-item[command='#install-new-extension'] .menu-icon {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/store.png) 1x,
+      url(../images/files/ui/2x/store.png) 2x);
+}
+
 .tree-row [menu-button-icon='add-new-services'] {
   background-image: -webkit-image-set(
       url(../images/volumes/add.png) 1x,

ui/file_manager/file_manager/foreground/css/menu.css

@@ -41,8 +41,9 @@ html[dir='rtl'] cr-menu > [shortcutText]::after {
   float: left;
 }
 
-/* Icon on the left of the item label. */
-cr-menu-item .menu-icon {
+/* Icon on the left of the item label for cr.ui.ProvidersMenuItem.
+   TODO(mtomasz): Upstream to cr.ui.MenuItem. */
+cr-menu-item.providers-menu-item .menu-icon {
   -webkit-margin-end: 12px;
   background: no-repeat 0 center;
   display: inline-block;
@@ -51,6 +52,6 @@ cr-menu-item .menu-icon {
   width: 16px;
 }
 
-html[dir='rtl'] cr-menu-item .menu-icon {
+html[dir='rtl'] cr-menu-item.providers-menu-item .menu-icon {
   float: right;
 }

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() {
+      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));
@@ -50,23 +119,28 @@ 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));