Files.app: Add sort menu to the toolbar.

This CL adds sort button on the toolbar.
By the sort button, following sorting options will be displayed:
- Sort by Name (always in ascending order)
- Sort by Size (always in descending order)
- Sort by Type (always in ascending order)
- Sort by Date mofidied (always in descending order)
Clicking column headers has the same effect as the options above.

BUG=438915
TEST=run browser_tests --gtest_filter=*FileManager*
TBR=yoshiki@chromium.org

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

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

chrome/app/chromeos_strings.grdp

@@ -1028,6 +1028,9 @@ Press any key to continue exploring.
   <message name="IDS_FILE_BROWSER_THUMBNAIL_VIEW_TOOLTIP" desc="Tooltip for the Thumbnail View button.">
     Thumbnail view
   </message>
+  <message name="IDS_FILE_BROWSER_SORT_BUTTON_TOOLTIP" desc="Tooltip for the button which provides sort options in Files.app.">
+    Sort options
+  </message>
   <message name="IDS_FILE_BROWSER_GEAR_BUTTON_TOOLTIP" desc="Tooltip for the gear button in Files.app.">
     Settings
   </message>

chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc

@@ -413,6 +413,7 @@ bool FileManagerPrivateGetStringsFunction::RunSync() {
   SET_STRING("FORMATTING_WARNING", IDS_FILE_BROWSER_FORMATTING_WARNING);
   SET_STRING("FORMAT_DEVICE_BUTTON_LABEL",
              IDS_FILE_BROWSER_FORMAT_DEVICE_BUTTON_LABEL);
+  SET_STRING("SORT_BUTTON_TOOLTIP", IDS_FILE_BROWSER_SORT_BUTTON_TOOLTIP);
   SET_STRING("GEAR_BUTTON_TOOLTIP", IDS_FILE_BROWSER_GEAR_BUTTON_TOOLTIP);
   SET_STRING("HOSTED_OFFLINE_MESSAGE", IDS_FILE_BROWSER_HOSTED_OFFLINE_MESSAGE);
   SET_STRING("HOSTED_OFFLINE_MESSAGE_PLURAL",

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -402,6 +402,16 @@ body.check-select #view-button.thumbnail {
   display: none;
 }
 
+#sort-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/sorting_white.png) 1x,
+      url(../images/files/ui/2x/sorting_white.png) 2x);
+}
+
+body.check-select #sort-button {
+  display: none;
+}
+
 #gear-button {
   background-image: -webkit-image-set(
       url(../images/files/ui/menu_white.png) 1x,
@@ -1819,7 +1829,8 @@ list.autocomplete-suggestions > [lead] {
   margin-top: 8px;
 }
 
-#gear-menu > cr-menu-item:not(.menuitem-button) {
+#gear-menu > cr-menu-item:not(.menuitem-button),
+#sort-menu > cr-menu-item {
   -webkit-margin-end: 50px;
 }
 

ui/file_manager/file_manager/foreground/js/compiled_resources.gyp

@@ -108,6 +108,7 @@
           './progress_center_item_group.js',
           './scan_controller.js',
           './search_controller.js',
+          './sort_menu_controller.js',
           './spinner_controller.js',
           './share_client.js',
           './task_controller.js',

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

