Render low-resolution image first on Quick View.

ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js

Index: ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js
diff --git a/ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js b/ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js
index 7294b5738cb4bf4c8bb08095ed6a57f49a82a3d8..b3f25806fc1d4bc2e588c7ec7dbceb4c9c62955e 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js
+++ b/ui/file_manager/file_manager/foreground/elements/files_safe_media_webview_content.js
@@ -6,15 +6,103 @@ window.onload = function() {
   var FILES_APP_ORIGIN = 'chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj';
   var messageSource;
 
+  var initialized = false;
+
   var content = document.getElementById('content');
+  var background =  document.getElementById('background');
+  var loading = false;
+
+  var imageHeight = 0;
+  var imageWidth = 0;
+  var thumbnail = '';
+
+  rendered = function() {
+    loading = false;
+  }
+
+  startRender = function() {
+      //Rendering start
+      requestAnimationFrame(rendered);
+  }
+
+  onLoad = function()  {
+      requestAnimationFrame(startRender);
+  }
+
+  content.addEventListener('load', onLoad);
+
+  var setThumbnail = function() {
+      if (thumbnail && imageHeight > 0 && imageWidth > 0) {
+        var f = function() {
+          var h1 = document.documentElement.clientHeight;
+          var w1 = document.documentElement.clientWidth;
+          var h, w;
+          if (imageHeight < h1 && imageWidth < w1) {
+            h = imageHeight;
+            w = imageWidth;
+          } else {
+            var r1 = h1 / imageHeight;
+            var r2 = w1 / imageWidth;
+            var r = Math.min(r1, r2);
+            h = imageHeight * r;
+            w = imageWidth * r;
+          }
+
+          content.height = h;
+          content.width = w;
+          content.src = thumbnail;
+          loading = true;
+        };
+        var g = function() {
+          if (initialized) {
+            f();
+            return;
+          }
+          setTimeout(g, 50);
+        }
+        g();
+      }
+  }
 
   window.addEventListener('message', function(event) {
     if (event.origin !== FILES_APP_ORIGIN) {
       console.error('Unknown origin: ' + event.origin);
       return;
     }
+    if (event.data === 'clear') {
+      thumbnail = '';
+      imageHeight = 0;
+      imageWidth = 0;
+      return;
+    }
+    var i = event.data.indexOf(':');
+    if (i < 0) {
+      console.error('Invalid format: data must include :, but was ' + event.data);
+      return;
+    }
+    var field = event.data.substring(0, i);
+    var value = event.data.substring(i+1);
+
     messageSource = event.source;
-    content.src = event.data;
+    if (field === 'src') {
+      var f = function() {
+        if (!loading && initialized) {
+          content.src = value;
+          return;
+        }
+        setTimeout(f, 50);
+      };
+      f();
+    } else if (field === 'background') {
+      thumbnail = value || '';
+      setThumbnail();
+    } else if (field === 'imageHeight') {
+      imageHeight = parseInt(value, 10);
+      setThumbnail();
+    } else if (field === 'imageWidth') {
+      imageWidth = parseInt(value, 10);
+      setThumbnail();
+    }
   });
 
   document.addEventListener('contextmenu', function(e) {
@@ -43,11 +131,16 @@ window.onload = function() {
     // moment. Due to Files App's window size constraint, resized window must be
     // larger than 100 x 100. So this event is always invoked.
     content.removeAttribute('hidden');
+    initialized = true;
+    if (background)
+        background.removeAttribute('hidden');
   });
   // Fallback for the case of webview bug is fixed and above code is not
   // executed.
   setTimeout(function() {
     content.removeAttribute('hidden');
+    if (background)
+        background.removeAttribute('hidden');
   }, 500);
 
 };