[Files app] ES6 class for ui/file_manager/file_manager/foreground/js/ui/commandbutton.js

Conversion done manually.

Added static method "decorate" since it isn't using cr.ui.define anymore. This is the
same idea used in FileTable, ComboButton, ProgressCenterItemElement and DirectoryTree.

Manually tested "refresh" button triggering its command.

Bug: 778674
Change-Id: Ib01207f6336d9f003d6c6d159ca4cc20ebab7e96
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626843
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
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@{#662982}

ui/file_manager/file_manager/foreground/js/ui/commandbutton.js

@@ -8,48 +8,55 @@
 
 /**
  * Creates a new button element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
  * @extends {HTMLButtonElement}
  */
-const CommandButton = cr.ui.define('button');
-
-/** @override */
-CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;
-
-/**
+class CommandButton {
+  constructor() {
+    /**
      * Associated command.
- * @type {cr.ui.Command}
- * @private
+     * @private {cr.ui.Command}
      */
-CommandButton.prototype.command_ = null;
+    this.command_ = null;
+  }
 
-/**
+  /**
+   * Decorates the given element as a progress item.
+   * @param {!Element} element Item to be decorated.
+   * @return {!CommandButton} Decorated item.
+   */
+  static decorate(element) {
+    element.__proto__ = CommandButton.prototype;
+    element = /** @type {!CommandButton} */ (element);
+    element.decorate();
+    return element;
+  }
+
+  /**
    * Initializes the menu item.
    */
-CommandButton.prototype.decorate = function() {
+  decorate() {
     let commandId;
     if ((commandId = this.getAttribute('command'))) {
       this.setCommand(commandId);
     }
 
     this.addEventListener('click', this.handleClick_.bind(this));
-};
+  }
 
-/**
+  /**
    * Returns associated command.
    * @return {cr.ui.Command} associated command.
    */
-CommandButton.prototype.getCommand = function() {
+  getCommand() {
     return this.command_;
-};
+  }
 
-/**
+  /**
    * Associates command with this button.
    * @param {string|cr.ui.Command} command Command id, or command object to
    * associate with this button.
    */
-CommandButton.prototype.setCommand = function(command) {
+  setCommand(command) {
     if (this.command_) {
       this.command_.removeEventListener(
           'labelChange',
@@ -89,23 +96,23 @@ CommandButton.prototype.setCommand = function(command) {
           'hiddenChange',
           /** @type {EventListener} */ (this));
     }
-};
+  }
 
-/**
+  /**
    * Returns button label
    * @return {string} Button label.
    */
-CommandButton.prototype.getLabel = function() {
+  getLabel() {
     return this.command_ ? this.command_.label : '';
-};
+  }
 
-/**
+  /**
    * Sets button label.
    * @param {string} label New button label.
    */
-CommandButton.prototype.setLabel = function(label) {
-  // Swap the textContent with current label only when this button doesn't have
-  // any elements as children.
+  setLabel(label) {
+    // Swap the textContent with current label only when this button doesn't
+    // have any elements as children.
     //
     // TODO(fukino): If a user customize the button content, it becomes the
     // user's responsibility to update the content on command label's change.
@@ -115,24 +122,24 @@ CommandButton.prototype.setLabel = function(label) {
     if (!this.firstElementChild) {
       this.textContent = label;
     }
-};
+  }
 
-/**
+  /**
    * Handles click event and dispatches associated command.
    * @param {Event} e The mouseup event object.
    * @private
    */
-CommandButton.prototype.handleClick_ = function(e) {
+  handleClick_(e) {
     if (!this.disabled && this.command_) {
       this.command_.execute(this);
     }
-};
+  }
 
-/**
+  /**
    * Handles changes to the associated command.
    * @param {Event} e The event object.
    */
-CommandButton.prototype.handleEvent = function(e) {
+  handleEvent(e) {
     switch (e.type) {
       case 'disabledChange':
         this.disabled = this.command_.disabled;
@@ -144,7 +151,10 @@ CommandButton.prototype.handleEvent = function(e) {
         this.setLabel(this.command_.label);
         break;
     }
-};
+  }
+}
+
+CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;
 
 /**
  * Whether the button is disabled or not.