Quick View: Add more metadata and update UI.

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 311eb7d7cce1bd309b2269bfe6857c075dfb6270..2634404439294de92494ea84a271070090d4c3c8 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
@@ -4,37 +4,56 @@
 -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="files_metadata_entry.html">
 
 <dom-module id="files-metadata-box">
   <style>
-    :host {
-      display: block;
+    div {
+      margin: 0;
+      padding: 0;
+    }
+
+    div[hidden] {
+      display: none;
     }
+
     #box {
+      display: block;
+      margin: 0;
       overflow: auto;
-      width: 200px;
+      padding: 0;
+      width: 320px;
     }
+
     .category {
-      color: gray;
+      color: #E6E6E6;
+      font-size: 16px;
       font-weight: bold;
-      margin-bottom: 10px;
-    }
-    .type {
-      color: white;
+      margin: 12px 15px;
+      vertical-align: bottom;
     }
-    .value {
-      --webkit-margin-start: 100px;
-      color: white;
+
+    hr {
+      border-color: #636363;
+      margin-top: 31px;
     }
   </style>
   <template>
     <div id="box">
-      <!-- TODO(oka): update appearance to match mocks. -->
       <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>
+      <files-metadata-entry i18n-values="key:METADATA_BOX_FILE_SIZE" value="[[size]]"></files-metadata-entry>
+      <files-metadata-entry i18n-values="key:METADATA_BOX_MODIFICATION_TIME" value="[[modificationTime]]"></files-metadata-entry>
+      <files-metadata-entry i18n-values="key:METADATA_BOX_MEDIA_MIME_TYPE" value="[[mediaMimeType]]"></files-metadata-entry>
+
+      <div hidden="[[!hasFileSpecificInfo_(imageWidth, imageHeight, mediaTitle, mediaArtist)]]">
+        <hr>
+        <div class="category" hidden="[[!isImage_(type)]]" i18n-content="METADATA_BOX_IMAGE_INFO"></div>
+        <div class="category" hidden="[[!isAudio_(type)]]" i18n-content="METADATA_BOX_AUDIO_INFO"></div>
+        <div class="category" hidden="[[!isVideo_(type)]]" i18n-content="METADATA_BOX_VIDEO_INFO"></div>
+        <files-metadata-entry i18n-values="key:METADATA_BOX_RESOLUTION" value="[[resolution_(imageWidth, imageHeight)]]"></files-metadata-entry>
+        <files-metadata-entry i18n-values="key:METADATA_BOX_MEDIA_TITLE" value="[[mediaTitle]]"></files-metadata-entry>
+        <files-metadata-entry i18n-values="key:METADATA_BOX_MEDIA_ARTIST" value="[[mediaArtist]]"></files-metadata-entry>
+      </div>
     </div>
   </template>
 </dom-module>