[Files app] ES6 class for ComboButton

|cr.define| used for this element doesn't support inheritance properly
[1], so to make the inheritance work with |cr.define| parent element
|cr.ui.MenuButton| added a static |decorate| method which is called by
the rest of |cr| framework and in this method inject back the prototype
in the same way it happens in the |cr.ui.define| [2].

[1] - https://cs.chromium.org/chromium/src/ui/webui/resources/js/cr.js?l=269-281
[2] - https://cs.chromium.org/chromium/src/ui/webui/resources/js/cr/ui.js?l=97-100

Test: Manually checked that the component is working in addition to normal integration tests
Bug: 778674
Change-Id: I9531c517c6a31b01e23fb42c3d8aec70081b8712
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1614725
Commit-Queue: François Degros <fdegros@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: François Degros <fdegros@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660634}

ui/file_manager/file_manager/foreground/js/ui/combobutton.js

@@ -4,31 +4,37 @@
 
 /**
  * @fileoverview This implements a combobutton control.
- * TODO(yawano): Migrate combobutton to Polymer element.
  */
 cr.define('cr.ui', () => {
   /**
-   * Creates a new combobutton element.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   * @extends {cr.ui.MenuButton}
+   * Creates a new combo button element.
    */
-  const ComboButton = cr.ui.define(cr.ui.MenuButton);
+  class ComboButton extends cr.ui.MenuButton {
+    /**
+     * @param {Object=} opt_propertyBag Optional properties.
+     */
+    constructor(opt_propertyBag) {
+      super(opt_propertyBag);
+
+      /** @private {?cr.ui.MenuItem} */
+      this.defaultItem_ = null;
 
-  ComboButton.prototype = {
-    __proto__: cr.ui.MenuButton.prototype,
+      /** @private {?Element} */
+      this.trigger_ = null;
 
-    defaultItem_: null,
+      /** @private {?Element} */
+      this.actionNode_ = null;
+    }
 
     /**
      * Truncates drop-down list.
      */
-    clear: function() {
+    clear() {
       this.menu.clear();
       this.multiple = false;
-    },
+    }
 
-    addDropDownItem: function(item) {
+    addDropDownItem(item) {
       this.multiple = true;
       const menuitem = this.menu.addMenuItem(item);
 
@@ -46,30 +52,41 @@ cr.define('cr.ui', () => {
         menuitem.style.fontWeight = 'bold';
       }
       return menuitem;
-    },
+    }
 
     /**
      * Adds separator to drop-down list.
      */
-    addSeparator: function() {
+    addSeparator() {
       this.menu.addSeparator();
-    },
+    }
 
     /**
      * Default item to fire on combobox click
      */
     get defaultItem() {
       return this.defaultItem_;
-    },
+    }
     set defaultItem(defaultItem) {
       this.defaultItem_ = defaultItem;
       this.actionNode_.textContent = defaultItem.label || '';
-    },
+    }
+
+    /**
+     * cr.ui.decorate expects a static |decorate| method.
+     *
+     * @param {HTMLElement} el Element to be ComboButton.
+     * @public
+     */
+    static decorate(el) {
+      el.__proto__ = cr.ui.ComboButton.prototype;
+      el.decorate();
+    }
 
     /**
      * Initializes the element.
      */
-    decorate: function() {
+    decorate() {
       cr.ui.MenuButton.prototype.decorate.call(this);
 
       this.classList.add('combobutton');
@@ -118,12 +135,12 @@ cr.define('cr.ui', () => {
       // and move it down to trigger_.
       this.removeEventListener('mousedown', this);
       this.trigger_.addEventListener('mousedown', this);
-    },
+    }
 
     /**
      * Handles the keydown event for the menu button.
      */
-    handleKeyDown: function(e) {
+    handleKeyDown(e) {
       switch (e.key) {
         case 'ArrowDown':
         case 'ArrowUp':
@@ -136,17 +153,17 @@ cr.define('cr.ui', () => {
           this.hideMenu();
           break;
       }
-    },
+    }
 
-    handleTriggerClicked_: function(event) {
+    handleTriggerClicked_(event) {
       event.stopPropagation();
-    },
+    }
 
-    handleMenuActivate_: function(event) {
+    handleMenuActivate_(event) {
       this.dispatchSelectEvent(event.target.data);
-    },
+    }
 
-    handleButtonClick_: function(event) {
+    handleButtonClick_(event) {
       if (this.multiple) {
         // When there are multiple choices just show/hide menu.
         if (this.isMenuShown()) {
@@ -160,22 +177,22 @@ cr.define('cr.ui', () => {
         this.blur();
         this.dispatchSelectEvent(this.defaultItem_);
       }
-    },
+    }
 
-    handleMenuShow_: function() {
+    handleMenuShow_() {
       this.filesToggleRipple_.activated = true;
-    },
+    }
 
-    handleMenuHide_: function() {
+    handleMenuHide_() {
       this.filesToggleRipple_.activated = false;
-    },
+    }
 
-    dispatchSelectEvent: function(item) {
+    dispatchSelectEvent(item) {
       const selectEvent = new Event('select');
       selectEvent.item = item;
       this.dispatchEvent(selectEvent);
     }
-  };
+  }
 
   cr.defineProperty(ComboButton, 'disabled', cr.PropertyKind.BOOL_ATTR);
   cr.defineProperty(ComboButton, 'multiple', cr.PropertyKind.BOOL_ATTR);