File Manager: Add production art

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

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

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

17 files changed, 69 insertions, 33 deletions

diff --git a/chrome/browser/resources/component_extension_resources.grd b/chrome/browser/resources/component_extension_resources.grd
index e67d0eb..178b5c6 100644
--- a/chrome/browser/resources/component_extension_resources.grd
+++ b/chrome/browser/resources/component_extension_resources.grd
@@ -26,6 +26,22 @@
         <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_IMG_FILETYPE_AUDIO" file="file_manager/images/filetype_audio.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_DOC" file="file_manager/images/filetype_doc.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_FOLDER" file="file_manager/images/filetype_folder.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_GENERIC" file="file_manager/images/filetype_generic.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_HTML" file="file_manager/images/filetype_html.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_IMAGE" file="file_manager/images/filetype_image.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_PDF" file="file_manager/images/filetype_pdf.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_PRESENTATION" file="file_manager/images/filetype_presentation.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_SPREADSHEET" file="file_manager/images/filetype_spreadsheet.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_TEXT" file="file_manager/images/filetype_text.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_VIDEO" file="file_manager/images/filetype_video.png" type="BINDATA" />
+
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_LARGE_FOLDER" file="file_manager/images/filetype_large_folder.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_LARGE_GENERIC" file="file_manager/images/filetype_large_generic.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_FILETYPE_LARGE_GENERIC_MULTIPLE" file="file_manager/images/filetype_large_generic_multiple.png" 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>
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 1c047069..ba09cc1 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -221,23 +221,51 @@ button.thumbnail-view > img {
 .detail-icon {
   -webkit-margin-end: 3px;
   -webkit-margin-start: 3px;
-  /* ../images/icon-unknown.png */
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCCxUsLubmldcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAlklEQVQ4y2P8////fwYKAAsDAwPD4nWnGA6cuMXw9dtPnAqtjJUZ8hIdMMSZGBgYGPafuIlXMwMDA4OirDDDpPkHsBvw7dsvopyLzRAmUv2MbggLsRqXbjiFwoeFBxMDhWDUAGoZwM/HSZImLi42VANUFcSINoSLi41BS0US1QALI0UGXm4OogyQkxJisDBShPMZKc3OAAB3Jftfqk4+AAAAAElFTkSuQmCC);
+  background-image: url(../images/filetype_generic.png);
   background-position: center;
   background-repeat: no-repeat;
   height: 24px;
 }
 
-/* Icon for folders. */
+/* Icon for files in the detail list. */
+.detail-icon[iconType="audio"] {
+  background-image: url(../images/filetype_audio.png);
+}
+
+.detail-icon[iconType="doc"] {
+  background-image: url(../images/filetype_doc.png);
+}
+
 .detail-icon[iconType="folder"] {
-    /* ../images/icon-image.png */
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sECBQhEXkZ9t4AAADnSURBVCjPnZI/agJBFMZ/b2KuYJqAeAAbsbUUUqZII3qNtRNtRLTzCnqBHCJl8AYhLIGIq4X/FlnUGYtZ3RSB3dkfDAwM73vf994ICf3626BnMKQhCFqfOe7XCGSo+Idm94PdyqcA0JndNQwgKe0Zt4VzdASwAqJAX27PKcS9TlEIgHoq1xqjljjZ92aG98mrFVh+f/46DyB2IUqhgC9yIvKAAiIAY0yObWhUoibiWh5ul4lAHg6bhV1bsVR9Dvz5jzfVBrI5KTzCsCnWQeDPw1uQzOntv7lH2DmPT8eXcuVF/mzX+VwB3O5RWcIfa4kAAAAASUVORK5CYII=);
+  background-image: url(../images/filetype_folder.png);
+}
+
+.detail-icon[iconType="html"] {
+  background-image: url(../images/filetype_html.png);
 }
 
