FileManager: Add thumbnail view.

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

 /*
  * Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /* Outer frame of the dialog. */
 body {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
@@ skipping 77 matching lines @@
 }
 
 /* The > arrow between breadcrumbs. */
 .breadcrumb-spacer {
   -webkit-margin-start: 7px;
   -webkit-margin-end: 4px;
   color: #aaa;
   font-size: 12px;
 }
 
+button.detail-view {
+  margin-right: 0;
+}
+
+button.thumbnail-view {
+  margin-left: 0;
+}
+
+.list-container {
+  -webkit-box-orient: vertical;
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+  position: relative;
+}
+
+/* The cr.ui.Grid representing the detailed file list. */
+.thumbnail-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+
+/* An item in the thumbnail view. */
+.thumbnail-item {
+  margin: 10px;
+  width: 120px;
+  height: 120px;
+  text-align: center;
+}
+
+.thumbnail-item > img {
+  padding-top: 8px;
+  max-width: 100px;
+  max-height: 85px;
+}
+
+.thumbnail-item > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* The cr.ui.Table representing the detailed file list. */
 .detail-table {
-  -webkit-box-orient: vertical;
-  -webkit-box-flex: 1;
-  display: -webkit-box;
+  position: absolute;
+  top: 0;
+  left: 0;
   border: 0;
 }
 
-/* The actual element containing the list items. */
-.detail-table > .list {
-  /* TODO(rginda): The list is not able to adjust to the available height,
-   * so we have to hardcode it for now.
-   */
-  height: 417px;
-}
-
 /* The right-column 'Preview' column container. */
 .preview-container {
   -webkit-border-start: 1px #aaa solid;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   width: 225px;
 }
 
 /* cr.ui.Table has a black focus border by default, which we don't want. */
 .detail-table:focus {
@@ skipping 149 matching lines @@
   -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
 /* A vertical spring. */
 .vertical-spacer {
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
   display: -webkit-box;
 }