Stop quickview display on image decode fail

Quickview loads image previews by calling decode() on the <img> element
after its 'src' attribute is set. When the image is finished decoding it
should replace the previous decoded image.

Changes decode() failures to send a message to the container that decode
failed and in turn, set the contentURL to '' which in turn unloads the
webview and displays the 'no preview available' icon.

Bug: 645021
Tests: browser_tests --gtest_filter="*QuickViewBrokenImage"
Change-Id: Ie1d19f1a4f1014486eaaec9581007f25d4c7f165
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1992954
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#730129}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -465,6 +465,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
         TestCase("openQuickViewRemovablePartitions"),
         TestCase("openQuickViewMtp"),
         TestCase("openQuickViewTabIndexImage"),
+        TestCase("openQuickViewBrokenImage"),
         TestCase("pressEnterOnInfoBoxToOpenClose"),
         TestCase("closeQuickView"),
         TestCase("cantOpenQuickViewWithMultipleFiles"),

chrome/test/data/chromeos/file_manager/broken.jpg

+

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

@@ -48,6 +48,7 @@ const FilesQuickView = Polymer({
 
   listeners: {
     'files-safe-media-tap-outside': 'close',
+    'files-safe-media-load-error': 'loaderror',
   },
 
   /**
@@ -80,6 +81,7 @@ const FilesQuickView = Polymer({
         autoplay: false,
         browsable: false,
     });
+    this.removeAttribute('load-error');
     const video = this.$.contentPanel.querySelector('#videoSafeMedia');
     if (video) {
       video.src = '';
@@ -87,6 +89,12 @@ const FilesQuickView = Polymer({
     }
   },
 
+  // Handle load error from the files-safe-media container.
+  loaderror: function() {
+    this.contentUrl = '';
+    this.setAttribute('load-error', '');
+  },
+
   /** @return {boolean} */
   isOpened: function() {
     return this.$.dialog.open;

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

@@ -10,7 +10,7 @@ const FILES_APP_ORIGIN = 'chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj';
  * files-safe-media-tap-outside events are fired depending on the position
  * of the tap.
  */
-var FilesSafeMedia = Polymer({
+const FilesSafeMedia = Polymer({
   is: 'files-safe-media',
 
   properties: {
@@ -107,6 +107,8 @@ var FilesSafeMedia = Polymer({
         if (this.webview_) {
           this.webview_.removeAttribute('loaded');
         }
+      } else if (event.data === 'content-decode-failed') {
+        this.fire('files-safe-media-load-error');
       }
     });
   }

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

@@ -40,12 +40,10 @@ window.onload = () => {
         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);
+              contentDecodeFailed();
             });
         break;
       default:
@@ -68,6 +66,10 @@ window.onload = () => {
     sendMessage(src ? 'webview-loaded' : 'webview-cleared');
   }
 
+  function contentDecodeFailed() {
+    sendMessage('content-decode-failed');
+  }
+
   function sendMessage(message) {
     if (messageSource) {
       messageSource.postMessage(message, FILES_APP_ORIGIN);

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -1304,4 +1304,20 @@
           'requestAnimationFrame', appId, []));
     }
   };
+
+  /**
+   * Tests opening a broken JPEG doesn't display a broken image icon.
+   */
+  testcase.openQuickViewBrokenImage = async () => {
+    // Open Files app on Downloads containing ENTRIES.brokenJpeg.
+    const appId = await setupAndWaitUntilReady(
+        RootPath.DOWNLOADS, [ENTRIES.brokenJpeg], []);
+
+    // Open the file in Quick View.
+    await openQuickView(appId, ENTRIES.brokenJpeg.nameText);
+
+    // Check: the quick view should have the attribute 'load-error'.
+    const element =
+        await remoteCall.waitForElement(appId, '#quick-view[load-error]');
+  };
 })();

ui/file_manager/integration_tests/test_util.js

@@ -608,6 +608,17 @@ const ENTRIES = {
     typeText: 'JPEG image'
   }),
 
+  brokenJpeg: new TestEntryInfo({
+    type: EntryType.FILE,
+    sourceFileName: 'broken.jpg',
+    targetPath: 'broken.jpg',
+    mimeType: 'image/jpeg',
+    lastModifiedTime: 'Jan 18, 2038, 1:02 AM',
+    nameText: 'broken.jpg',
+    sizeText: '1 byte',
+    typeText: 'JPEG image'
+  }),
+
   exifImage: new TestEntryInfo({
     type: EntryType.FILE,
     sourceFileName: 'exif.jpg',