[filebrowser] Save sorting field/order for modal dialogs, show spinner when scanning directories.

BUG=chromium-os:23202
TEST=See bug.
Review URL: https://chromiumcodereview.appspot.com/9349015

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@120773 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/file_manager/css/file_manager.css

@@ -417,6 +417,19 @@ button.thumbnail-view[disabled] {
   position: relative;
 }
 
+.spinner {
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -11px;
+  margin-top: -11px;
+  background-image: url(../images/spinner.svg);
+  background-size: 100%;
+  opacity: 0.5;
+}
+
 .downloads-warning {
   display: -webkit-box;
   -webkit-box-orient: horizontal;

chrome/browser/resources/file_manager/images/spinner.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 100 100" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke-opacity="0" transform="translate(50,50)">
+    <animateTransform attributeName="transform" attributeType="XML"
+      additive="sum" type="rotate"
+      calcMode="discrete"  values="30;60;90;120;150;180;210;240;270;300;330;360"
+      begin="0s" dur="1s" fill="freeze" repeatCount="indefinite" />
+    <path d="M49.931,-2.617
+      a 50,50 0 0,0 -5.381,-20.083
+      l -17.82,9.08
+      a 50 50 0 0,1 3.229,12.05
+      l 19.973,-1.047"
+      fill-opacity = "1"/>
+    <path d="M41.934,-27.232
+      a 50,50 0 0,0 -14.702,-14.702
+      l -10.893,16.773
+      a 50 50 0 0,1 8.821,8.821
+      l 16.773,-10.893"
+      fill-opacity = "0.793"/>
+    <path d="M22.7,-44.55
+      a 50,50 0 0,0 -20.083,-5.381
+      l -1.047,19.973
+      a 50 50 0 0,1 12.05,3.229
+      l 9.08,-17.82"
+      fill-opacity = "0.621"/>
+    <path d="M-2.617,-49.931
+      a 50,50 0 0,0 -20.083,5.381
+      l 9.08,17.82
+      a 50 50 0 0,1 12.05,-3.229
+      l -1.047,-19.973"
+      fill-opacity = "0.48"/>
+    <path d="M-27.232,-41.934
+      a 50,50 0 0,0 -14.702,14.702
+      l 16.773,10.893
+      a 50 50 0 0,1 8.821,-8.821
+      l -10.893,-16.773"
+      fill-opacity = "0.367"/>
+    <path d="M-44.55,-22.7
+      a 50,50 0 0,0 -5.381,20.083
+      l 19.973,1.047
+      a 50 50 0 0,1 3.229,-12.05
+      l -17.82,-9.08"
+      fill-opacity = "0.279"/>
+    <path d="M-49.931,2.617
+      a 50,50 0 0,0 5.381,20.083
+      l 17.82,-9.08
+      a 50 50 0 0,1 -3.229,-12.05
+      l -19.973,1.047"
+      fill-opacity = "0.213"/>
+    <path d="M-41.934,27.232
+      a 50,50 0 0,0 14.702,14.702
+      l 10.893,-16.773
+      a 50 50 0 0,1 -8.821,-8.821
+      l -16.773,10.893"
+      fill-opacity = "0.165"/>
+    <path d="M-22.7,44.55
+      a 50,50 0 0,0 20.083,5.381
+      l 1.047,-19.973
+      a 50 50 0 0,1 -12.05,-3.229
+      l -9.08,17.82"
+      fill-opacity = "0.133"/>
+    <path d="M2.617,49.931
+      a 50,50 0 0,0 20.083,-5.381
+      l -9.08,-17.82
+      a 50 50 0 0,1 -12.05,3.229
+      l 1.047,19.973"
+      fill-opacity = "0.114"/>
+    <path d="M27.232,41.934
+      a 50,50 0 0,0 14.702,-14.702
+      l -16.773,-10.893
+      a 50 50 0 0,1 -8.821,8.821
+      l 10.893,16.773"
+      fill-opacity = "0.104"/>
+    <path d="M44.55,22.7
+      a 50,50 0 0,0 5.381,-20.083
+      l -19.973,-1.047
+      a 50 50 0 0,1 -3.229,12.05
+      l 17.82,9.08"
+      fill-opacity = "0.101"/>
+  </g>
+</svg>

chrome/browser/resources/file_manager/js/directory_model.js

@@ -338,9 +338,15 @@ DirectoryModel.prototype = {
       this.runningScan_.cancel();
     this.pendingScan_ = null;
 
+    var onDone = function() {
+      cr.dispatchSimpleEvent(this, 'scan-completed');
+      callback();
+    }.bind(this);
+
     // Clear the table first.
     this.fileList_.splice(0, this.fileList_.length);
-    this.runningScan_ = this.createScanner_(this.fileList_, callback);
+    cr.dispatchSimpleEvent(this, 'scan-started');
+    this.runningScan_ = this.createScanner_(this.fileList_, onDone);
     this.runningScan_.run();
   },
 

chrome/browser/resources/file_manager/js/file_manager.js

@@ -496,6 +496,10 @@ FileManager.prototype = {
 
     this.directoryModel_.addEventListener('directory-changed',
                                           this.onDirectoryChanged_.bind(this));
+    this.directoryModel_.addEventListener('scan-started',
+                                          this.showSpinner_.bind(this, true));
+    this.directoryModel_.addEventListener('scan-completed',
+                                          this.showSpinner_.bind(this, false));
     this.addEventListener('selection-summarized',
                           this.onSelectionSummarized_.bind(this));
 
@@ -519,7 +523,17 @@ FileManager.prototype = {
 
     this.summarizeSelection_();
 
-    this.directoryModel_.fileList.sort('cachedMtime_', 'desc');
+    var sortField = 'cachedMtime_';
+    var sortDirection = 'desc';
+    if (FileManager.DialogType.isModal(this.dialogType_)) {
+      sortField =
+          window.localStorage['sort-field-' + this.dialogType_] ||
+          sortField;
+      sortDirection =
+          window.localStorage['sort-direction-' + this.dialogType_] ||
+          sortDirection;
+    }
+    this.directoryModel_.fileList.sort(sortField, sortDirection);
 
     this.refocus();
 
@@ -580,6 +594,8 @@ FileManager.prototype = {
     this.deleteButton_ = this.dialogDom_.querySelector('.delete-button');
     this.table_ = this.dialogDom_.querySelector('.detail-table');
     this.grid_ = this.dialogDom_.querySelector('.thumbnail-grid');
+    this.spinner_ = this.dialogDom_.querySelector('.spinner');
+    this.showSpinner_(false);
 
     cr.ui.Table.decorate(this.table_);
     cr.ui.Grid.decorate(this.grid_);
@@ -673,6 +689,8 @@ FileManager.prototype = {
 
     dataModel.addEventListener('splice',
                                this.onDataModelSplice_.bind(this));
+    dataModel.addEventListener('permuted',
+                               this.onDataModelPermuted_.bind(this));
 
     this.directoryModel_.fileListSelection.addEventListener(
         'change', this.onSelectionChanged_.bind(this));
@@ -797,6 +815,15 @@ FileManager.prototype = {
       this.updateSelectAllCheckboxState_(checkbox);
   };
 
+  FileManager.prototype.onDataModelPermuted_ = function(event) {
+    if (FileManager.DialogType.isModal(this.dialogType_)) {
+      var sortStatus = this.directoryModel_.fileList.sortStatus;
+      window.localStorage['sort-field-' + this.dialogType_] = sortStatus.field;
+      window.localStorage['sort-direction-' + this.dialogType_] =
+          sortStatus.direction;
+    }
+  };
+
   /**
    * Get the file type of the entry, caching the result.
    *
@@ -3137,6 +3164,10 @@ FileManager.prototype = {
     setTimeout(this.onResize_.bind(this), 300);
   };
 
+  FileManager.prototype.showSpinner_ = function(on) {
+    this.spinner_.style.display = on ? '' : 'none';
+  };
+
   FileManager.prototype.onNewFolderCommand_ = function(event) {
     var self = this;
 

chrome/browser/resources/file_manager/main.html

@@ -171,6 +171,7 @@
             <div class=list-container>
               <div class=detail-table tabindex=0></div>
               <grid class=thumbnail-grid tabindex=0></grid>
+              <div class=spinner></div>
             </div>
             <div class=downloads-warning hidden>
               <img src=images/warning_icon_square_26x26.png>