[Files app] ES6 class for gear_menu_controller.js

Bug: 778674
Change-Id: I70cced32faaf0577efe412bd8f7bbef837c2c3c3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1611423
Auto-Submit: François Degros <fdegros@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659785}

ui/file_manager/file_manager/foreground/js/gear_menu_controller.js

@@ -2,180 +2,157 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * @param {!cr.ui.MultiMenuButton} gearButton
- * @param {!FilesToggleRipple} toggleRipple
- * @param {!GearMenu} gearMenu
- * @param {!ProvidersMenu} providersMenu
- * @param {!DirectoryModel} directoryModel
- * @param {!CommandHandler} commandHandler
- * @param {!ProvidersModel} providersModel
- * @constructor
- * @struct
- */
-function GearMenuController(
-    gearButton, toggleRipple, gearMenu, providersMenu, directoryModel,
-    commandHandler, providersModel) {
+class GearMenuController {
   /**
-   * @type {!FilesToggleRipple}
-   * @const
-   * @private
+   * @param {!cr.ui.MultiMenuButton} gearButton
+   * @param {!FilesToggleRipple} toggleRipple
+   * @param {!GearMenu} gearMenu
+   * @param {!ProvidersMenu} providersMenu
+   * @param {!DirectoryModel} directoryModel
+   * @param {!CommandHandler} commandHandler
+   * @param {!ProvidersModel} providersModel
    */
-  this.toggleRipple_ = toggleRipple;
+  constructor(
+      gearButton, toggleRipple, gearMenu, providersMenu, directoryModel,
+      commandHandler, providersModel) {
+    /** @private @const {!FilesToggleRipple} */
+    this.toggleRipple_ = toggleRipple;
+
+    /** @private @const {!GearMenu} */
+    this.gearMenu_ = gearMenu;
+
+    /** @private @const {!ProvidersMenu} */
+    this.providersMenu_ = providersMenu;
+
+    /** @private @const {!DirectoryModel} */
+    this.directoryModel_ = directoryModel;
+
+    /** @private @const {!CommandHandler} */
+    this.commandHandler_ = commandHandler;
+
+    /** @private @const {!ProvidersModel} */
+    this.providersModel_ = providersModel;
+
+    gearButton.addEventListener('menushow', this.onShowGearMenu_.bind(this));
+    gearButton.addEventListener('menuhide', this.onHideGearMenu_.bind(this));
+    directoryModel.addEventListener(
+        'directory-changed', this.onDirectoryChanged_.bind(this));
+    chrome.fileManagerPrivate.onPreferencesChanged.addListener(
+        this.onPreferencesChanged_.bind(this));
+    this.onPreferencesChanged_();
+  }
 
   /**
-   * @type {!GearMenu}
-   * @const
    * @private
    */
-  this.gearMenu_ = gearMenu;
+  onShowGearMenu_() {
+    this.toggleRipple_.activated = true;
+    this.refreshRemainingSpace_(false); /* Without loading caption. */
+    this.updateNewServiceItem();
+  }
 
   /**
-   * @type {!ProvidersMenu}
-   * @const
+   * Update "New service" menu item to either directly show the Webstore dialog
+   * when there isn't any service/FSP extension installed, or display the
+   * providers menu with the currently installed extensions and also install new
+   * service.
+   *
    * @private
    */
-  this.providersMenu_ = providersMenu;
+  updateNewServiceItem() {
+    this.providersModel_.getMountableProviders().then(providers => {
+      // Go straight to webstore to install the first provider.
+      let desiredMenu = '#install-new-extension';
+      let label = str('INSTALL_NEW_EXTENSION_LABEL');
+
+      const shouldDisplayProvidersMenu = providers.length > 0;
+      if (shouldDisplayProvidersMenu) {
+        // Open the providers menu with an installed provider and an install new
+        // provider option.
+        desiredMenu = '#new-service';
+        label = str('ADD_NEW_SERVICES_BUTTON_LABEL');
+        // Trigger an update of the providers submenu.
+        this.providersMenu_.updateSubMenu();
+      }
+
+      this.gearMenu_.setNewServiceCommand(desiredMenu, label);
+    });
+  }
 
   /**
-   * @type {!DirectoryModel}
-   * @const
    * @private
    */
-  this.directoryModel_ = directoryModel;
+  onHideGearMenu_() {
+    this.toggleRipple_.activated = false;
+  }
 
   /**
-   * @type {!CommandHandler}
-   * @const
+   * @param {Event} event
    * @private
    */
-  this.commandHandler_ = commandHandler;
+  onDirectoryChanged_(event) {
+    event = /** @type {DirectoryChangeEvent} */ (event);
+    if (event.volumeChanged) {
+      this.refreshRemainingSpace_(true);
+    }  // Show loading caption.
+  }
 
   /**
-   * @type {!ProvidersModel}
-   * @const
+   * Refreshes space info of the current volume.
+   * @param {boolean} showLoadingCaption Whether show loading caption or not.
    * @private
    */
-  this.providersModel_ = providersModel;
-
-  gearButton.addEventListener('menushow', this.onShowGearMenu_.bind(this));
-  gearButton.addEventListener('menuhide', this.onHideGearMenu_.bind(this));
-  directoryModel.addEventListener(
-      'directory-changed', this.onDirectoryChanged_.bind(this));
-  chrome.fileManagerPrivate.onPreferencesChanged.addListener(
-      this.onPreferencesChanged_.bind(this));
-  this.onPreferencesChanged_();
-}
+  refreshRemainingSpace_(showLoadingCaption) {
+    const currentDirectory = this.directoryModel_.getCurrentDirEntry();
+    if (!currentDirectory || util.isRecentRoot(currentDirectory)) {
+      this.gearMenu_.setSpaceInfo(null, false);
+      return;
+    }
 
-/**
- * @private
- */
-GearMenuController.prototype.onShowGearMenu_ = function() {
-  this.toggleRipple_.activated = true;
-  this.refreshRemainingSpace_(false); /* Without loading caption. */
-  this.updateNewServiceItem();
-};
-
-/**
- * Update "New service" menu item to either directly show the Webstore dialog
- * when there isn't any service/FSP extension installed, or display the
- * providers menu with the currently installed extensions and also install new
- * service.
- *
- * @private
- */
-GearMenuController.prototype.updateNewServiceItem = function() {
-  this.providersModel_.getMountableProviders().then(providers => {
-    // Go straight to webstore to install the first provider.
-    let desiredMenu = '#install-new-extension';
-    let label = str('INSTALL_NEW_EXTENSION_LABEL');
-
-    const shouldDisplayProvidersMenu = providers.length > 0;
-    if (shouldDisplayProvidersMenu) {
-      // Open the providers menu with an installed provider and an install new
-      // provider option.
-      desiredMenu = '#new-service';
-      label = str('ADD_NEW_SERVICES_BUTTON_LABEL');
-      // Trigger an update of the providers submenu.
-      this.providersMenu_.updateSubMenu();
+    const currentVolumeInfo = this.directoryModel_.getCurrentVolumeInfo();
+    if (!currentVolumeInfo) {
+      return;
     }
 
-    this.gearMenu_.setNewServiceCommand(desiredMenu, label);
-  });
-};
-
-/**
- * @private
- */
-GearMenuController.prototype.onHideGearMenu_ = function() {
-  this.toggleRipple_.activated = false;
-};
-
-/**
- * @param {Event} event
- * @private
- */
-GearMenuController.prototype.onDirectoryChanged_ = function(event) {
-  event = /** @type {DirectoryChangeEvent} */ (event);
-  if (event.volumeChanged) {
-    this.refreshRemainingSpace_(true);
-  }  // Show loading caption.
-};
-
-/**
- * Refreshes space info of the current volume.
- * @param {boolean} showLoadingCaption Whether show loading caption or not.
- * @private
- */
-GearMenuController.prototype.refreshRemainingSpace_ = function(
-    showLoadingCaption) {
-  const currentDirectory = this.directoryModel_.getCurrentDirEntry();
-  if (!currentDirectory || util.isRecentRoot(currentDirectory)) {
-    this.gearMenu_.setSpaceInfo(null, false);
-    return;
-  }
+    // TODO(mtomasz): Add support for remaining space indication for provided
+    // file systems.
+    // TODO(fukino): Add support for remaining space indication for documents
+    // provider roots. crbug.com/953657.
+    if (currentVolumeInfo.volumeType ==
+            VolumeManagerCommon.VolumeType.PROVIDED ||
+        currentVolumeInfo.volumeType ==
+            VolumeManagerCommon.VolumeType.MEDIA_VIEW ||
+        currentVolumeInfo.volumeType ==
+            VolumeManagerCommon.VolumeType.DOCUMENTS_PROVIDER ||
+        currentVolumeInfo.volumeType ==
+            VolumeManagerCommon.VolumeType.ARCHIVE) {
+      this.gearMenu_.setSpaceInfo(null, false);
+      return;
+    }
 
-  const currentVolumeInfo = this.directoryModel_.getCurrentVolumeInfo();
-  if (!currentVolumeInfo) {
-    return;
+    this.gearMenu_.setSpaceInfo(
+        new Promise(fulfill => {
+          chrome.fileManagerPrivate.getSizeStats(
+              currentVolumeInfo.volumeId, fulfill);
+        }),
+        true);
   }
 
-  // TODO(mtomasz): Add support for remaining space indication for provided
-  // file systems.
-  // TODO(fukino): Add support for remaining space indication for documents
-  // provider roots. crbug.com/953657.
-  if (currentVolumeInfo.volumeType == VolumeManagerCommon.VolumeType.PROVIDED ||
-      currentVolumeInfo.volumeType ==
-          VolumeManagerCommon.VolumeType.MEDIA_VIEW ||
-      currentVolumeInfo.volumeType ==
-          VolumeManagerCommon.VolumeType.DOCUMENTS_PROVIDER ||
-      currentVolumeInfo.volumeType == VolumeManagerCommon.VolumeType.ARCHIVE) {
-    this.gearMenu_.setSpaceInfo(null, false);
-    return;
+  /**
+   * Handles preferences change and updates menu.
+   * @private
+   */
+  onPreferencesChanged_() {
+    chrome.fileManagerPrivate.getPreferences(prefs => {
+      if (chrome.runtime.lastError) {
+        return;
+      }
+
+      if (prefs.cellularDisabled) {
+        this.gearMenu_.syncButton.setAttribute('checked', '');
+      } else {
+        this.gearMenu_.syncButton.removeAttribute('checked');
+      }
+    });
   }
-
-  this.gearMenu_.setSpaceInfo(
-      new Promise(fulfill => {
-        chrome.fileManagerPrivate.getSizeStats(
-            currentVolumeInfo.volumeId, fulfill);
-      }),
-      true);
-};
-
-/**
- * Handles preferences change and updates menu.
- * @private
- */
-GearMenuController.prototype.onPreferencesChanged_ = function() {
-  chrome.fileManagerPrivate.getPreferences(prefs => {
-    if (chrome.runtime.lastError) {
-      return;
-    }
-
-    if (prefs.cellularDisabled) {
-      this.gearMenu_.syncButton.setAttribute('checked', '');
-    } else {
-      this.gearMenu_.syncButton.removeAttribute('checked');
-    }
-  });
-};
+}