file manager: fix and enable thumbnail view

BUG=chromium-os:14644
TEST=manual testing in chromeos-chrome on linux

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

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

8 files changed, 52 insertions, 17 deletions

diff --git a/chrome/browser/resources/component_extension_resources.grd b/chrome/browser/resources/component_extension_resources.grd
index b80e61c..e67d0eb 100644
--- a/chrome/browser/resources/component_extension_resources.grd
+++ b/chrome/browser/resources/component_extension_resources.grd
@@ -25,6 +25,9 @@
         <include name="IDR_FILE_MANAGER_MAIN" file="file_manager/main.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_SLIDESHOW" file="file_manager/slideshow.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_EXIF_READER" file="file_manager/js/exif_reader.js" type="BINDATA" />
+
+        <include name="IDR_FILE_MANAGER_ICON_DETAIL_VIEW" file="file_manager/images/icon-detail-view.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_ICON_THUMB_VIEW" file="file_manager/images/icon-thumb-view.png" type="BINDATA" />
       </if>
 
       <if expr="pp_ifdef('touchui')">
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index e8fa914..1c047069 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -36,6 +36,7 @@ body {
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   -webkit-box-orient: horizontal;
+  -webkit-box-align: center;
   display: -webkit-box;
   margin: 15px;
   margin-bottom: 4px;
@@ -103,6 +104,13 @@ button.thumbnail-view {
   margin-left: 0;
 }
 
+
+button.detail-view > img,
+button.thumbnail-view > img {
+  position: relative;
+  top: 1px;
+}
+
 .list-container {
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
@@ -126,13 +134,21 @@ button.thumbnail-view {
   text-align: center;
 }
 
-.thumbnail-item > img {
-  padding-top: 8px;
-  max-width: 100px;
+.thumbnail-item > div.img-container {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  height: 91px;
+  margin: 2px;
+  width: 116px;
+}
+
+.thumbnail-item > div.img-container > img {
+  max-width: 110px;
   max-height: 85px;
 }
 
-.thumbnail-item > div {
+.thumbnail-item > div.text-container {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/chrome/browser/resources/file_manager/images/icon-detail-view.png b/chrome/browser/resources/file_manager/images/icon-detail-view.png
new file mode 100644
index 0000000..09a7c5e
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/icon-detail-view.png
diff --git a/chrome/browser/resources/file_manager/images/icon-thumb-view.png b/chrome/browser/resources/file_manager/images/icon-thumb-view.png
new file mode 100644
index 0000000..cf5cf0a
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/icon-thumb-view.png
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index d797742..02783f7 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// TODO(rginda): Remove this and related code after zel's file scheme fix lands.
-const ENABLE_EXIF_READER = false;
+// WK Bug 55728 is fixed on the chrome 12 branch but not on the trunk.
+// TODO(rginda): Enable this everywhere once we have a trunk-worthy fix.
+const ENABLE_EXIF_READER = navigator.userAgent.match(/chrome\/12\.0/i);
 
-// TODO(rginda): Remove this when the thumbnail view is less janky.
-const ENABLE_THUMBNAIL_VIEW = false;
+// Thumbnail view is painful without the exif reader.
+const ENABLE_THUMBNAIL_VIEW = ENABLE_EXIF_READER;
 
 var g_slideshow_data = null;
 
@@ -451,6 +452,11 @@ FileManager.prototype = {
     // Populate the static localized strings.
     i18nTemplate.process(this.document_, localStrings.templateData);
 
+    // Always sharing the data model between the detail/thumb views confuses
+    // them.  Instead we maintain this bogus data model, and hook it up to the
+    // view that is not in use.
+    this.emptyDataModel_ = new cr.ui.table.TableDataModel([]);
+
     this.dataModel_ = new cr.ui.table.TableDataModel([]);
     this.dataModel_.sort('name');
     this.dataModel_.addEventListener('sorted',
@@ -480,14 +486,18 @@ FileManager.prototype = {
       return;
 
     if (type == FileManager.ListType.DETAIL) {
+      this.table_.dataModel = this.dataModel_;
       this.table_.style.display = '';
       this.grid_.style.display = 'none';
+      this.grid_.dataModel = this.emptyDataModel_;
       this.currentList_ = this.table_;
       this.dialogDom_.querySelector('button.detail-view').disabled = true;
       this.dialogDom_.querySelector('button.thumbnail-view').disabled = false;
     } else if (type == FileManager.ListType.THUMBNAIL) {
+      this.grid_.dataModel = this.dataModel_;
       this.grid_.style.display = '';
       this.table_.style.display = 'none';
+      this.table_.dataModel = this.emptyDataModel_;
       this.currentList_ = this.grid_;
       this.dialogDom_.querySelector('button.thumbnail-view').disabled = true;
       this.dialogDom_.querySelector('button.detail-view').disabled = false;
@@ -497,7 +507,6 @@ FileManager.prototype = {
 
     this.listType_ = type;
     this.onResize_();
-    this.currentList_.redraw();
   };
 
   /**
@@ -506,14 +515,14 @@ FileManager.prototype = {
   FileManager.prototype.initGrid_ = function() {
     this.grid_ = this.dialogDom_.querySelector('.thumbnail-grid');
     cr.ui.Grid.decorate(this.grid_);
-    this.grid_.dataModel = this.dataModel_;
-    this.grid_.selectionModel = new this.selectionModelClass_();
 
     var self = this;
     this.grid_.itemConstructor = function(entry) {
       return self.renderThumbnail_(entry);
     };
 
+    this.grid_.selectionModel = new this.selectionModelClass_();
+
     this.grid_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
     this.grid_.selectionModel.addEventListener(
@@ -541,7 +550,6 @@ FileManager.prototype = {
     this.table_ = this.dialogDom_.querySelector('.detail-table');
     cr.ui.Table.decorate(this.table_);
 
-    this.table_.dataModel = this.dataModel_;
     this.table_.selectionModel = new this.selectionModelClass_();
     this.table_.columnModel = new cr.ui.table.TableColumnModel(columns);
 
@@ -704,11 +712,16 @@ FileManager.prototype = {
     var li = this.document_.createElement('li');
     li.className = 'thumbnail-item';
 
+    var div = this.document_.createElement('div');
+    div.className = 'img-container';
+    li.appendChild(div);
+
     var img = this.document_.createElement('img');
     this.getThumbnailURL(entry, function(type, url) { img.src = url });
-    li.appendChild(img);
+    div.appendChild(img);
 
-    var div = this.document_.createElement('div');
+    div = this.document_.createElement('div');
+    div.className = 'text-container';
     div.textContent = entry.name;
     li.appendChild(div);
 
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index a637b56..af84918 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -78,8 +78,10 @@
     <div class=dialog-header>
       <div class=breadcrumbs></div>
       <!-- TODO(rginda): Add icons instead of unicode glyphs -->
-      <button class=detail-view>&#x1D306;</button
-      ><button class=thumbnail-view>&#x283F;</button>
+      <button class=detail-view
+              ><img src='images/icon-detail-view.png'></button
+      ><button class=thumbnail-view
+              ><img src='images/icon-thumb-view.png'></button>
       <button i18n-content=NEW_FOLDER_BUTTON_LABEL class='new-folder'
               visibleif='this.dialogType_ == "saveas-file" ||
                          this.dialogType_ == "full-page"'
diff --git a/chrome/browser/resources/file_manager/manifest.json b/chrome/browser/resources/file_manager/manifest.json
index dc4c7d9..105824d 100644
--- a/chrome/browser/resources/file_manager/manifest.json
+++ b/chrome/browser/resources/file_manager/manifest.json
@@ -11,6 +11,7 @@
   "permissions": [
     "fileBrowserHandler",
     "fileBrowserPrivate",
+    "unlimitedStorage",
     "chrome://extension-icon/",
     "chrome://resources/"
   ],
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index f33b621..fc714bc 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -899,7 +899,7 @@ cr.define('cr.ui', function() {
         var list = this;
         window.setTimeout(function() {
           if (listItem.parentNode == list) {
-            this.measured_ = measureItem(list, listItem);
+            list.measured_ = measureItem(list, listItem);
           }
         });
       }