Files app: Increase information in details panel.

BUG=274045

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

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

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>

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",

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
+    var self = this;
-    elem = queryRequiredElement('.modification-time', this.list_);
+    var update = function(query, cond, thunk) {
-    if (item.modificationTime) {
+      var elem = queryRequiredElement(query, self.list_);
-      elem.classList.toggle('available', true);
+      if (cond) {
-      queryRequiredElement('.content', elem).textContent =
+        elem.classList.toggle('available', true);
-          this.formatter_.formatModDate(item.modificationTime);
+        queryRequiredElement('.content', elem).textContent = thunk();
-    } else {
+      } else {
-      elem.classList.toggle('available', false);
+        elem.classList.toggle('available', false);
-    }
+      }
-    // Filesize
+    };
-    elem = queryRequiredElement('.file-size', this.list_);
+    update('.modification-time', item.modificationTime, function() {
-    if (item.size) {
+      return self.formatter_.formatModDate(item.modificationTime);
-      elem.classList.toggle('available', true);
+    });
-      queryRequiredElement('.content', elem).textContent =
+    update('.file-size', item.size, function() {
-          this.formatter_.formatSize(item.size, item.hosted);
+      return self.formatter_.formatSize(item.size, item.hosted);
-    } else {
+    });
-      elem.classList.toggle('available', false);
+    update('.image-size', item.imageWidth && item.imageHeight, function() {
-    }
+      return item.imageWidth.toString()+"x"+item.imageHeight;
-    // TODO(ryoh): Display more and more details...
+    });
+    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'
 ];

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">