Quick View: Support pdf and text preview.

This CL allows user to open files which are browsable on Chrome
on Quick View. Browsable files include pdf and text.
Screencast: https://bugs.chromium.org/p/chromium/issues/detail?id=640696#c11

BUG=642713,640696
TEST=manually tested the following:
- For pdf and text, preview with 24px of vertical margin appears.
- For image, video and audio, preview with 15% of vertical margin
appears as before.
- For .docx, 'no preview available' is shown as expected, though the
file type is 'document' which is the same as pdf.

CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2540863004
Cr-Commit-Position: refs/heads/master@{#438744}

ui/file_manager/file_manager/foreground/elements/files_quick_view.css

@@ -50,7 +50,9 @@ paper-button:focus:not(:active) {
 
 #contentPanel {
   background-color: transparent;
+  display: flex;
   height: 100%;
+  justify-content: center;
   position: relative;
 }
 
@@ -76,25 +78,26 @@ paper-button:focus:not(:active) {
   color: white;
   display: flex;
   flex-direction: column;
-  height: 70%;
   justify-content: center;
-  margin: auto;
   outline: none;
+  padding: 24px 15%;
   position: relative;
   text-align: center;
-  top: 15%;
-  width: 70%;
+  width: 100%;
+}
+
+#innerContentPanel[type="audio"],
+#innerContentPanel[type="image"],
+#innerContentPanel[type="video"] {
+  align-self: center;
+  height: 70%;
+  padding-bottom: initial;
+  padding-top: initial;
 }
 
 .content {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  max-height: 100%;
-  max-width: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
+  height: 100%;
+  width: 100%;
 }
 
 #toolbar {

ui/file_manager/file_manager/foreground/elements/files_quick_view.html

@@ -21,7 +21,7 @@
       <paper-toolbar id="toolbar">
         <div>[[filePath]]</div>
         <div id="buttons">
-           <paper-button id="open-button" on-tap="onOpenInNewButtonTap" hidden$="[[isUnsupported_(type)]]" i18n-values="aria-label:QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL" tabindex="0" has-tooltip>
+           <paper-button id="open-button" on-tap="onOpenInNewButtonTap" hidden$="[[isUnsupported_(type, browsable)]]" i18n-values="aria-label:QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL" tabindex="0" has-tooltip>
              <iron-icon icon="files:open-in-new"></iron-icon>
            </paper-button>
            <files-icon-button toggles id="metadata-button" on-tap="onMetadataButtonTap_" active="{{metadataBoxActive}}" i18n-values="aria-label:QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL" tabindex="0" has-tooltip>
@@ -30,11 +30,14 @@
       </paper-toolbar>
       <div id="mainPanel">
         <div id="contentPanel" metadata-box-active$="[[metadataBoxActive]]" on-tap="onContentPanelTap_">
-          <div id="innerContentPanel" tabindex="0">
+          <div id="innerContentPanel" type$="[[type]]" tabindex="0">
+            <!-- PDF, Text -->
+            <template is="dom-if" if="[[browsable]]">
+              <webview class="content" src="[[contentUrl]]"></webview>
+            </template>
+            <!-- Image -->
             <template is="dom-if" if="[[isImage_(type)]]">
-              <div hidden="[[!contentUrl]]">
-                <files-safe-media type="image" class="content no-close-on-click" src="[[contentUrl]]"></files-safe-media>
-              </div>
+              <files-safe-media hidden="[[!contentUrl]]" type="image" class="content no-close-on-click" src="[[contentUrl]]"></files-safe-media>
               <template is="dom-if" if="[[!contentUrl]]">
                 <div generic-thumbnail="image"></div>
                 <div class="no-preivew">[[noPreviewText]]</div>
@@ -67,7 +70,7 @@
               </template>
             </template>
             <!-- TODO(oka): Support folder icon -->
-            <div hidden="[[!isUnsupported_(type)]]">
+            <div hidden="[[!isUnsupported_(type, browsable)]]">
               <div generic-thumbnail></div>
               <div class="no-preview">[[noPreviewText]]</div>
             </div>

ui/file_manager/file_manager/foreground/elements/files_quick_view.js

@@ -15,6 +15,10 @@ var FilesQuickView = Polymer({
     videoPoster: String,
     audioArtwork: String,
     autoplay: Boolean,
+    // True if this file is not image, audio nor video but supported on Chrome,
+    // i.e. preview-able by directly src-ing the file path to webview.
+    // Example: pdf, text.
+    browsable: Boolean,
 
     // metadata-box-active-changed event is fired on attribute change.
     metadataBoxActive: {
@@ -41,6 +45,7 @@ var FilesQuickView = Polymer({
     this.videoPoster = '';
     this.audioArtwork = '';
     this.autoplay = false;
+    this.browsable = false;
   },
 
   // Opens the dialog.
@@ -154,8 +159,9 @@ var FilesQuickView = Polymer({
    *
    * @private
    */
-  isUnsupported_: function(type) {
-    return !this.isImage_(type) && !this.isVideo_(type) && !this.isAudio_(type);
+  isUnsupported_: function(type, browsable) {
+    return !this.isImage_(type) && !this.isVideo_(type) &&
+        !this.isAudio_(type) && !browsable;
   },
 
 });

ui/file_manager/file_manager/foreground/js/quick_view_controller.js

@@ -203,12 +203,13 @@ QuickViewController.prototype.updateQuickView_ = function() {
  */
 QuickViewController.prototype.onMetadataLoaded_ = function(entry, items) {
   return this.getQuickViewParameters_(entry, items).then(function(params) {
-    this.quickView_.contentUrl = params.contentUrl || '';
     this.quickView_.type = params.type || '';
     this.quickView_.filePath = params.filePath || '';
+    this.quickView_.contentUrl = params.contentUrl || '';
     this.quickView_.videoPoster = params.videoPoster || '';
     this.quickView_.audioArtwork = params.audioArtwork || '';
     this.quickView_.autoplay = params.autoplay || false;
+    this.quickView_.browsable = params.browsable || false;
   }.bind(this));
 };
 
@@ -219,7 +220,8 @@ QuickViewController.prototype.onMetadataLoaded_ = function(entry, items) {
  *   contentUrl: (string|undefined),
  *   videoPoster: (string|undefined),
  *   audioArtwork: (string|undefined),
- *   autoplay: (boolean|undefined)
+ *   autoplay: (boolean|undefined),
+ *   browsable: (boolean|undefined),
  * }}
  */
 var QuickViewParams;
@@ -311,7 +313,27 @@ QuickViewController.prototype.getQuickViewParameters_ = function(entry, items) {
           });
     }
   }
+  if (item.externalFileUrl || type === '.folder') {
     return Promise.resolve(params);
+  }
+  return Promise
+      .all([
+        getFile(entry),
+        new Promise(function(resolve) {
+          chrome.fileManagerPrivate.getFileTasks([entry], resolve);
+        })
+      ])
+      .then(function(values) {
+        var file = values[0];
+        var tasks = values[1];
+        var browsable = tasks.some(function(task) {
+          return ['view-in-browser', 'view-pdf'].includes(
+              task.taskId.split('|')[2]);
+        });
+        params.browsable = browsable;
+        params.contentUrl = browsable && URL.createObjectURL(file);
+        return params;
+      });
 };
 
 /**