Changed Downloads translations when MyFilesVolumes is enabled

Change util.getEntryLabel to special case Downloads folder to
translate.

Change DirectoryTree and FileList to use util.getEntryLabel for
translating the entry labels and util.compareLabel for sorting the
entries.

Change FileList related types to carry volume manager to be able to
pass LocationInfo to be able to use getEntryLabel for displaying and
sorting entries on File List, as follows:

- Add VolumeManager to FileListContext constructor, since this type is
constructed only once.
- Change DirectoryContents constructor to forward VolumeManager from
FileListContext to FileListModel.
- FileListModel uses VolumeManager to get LocationInfo to sort entries
by labels.

Add Closure markup for DirectoryContents attributes related to this
change to add clarity for developers and stronger type in Closure. As
part of this changed DirectoryContents.fileList_ to be always
FileListModel instead of switching to a empty ArrayDataModel from
|setFileList|.

Test will come in follow up CL. :-)

Bug: 873539
Change-Id: I46dd1879c14cbf046f5da5d96c29b34f13d404a1
Reviewed-on: https://chromium-review.googlesource.com/c/1370151
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615425}

ui/file_manager/file_manager/common/js/util.js

@@ -882,6 +882,19 @@ util.compareName = function(entry1, entry2) {
   return util.collator.compare(entry1.name, entry2.name);
 };
 
+/**
+ * Compare by label (i18n name). The 2 entries must be in same directory.
+ * @param {EntryLocation} locationInfo
+ * @param {!Entry|!FilesAppEntry} entry1 First entry.
+ * @param {!Entry|!FilesAppEntry} entry2 Second entry.
+ * @return {number} Compare result.
+ */
+util.compareLabel = function(locationInfo, entry1, entry2) {
+  return util.collator.compare(
+      util.getEntryLabel(locationInfo, entry1),
+      util.getEntryLabel(locationInfo, entry2));
+};
+
 /**
  * Compare by path.
  * @param {Entry|FilesAppEntry} entry1 First entry.
@@ -893,13 +906,14 @@ util.comparePath = function(entry1, entry2) {
 };
 
 /**
+ * @param {EntryLocation} locationInfo
  * @param {!Array<Entry|FilesAppEntry>} bottomEntries entries that should be
  * grouped in the bottom, used for sorting Linux and Play files entries after
  * other folders in MyFiles.
  * return {function(Entry|FilesAppEntry, Entry|FilesAppEntry) to compare entries
  * by name.
  */
