[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,143 +8,153 @@
 
 /**
  * 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;
-
-/**
- * Associated command.
- * @type {cr.ui.Command}
- * @private
- */
-CommandButton.prototype.command_ = null;
-
-/**
- * Initializes the menu item.
- */
-CommandButton.prototype.decorate = function() {
-  let commandId;
-  if ((commandId = this.getAttribute('command'))) {
-    this.setCommand(commandId);
+class CommandButton {
+  constructor() {
+    /**
+     * Associated command.
+     * @private {cr.ui.Command}
+     */
+    this.command_ = null;
   }
 
-  this.addEventListener('click', this.handleClick_.bind(this));
-};
+  /**
+   * 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;
+  }
 
-/**
- * Returns associated command.
- * @return {cr.ui.Command} associated command.
- */
-CommandButton.prototype.getCommand = function() {
-  return this.command_;
-};
+  /**
+   * Initializes the menu item.
+   */
+  decorate() {
+    let commandId;
+    if ((commandId = this.getAttribute('command'))) {
+      this.setCommand(commandId);
+    }
 
-/**
- * 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) {
-  if (this.command_) {
-    this.command_.removeEventListener(
-        'labelChange',
-        /** @type {EventListener} */ (this));
-    this.command_.removeEventListener(
-        'disabledChange',
-        /** @type {EventListener} */ (this));
-    this.command_.removeEventListener(
-        'hiddenChange',
-        /** @type {EventListener} */ (this));
+    this.addEventListener('click', this.handleClick_.bind(this));
   }
 
-  if (typeof command == 'string') {
-    assert(command[0] == '#');
-    command = /** @type {!cr.ui.Command} */
-        (this.ownerDocument.getElementById(command.slice(1)));
-    cr.ui.decorate(command, cr.ui.Command);
+  /**
+   * Returns associated command.
+   * @return {cr.ui.Command} associated command.
+   */
+  getCommand() {
+    return this.command_;
   }
 
-  this.command_ = command;
-  if (command) {
-    if (command.id) {
-      this.setAttribute('command', '#' + command.id);
+  /**
+   * Associates command with this button.
+   * @param {string|cr.ui.Command} command Command id, or command object to
+   * associate with this button.
+   */
+  setCommand(command) {
+    if (this.command_) {
+      this.command_.removeEventListener(
+          'labelChange',
+          /** @type {EventListener} */ (this));
+      this.command_.removeEventListener(
+          'disabledChange',
+          /** @type {EventListener} */ (this));
+      this.command_.removeEventListener(
+          'hiddenChange',
+          /** @type {EventListener} */ (this));
+    }
+
+    if (typeof command == 'string') {
+      assert(command[0] == '#');
+      command = /** @type {!cr.ui.Command} */
+          (this.ownerDocument.getElementById(command.slice(1)));
+      cr.ui.decorate(command, cr.ui.Command);
     }
 
-    this.setLabel(command.label);
-    this.disabled = command.disabled;
-    this.hidden = command.hidden;
-
-    this.command_.addEventListener(
-        'labelChange',
-        /** @type {EventListener} */ (this));
-    this.command_.addEventListener(
-        'disabledChange',
-        /** @type {EventListener} */ (this));
-    this.command_.addEventListener(
-        'hiddenChange',
-        /** @type {EventListener} */ (this));
+    this.command_ = command;
+    if (command) {
+      if (command.id) {
+        this.setAttribute('command', '#' + command.id);
+      }
+
+      this.setLabel(command.label);
+      this.disabled = command.disabled;
+      this.hidden = command.hidden;
+
+      this.command_.addEventListener(
+          'labelChange',
+          /** @type {EventListener} */ (this));
+      this.command_.addEventListener(
+          'disabledChange',
+          /** @type {EventListener} */ (this));
+      this.command_.addEventListener(
+          'hiddenChange',
+          /** @type {EventListener} */ (this));
+    }
   }
-};
 
-/**
- * Returns button label
- * @return {string} Button label.
- */
-CommandButton.prototype.getLabel = function() {
-  return this.command_ ? this.command_.label : '';
-};
+  /**
+   * Returns button label
+   * @return {string} Button label.
+   */
+  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.
-  //
-  // TODO(fukino): If a user customize the button content, it becomes the
-  // user's responsibility to update the content on command label's change.
-  // Updating the label in customized button content should be done
-  // automatically by specifying an element which should be synced with the
-  // command label using class name or polymer's template binding.
-  if (!this.firstElementChild) {
-    this.textContent = label;
+  /**
+   * Sets button label.
+   * @param {string} label New button label.
+   */
+  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.
+    // Updating the label in customized button content should be done
+    // automatically by specifying an element which should be synced with the
+    // command label using class name or polymer's template binding.
+    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) {
-  if (!this.disabled && this.command_) {
-    this.command_.execute(this);
+  /**
+   * Handles click event and dispatches associated command.
+   * @param {Event} e The mouseup event object.
+   * @private
+   */
+  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) {
-  switch (e.type) {
-    case 'disabledChange':
-      this.disabled = this.command_.disabled;
-      break;
-    case 'hiddenChange':
-      this.hidden = this.command_.hidden;
-      break;
-    case 'labelChange':
-      this.setLabel(this.command_.label);
-      break;
+  /**
+   * Handles changes to the associated command.
+   * @param {Event} e The event object.
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'disabledChange':
+        this.disabled = this.command_.disabled;
+        break;
+      case 'hiddenChange':
+        this.hidden = this.command_.hidden;
+        break;
+      case 'labelChange':
+        this.setLabel(this.command_.label);
+        break;
+    }
   }
-};
+}
+
+CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;
 
 /**
  * Whether the button is disabled or not.