@@ -171,6 +171,13 @@ function FileManager() {
    */
   this.spinnerController_ = null;
 
+  /**
+   * Sort menu controller.
+   * @type {SortMenuController}
+   * @private
+   */
+  this.sortMenuController_ = null;
+
   /**
    * Gear menu controller.
    * @type {GearMenuController}
@@ -412,6 +419,9 @@ FileManager.prototype = /** @struct */ {
         this.spinnerController_,
         this.commandHandler,
         this.selectionHandler_);
+    this.sortMenuController_ = new SortMenuController(
+        this.ui_.sortButton,
+        assert(this.directoryModel_.getFileList()));
     this.gearMenuController_ = new GearMenuController(
         this.ui_.gearButton,
         this.ui_.gearMenu,

ui/file_manager/file_manager/foreground/js/file_manager_commands.js

@@ -1191,6 +1191,54 @@ CommandHandler.COMMANDS_['zoom-reset'] = /** @type {Command} */ ({
   canExecute: CommandUtil.canExecuteAlways
 });
 
+/**
+ * Sort the file list by name (in ascending order).
+ * @type {Command}
+ */
+CommandHandler.COMMANDS_['sort-by-name'] = /** @type {Command} */ ({
+  execute: function(event, fileManager) {
+    if (fileManager.directoryModel.getFileList())
+      fileManager.directoryModel.getFileList().sort('name', 'asc');
+  },
+  canExecute: CommandUtil.canExecuteAlways
+});
+
+/**
+ * Sort the file list by size (in descending order).
+ * @type {Command}
+ */
+CommandHandler.COMMANDS_['sort-by-size'] = /** @type {Command} */ ({
+  execute: function(event, fileManager) {
+    if (fileManager.directoryModel.getFileList())
+      fileManager.directoryModel.getFileList().sort('size', 'desc');
+  },
+  canExecute: CommandUtil.canExecuteAlways
+});
+
+/**
+ * Sort the file list by type (in ascending order).
+ * @type {Command}
+ */
+CommandHandler.COMMANDS_['sort-by-type'] = /** @type {Command} */ ({
+  execute: function(event, fileManager) {
+    if (fileManager.directoryModel.getFileList())
+      fileManager.directoryModel.getFileList().sort('type', 'asc');
+  },
+  canExecute: CommandUtil.canExecuteAlways
+});
+
+/**
+ * Sort the file list by date-modified (in descending order).
+ * @type {Command}
+ */
+CommandHandler.COMMANDS_['sort-by-date'] = /** @type {Command} */ ({
+  execute: function(event, fileManager) {
+    if (fileManager.directoryModel.getFileList())
+      fileManager.directoryModel.getFileList().sort('modificationTime', 'desc');
+  },
+  canExecute: CommandUtil.canExecuteAlways
+});
+
 /**
  * Open inspector for foreground page.
  * @type {Command}

ui/file_manager/file_manager/foreground/js/main_scripts.js

@@ -109,6 +109,7 @@
 //<include src="file_transfer_controller.js">
 //<include src="file_watcher.js">
 //<include src="folder_shortcuts_data_model.js">
+//<include src="sort_menu_controller.js">
 //<include src="gear_menu_controller.js">
 //<include src="import_controller.js">
 //<include src="launch_param.js">

ui/file_manager/file_manager/foreground/js/sort_menu_controller.js

@@ -0,0 +1,56 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @param {!cr.ui.MenuButton} sortButton
+ * @param {!FileListModel} fileListModel
+ * @constructor
+ * @struct
+ */
+function SortMenuController(sortButton, fileListModel) {
+  /** @private {!FileListModel} */
+  this.fileListModel_ = fileListModel;
+
+  /** @private {!HTMLElement} */
+  this.sortByNameButton_ = queryRequiredElement(
+      sortButton.menu, '#sort-menu-sort-by-name');
+  /** @private {!HTMLElement} */
+  this.sortBySizeButton_ = queryRequiredElement(
+      sortButton.menu, '#sort-menu-sort-by-size');
+  /** @private {!HTMLElement} */
+  this.sortByTypeButton_ = queryRequiredElement(
+      sortButton.menu, '#sort-menu-sort-by-type');
+  /** @private {!HTMLElement} */
+  this.sortByDateButton_ = queryRequiredElement(
+      sortButton.menu, '#sort-menu-sort-by-date');
+
+  sortButton.addEventListener('menushow', this.updateCheckmark_.bind(this));
+};
+
+/**
+ * Update checkmarks for each sort options.
+ * @private
+ */
+SortMenuController.prototype.updateCheckmark_ = function() {
+  var sortField = this.fileListModel_.sortStatus.field;
+
+  this.setCheckStatus_(this.sortByNameButton_, sortField === 'name');
+  this.setCheckStatus_(this.sortBySizeButton_, sortField === 'size');
+  this.setCheckStatus_(this.sortByTypeButton_, sortField === 'type');
+  this.setCheckStatus_(this.sortByDateButton_,
+                       sortField === 'modificationTime');
+};
+
+/**
+ * Set attribute 'checked' for the menu item.
+ * @param {!HTMLElement} menuItem
+ * @param {boolean} checked True if the item should have 'checked' attribute.
+ * @private
+ */
+SortMenuController.prototype.setCheckStatus_ = function(menuItem, checked) {
+  if (checked)
+    menuItem.setAttribute('checked', '');
+  else
+    menuItem.removeAttribute('checked');
+};

ui/file_manager/file_manager/foreground/js/ui/banners.js

@@ -205,7 +205,7 @@ Banners.prototype.prepareAndShowWelcomeBanner_ = function(type, messageId) {
     more.textContent = str('DRIVE_LEARN_MORE');
     more.href = str('GOOGLE_DRIVE_OVERVIEW_URL');
   }
-  more.tabIndex = '19';  // See: go/filesapp-tabindex.
+  more.tabIndex = '20';  // See: go/filesapp-tabindex.
   more.id = 'drive-welcome-link';
   more.target = '_blank';
 

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -167,6 +167,14 @@ function FileManagerUI(element, launchParam) {
    */
   this.toggleViewButton = queryRequiredElement(this.element, '#view-button');
 
+  /**
+   * The button to sort the file list.
+   * @type {!cr.ui.MenuButton}
+   * @const
+   */
+  this.sortButton = util.queryDecoratedElement(
+      '#sort-button', cr.ui.MenuButton);
+
   /**
    * The button to open gear menu.
    * @type {!cr.ui.MenuButton}

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

@@ -480,6 +480,16 @@ FileTable.decorate = function(
   };
 };
 
+/**
+ * @override
+ */
+FileTable.prototype.sort = function(i) {
+  this.dataModel.sort(this.columnModel.getId(i),
+                      this.columnModel.getDefaultOrder(i));
+  if (this.selectionModel.selectedIndex === -1)
+    this.list.scrollTop = 0;
+};
+
 /**
  * Updates high priority range of list thumbnail loader based on current
  * viewport.

ui/file_manager/file_manager/main.html

@@ -135,6 +135,7 @@
       <script src="foreground/js/file_transfer_controller.js"></script>
       <script src="foreground/js/file_watcher.js"></script>
       <script src="foreground/js/folder_shortcuts_data_model.js"></script>
+      <script src="foreground/js/sort_menu_controller.js"></script>
       <script src="foreground/js/gear_menu_controller.js"></script>
       <script src="foreground/js/import_controller.js"></script>
       <script src="foreground/js/launch_param.js"></script>
@@ -255,6 +256,11 @@
       <command id="zoom-out" shortcut="U+00BD-Ctrl">
       <command id="zoom-reset" shortcut="U+0030-Ctrl">
 
+      <command id="sort-by-name" i18n-values="label:NAME_COLUMN_LABEL">
+      <command id="sort-by-size" i18n-values="label:SIZE_COLUMN_LABEL">
+      <command id="sort-by-type" i18n-values="label:TYPE_COLUMN_LABEL">
+      <command id="sort-by-date" i18n-values="label:DATE_COLUMN_LABEL">
+
       <!-- Shortcuts to open inspector. (Ctrl+Shift+I/J/C/B) -->
       <command id="inspect-normal" shortcut="U+0049-Shift-Ctrl">
       <command id="inspect-console" shortcut="U+004A-Shift-Ctrl">
@@ -298,6 +304,17 @@
       <cr-menu-item command="#create-folder-shortcut"></cr-menu-item>
     </cr-menu>
 
+    <cr-menu id="sort-menu" class="chrome-menu" menu-item-selector="cr-menu-item">
+      <cr-menu-item id="sort-menu-sort-by-name"
+                    command="#sort-by-name"></cr-menu-item>
+      <cr-menu-item id="sort-menu-sort-by-size"
+                    command="#sort-by-size"></cr-menu-item>
+      <cr-menu-item id="sort-menu-sort-by-type"
+                    command="#sort-by-type"></cr-menu-item>
+      <cr-menu-item id="sort-menu-sort-by-date"
+                    command="#sort-by-date"></cr-menu-item>
+    </cr-menu>
+
     <cr-menu id="gear-menu" class="chrome-menu" showShortcuts
              menu-item-selector="cr-menu-item, hr">
       <cr-menu-item id="gear-menu-newwindow" command="#new-window"></cr-menu-item>
@@ -400,7 +417,13 @@
               i18n-values="aria-label:CHANGE_TO_THUMBNAILVIEW_BUTTON_LABEL">
         <paper-ripple fit class="recenteringTouch"></paper-ripple>
       </button>
-      <button id="gear-button" class="icon-button" tabindex="16"
+      <button id="sort-button" class="icon-button" tabindex="16"
+              menu="#sort-menu"
+              i18n-values="aria-label:SORT_BUTTON_TOOLTIP"
+              aria-activedescendant="sort-menu">
+        <paper-ripple fit class="recenteringTouch circle"></paper-ripple>
+      </button>
+      <button id="gear-button" class="icon-button" tabindex="17"
               menu="#gear-menu"
               i18n-values="aria-label:GEAR_BUTTON_TOOLTIP"
               aria-activedescendant="gear-menu">
@@ -432,7 +455,7 @@
     <div class="dialog-container">
       <div class="dialog-navigation-list">
         <div class="dialog-navigation-list-contents">
-          <tree id="directory-tree" tabindex="17"></tree>
+          <tree id="directory-tree" tabindex="18"></tree>
         </div>
         <div class="dialog-navigation-list-footer">
           <div id="progress-center" hidden>

ui/file_manager/integration_tests/file_manager/restore_prefs.js

@@ -10,11 +10,11 @@
 testcase.restoreSortColumn = function() {
   var appId;
   var EXPECTED_FILES = TestEntryInfo.getExpectedRows([
-    ENTRIES.photos,
-    ENTRIES.world,
-    ENTRIES.desktop,
-    ENTRIES.hello,
-    ENTRIES.beautiful
+    ENTRIES.photos,     // 'photos' (directory)
+    ENTRIES.world,      // 'world.ogv', 59943 bytes
+    ENTRIES.beautiful,  // 'Beautiful Song.ogg', 13410 bytes
+    ENTRIES.desktop,    // 'My Desktop Background.png', 272 bytes
+    ENTRIES.hello,      // 'hello.txt', 51 bytes
   ]);
   StepsRunner.run([
     // Set up File Manager.
@@ -34,11 +34,11 @@ testcase.restoreSortColumn = function() {
       remoteCall.waitForElement(appId, '.table-header-sort-image-asc').
           then(this.next);
     },
-    // Sort by name.
+    // Sort by size (in descending order).
     function() {
       remoteCall.callRemoteTestUtil('fakeMouseClick',
                                     appId,
-                                    ['.table-header-cell:nth-of-type(1)'],
+                                    ['.table-header-cell:nth-of-type(2)'],
                                     this.next);
     },
     // Check the sorted style of the header.