-util.compareNameAndGroupBottomEntries = function(bottomEntries) {
+util.compareLabelAndGroupBottomEntries = function(locationInfo, bottomEntries) {
   const childrenMap = new Map();
   bottomEntries.forEach((entry) => {
     childrenMap.set(entry.toURL(), entry);
@@ -918,9 +932,9 @@ util.compareNameAndGroupBottomEntries = function(bottomEntries) {
     const isBottomlEntry1 = childrenMap.has(entry1.toURL()) ? 1 : 0;
     const isBottomlEntry2 = childrenMap.has(entry2.toURL()) ? 1 : 0;
 
-    // When there are the same type, just compare by name.
+    // When there are the same type, just compare by label.
     if (isBottomlEntry1 === isBottomlEntry2)
-      return util.compareName(entry1, entry2);
+      return util.compareLabel(locationInfo, entry1, entry2);
 
     return isBottomlEntry1 - isBottomlEntry2;
   }
@@ -1241,17 +1255,24 @@ util.getRootTypeLabel = function(locationInfo) {
 };
 
 /**
- * Returns the localized name of the entry.
+ * Returns the localized/i18n name of the entry.
  *
  * @param {EntryLocation} locationInfo
- * @param {!Entry|!FakeEntry} entry The entry to be retrieve the name of.
- * @return {?string} The localized name.
+ * @param {!Entry|!FilesAppEntry} entry The entry to be retrieve the name of.
+ * @return {string} The localized name.
  */
 util.getEntryLabel = function(locationInfo, entry) {
   if (locationInfo && locationInfo.hasFixedLabel)
     return util.getRootTypeLabel(locationInfo);
-  else
-    return entry.name;
+
+  // Special case for MyFiles/Downloads.
+  if (locationInfo && util.isMyFilesVolumeEnabled() &&
+      locationInfo.rootType == VolumeManagerCommon.RootType.DOWNLOADS &&
+      entry.fullPath == '/Downloads') {
+    return str('DOWNLOADS_DIRECTORY_LABEL');
+  }
+
+  return entry.name;
 };
 
 /**

ui/file_manager/file_manager/foreground/js/directory_contents.js

@@ -530,9 +530,10 @@ FileFilter.prototype.filter = function(entry) {
  *
  * @param {FileFilter} fileFilter The file-filter context.
  * @param {!MetadataModel} metadataModel
+ * @param {!VolumeManager} volumeManager The volume manager.
  * @constructor
  */
-function FileListContext(fileFilter, metadataModel) {
+function FileListContext(fileFilter, metadataModel, volumeManager) {
   /**
    * @type {FileListModel}
    */
@@ -554,6 +555,9 @@ function FileListContext(fileFilter, metadataModel) {
    * @const
    */
   this.prefetchPropertyNames = FileListContext.createPrefetchPropertyNames_();
+
+  /** @public {!VolumeManager} */
+  this.volumeManager = volumeManager;
 }
 
 /**
@@ -601,8 +605,12 @@ function DirectoryContents(context,
                            isSearch,
                            directoryEntry,
                            scannerFactory) {
+  /** @private {FileListContext} */
   this.context_ = context;
+
+  /** @private {FileListModel} */
   this.fileList_ = context.fileList;
+  this.fileList_.InitNewDirContents(context.volumeManager);
 
   this.isSearch_ = isSearch;
   this.directoryEntry_ = directoryEntry;
@@ -636,15 +644,20 @@ DirectoryContents.prototype.clone = function() {
       this.scannerFactory_);
 };
 
+/**
+ * Returns the file list length.
+ * @return {number}
+ */
+DirectoryContents.prototype.getFileListLength = function() {
+  return this.fileList_.length;
+};
+
 /**
  * Use a given fileList instead of the fileList from the context.
- * @param {(!Array|!cr.ui.ArrayDataModel)} fileList The new file list.
+ * @param {!FileListModel} fileList The new file list.
  */
 DirectoryContents.prototype.setFileList = function(fileList) {
-  if (fileList instanceof cr.ui.ArrayDataModel)
-    this.fileList_ = fileList;
-  else
-    this.fileList_ = new cr.ui.ArrayDataModel(fileList);
+  this.fileList_ = fileList;
 };
 
 /**

ui/file_manager/file_manager/foreground/js/directory_model.js

@@ -48,7 +48,7 @@ function DirectoryModel(
                                     this.onFilterChanged_.bind(this));
 
   this.currentFileListContext_ =
-      new FileListContext(fileFilter, metadataModel);
+      new FileListContext(fileFilter, metadataModel, volumeManager);
   this.currentDirContents_ =
       DirectoryContents.createForDirectory(this.currentFileListContext_, null);
   /**
@@ -472,7 +472,7 @@ DirectoryModel.prototype.rescan = function(refresh) {
   }
 
   var dirContents = this.currentDirContents_.clone();
-  dirContents.setFileList([]);
+  dirContents.setFileList(new FileListModel(this.metadataModel_));
   dirContents.setMetadataSnapshot(
       this.currentDirContents_.createMetadataSnapshot());
 
@@ -698,8 +698,8 @@ DirectoryModel.prototype.scan_ = function(
       if (volumeInfo &&
           volumeInfo.volumeType === VolumeManagerCommon.VolumeType.DOWNLOADS &&
           locationInfo.isRootEntry) {
-        metrics.recordMediumCount('DownloadsCount',
-                                  dirContents.fileList_.length);
+        metrics.recordMediumCount(
+            'DownloadsCount', dirContents.getFileListLength());
       }
     }
 

ui/file_manager/file_manager/foreground/js/file_list_model.js

@@ -57,6 +57,15 @@ function FileListModel(metadataModel) {
    * @private {boolean}
    */
   this.useModificationByMeTime_ = false;
+
+  /** @private {VolumeManager} The volume manager. */
+  this.volumeManager_ = null;
+
+  /**
+   * @private {EntryLocation} Used to get the label for entries when sorting by
+   * label.
+   */
+  this.locationInfo_ = null;
 }
 
 /**
@@ -327,6 +336,25 @@ FileListModel.prototype.compareName_ = function(a, b) {
   return util.compareName(a, b);
 };
 
+/**
+ * Compares entries by label (i18n name).
+ * @param {!Entry} a First entry.
+ * @param {!Entry} b Second entry.
+ * @return {number} Compare result.
+ * @private
+ */
+FileListModel.prototype.compareLabel_ = function(a, b) {
+  // Set locationInfo once because we only compare within the same volume.
+  if (!this.locationInfo_ && this.volumeManager_)
+    this.locationInfo_ = this.volumeManager_.getLocationInfo(a);
+
+  // Directories always precede files.
+  if (a.isDirectory !== b.isDirectory)
+    return a.isDirectory === this.isDescendingOrder_ ? 1 : -1;
+
+  return util.compareLabel(this.locationInfo_, a, b);
+};
+
 /**
  * Compares entries by mtime first, then by name.
  * @param {Entry} a First entry.
@@ -407,3 +435,16 @@ FileListModel.prototype.compareType_ = function(a, b) {
   var result = util.collator.compare(aType, bType);
   return result !== 0 ? result : util.compareName(a, b);
 };
+
+/**
+ * @param {!VolumeManager} volumeManager The volume manager.
+ */
+FileListModel.prototype.InitNewDirContents = function(volumeManager) {
+  this.volumeManager_ = volumeManager;
+  // Clear the location info, it's reset by compareLabel_ when needed.
+  this.locationInfo_ = null;
+  // Initialize compare function based on Labels.
+  this.setCompareFunction(
+      'name',
+      /** @type {function(*, *): number} */ (this.compareLabel_.bind(this)));
+};

ui/file_manager/file_manager/foreground/js/ui/directory_tree.js

@@ -789,9 +789,15 @@ EntryListItem.prototype.sortEntries = function(entries) {
   if (!this.entry)
     return DirectoryItem.prototype.sortEntries.apply(this, [entries]);
 
+  // Use locationInfo from first entry because it only compare within the same
+  // volume.
+  const locationInfo =
+      this.parentTree_.volumeManager_.getLocationInfo(entries[0]);
+  const compareFunction = util.compareLabelAndGroupBottomEntries(
+      locationInfo, this.entry.getUIChildren());
+
   const filter = this.fileFilter_.filter.bind(this.fileFilter_);
-  return entries.filter(filter).sort(
-      util.compareNameAndGroupBottomEntries(this.entry.getUIChildren()));
+  return entries.filter(filter).sort(compareFunction);
 };
 
 /**

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -580,7 +580,8 @@ FileGrid.prototype.decorateThumbnail_ = function(li, entry) {
     detailIcon.appendChild(checkmark);
   }
   bottom.appendChild(detailIcon);
-  bottom.appendChild(filelist.renderFileNameLabel(li.ownerDocument, entry));
+  bottom.appendChild(
+      filelist.renderFileNameLabel(li.ownerDocument, entry, locationInfo));
   frame.appendChild(bottom);
 
   this.updateSharedStatus_(li, entry);

ui/file_manager/file_manager/foreground/js/ui/file_table.js

@@ -742,7 +742,8 @@ FileTable.prototype.renderName_ = function(entry, columnId, table) {
 
   label.entry = entry;
   label.className = 'detail-name';
-  label.appendChild(filelist.renderFileNameLabel(this.ownerDocument, entry));
+  label.appendChild(
+      filelist.renderFileNameLabel(this.ownerDocument, entry, locationInfo));
   return label;
 };
 

ui/file_manager/file_manager/foreground/js/ui/file_table_list.js

@@ -123,7 +123,7 @@ FileListSelectionController.prototype.handleKeyDown = function(e) {
 /**
  * Common item decoration for table's and grid's items.
  * @param {cr.ui.ListItem} li List item.
- * @param {Entry} entry The entry.
+ * @param {Entry|FilesAppEntry} entry The entry.
  * @param {!MetadataModel} metadataModel Cache to
  *     retrieve metadada.
  */
@@ -185,17 +185,18 @@ filelist.renderFileTypeIcon = function(doc, entry, locationInfo, opt_mimeType) {
 /**
  * Render filename label for grid and list view.
  * @param {!Document} doc Owner document.
- * @param {!Entry} entry The Entry object to render.
+ * @param {!Entry|!FilesAppEntry} entry The Entry object to render.
+ * @param {EntryLocation} locationInfo
  * @return {!HTMLDivElement} The label.
  */
-filelist.renderFileNameLabel = function(doc, entry) {
+filelist.renderFileNameLabel = function(doc, entry, locationInfo) {
   // Filename need to be in a '.filename-label' container for correct
   // work of inplace renaming.
   var box = /** @type {!HTMLDivElement} */ (doc.createElement('div'));
   box.className = 'filename-label';
   var fileName = doc.createElement('span');
   fileName.className = 'entry-name';
-  fileName.textContent = entry.name;
+  fileName.textContent = util.getEntryLabel(locationInfo, entry);
   box.appendChild(fileName);
 
   return box;