Make file manager work better as a component extension

This CL contains some changes necessary to make the file manager work better as a component extension (rather than just in the test harness.)

file_manager_dialogs.cc: turn off context menu
file_manager.css: add opacity transition, comments
file_manager.css: encode images as data: urls
file_manager.js: embed preview images, close window, fix path calculation
file_manager_dialogs.cc: allow closing, hide title

BUG=none
TEST=manual

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

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

3 files changed, 57 insertions, 14 deletions

diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index cacdce2..a80e51f 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -8,10 +8,12 @@
 body {
   -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%;
@@ -154,7 +156,8 @@ body {
 /* The icon in the name column. */
 .detail-icon {
   -webkit-margin-end: 3px;
-  background-image: url(../images/icon-unknown.png);
+  /* ../images/icon-unknown.png */
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCCxUsLubmldcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAlklEQVQ4y2P8////fwYKAAsDAwPD4nWnGA6cuMXw9dtPnAqtjJUZ8hIdMMSZGBgYGPafuIlXMwMDA4OirDDDpPkHsBvw7dsvopyLzRAmUv2MbggLsRqXbjiFwoeFBxMDhWDUAGoZwM/HSZImLi42VANUFcSINoSLi41BS0US1QALI0UGXm4OogyQkxJisDBShPMZKc3OAAB3Jftfqk4+AAAAAElFTkSuQmCC);
   background-position: center;
   background-repeat: no-repeat;
   height: 24px;
@@ -163,7 +166,8 @@ body {
 
 /* Icon for image files. */
 .detail-icon[iconType="image"] {
-  background-image: url(../images/icon-image.png);
+    /* ../images/icon-image.png */
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCCxUtDsSThF4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABQUlEQVQ4y6WTz0vCYBjHP5tDCFmUjS00G5SBWCAhHSKhg0fv/oWdhOjkJehSHkQbnUZJVpRQoIWVkmab6xBMTbGFz/Hl/Xy+74/nERzHcZihJIBC+YaDoxKv7x+eIFWRyWaSpHbWfwS5vMH+7sa/knN5YyCoP7cA2N6MEFvT3E2GWSMw5x+Dz0pVlxEn2W3bwbYdOp3enycRmbGk3wuGWRtLPj69JL0Xw+cTsG1nuiAw5x+5d+W2QfH8mqJRJZ3aomfbSOIUwXCZlScO82VCy0sAnBRMJFFgdWVhsqD22KTx0kZT5ile3GFWai4MENIWAdAjGtX75qjAvHqg3mjT/bSGgKD3R9QjGlZfxPrqTwV6ljUuUBWZt1YXJSh7/j5VkQeCbCZJLm+43eV1FtxGSsTDRHXVc3pUV0nEwwAIs47zNwxadGYSq3VsAAAAAElFTkSuQmCC);
 }
 
 /* The filename text in the preview pane. */
@@ -195,7 +199,8 @@ body {
 
 /* Checkboard background to distinguish images with alpha channels. */
 .preview-img.transparent-background {
-  background-image: url(../images/preview-background.png);
+  /* ../images/preview-background.png */
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOTQAADiYBwNzaZQAAAAd0SU1FB9sDExUSAaQ/5TMAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAQ0lEQVRYw+3VsQkAMQwDQOfJRt7r9/FQ3ilDuAiBUy84UKFVVX8M0t2TenxxOQAAAAAAAAB7+ueZaQIAAAAAAIC3AQceAAfi8EmRSgAAAABJRU5ErkJggg==);
 }
 
 /* The selection summary text at the bottom of the preview pane. */
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 0171631..2407d40 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -41,9 +41,13 @@ function FileManager(dialogDom, filesystem, params) {
   this.initDom_();
   this.initDialogType_();
 
-  this.changeDirectory('/');
+  // TODO(rginda): Fix this when we've got the root dir sorted out.
+  // http://code.google.com/p/chromium-os/issues/detail?id=13845
+  this.changeDirectory('/tmp');
   this.summarizeSelection_();
   this.updatePreview_();
+
+  this.table.querySelector('.list').focus();
 }
 
 FileManager.prototype = {
@@ -56,11 +60,6 @@ FileManager.prototype = {
   // Private variables and helper functions.
 
   /**
-   * Directory where we can find icons.
-   */
-  const ICON_PATH = 'images/';
-
-  /**
    * Unicode codepoint for 'BLACK RIGHT-POINTING SMALL TRIANGLE'.
    */
   const RIGHT_TRIANGLE = '\u25b8';
@@ -88,6 +87,26 @@ FileManager.prototype = {
   };
 
   /**
+   * Canned preview images for non-image files.
+   *
+   * When we're built as a component extension we won't be able to access urls
+   * that haven't been explicitly packed into the resource bundle.  It's
+   * simpler to pack them here as data: urls than it is to maintain code that
+   * maps urls into the resource bundle.  Please make sure to check any new
+   * source images, and refer to the file in the comment here.
+   *
+   * Pro Tip: On *nix, the base64 command line tool can be used to base64
+   * encode arbitrary files.
+   */
+  const previewArt = {
+    // ../images/preview-unknown.png
+    'unknown': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABxCAYAAADF0M04AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sDFgMHCist9V8AAAEQSURBVHja7drLCUJBEETRGjEIEcxZNERBzOK5VkFwMZafc0PoM70Y6JH5LdHTBoDfRrgBOJ0vpn3XbrtJkqxsQL/VTID94WjCBQQAZQQAZQQAZQQAZQQAZQQAZQQAZQQAX/BZ02QEW1BGAFBGAFBGAFBGAFBGAFBGAFBGAFBGAFBGAFBGAFBs5E2XEU5eHpt98qIXWnupn/9jFgQIggBBECAIAgRBgCAIEAQBgiAIAgRBgCAIEAQBgiBAEAQIggBBECAIAgRBgCAIEAQBgiBAEAQIggBBECAIAgRBgCAIEAQBgiBAEAQIggBBECAIAgRBgCAIEAQBgiBAEAQIggBBECAIgiBAUJJkJFmMwSb8fVcLi0WbrZFumAAAAABJRU5ErkJggg==',
+
+    // ../images/preview-folder.png
+    'folder': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAABjCAYAAACli086AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sDFgMHGa+TtIEAAAVTSURBVHja7Z07bxxlGIWfcYzBkIvjm2JjGwjYOAm2Q8LFEIxASAgakCiQUrCioUCIkgoqRLcFFQUlUPAP+AEkXARKiAk2jiEhiYNt1t7EN3y3l2JnkhT27s7uK94xnCOtvq2mOI9mvjPffHMmwE45pESoShb891RtfcCTH5ySq0768qMBnam6/EqCKgmqJKiSoP7PFACfASlZ4a/+V97ngd6XTG5pvpadyVDm6qDJcaqB78L/Q+99njsia/99DX3zBV99miJ77RezOXUk/N8te3105MQbAMxlr5pB3QQuAbvSqeCgLPbRPXWt5HKbLNwYN0u/P4TjE7LXRw2thwDIjv9qBjUKS8/KXh81d/SZhaUI6rfh+LTs9VFjew8A09fOm0EdDsfDstdHPQNv5sPS1GUzqGvAGFCTTgXtsthHd+9tZnNzncW5jAlUgB/D8XHZ66P6lu4wLI2YQVVY8g5L9x0FYOrqOTOoCkveYantkTzUCleWbocaxa4e2eujvufeAmA2c9EM6jIwAdSmU0GLLPbRXbsb2FhfZWkhawIV4Ew4Hpe9TmHpwMMAXJ+4YAY12t85IHt91NTRG4aln82gng7HZ2SvE9T2EOqYHdToSL2y10ePvvA2ADOZ382gLgDTwJ7F+ekPZbGPamr3sb66xMrirAlUgLMAn7zTdFr2OoWllq58WJocNYOqsOQ+r/aFYWnQDKrC0g4PS1tB/Smas2Wvj46/+C4ANyZ/M4M6C8wAdbLXT3fcuZu1lQVWlxdMoN48W9Op4HnZ66P9BzrLPlu3g6p5dQfPq9tBVQL2hhpuRJsaGzSDejYcj8leHx3sfTl/rzoxagY1C8wDjbLXRw2t3VTX1LK6NMva6qIJVAjXgdOp4IQs9lFd80MAzPx10QyqwtIODUuFoCosuYel8p6tFoKqXRDOqm8Jd0FMXjCDOgksAdqv5KTOY6+yq7qG5YUsG+srJlAh3GGYTgV6G85J+5ofzIelzCUzqNoL7D2vhnuBp2PsBS4GVbv23cNSftd+5so5M6h6vyYBixAA1ydGzKBeA1YBvQnnpK7HXqOqqprFuQybG+smUCF8dzWdCo7KYh/tbbofgNnpy2ZQFZac1dgWvmU+dt4MqsKSs+L2QZQCVc0t7mEpXnNLKVD/ADYAdSw5qfvJ1wmCKv6eGSeX2zSBCmErWjoVqObOKyw1dAAwN33FDGrUX/iU7HW6BN9cWRoyg6qwlJiwdM4M6vfh2C97vW5r8jNf9s9hM6jR5tNO2eujQ/0nAZi/PmYGFWAUCNKpoEsW+2hPfXtJYONA1SXYOyzde7iksBQHqsKSe1gKH8MVWVmKA1W3NUkJS0UemMeBqlp2Z5Vayx4HqmrZE6BSatnjfmxIi/veYamExf24UBWW3MNS8cdwcaHqgbl3WCqhlj0uVNWyO6uUWva4UFXLngAVq2Uv56uM2jbqrGK17OVAVVjyDktFatnLgaqw5B2WitSylwNVtezOKlbLXg5U1bInQIVq2cv9fLVeSPYOSwVq2cuFquoAZxWqDigXqko+vKEWKPkoF6pq2Z1VqJa9XKiqZU+Atqtlr6rgmKpl9w5L29SyVwJVYcl9Xt26lr0SqApLCQ1LlUBVLbuztqtlrwSqatkToK1q2asqPKZq2Z21VS17pVA1ryZwXq0UqhKwN9QtatkrhapadmdtVcteKVTVsjvr9lp2K6hwq5ZdDjspqmW3hKplwoSEJUuop2Srd1iyh3pGtvoqqmW3hBrVsktOimrZLaHCrVp2OeykqJbdUh8DOf2S8bM6tcaANp0vyZDl9XJYdrqrBdj/D94xFInAmNPFAAAAAElFTkSuQmCC',
+  };
+
+  /**
    * Return a translated string.
    *
    * Wrapper function to make dealing with translated strings more concise.
@@ -125,8 +144,8 @@ FileManager.prototype = {
     if (entry.isDirectory)
       return 'folder';
 
-    for (var name in this.iconTypes) {
-      var value = this.iconTypes[name];
+    for (var name in iconTypes) {
+      var value = iconTypes[name];
 
       if (value instanceof RegExp) {
         if (value.test(entry.name))
@@ -332,6 +351,8 @@ FileManager.prototype = {
         'dblclick', this.onDetailDoubleClick_.bind(this));
     this.table.selectionModel.addEventListener(
         'change', this.onDetailSelectionChanged_.bind(this));
+
+    this.dialogDom_.style.opacity = '1';
   };
 
   /**
@@ -600,9 +621,10 @@ FileManager.prototype = {
     var iconType = getIconType(entry);
     if (iconType != 'image') {
       // Not an image, display a canned clip-art graphic.
-      this.previewImage_.src = ICON_PATH + 'preview-' + iconType + '.png';
+      this.previewImage_.src = previewArt[iconType];
     } else {
       // File is an image, fetch the thumbnail.
+
       var fileManager = this;
 
       batchAsyncCall(entry, 'file', function(file) {
@@ -725,6 +747,9 @@ FileManager.prototype = {
     if (entry.isDirectory)
       return this.changeDirectory(entry.fullPath);
 
+    if (!this.okButton_.disabled)
+      this.onOk_();
+
   };
 
   /**
@@ -738,11 +763,19 @@ FileManager.prototype = {
 
     function onReadSome(entries) {
       if (entries.length == 0)
-      return;
+        return;
 
       // Splice takes the to-be-spliced-in array as individual parameters,
       // rather than as an array, so we need to perform some acrobatics...
       var spliceArgs = [].slice.call(entries);
+
+      // Hide files that start with a dot ('.').
+      // TODO(rginda): User should be able to override this.  Support for other
+      // commonly hidden patterns might be nice too.
+      spliceArgs = spliceArgs.filter(function(e) {
+          return e.name.substr(0, 1) != '.';
+      });
+
       spliceArgs.unshift(0, 0);  // index, deleteCount
       self.table.dataModel.splice.apply(self.table.dataModel, spliceArgs);
 
@@ -787,6 +820,7 @@ FileManager.prototype = {
    */
   FileManager.prototype.onCancel_ = function(event) {
     chrome.fileBrowserPrivate.cancelDialog();
+    window.close();
   };
 
   /**
@@ -807,6 +841,7 @@ FileManager.prototype = {
 
       chrome.fileBrowserPrivate.selectFile(this.currentDirEntry_.fullPath +
                                            '/' + filename, 0);
+      window.close();
       return;
     }
 
@@ -832,6 +867,7 @@ FileManager.prototype = {
     // Multi-file selection has no other restrictions.
     if (this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FILES) {
       chrome.fileBrowserPrivate.selectFiles(ary);
+      window.close();
       return;
     }
 
@@ -848,6 +884,7 @@ FileManager.prototype = {
     }
 
     chrome.fileBrowserPrivate.selectFile(ary[0], 0);
+    window.close();
   };
 
 })();
diff --git a/chrome/browser/ui/views/file_manager_dialogs.cc b/chrome/browser/ui/views/file_manager_dialogs.cc
index 062bcc1..98b2952 100644
--- a/chrome/browser/ui/views/file_manager_dialogs.cc
+++ b/chrome/browser/ui/views/file_manager_dialogs.cc
@@ -118,12 +118,13 @@ class FileManagerDialog
   // windows.close() and you've allowed that.  If the output parameter
   // is set to true, then the dialog is closed.  The default is false.
   virtual void OnCloseContents(TabContents* source, bool* out_close_dialog) {
+    *out_close_dialog = true;
   }
 
   // A callback to allow the delegate to dictate that the window should not
   // have a title bar.  This is useful when presenting branded interfaces.
   virtual bool ShouldShowDialogTitle() const {
-    return true;
+    return false;
   }
 
   // A callback to allow the delegate to inhibit context menu or show