Files app: Increase information in details panel.

BUG=274045

Review URL: https://codereview.chromium.org/1823763006

Cr-Commit-Position: refs/heads/master@{#382525}

4 files changed, 53 insertions, 25 deletions

diff --git a/chrome/app/chromeos_strings.grdp b/chrome/app/chromeos_strings.grdp
index 2b9f41e..c88d18e 100644
--- a/chrome/app/chromeos_strings.grdp
+++ b/chrome/app/chromeos_strings.grdp
@@ -172,6 +172,15 @@ Press any key to continue exploring.
   <message name="IDS_FILE_BROWSER_TOTAL_FILE_SIZE_LABEL" desc="Total size of files that user selects in Files app">
     Total file size
   </message>
+  <message name="IDS_FILE_BROWSER_IMAGE_RESOLUTION_COLUMN_LABEL" desc="Image resolution of a file that user selects in Files app">
+    Image resolution
+  </message>
+  <message name="IDS_FILE_BROWSER_MEDIA_TITLE_COLUMN_LABEL" desc="Artist of a music file that user selects in Files app">
+    Title
+  </message>
+  <message name="IDS_FILE_BROWSER_MEDIA_ARTIST_COLUMN_LABEL" desc="Title of a music file that user selects in Files app">
+    Artist
+  </message>
   <message name="IDS_FILE_BROWSER_TYPE_COLUMN_LABEL" desc="Type column label.">
     Type
   </message>
diff --git a/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc b/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc
index cf4cff8..d75d740 100644
--- a/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc
+++ b/chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc
@@ -558,6 +558,12 @@ bool FileManagerPrivateGetStringsFunction::RunSync() {
   SET_STRING("STATUS_COLUMN_LABEL", IDS_FILE_BROWSER_STATUS_COLUMN_LABEL);
   SET_STRING("TOTAL_FILE_SIZE", IDS_FILE_BROWSER_TOTAL_FILE_SIZE_LABEL);
   SET_STRING("TOTAL_FILE_COUNT", IDS_FILE_BROWSER_TOTAL_FILE_COUNT_LABEL);
+  SET_STRING("IMAGE_RESOLUTION_COLUMN_LABEL",
+             IDS_FILE_BROWSER_IMAGE_RESOLUTION_COLUMN_LABEL);
+  SET_STRING("MEDIA_ARTIST_COLUMN_LABEL",
+             IDS_FILE_BROWSER_MEDIA_ARTIST_COLUMN_LABEL);
+  SET_STRING("MEDIA_TITLE_COLUMN_LABEL",
+             IDS_FILE_BROWSER_MEDIA_TITLE_COLUMN_LABEL);
   SET_STRING("SUGGEST_DIALOG_INSTALLATION_FAILED",
              IDS_FILE_BROWSER_SUGGEST_DIALOG_INSTALLATION_FAILED);
   SET_STRING("SUGGEST_DIALOG_LINK_TO_WEBSTORE",
diff --git a/ui/file_manager/file_manager/foreground/js/ui/single_file_details.js b/ui/file_manager/file_manager/foreground/js/ui/single_file_details.js
index 035b04c..da79029 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/single_file_details.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/single_file_details.js
@@ -211,25 +211,32 @@ SingleFileDetailsPanel.prototype = {
    */
   setDetails_: function(entry, item) {
     var elem;
-    // Modification Time
-    elem = queryRequiredElement('.modification-time', this.list_);
-    if (item.modificationTime) {
-      elem.classList.toggle('available', true);
-      queryRequiredElement('.content', elem).textContent =
-          this.formatter_.formatModDate(item.modificationTime);
-    } else {
-      elem.classList.toggle('available', false);
-    }
-    // Filesize
-    elem = queryRequiredElement('.file-size', this.list_);
-    if (item.size) {
-      elem.classList.toggle('available', true);
-      queryRequiredElement('.content', elem).textContent =
-          this.formatter_.formatSize(item.size, item.hosted);
-    } else {
-      elem.classList.toggle('available', false);
-    }
-    // TODO(ryoh): Display more and more details...
+    var self = this;
+    var update = function(query, cond, thunk) {
+      var elem = queryRequiredElement(query, self.list_);
+      if (cond) {
+        elem.classList.toggle('available', true);
+        queryRequiredElement('.content', elem).textContent = thunk();
+      } else {
+        elem.classList.toggle('available', false);
+      }
+    };
+    update('.modification-time', item.modificationTime, function() {
+      return self.formatter_.formatModDate(item.modificationTime);
+    });
+    update('.file-size', item.size, function() {
+      return self.formatter_.formatSize(item.size, item.hosted);
+    });
+    update('.image-size', item.imageWidth && item.imageHeight, function() {
+      return item.imageWidth.toString()+"x"+item.imageHeight;
+    });
+    update('.media-title', item.mediaTitle, function() {
+      return item.mediaTitle;
+    });
+    update('.media-artist', item.mediaArtist, function() {
+      return item.mediaArtist;
+    });
+    // TODO(ryoh): Should we display more and more items?
   },
   /**
    * Called when visibility of this panel is changed.
@@ -256,8 +263,6 @@ SingleFileDetailsPanel.prototype = {
  * @const
  */
 SingleFileDetailsPanel.LOADING_ITEMS = [
-  'availableOffline',
-  'availableWhenMetered',
   'croppedThumbnailUrl',
   'customIconUrl',
   'dirty',
@@ -270,10 +275,6 @@ SingleFileDetailsPanel.LOADING_ITEMS = [
   'mediaMimeType',
   'mediaTitle',
   'modificationTime',
-  'pinned',
-  'present',
-  'shared',
-  'sharedWithMe',
   'size',
   'thumbnailUrl'
 ];
diff --git a/ui/file_manager/file_manager/main.html b/ui/file_manager/file_manager/main.html
index a1c4612..e3e0198 100644
--- a/ui/file_manager/file_manager/main.html
+++ b/ui/file_manager/file_manager/main.html
@@ -428,6 +428,18 @@
               <span i18n-content="SIZE_COLUMN_LABEL"></span>:
               <span class='content'></span>
             </li>
+            <li class='image-size'>
+              <span i18n-content="IMAGE_RESOLUTION_COLUMN_LABEL"></span>:
+              <span class='content'></span>
+            </li>
+            <li class='media-title'>
+              <span i18n-content="MEDIA_TITLE_COLUMN_LABEL"></span>:
+              <span class='content'></span>
+            </li>
+            <li class='media-artist'>
+              <span i18n-content="MEDIA_ARTIST_COLUMN_LABEL"></span>:
+              <span class='content'></span>
+            </li>
           </ul>
         </div>
         <div id="multi-file-details">