Render low-resolution image first on Quick View.

ui/file_manager/file_manager/foreground/elements/files_safe_media.js

Index: ui/file_manager/file_manager/foreground/elements/files_safe_media.js
diff --git a/ui/file_manager/file_manager/foreground/elements/files_safe_media.js b/ui/file_manager/file_manager/foreground/elements/files_safe_media.js
index beaf05f693d9cced947ec9294942e6ffc0b4c44a..e4a875264be5d72d50323e3f6c4f4a8bf93eeab0 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_safe_media.js
+++ b/ui/file_manager/file_manager/foreground/elements/files_safe_media.js
@@ -20,9 +20,30 @@ var FilesSafeMedia = Polymer({
       observer: 'onSrcChange_',
       reflectToAttribute: true
     },
+    background: {
+      type: String,
+      observer: 'onBackgroundChange_',
+      reflectToAttribute: true
+    },
+    imageHeight: {
+      type: Number,
+      observer: 'onImageHeightChange_',
+      reflectToAttribute: true
+    },
+    imageWidth: {
+      type: Number,
+      observer: 'onImageWidthChange_',
+      reflectToAttribute: true
+    },
     type: {
       type: String,
       readonly: true,
+    },
+    // Use checkerboard pattern background. This has no effect when |type| is
+    // not 'image'.
+    use_checkerboard_background: {
+      type: Boolean,
+      readonly: true,
     }
   },
 
@@ -34,11 +55,11 @@ var FilesSafeMedia = Polymer({
   sourceFile_: function() {
     switch (this.type) {
       case 'image':
-         return 'foreground/elements/files_safe_img_webview_content.html';
+        return 'foreground/elements/files_safe_img_webview_content.html';
       case 'audio':
-         return 'foreground/elements/files_safe_audio_webview_content.html';
+        return 'foreground/elements/files_safe_audio_webview_content.html';
       case 'video':
-         return 'foreground/elements/files_safe_video_webview_content.html';
+        return 'foreground/elements/files_safe_video_webview_content.html';
       default:
         console.error('Unsupported type: ' + this.type);
         return '';
@@ -51,7 +72,7 @@ var FilesSafeMedia = Polymer({
       Polymer.dom(this.$.content).removeChild(this.webview_);
       this.webview_ = null;
     } else if (this.src && !this.webview_) {
-      // Create webview node only if src exists to save resouces.
+      // Create webview node only if src exists to save resources.
       var webview = document.createElement('webview');
       this.webview_ = webview;
       webview.partition = 'trusted';
@@ -61,10 +82,32 @@ var FilesSafeMedia = Polymer({
           'contentload', this.onSrcChange_.bind(this));
       webview.src = this.sourceFile_();
     } else if (this.src && this.webview_.contentWindow) {
-      this.webview_.contentWindow.postMessage(this.src, FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('clear', FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('imageWidth:' + this.imageWidth, FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('imageHeight:' + this.imageHeight, FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('imageWidth:' + this.imageWidth, FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('background:' + (this.background || ''), FILES_APP_ORIGIN);
+      this.webview_.contentWindow.postMessage('src:' + this.src, FILES_APP_ORIGIN);
+      if (this.use_checkerboard_background) {
+        this.webview_.executeScript({code:
+          'document.getElementById("content").classList.add("checkerboard-background")'});
+      }
     }
   },
 
+  onBackgroundChange_: function() {
+    if (this.src && this.webview_.contentWindow)
+      this.webview_.contentWindow.postMessage('background:' + this.background, FILES_APP_ORIGIN);
+  },
+  onImageHeightChange_: function() {
+    if (this.src && this.webview_.contentWindow)
+      this.webview_.contentWindow.postMessage('imageHeight:' + this.imageHeight, FILES_APP_ORIGIN);
+  },
+  onImageWidthChange_: function() {
+    if (this.src && this.webview_.contentWindow)
+      this.webview_.contentWindow.postMessage('imageWidth:' + this.imageWidth, FILES_APP_ORIGIN);
+  },
+
   created: function() {
     /**
      * @type {HTMLElement}