Quick View: Initial implementation of "No preview availale" and UI update.

ui/file_manager/file_manager/foreground/elements/files_metadata_box.html

Index: ui/file_manager/file_manager/foreground/elements/files_metadata_box.html
diff --git a/ui/file_manager/file_manager/foreground/elements/files_metadata_box.html b/ui/file_manager/file_manager/foreground/elements/files_metadata_box.html
index f93d7e5b09b3b320639fdef37da324f816afcd1a..a4c8a0c7188313d4a683122dc119295a605dcd3e 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_metadata_box.html
+++ b/ui/file_manager/file_manager/foreground/elements/files_metadata_box.html
@@ -11,17 +11,31 @@
       display: block;
     }
     #box {
-      background: white;
       overflow: auto;
+      width: 200px;
+    }
+    .category {
+      color: gray;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+    .type {
+      color: white;
+    }
+    .value {
+      color: white;
+      margin-left: 100px;

[fukino, 2016/06/17 02:35:13]

Consider RTL situation. (--webkit-margin-start)

[oka, 2016/06/17 23:13:53]

Done.

     }
   </style>
   <template>
     <div id="box">
       <!-- TODO(oka): update appearance to match mocks. -->
-      <div>
-        size: [[size]]<br>
-        modificationTime: [[modificationTime]]
-      </div>
+      <!-- TODO(oka): i18n -->

[fukino, 2016/06/17 02:35:13]

use i18n-content.

[oka, 2016/06/17 23:13:53]

Done.

+      <div class="category">General Info</div>
+      <div class="type">Size</div>
+      <div class="value">[[size]]</div>
+      <div class="type">Modified Time</div>
+      <div class="value">[[modificationTime]]</div>
     </div>
   </template>
 </dom-module>