Make folders always precede files in the file list.

BUG=433165
TEST=run browser_tests --gtest_filter=*FileManager*

Review URL: https://codereview.chromium.org/729163002

Cr-Commit-Position: refs/heads/master@{#304790}

2 files changed, 85 insertions, 38 deletions

diff --git a/ui/file_manager/file_manager/foreground/js/directory_contents.js b/ui/file_manager/file_manager/foreground/js/directory_contents.js
index 49b0d2c..aaf7d41 100644
--- a/ui/file_manager/file_manager/foreground/js/directory_contents.js
+++ b/ui/file_manager/file_manager/foreground/js/directory_contents.js
@@ -423,13 +423,20 @@ function FileListModel(metadataCache) {
 
   // Initialize compare functions.
   this.setCompareFunction('name',
-      /** @type {function(*, *): number} */ (util.compareName));
+      /** @type {function(*, *): number} */ (this.compareName_.bind(this)));
   this.setCompareFunction('modificationTime',
       /** @type {function(*, *): number} */ (this.compareMtime_.bind(this)));
   this.setCompareFunction('size',
       /** @type {function(*, *): number} */ (this.compareSize_.bind(this)));
   this.setCompareFunction('type',
       /** @type {function(*, *): number} */ (this.compareType_.bind(this)));
+
+  /**
+   * Whether this file list is sorted in descending order.
+   * @type {boolean}
+   * @private
+   */
+  this.isDescendingOrder_ = false;
 }
 
 FileListModel.prototype = {
@@ -437,13 +444,59 @@ FileListModel.prototype = {
 };
 
 /**
- * Compare by mtime first, then by name.
+ * Sorts data model according to given field and direction and dispathes
+ * sorted event.
+ * @param {string} field Sort field.
+ * @param {string} direction Sort direction.
+ * @override
+ */
+FileListModel.prototype.sort = function(field, direction) {
+  this.isDescendingOrder_ = direction === 'desc';
+  cr.ui.ArrayDataModel.prototype.sort.call(this, field, direction);
+};
+
+/**
+ * Called before a sort happens so that you may fetch additional data
+ * required for the sort.
+ * @param {string} field Sort field.
+ * @param {function()} callback The function to invoke when preparation
+ *     is complete.
+ * @override
+ */
+FileListModel.prototype.prepareSort = function(field, callback) {
+  // Starts the actual sorting immediately as we don't need any preparation to
+  // sort the file list and we want to start actual sorting as soon as possible
+  // after we get the |this.isDescendingOrder_| value in sort().
+  callback();
+};
+
+/**
+ * Compares entries by name.
+ * @param {!Entry} a First entry.
+ * @param {!Entry} b Second entry.
+ * @return {number} Compare result.
+ * @private
+ */
+FileListModel.prototype.compareName_ = function(a, b) {
+  // Directories always precede files.
+  if (a.isDirectory !== b.isDirectory)
+    return a.isDirectory === this.isDescendingOrder_ ? 1 : -1;
+
+  return util.compareName(a, b);
+};
+
+/**
+ * Compares entries by mtime first, then by name.
  * @param {Entry} a First entry.
  * @param {Entry} b Second entry.
  * @return {number} Compare result.
  * @private
  */
 FileListModel.prototype.compareMtime_ = function(a, b) {
+  // Directories always precede files.
+  if (a.isDirectory !== b.isDirectory)
+    return a.isDirectory === this.isDescendingOrder_ ? 1 : -1;
+
   var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem');
   var aTime = aCachedFilesystem ? aCachedFilesystem.modificationTime : 0;
 
@@ -460,13 +513,17 @@ FileListModel.prototype.compareMtime_ = function(a, b) {
 };
 
 /**
- * Compare by size first, then by name.
+ * Compares entries by size first, then by name.
  * @param {Entry} a First entry.
  * @param {Entry} b Second entry.
  * @return {number} Compare result.
  * @private
  */
 FileListModel.prototype.compareSize_ = function(a, b) {
+  // Directories always precede files.
+  if (a.isDirectory !== b.isDirectory)
+    return a.isDirectory === this.isDescendingOrder_ ? 1 : -1;
+
   var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem');
   var aSize = aCachedFilesystem ? aCachedFilesystem.size : 0;
 
@@ -477,16 +534,16 @@ FileListModel.prototype.compareSize_ = function(a, b) {
 };
 
 /**
- * Compare by type first, then by subtype and then by name.
+ * Compares entries by type first, then by subtype and then by name.
  * @param {Entry} a First entry.
  * @param {Entry} b Second entry.
  * @return {number} Compare result.
  * @private
  */
 FileListModel.prototype.compareType_ = function(a, b) {
-  // Directories precede files.
+  // Directories always precede files.
   if (a.isDirectory !== b.isDirectory)
-    return Number(b.isDirectory) - Number(a.isDirectory);
+    return a.isDirectory === this.isDescendingOrder_ ? 1 : -1;
 
   var aType = FileType.typeToString(FileType.getType(a));
   var bType = FileType.typeToString(FileType.getType(b));
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_table.js b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
index 7732bc6..da69b3c 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_table.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
@@ -336,48 +336,38 @@ FileTable.decorate = function(self, metadataCache, volumeManager, fullPage) {
  * @override
  */
 FileTable.prototype.fitColumn = function(index) {
-  var list = this.list_;
-  var listHeight = list.clientHeight;
-
-  var cm = this.columnModel;
-  var dm = this.dataModel;
-  var columnId = cm.getId(index);
-  var doc = this.ownerDocument;
-  var render = cm.getRenderFunction(index);
-  var table = this;
+  var render = this.columnModel.getRenderFunction(index);
   var MAXIMUM_ROWS_TO_MEASURE = 1000;
 
   // Create a temporaty list item, put all cells into it and measure its
   // width. Then remove the item. It fits "list > *" CSS rules.
-  var container = doc.createElement('li');
+  var container = this.ownerDocument.createElement('li');
   container.style.display = 'inline-block';
   container.style.textAlign = 'start';
   // The container will have width of the longest cell.
   container.style.webkitBoxOrient = 'vertical';
 
-  // Ensure all needed data available.
-  dm.prepareSort(columnId, function() {
-    // Select at most MAXIMUM_ROWS_TO_MEASURE items around visible area.
-    var items = list.getItemsInViewPort(list.scrollTop, listHeight);
-    var firstIndex = Math.floor(Math.max(0,
-        (items.last + items.first - MAXIMUM_ROWS_TO_MEASURE) / 2));
-    var lastIndex = Math.min(dm.length,
-                             firstIndex + MAXIMUM_ROWS_TO_MEASURE);
-    for (var i = firstIndex; i < lastIndex; i++) {
-      var item = dm.item(i);
-      var div = doc.createElement('div');
-      div.className = 'table-row-cell';
-      div.appendChild(render(item, columnId, table));
-      container.appendChild(div);
-    }
-    list.appendChild(container);
-    var width = parseFloat(window.getComputedStyle(container).width);
-    list.removeChild(container);
+  // Select at most MAXIMUM_ROWS_TO_MEASURE items around visible area.
+  var items = this.list.getItemsInViewPort(this.list.scrollTop,
+                                           this.list.clientHeight);
+  var firstIndex = Math.floor(Math.max(0,
+      (items.last + items.first - MAXIMUM_ROWS_TO_MEASURE) / 2));
+  var lastIndex = Math.min(this.dataModel.length,
+                           firstIndex + MAXIMUM_ROWS_TO_MEASURE);
+  for (var i = firstIndex; i < lastIndex; i++) {
+    var item = this.dataModel.item(i);
+    var div = this.ownerDocument.createElement('div');
+    div.className = 'table-row-cell';
+    div.appendChild(render(item, this.columnModel.getId(index), this));
+    container.appendChild(div);
+  }
+  this.list.appendChild(container);
+  var width = parseFloat(window.getComputedStyle(container).width);
+  this.list.removeChild(container);
 
-    cm.initializeColumnPos();
-    cm.setWidthAndKeepTotal(index, Math.ceil(width));
-    cm.destroyColumnPos();
-  });
+  this.columnModel.initializeColumnPos();
+  this.columnModel.setWidthAndKeepTotal(index, Math.ceil(width));
+  this.columnModel.destroyColumnPos();
 };
 
 /**