File Manager: Assorted fixes and polish

Add chromeish button style
Fix dialog gradient and transitions
Fix harness file creation
Fix task button rendering
Make list header gradient not leak outside of list
Show checkmark even when only a single item is selected (multi-select mode only).
Add a delay to the mock tasks callback to better simulate the real world.

BUG=chromium-os:17028, chromium-os:19373, chromium-os:19693
TEST=manual testing

Review URL: http://codereview.chromium.org/7764011

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

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

@@ -12,11 +12,11 @@
   height: 100%;
   width: 100%;
 
-  background-color: rgba(0,0,0,0.05);
-  -webkit-box-shadow: inset 0px 0px 100px #000;
+  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
+                                      rgba(127, 127, 127, 0.5) 35%,
+                                      rgba(0, 0, 0, 0.7));
   opacity: 0;
   -webkit-transition: opacity 0.25s linear;
-
   overflow: hidden;
 
   z-index: 9999;

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

@@ -6,17 +6,61 @@
 
 /* Outer frame of the dialog. */
 body {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  -webkit-transition: opacity 0.07s linear;
+   -webkit-box-flex: 1;
+   -webkit-box-orient: vertical;
+   -webkit-transition: opacity 0.07s linear;
+   -webkit-user-select: none;
+   display: -webkit-box;
+   height: 100%;
+   margin: 0;
+   opacity: 0;
+   padding: 0;
+   position: absolute;
+   width: 100%;
+}
+
+button,
+input[type='button'],
+input[type='submit'] {
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
-  display: -webkit-box;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  padding: 0;
-  position: absolute;
-  width: 100%;
+  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  border: 1px solid #aaa;
+  color: #444;
+  font-size: inherit;
+  margin-bottom: 0px;
+  min-width: 4em;
+  padding: 3px 12px 3px 12px;
+}
+
+button:hover,
+input[type='button']:hover,
+input[type='submit']:hover {
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  border-color: #999;
+  color: #222;
+}
+
+button:active,
+input[type='button']:active,
+input[type='submit']:active {
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+  background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #333;
+}
+
+button[disabled],
+input[type='button'][disabled],
+input[type='submit'][disabled],
+button[disabled]:hover,
+input[type='button'][disabled]:hover,
+input[type='submit'][disabled]:hover {
+  -webkit-box-shadow: none;
+  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  border-color: #aaa;
+  color: #888;
 }
 
 .butter-bar {
@@ -70,10 +114,11 @@ body {
   -webkit-box-orient: horizontal;
   -webkit-box-flex: 1;
   border: 1px #aaa solid;
-  border-radius: 3px;
+  border-radius: 4px;
   display: -webkit-box;
   margin: 15px;
   margin-top: 0;
+  overflow: hidden;
 }
 
 /* Container for the ok/cancel buttons. */
@@ -253,6 +298,14 @@ button.thumbnail-view > img {
   height: 28px;
 }
 
+.list-container .table-header {
+  border-radius: 4px 0 0 0;
+}
+
+.preview-container .table-header {
+  border-radius: 0 4px 0 0;
+}
+
 /* Text label in a table header. */
 .table-header-label {
   margin-top: 6px;

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

@@ -31,7 +31,7 @@ cr.define('cr.ui.dialogs', function() {
    * Number of miliseconds animation is expected to take, plus some margin for
    * error.
    */
-  BaseDialog.ANIMATION_STABLE_DURATION = 500;
+  BaseDialog.ANIMATE_STABLE_DURATION = 500;
 
   BaseDialog.prototype.initDom_ = function() {
     var doc = this.document_;
@@ -123,17 +123,22 @@ cr.define('cr.ui.dialogs', function() {
     var left = (this.document_.body.clientWidth -
                 this.frame_.clientWidth) / 2;
 
+    // Disable transitions so that we can set the initial position of the
+    // dialog right away.
+    this.frame_.style.webkitTransitionProperty = '';
     this.frame_.style.top = (top - 50) + 'px';
     this.frame_.style.left = (left + 10) + 'px';
 
     var self = this;
     setTimeout(function () {
+      // Note that we control the opacity of the *container*, but the top/left
+      // of the *frame*.
+      self.container_.style.opacity = '1';
       self.frame_.style.top = top + 'px';
       self.frame_.style.left = left + 'px';
       self.frame_.style.webkitTransitionProperty = 'left, top';
-      self.container_.style.opacity = '1';
+      self.initialFocusElement_.focus();
       setTimeout(function() {
-        self.initialFocusElement_.focus();
         if (onShow)
           onShow();
       }, BaseDialog.ANIMATE_STABLE_DURATION);
@@ -141,6 +146,8 @@ cr.define('cr.ui.dialogs', function() {
   };
 
   BaseDialog.prototype.hide = function(onHide) {
+    // Note that we control the opacity of the *container*, but the top/left
+    // of the *frame*.
     this.container_.style.opacity = '0';
     this.frame_.style.top = (parseInt(this.frame_.style.top) + 50) + 'px';
     this.frame_.style.left = (parseInt(this.frame_.style.left) - 10) + 'px';
@@ -155,7 +162,6 @@ cr.define('cr.ui.dialogs', function() {
     setTimeout(function() {
       // Wait until the transition is done before removing the dialog.
       self.parentNode_.removeChild(self.container_);
-      self.frame_.style.webkitTransitionProperty = '';
       if (onHide)
         onHide();
     }, BaseDialog.ANIMATE_STABLE_DURATION);

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

@@ -1648,6 +1648,8 @@ FileManager.prototype = {
    * @param {Array.<Task>} tasksList The tasks list.
    */
   FileManager.prototype.onTasksFound_ = function(selection, tasksList) {
+    this.taskButtons_.innerHTML = '';
+
     for (var i = 0; i < tasksList.length; i++) {
       var task = tasksList[i];
 
@@ -1683,9 +1685,10 @@ FileManager.prototype = {
       }
       this.renderTaskButton_(task);
     }
-    this.maybeRenderUnmountTask_(selection);
-    // This needs to be done in separate function, as check requires
+
+    // These are done in separate functions, as the checks require
     // asynchronous function calls.
+    this.maybeRenderUnmountTask_(selection);
     this.maybeRenderFormattingTask_(selection);
   };
 
@@ -2478,13 +2481,10 @@ FileManager.prototype = {
       }
     }
 
-    if (this.selection.fileCount > 1) {
+    if (this.selection.totalCount > 0) {
       // If more than one file is selected, make sure all checkboxes are lit
       // up.
       for (var i = 0; i < this.selection.entries.length; i++) {
-        if (!this.selection.entries[i].isFile)
-          continue;
-
         var selectedIndex = this.selection.indexes[i];
         var listItem = this.currentList_.getListItemByIndex(selectedIndex);
         if (listItem)

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

@@ -18,8 +18,8 @@ var harness = {
     function onFilesystem(filesystem) {
       console.log('Filesystem found.');
       self.filesystem = filesystem;
-      util.getOrCreateDirectory('/Downloads', function () {});
-      util.getOrCreateDirectory('/media', function () {});
+      util.getOrCreateDirectory(filesystem.root, '/Downloads', function () {});
+      util.getOrCreateDirectory(filesystem.root, '/media', function () {});
     };
 
     window.webkitRequestFileSystem(window.PERSISTENT, 16 * 1024 * 1024,
@@ -131,7 +131,7 @@ var harness = {
       currentSrc = files.shift();
       var destPath = harness.fileManager.currentDirEntry_.fullPath + '/' +
           currentSrc.name.replace(/\^\^/g, '/');
-      util.getOrCreateFile(destPath, onFileFound,
+      util.getOrCreateFile(self.filesystem.root, destPath, onFileFound,
                            util.flog('Error finding path: ' + destPath));
     }
 

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

@@ -108,7 +108,9 @@ chrome.fileBrowserPrivate = {
       }
     }
 
-    callback(candidateTasks);
+    setTimeout(function() {
+      callback(candidateTasks);
+    }, 200);
   },
 
   /**

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

@@ -254,7 +254,7 @@ var util = {
    * Locate the file referred to by path, creating directories or the file
    * itself if necessary.
    */
-  getOrCreateFile: function(path, successCallback, errorCallback) {
+  getOrCreateFile: function(root, path, successCallback, errorCallback) {
     var dirname = null;
     var basename = null;
 
@@ -272,16 +272,16 @@ var util = {
     }
 
     if (!dirname)
-      return onDirFound(this.filesystem.root);
+      return onDirFound(root);
 
-    this.getOrCreateDirectory(dirname, onDirFound, errorCallback);
+    util.getOrCreateDirectory(root, dirname, onDirFound, errorCallback);
   },
 
   /**
    * Locate the directory referred to by path, creating directories along the
    * way.
    */
-  getOrCreateDirectory: function(path, successCallback, errorCallback) {
+  getOrCreateDirectory: function(root, path, successCallback, errorCallback) {
     var names = path.split('/');
 
     function getOrCreateNextName(dir) {
@@ -297,7 +297,7 @@ var util = {
                        errorCallback);
     }
 
-    getOrCreateNextName(this.filesystem.root);
+    getOrCreateNextName(root);
   },
 
   /**

chrome/browser/resources/file_manager/main.html

@@ -138,8 +138,8 @@
                  i18n-content=PREVIEW_COLUMN_LABEL>[PREVIEW]</div>
           </div>
         </div>
-        <div class=preview-filename></div>
         <center><img class=preview-img></center>
+        <div class=preview-filename></div>
         <div class="preview-metadata">
             <table class="preview-metadata-table">
             </table>