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..311eb7d7cce1bd309b2269bfe6857c075dfb6270 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,30 @@
       display: block;
     }
     #box {
-      background: white;
       overflow: auto;
+      width: 200px;
+    }
+    .category {
+      color: gray;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+    .type {
+      color: white;
+    }
+    .value {
+      --webkit-margin-start: 100px;
+      color: white;
     }
   </style>
   <template>
     <div id="box">
       <!-- TODO(oka): update appearance to match mocks. -->
-      <div>
-        size: [[size]]<br>
-        modificationTime: [[modificationTime]]
-      </div>
+      <div class="category" i18n-content="METADATA_BOX_GENERAL_INFO"></div>
+      <div class="type" i18n-content="METADATA_BOX_FILE_SIZE"></div>
+      <div class="value">[[size]]</div>
+      <div class="type" i18n-content="METADATA_BOX_MODIFICATION_TIME"></div>
+      <div class="value">[[modificationTime]]</div>
     </div>
   </template>
 </dom-module>