-/* Icon for image files. */
 .detail-icon[iconType="image"] {
-    /* ../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);
+  background-image: url(../images/filetype_image.png);
+}
+
+.detail-icon[iconType="pdf"] {
+  background-image: url(../images/filetype_pdf.png);
+}
+
+.detail-icon[iconType="presentation"] {
+  background-image: url(../images/filetype_presentation.png);
+}
+
+.detail-icon[iconType="spreadsheet"] {
+  background-image: url(../images/filetype_spreadsheet.png);
+}
+
+.detail-icon[iconType="text"] {
+  background-image: url(../images/filetype_text.png);
+}
+
+.detail-icon[iconType="video"] {
+  background-image: url(../images/filetype_video.png);
 }
 
 /* The filename text in the preview pane. */
diff --git a/chrome/browser/resources/file_manager/images/filetype_audio.png b/chrome/browser/resources/file_manager/images/filetype_audio.png
new file mode 100644
index 0000000..b216c34
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_audio.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_doc.png b/chrome/browser/resources/file_manager/images/filetype_doc.png
new file mode 100644
index 0000000..03cfc35
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_doc.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_folder.png b/chrome/browser/resources/file_manager/images/filetype_folder.png
new file mode 100644
index 0000000..33c4d84
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_folder.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_generic.png b/chrome/browser/resources/file_manager/images/filetype_generic.png
new file mode 100644
index 0000000..02dbb39
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_generic.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_html.png b/chrome/browser/resources/file_manager/images/filetype_html.png
new file mode 100644
index 0000000..994c785
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_html.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_image.png b/chrome/browser/resources/file_manager/images/filetype_image.png
new file mode 100644
index 0000000..5e4d39c
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_image.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_large_folder.png b/chrome/browser/resources/file_manager/images/filetype_large_folder.png
new file mode 100644
index 0000000..3b75e6a
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_large_folder.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_large_generic.png b/chrome/browser/resources/file_manager/images/filetype_large_generic.png
new file mode 100644
index 0000000..f530c8e
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_large_generic.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_large_generic_multiple.png b/chrome/browser/resources/file_manager/images/filetype_large_generic_multiple.png
new file mode 100644
index 0000000..a097622
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_large_generic_multiple.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_pdf.png b/chrome/browser/resources/file_manager/images/filetype_pdf.png
new file mode 100644
index 0000000..f00592f
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_pdf.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_presentation.png b/chrome/browser/resources/file_manager/images/filetype_presentation.png
new file mode 100644
index 0000000..aec90c6
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_presentation.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_spreadsheet.png b/chrome/browser/resources/file_manager/images/filetype_spreadsheet.png
new file mode 100644
index 0000000..58de0d0
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_spreadsheet.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_text.png b/chrome/browser/resources/file_manager/images/filetype_text.png
new file mode 100644
index 0000000..01c7ce1
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_text.png
diff --git a/chrome/browser/resources/file_manager/images/filetype_video.png b/chrome/browser/resources/file_manager/images/filetype_video.png
new file mode 100644
index 0000000..e1fd1cc
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/filetype_video.png
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index ca37fdb..1aff057 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -102,33 +102,22 @@ FileManager.prototype = {
    * defined, so don't depend on it.
    */
   const iconTypes = {
-    'image': /\.(png|gif|jpe?g)$/i,
-    // TODO(rginda): Uncomment these rules when we get the graphic assets.
-    // 'document' : /\.(txt|doc|docx|wpd|odt|ps)$/i,
-    // 'pdf' : /\.(pdf)$/i,
-    // 'drawing': /\.(svg)$/i,
-    // 'spreadsheet': /\.(xls|xlsx)$/i,
-    // 'presentation': /\.(ppt|pptx)$/i
+    'audio': /\.(aac|aiff|atrac|cda|flac|mp3|pcm|ogg|raw|wav)$/i,
+    'doc' : /\.(doc|docx|odt|ps|rtf|txt|wpd)$/i,
+    'html': /\.(html?)$/i,
+    'image': /\.(bmp|gif|jpe?g|ico|png|webp)$/i,
+    'pdf' : /\.(pdf)$/i,
+    'presentation': /\.(odp|ppt|pptx)$/i,
+    'spreadsheet': /\.(ods|xls|xlsx)$/i,
+    'text': /\.(pod|rst|txt)$/i,
+    'video':
+    /\.(3gp|asf|avi|di?vx|f4v|fbr|mp4|mpe?g4?|ogm|ogv|ogx|webm|wmv?|xvid)$/i
   };
 
-  /**
-   * 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',
+  const previewArt = {
+    'unknown': 'images/filetype_large_generic.png',
+    'folder': 'images/filetype_large_folder.png'
   };
 
   /**
@@ -1096,9 +1085,9 @@ FileManager.prototype = {
       }
 
       if (url) {
+        self.previewImage_.src = url;
         if (iconType == 'image')
           self.previewImage_.classList.add('transparent-background');
-        self.previewImage_.src = url;
       } else {
         self.previewImage_.src = previewArt['unknown'];
       }
@@ -1139,6 +1128,9 @@ FileManager.prototype = {
     var iconType = getIconType(entry);
     if (iconType != 'image') {
       // Not an image, display a canned clip-art graphic.
+      if (!(iconType in previewArt))
+        iconType = 'unknown';
+
       setTimeout(function() { callback(iconType, previewArt[iconType]) });
       return;
     }