Stop display of checkerboard while image loads

A checkerboard background was introduced to help see transparent
PNG images when using quick view in the FilesApp. If the image
being decompressed is large, the checkerboard is visible until
the image finishes decoding causing display flicker. This
change detaches the image node from the tree and uses the
decode() method on the image element to decode in the
background and then reattach when ready, eliminating the
flicker.

      and on real device.

Bug: 645021
Test: ran all browser tests, verified manually on workstation
Change-Id: Icd3dbdfb65015649acd539471ebe42cb8cf9a98e
Reviewed-on: https://chromium-review.googlesource.com/c/1345378Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609931}

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

@@ -31,6 +31,18 @@ window.onload = function() {
         content.onloadeddata = (e) => contentChanged(e.target.src);
         content.src = event.data.src;
         break;
+      case 'image':
+        content.remove();
+        content.onload = (e) => contentChanged(e.target.src);
+        content.src = event.data.src;
+        content.decode().then(() => {
+            content.removeAttribute('generic-thumbnail');
+            document.body.appendChild(content);
+        }).catch(() => {
+            content.setAttribute('generic-thumbnail', 'image');
+            document.body.appendChild(content);
+        });
+        break;
       default:
         content.onload = (e) => contentChanged(e.target.src);
         content.src = event.data.src;