File Manager: Convert banners.js and location_line.js to ES6 class syntax.

This is in preparation of removing the custom cr.EventTarget implementation in
favor of native EventTarget, which requires all subclasses to be ES6 classes,
otherwise a runtime "Illegal invocation" error is thrown.

Bug: 854268,778674
Change-Id: Ice80144e128fb414d2d5d46d8b2a04a439d0dafe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1554280
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#648255}

ui/file_manager/file_manager/foreground/js/ui/location_line.js

@@ -4,46 +4,43 @@
 
 /**
  * Location line.
- *
- * @extends {cr.EventTarget}
+ */
+class LocationLine extends cr.EventTarget {
+  /**
    * @param {!Element} breadcrumbs Container element for breadcrumbs.
    * @param {!VolumeManager} volumeManager Volume manager.
- * @constructor
    */
-function LocationLine(breadcrumbs, volumeManager) {
+  constructor(breadcrumbs, volumeManager) {
+    super();
+
     this.breadcrumbs_ = breadcrumbs;
     this.volumeManager_ = volumeManager;
     this.entry_ = null;
     this.components_ = [];
-}
-
-/**
- * Extends cr.EventTarget.
- */
-LocationLine.prototype.__proto__ = cr.EventTarget.prototype;
+  }
 
-/**
+  /**
    * Shows breadcrumbs. This operation is done without IO.
    *
    * @param {!Entry|!FakeEntry} entry Target entry or fake entry.
    */
-LocationLine.prototype.show = function(entry) {
+  show(entry) {
     if (entry === this.entry_) {
       return;
     }
 
     this.update_(this.getComponents_(entry));
-};
+  }
 
-/**
+  /**
    * Returns current path components built by the current directory entry.
    * @return {!Array<!LocationLine.PathComponent>} Current path components.
    */
-LocationLine.prototype.getCurrentPathComponents = function() {
+  getCurrentPathComponents() {
     return this.components_;
-};
+  }
 
-/**
+  /**
    * Replace the root directory name at the end of a url.
    * The input, |url| is a displayRoot URL of a Drive volume like
    * filesystem:chrome-extension://....foo.com-hash/root
@@ -55,17 +52,17 @@ LocationLine.prototype.getCurrentPathComponents = function() {
    * @return {string} new URL with the new root directory name
    * @private
    */
-LocationLine.prototype.replaceRootName_ = (url, newRoot) => {
+  replaceRootName_(url, newRoot) {
     return url.slice(0, url.length - '/root'.length) + newRoot;
-};
+  }
 
-/**
+  /**
    * Get components for the path of entry.
    * @param {!Entry|!FilesAppEntry} entry An entry.
    * @return {!Array<!LocationLine.PathComponent>} Components.
    * @private
    */
-LocationLine.prototype.getComponents_ = function(entry) {
+  getComponents_(entry) {
     const components = [];
     const locationInfo = this.volumeManager_.getLocationInfo(entry);
 
@@ -90,14 +87,16 @@ LocationLine.prototype.getComponents_ = function(entry) {
           prefixEntry.name, prefixEntry.toURL(), prefixEntry));
     }
     if (locationInfo.rootType === VolumeManagerCommon.RootType.DRIVE_OTHER) {
-    // When target path is a shared directory, volume should be shared with me.
+      // When target path is a shared directory, volume should be shared with
+      // me.
       const match = entry.fullPath.match(/\/\.files-by-id\/\d+\//);
       if (match) {
         displayRootFullPath = match[0];
       } else {
         displayRootFullPath = '/other';
       }
-    displayRootUrl = this.replaceRootName_(displayRootUrl, displayRootFullPath);
+      displayRootUrl =
+          this.replaceRootName_(displayRootUrl, displayRootFullPath);
       const sharedWithMeFakeEntry =
           locationInfo.volumeInfo
               .fakeEntries[VolumeManagerCommon.RootType.DRIVE_SHARED_WITH_ME];
@@ -110,7 +109,8 @@ LocationLine.prototype.getComponents_ = function(entry) {
           displayRootUrl, VolumeManagerCommon.SHARED_DRIVES_DIRECTORY_PATH);
       components.push(new LocationLine.PathComponent(
           util.getRootTypeLabel(locationInfo), displayRootUrl));
-  } else if (locationInfo.rootType === VolumeManagerCommon.RootType.COMPUTER) {
+    } else if (
+        locationInfo.rootType === VolumeManagerCommon.RootType.COMPUTER) {
       displayRootUrl = this.replaceRootName_(
           displayRootUrl, VolumeManagerCommon.COMPUTERS_DIRECTORY_PATH);
       components.push(new LocationLine.PathComponent(
@@ -151,15 +151,15 @@ LocationLine.prototype.getComponents_ = function(entry) {
     }
 
     return components;
-};
+  }
 
-/**
+  /**
    * Updates the breadcrumb display.
    * @param {!Array<!LocationLine.PathComponent>} components Components to the
    *     target path.
    * @private
    */
-LocationLine.prototype.update_ = function(components) {
+  update_(components) {
     this.components_ = components;
 
     // Make the new breadcrumbs temporarily.
@@ -194,8 +194,8 @@ LocationLine.prototype.update_ = function(components) {
       newBreadcrumbs.appendChild(separator);
     }
 
-  // Replace the shown breadcrumbs with the new one, keeping the DOMs for common
-  // prefix of the path.
+    // Replace the shown breadcrumbs with the new one, keeping the DOMs for
+    // common prefix of the path.
     // 1. Forward the references to the path element while in the common prefix.
     let childOriginal = this.breadcrumbs_.firstChild;
     let childNew = newBreadcrumbs.firstChild;
@@ -206,8 +206,8 @@ LocationLine.prototype.update_ = function(components) {
       childNew = childNew.nextSibling;
       cnt++;
     }
-  // 2. Remove all elements in original breadcrumbs which are not in the common
-  // prefix.
+    // 2. Remove all elements in original breadcrumbs which are not in the
+    // common prefix.
     while (childOriginal) {
       const childToRemove = childOriginal;
       childOriginal = childOriginal.nextSibling;
@@ -230,19 +230,20 @@ LocationLine.prototype.update_ = function(components) {
 
     this.breadcrumbs_.hidden = false;
     this.truncate();
-};
+  }
 
-/**
+  /**
    * Updates breadcrumbs widths in order to truncate it properly.
    */
-LocationLine.prototype.truncate = function() {
+  truncate() {
     if (!this.breadcrumbs_.firstChild) {
       return;
     }
 
     // Assume style.width == clientWidth (items have no margins).
 
-  for (let item = this.breadcrumbs_.firstChild; item; item = item.nextSibling) {
+    for (let item = this.breadcrumbs_.firstChild; item;
+         item = item.nextSibling) {
       item.removeAttribute('style');
       item.removeAttribute('collapsed');
       item.removeAttribute('hidden');
@@ -253,7 +254,8 @@ LocationLine.prototype.truncate = function() {
     let pathWidth = 0;
     let currentWidth = 0;
     let lastSeparator;
-  for (let item = this.breadcrumbs_.firstChild; item; item = item.nextSibling) {
+    for (let item = this.breadcrumbs_.firstChild; item;
+         item = item.nextSibling) {
       if (item.className == 'separator') {
         pathWidth += currentWidth;
         currentWidth = item.getBoundingClientRect().width;
@@ -273,8 +275,8 @@ LocationLine.prototype.truncate = function() {
     const lastCrumbSeparatorWidth = lastSeparator.getBoundingClientRect().width;
     // Current directory name may occupy up to 70% of space or even more if the
     // path is short.
-  let maxPathWidth =
-      Math.max(Math.round(containerWidth * 0.3), containerWidth - currentWidth);
+    let maxPathWidth = Math.max(
+        Math.round(containerWidth * 0.3), containerWidth - currentWidth);
     maxPathWidth = Math.min(pathWidth, maxPathWidth);
 
     const parentCrumb = lastSeparator.previousSibling;
@@ -342,22 +344,22 @@ LocationLine.prototype.truncate = function() {
         Math.min(currentWidth, containerWidth - pathWidth - collapsedWidth);
     this.breadcrumbs_.lastChild.style.width =
         (currentWidth - lastCrumbSeparatorWidth) + 'px';
-};
+  }
 
-/**
+  /**
    * Hide breadcrumbs div.
    */
-LocationLine.prototype.hide = function() {
+  hide() {
     this.breadcrumbs_.hidden = true;
-};
+  }
 
-/**
+  /**
    * Execute an element.
    * @param {number} index The index of clicked path component.
    * @param {!Event} event The MouseEvent object.
    * @private
    */
-LocationLine.prototype.onClick_ = function(index, event) {
+  onClick_(index, event) {
     if (index >= this.components_.length - 1) {
       return;
     }
@@ -378,29 +380,31 @@ LocationLine.prototype.onClick_ = function(index, event) {
       this.dispatchEvent(pathClickEvent);
     });
     metrics.recordUserAction('ClickBreadcrumbs');
-};
+  }
+}
 
 /**
  * Path component.
+ */
+LocationLine.PathComponent = class {
+  /**
    * @param {string} name Name.
    * @param {string} url Url.
    * @param {FilesAppEntry=} opt_fakeEntry Fake entry should be set when
    *     this component represents fake entry.
- * @constructor
- * @struct
    */
-LocationLine.PathComponent = function(name, url, opt_fakeEntry) {
+  constructor(name, url, opt_fakeEntry) {
     this.name = name;
     this.url_ = url;
     this.fakeEntry_ = opt_fakeEntry || null;
-};
+  }
 
-/**
+  /**
    * Resolve an entry of the component.
    * @return {!Promise<!Entry|!FilesAppEntry>} A promise which is
    *     resolved with an entry.
    */
-LocationLine.PathComponent.prototype.resolveEntry = function() {
+  resolveEntry() {
     if (this.fakeEntry_) {
       return /** @type {!Promise<!Entry|!FilesAppEntry>} */ (
           Promise.resolve(this.fakeEntry_));
@@ -408,4 +412,5 @@ LocationLine.PathComponent.prototype.resolveEntry = function() {
       return new Promise(
           window.webkitResolveLocalFileSystemURL.bind(null, this.url_));
     }
+  }
 };