[webui][ntp] Mock out doodle iframe in tests

NewTabPageLogoTest.All was disabled for flakiness. Likely, because we
embed iframes that do not finish or fail to load. However, it is not
material to the test whether the iframe loads. <ntp-untrusted-iframe>
provides capability to mock out loading. Therefore, make
<ntp-untrusted-iframe> usable for non-chrome-untrusted URL and use it
for the doodle iframe.

Fixed: 1097035
Change-Id: Ic1008278b957da2873f7e1b2ed56a0c90bbb5707
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2261716
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781711}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -17,6 +17,7 @@ js_type_check("closure_compile") {
     ":doodle_share_dialog",
     ":fakebox",
     ":grid",
+    ":iframe",
     ":logo",
     ":realbox",
     ":realbox_button",
@@ -24,7 +25,6 @@ js_type_check("closure_compile") {
     ":realbox_icon",
     ":realbox_match",
     ":theme_icon",
-    ":untrusted_iframe",
     ":utils",
     ":voice_search_overlay",
   ]
@@ -131,7 +131,7 @@ js_library("voice_search_overlay") {
 js_library("utils") {
 }
 
-js_library("untrusted_iframe") {
+js_library("iframe") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -229,7 +229,7 @@ html_to_js("web_components") {
     "realbox_match.js",
     "realbox.js",
     "theme_icon.js",
-    "untrusted_iframe.js",
+    "iframe.js",
     "voice_search_overlay.js",
   ]
 }

chrome/browser/resources/new_tab_page/app.html

@@ -235,13 +235,11 @@
         --ntp-theme-shortcut-background-color:
               [[rgbaOrInherit_(theme_.shortcutBackgroundColor)]];
         --ntp-logo-color: [[rgbaOrInherit_(logoColor_)]];">
-  <dom-if if="[[showIframedOneGoogleBar_]]">
-    <template>
-      <ntp-untrusted-iframe id="oneGoogleBar" path="[[oneGoogleBarIframePath_]]"
-          hidden$="[[!oneGoogleBarLoaded_]]">
-      </ntp-untrusted-iframe>
-    </template>
-  </dom-if>
+  <template is="dom-if" if="[[showIframedOneGoogleBar_]]">
+    <ntp-iframe id="oneGoogleBar" src="[[oneGoogleBarIframePath_]]"
+        hidden$="[[!oneGoogleBarLoaded_]]">
+    </ntp-iframe>
+  </template>
   <ntp-logo id="logo" doodle-allowed$="[[doodleAllowed_]]"
       single-colored$="[[singleColoredLogo_]]" dark="[[theme_.isDark]]"
       background-color="[[backgroundColor_]]">
@@ -259,8 +257,9 @@
   </ntp-most-visited>
   <dom-if if="[[lazyRender_]]">
     <template>
-      <ntp-untrusted-iframe id="promo" path="promo" hidden$="[[!promoLoaded_]]">
-      </ntp-untrusted-iframe>
+      <ntp-iframe id="promo" hidden$="[[!promoLoaded_]]"
+          src="chrome-untrusted://new-tab-page/promo">
+      </ntp-iframe>
       <a id="backgroundImageAttribution"
           href="[[backgroundImageAttributionUrl_]]"
           hidden="[[!backgroundImageAttribution1_]]">

chrome/browser/resources/new_tab_page/app.js

@@ -6,7 +6,7 @@ import './strings.m.js';
 import './most_visited.js';
 import './customize_dialog.js';
 import './voice_search_overlay.js';
-import './untrusted_iframe.js';
+import './iframe.js';
 import './fakebox.js';
 import './realbox.js';
 import './logo.js';
@@ -64,7 +64,7 @@ class AppElement extends PolymerElement {
           params.set(
               'paramsencoded',
               btoa(window.location.search.replace(/^[?]/, '&')));
-          return `one-google-bar?${params}`;
+          return `chrome-untrusted://new-tab-page/one-google-bar?${params}`;
         },
       },
 

chrome/browser/resources/new_tab_page/browser_proxy.js

@@ -59,11 +59,11 @@ export class BrowserProxy {
   }
 
   /**
-   * @param {string} path
+   * @param {string} src
    * @return {string}
    */
-  createUntrustedIframeSrc(path) {
-    return `chrome-untrusted://new-tab-page/${path}`;
+  createIframeSrc(src) {
+    return src;
   }
 
   /**

chrome/browser/resources/new_tab_page/customize_backgrounds.html

@@ -16,7 +16,7 @@
     outline-width: 0;
   }
 
-  ntp-untrusted-iframe {
+  ntp-iframe {
     pointer-events: none;
   }
 
@@ -196,9 +196,9 @@
     <template>
       <div class="tile" tabindex="0" title="[[item.label]]" role="button"
           on-click="onCollectionClick_">
-        <ntp-untrusted-iframe class="image"
-            path="background_image?[[item.previewImageUrl.url]]">
-        </ntp-untrusted-iframe>
+        <ntp-iframe class="image"
+            src="chrome-untrusted://new-tab-page/background_image?[[item.previewImageUrl.url]]">
+        </ntp-iframe>
         <div class="label">[[item.label]]</div>
       </div>
     </template>
@@ -212,9 +212,9 @@
               [[getImageSelectedClass_(index, theme, backgroundSelection)]]"
           tabindex="0" title="[[item.attribution1]]" role="button"
           on-click="onImageClick_">
-        <ntp-untrusted-iframe class="image"
-            path="background_image?[[item.previewImageUrl.url]]">
-        </ntp-untrusted-iframe>
+        <ntp-iframe class="image"
+            src="chrome-untrusted://new-tab-page/background_image?[[item.previewImageUrl.url]]">
+        </ntp-iframe>
         <div class="selected-circle"></div>
         <div class="selected-check"></div>
       </div>

chrome/browser/resources/new_tab_page/customize_backgrounds.js

@@ -5,7 +5,7 @@
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import './grid.js';
 import './mini_page.js';
-import './untrusted_iframe.js';
+import './iframe.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chrome/browser/resources/new_tab_page/untrusted_iframe.js → chrome/browser/resources/new_tab_page/iframe.js

@@ -5,9 +5,14 @@
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {BrowserProxy} from './browser_proxy.js';
 
-class UntrustedIframeElement extends PolymerElement {
+/**
+ * @fileoverview Wrapper around <iframe> element that lets us mock out loading
+ * and postMessaging in tests.
+ */
+
+class IframeElement extends PolymerElement {
   static get is() {
-    return 'ntp-untrusted-iframe';
+    return 'ntp-iframe';
   }
 
   static get template() {
@@ -17,7 +22,7 @@ class UntrustedIframeElement extends PolymerElement {
   static get properties() {
     return {
       /** @type {string} */
-      path: {
+      src: {
         reflectToAttribute: true,
         type: String,
       },
@@ -25,7 +30,7 @@ class UntrustedIframeElement extends PolymerElement {
       /** @private */
       src_: {
         type: String,
-        computed: 'computeSrc_(path)',
+        computed: 'computeSrc_(src)',
       },
     };
   }
@@ -35,14 +40,17 @@ class UntrustedIframeElement extends PolymerElement {
    * @param {*} message
    */
   postMessage(message) {
-    this.$.iframe.contentWindow.postMessage(
-        message, 'chrome-untrusted://new-tab-page');
+    BrowserProxy.getInstance().postMessage(
+        this.$.iframe, message, new URL(this.src).origin);
   }
 
-  /** @private */
+  /**
+   * @return {string}
+   * @private
+   */
   computeSrc_() {
-    return BrowserProxy.getInstance().createUntrustedIframeSrc(this.path);
+    return BrowserProxy.getInstance().createIframeSrc(this.src);
   }
 }
 
-customElements.define(UntrustedIframeElement.is, UntrustedIframeElement);
+customElements.define(IframeElement.is, IframeElement);

chrome/browser/resources/new_tab_page/logo.html

@@ -121,9 +121,9 @@
               when starting the animation. -->
           <img id="image" src="[[imageUrl_]]" on-load="onImageLoad_">
           </img>
-          <ntp-untrusted-iframe id="animation" path="[[animationUrl_]]"
+          <ntp-iframe id="animation" src="[[animationUrl_]]"
               hidden="[[!showAnimation_]]">
-          </ntp-untrusted-iframe>
+          </ntp-iframe>
           <cr-button id="shareButton" title="$i18n{shareDoodle}"
               on-click="onShareButtonClick_">
             <img id="shareButtonImage"
@@ -133,7 +133,7 @@
         </div>
       </div>
       <template is="dom-if" if="[[iframeUrl_]]" restamp>
-        <iframe id="iframe" src="[[iframeUrl_]]"></iframe>
+        <ntp-iframe id="iframe" src="[[iframeUrl_]]"></ntp-iframe>
       </template>
     </div>
   </template>

chrome/browser/resources/new_tab_page/logo.js

@@ -4,7 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
-import './untrusted_iframe.js';
+import './iframe.js';
 import './doodle_share_dialog.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
@@ -383,14 +383,7 @@ class LogoElement extends PolymerElement {
         this.dark === undefined || !iframe) {
       return;
     }
-    BrowserProxy.getInstance().postMessage(
-        iframe,
-        {
-          cmd: 'changeMode',
-          dark: this.dark,
-        },
-        new URL(iframe.src).origin,
-    );
+    iframe.postMessage({cmd: 'changeMode', dark: this.dark});
   }
 
   /** @private */
@@ -412,7 +405,8 @@ class LogoElement extends PolymerElement {
    */
   computeAnimationUrl_() {
     return this.imageDoodle_ && this.imageDoodle_.animationUrl ?
-        `image?${this.imageDoodle_.animationUrl.url}` :
+        `chrome-untrusted://new-tab-page/image?${
+            this.imageDoodle_.animationUrl.url}` :
         '';
   }
 

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -42,8 +42,8 @@
       <include name="IDR_NEW_TAB_PAGE_GRID_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/grid.js"
           use_base_dir="false" type="BINDATA" compress="false" />
-      <include name="IDR_NEW_TAB_UNTRUSTED_IFRAME_JS"
-          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/untrusted_iframe.js"
+      <include name="IDR_NEW_TAB_IFRAME_JS"
+          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/iframe.js"
           use_base_dir="false" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_PAGE_MINI_PAGE_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/mini_page.js"

chrome/test/data/webui/new_tab_page/customize_backgrounds_test.js

@@ -56,8 +56,8 @@ suite('NewTabPageCustomizeBackgroundsTest', () => {
     assertEquals(3, tiles.length);
     assertEquals('col_0', tiles[2].getAttribute('title'));
     assertEquals(
-        'background_image?https://col_0.jpg',
-        tiles[2].querySelector('.image').path);
+        'chrome-untrusted://new-tab-page/background_image?https://col_0.jpg',
+        tiles[2].querySelector('.image').src);
   });
 
   test('clicking collection selects collection', async function() {
@@ -93,8 +93,8 @@ suite('NewTabPageCustomizeBackgroundsTest', () => {
     // Arrange.
     const image = {
       attribution1: 'image_0',
-      imageUrl: {url: 'https://example.com/image.png'},
-      previewImageUrl: {url: 'https://example.com/image.png'},
+      imageUrl: {url: 'https://a.com/i.png'},
+      previewImageUrl: {url: 'https://a.com/p.png'},
     };
     handler.setResultFor('getBackgroundImages', Promise.resolve({
       images: [image],
@@ -114,8 +114,8 @@ suite('NewTabPageCustomizeBackgroundsTest', () => {
         customizeBackgrounds.shadowRoot.querySelectorAll('#images .tile');
     assertEquals(tiles.length, 1);
     assertEquals(
-        tiles[0].querySelector('.image').path,
-        'background_image?https://example.com/image.png');
+        tiles[0].querySelector('.image').src,
+        'chrome-untrusted://new-tab-page/background_image?https://a.com/p.png');
   });
 
   test('Going back shows collections', async function() {

chrome/test/data/webui/new_tab_page/logo_test.js

@@ -245,7 +245,7 @@ function createSuite(themeModeDoodlesEnabled) {
       assertEquals(1, testProxy.getCallCount('postMessage'));
       const [iframe, {cmd, dark}, origin] =
           await testProxy.whenCalled('postMessage');
-      assertEquals($$(logo, '#iframe'), iframe);
+      assertEquals($$($$(logo, '#iframe'), '#iframe'), iframe);
       assertEquals('changeMode', cmd);
       assertEquals(false, dark);
       assertEquals('https://foo.com', origin);
@@ -277,7 +277,7 @@ function createSuite(themeModeDoodlesEnabled) {
       assertEquals(1, testProxy.getCallCount('postMessage'));
       const [iframe, {cmd, dark}, origin] =
           await testProxy.whenCalled('postMessage');
-      assertEquals($$(logo, '#iframe'), iframe);
+      assertEquals($$($$(logo, '#iframe'), '#iframe'), iframe);
       assertEquals('changeMode', cmd);
       assertEquals(true, dark);
       assertEquals('https://foo.com', origin);
@@ -464,7 +464,9 @@ function createSuite(themeModeDoodlesEnabled) {
     assertEquals(testProxy.getCallCount('open'), 0);
     assertNotStyle($$(logo, '#image'), 'display', 'none');
     assertNotStyle($$(logo, '#animation'), 'display', 'none');
-    assertEquals($$(logo, '#animation').path, 'image?https://foo.com');
+    assertEquals(
+        $$(logo, '#animation').src,
+        'chrome-untrusted://new-tab-page/image?https://foo.com');
     assertDeepEquals(
         $$(logo, '#image').getBoundingClientRect(),
         $$(logo, '#animation').getBoundingClientRect());

chrome/test/data/webui/new_tab_page/new_tab_page_browsertest.js

@@ -169,8 +169,7 @@ var NewTabPageLogoTest = class extends NewTabPageBrowserTest {
   }
 };
 
-// Very flaky (crbug.com/1097035)
-TEST_F('NewTabPageLogoTest', 'DISABLED_All', function() {
+TEST_F('NewTabPageLogoTest', 'All', function() {
   mocha.run();
 });
 

chrome/test/data/webui/new_tab_page/test_support.js

@@ -59,7 +59,7 @@ export function createTestProxy() {
       testProxy.callbackRouter.$.bindNewPipeAndPassRemote();
   testProxy.handler =
       TestBrowserProxy.fromClass(newTabPage.mojom.PageHandlerRemote);
-  testProxy.setResultFor('createUntrustedIframeSrc', '');
+  testProxy.setResultFor('createIframeSrc', '');
   return testProxy;
 }