Add a Quick View html scrolling test

Teach the <file-safe-media> element more about the loaded state of its
child <webview>: make the <webview> send webview-loaded/cleared events
to its parent <file-safe-media>, and have the parent set that state in
the 'loaded' attribute of the child <webview>.

Add an html scroll test: wait for the <webview> to load its content by
waiting for the 'loaded' attribute. Then call window.scrollBy() on the
<webview> and verify that the <webview> was scrolled.

Minor: files_safe_media_webview_content.js: use document.querySelector
to get the #content element to silence a presubmit warning.

Test: browser_tests --gtest_filter="QuickView*openQuickViewScrollHtml"
Bug: 891150
Change-Id: I7bc10a47ff4e50a16ece910174959596615e6fd7
Reviewed-on: https://chromium-review.googlesource.com/1256399
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595791}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -335,6 +335,7 @@ WRAPPED_INSTANTIATE_TEST_CASE_P(
                       TestCase("openQuickView").InGuestMode(),
                       TestCase("openQuickView").TabletMode(),
                       TestCase("openQuickViewScrollText"),
+                      TestCase("openQuickViewScrollHtml"),
                       TestCase("openQuickViewDrive"),
                       TestCase("openQuickViewDrive").EnableDriveFs(),
                       TestCase("openQuickViewUsb"),

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

@@ -90,6 +90,12 @@ var FilesSafeMedia = Polymer({
         this.fire('files-safe-media-tap-inside');
       } else if (event.data === 'tap-outside') {
         this.fire('files-safe-media-tap-outside');
+      } else if (event.data === 'webview-loaded') {
+        if (this.webview_)
+          this.webview_.setAttribute('loaded', '');
+      } else if (event.data === 'webview-cleared') {
+        if (this.webview_)
+          this.webview_.removeAttribute('loaded');
       }
     }.bind(this));
   }

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

@@ -6,27 +6,29 @@ window.onload = function() {
   var FILES_APP_ORIGIN = 'chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj';
   var messageSource;
 
-  var content = document.getElementById('content');
+  var content = document.querySelector('#content');
 
   window.addEventListener('message', function(event) {
     if (event.origin !== FILES_APP_ORIGIN) {
       console.error('Unknown origin: ' + event.origin);
       return;
     }
+
     messageSource = event.source;
     switch (event.data.type) {
       case 'html':
         content.textContent = '';
-        fetch(event.data.src)
-            .then(function(response) {
-              return response.text();
-            })
-            .then(function(text) {
-              content.textContent = text;
-            });
+        contentChanged(null);
+        fetch(event.data.src).then((response) => {
+          return response.text();
+        }).then((text) => {
+          content.textContent = text;
+          contentChanged(text);
+        });
         break;
       default:
         content.src = event.data.src;
+        contentChanged(content.src);
         break;
     }
   });
@@ -37,17 +39,19 @@ window.onload = function() {
   });
 
   document.addEventListener('click', function(e) {
-    var data;
-    if (e.target === content) {
-      data = 'tap-inside';
-    } else {
-      data = 'tap-outside';
-    }
-
-    if (messageSource)
-      messageSource.postMessage(data, FILES_APP_ORIGIN);
+    sendMessage((e.target === content) ? 'tap-inside' : 'tap-outside');
   });
 
+  function contentChanged(src) {
+    sendMessage(src ? 'webview-loaded' : 'webview-cleared');
+  }
+
+  function sendMessage(message) {
+    if (messageSource) {
+      messageSource.postMessage(message, FILES_APP_ORIGIN);
+    }
+  }
+
   // TODO(oka): This is a workaround to fix FOUC problem, where sometimes
   // immature view with smaller window size than outer window is rendered for a
   // moment. Remove this after the root cause is fixed. http://crbug.com/640525
@@ -63,5 +67,4 @@ window.onload = function() {
   setTimeout(function() {
     content.removeAttribute('hidden');
   }, 500);
-
 };

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -337,7 +337,95 @@ testcase.openQuickViewScrollText = function() {
           .then(checkQuickViewTextScrollY);
       }).then(this.next);
     },
+    function() {
+      checkIfNoErrorsOccured(this.next);
+    },
+  ]);
+};
+
+/**
+ * Tests opening Quick View and scrolling its <webview> which contains a tall
+ * html document.
+ */
+testcase.openQuickViewScrollHtml = function() {
+  const caller = getCaller();
+  let appId;
+
+  /**
+   * The <webview> resides in the <files-safe-media type="html"> shadow DOM,
+   * which is a child of the #quick-view shadow DOM.
+   */
+  const webView = ['#quick-view', 'files-safe-media[type="html"]', 'webview'];
+
+  function scrollQuickViewHtmlBy(y) {
+    const doScrollBy = `window.scrollBy(0,${y})`;
+    return remoteCall
+        .callRemoteTestUtil(
+            'deepExecuteScriptInWebView', appId, [webView, doScrollBy]);
+  }
+
+  function checkQuickViewHtmlScrollY(scrollY) {
+    if (!scrollY || Number(scrollY.toString()) <= 200) {
+      console.log('checkQuickViewHtmlScrollY: scrollY '.concat(scrollY));
+      return scrollQuickViewHtmlBy(100).then(() => {
+        return pending(caller, 'Waiting for Quick View to scroll.');
+      });
+    }
+  }
+
+  StepsRunner.run([
+    // Open Files app on Downloads containing ENTRIES.tallHtml.
+    function() {
+      setupAndWaitUntilReady(
+          null, RootPath.DOWNLOADS, this.next, [ENTRIES.tallHtml], []);
+    },
+    // Open the file in Quick View.
     function(results) {
+      appId = results.windowId;
+      const openSteps = openQuickViewSteps(appId, ENTRIES.tallHtml.nameText);
+      StepsRunner.run(openSteps).then(this.next);
+    },
+    // Wait for the Quick View <webview> to load and display its content.
+    function() {
+      function checkWebViewHtmlLoaded(elements) {
+        let haveElements = Array.isArray(elements) && elements.length === 1;
+        if (haveElements)
+          haveElements = elements[0].styles.display.includes('block');
+        if (!haveElements || elements[0].attributes.loaded !== '')
+          return pending(caller, 'Waiting for <webview> to load.');
+        return;
+      }
+      repeatUntil(function() {
+        return remoteCall
+            .callRemoteTestUtil(
+                'deepQueryAllElements', appId, [webView, ['display']])
+            .then(checkWebViewHtmlLoaded);
+      }).then(this.next);
+    },
+    // Get the Quick View <webview> scrollY.
+    function() {
+      const getScrollY = 'window.scrollY';
+      remoteCall
+          .callRemoteTestUtil(
+              'deepExecuteScriptInWebView', appId, [webView, getScrollY])
+          .then(this.next);
+    },
+    // Check: the initial <webview> scrollY should be 0.
+    function(scrollY) {
+      chrome.test.assertEq('0', scrollY.toString());
+      this.next();
+    },
+    // Scroll the <webview> and verify that it scrolled.
+    function() {
+      repeatUntil(function() {
+        const getScrollY = 'window.scrollY';
+        return remoteCall
+          .callRemoteTestUtil(
+              'deepExecuteScriptInWebView', appId, [webView, getScrollY])
+          .then(checkQuickViewHtmlScrollY);
+      }).then(this.next);
+    },
+    function() {
       checkIfNoErrorsOccured(this.next);
     },
   ]);