[webui][ntp] Honor doodle resize request

An interactive doodle can request to be resized via a postMessage.
Resize doodle as requested when such a message is received.

Bug: 1039910
Change-Id: Icd4563cabf1edc28eb22268c5e7969194cada2a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2117299
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#754133}

chrome/browser/resources/new_tab_page/app.html

@@ -53,7 +53,7 @@
   }
 
   #logo {
-    margin-bottom: 8px;
+    margin-bottom: 38px;
   }
 
   ntp-fakebox {

chrome/browser/resources/new_tab_page/logo.html

 <style>
-  :host {
-    height: 230px;
+  :host(:not([hidden])) {
+    display: inline-block;
   }
 
   #singleColoredLogo,
@@ -22,8 +22,10 @@
   }
 
   #iframe {
-    height: 200px;
-    width: 500px;
+    height: var(--height, 200px);
+    transition-duration: var(--duration, 100ms);
+    transition-property: height, width;
+    width: var(--width, 500px);
   }
 </style>
 <iron-pages selected="[[mode_]]" attr-for-selected="id">
@@ -35,7 +37,10 @@
   <div id="doodle">
     <img id="image" src="[[imageUrl_]]" hidden="[[!imageUrl_]]"></img>
     <ntp-untrusted-iframe id="iframe" path="[[iframeUrl_]]"
-        hidden="[[!iframeUrl_]]">
+        hidden="[[!iframeUrl_]]"
+        style="--duration: [[valueOrUnset_(duration_)]];
+               --height: [[valueOrUnset_(height_)]];
+               --width: [[valueOrUnset_(width_)]];">
     </ntp-untrusted-iframe>
   </div>
 </iron-pages>

chrome/browser/resources/new_tab_page/logo.js

@@ -5,6 +5,8 @@
 import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
 import './untrusted_iframe.js';
 
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {BrowserProxy} from './browser_proxy.js';
 
@@ -63,17 +65,56 @@ class LogoElement extends PolymerElement {
         computed: 'computeIframeUrl_(doodle_)',
         type: String,
       },
+
+      /** @private */
+      duration_: {
+        type: String,
+        value: null,
+      },
+
+      /** @private */
+      height_: {
+        type: String,
+        value: null,
+      },
+
+      /** @private */
+      width_: {
+        type: String,
+        value: null,
+      },
     };
   }
 
   constructor() {
     super();
+    /** @private {!EventTracker} */
+    this.eventTracker_ = new EventTracker();
     BrowserProxy.getInstance().handler.getDoodle().then(({doodle}) => {
       this.doodle_ = doodle;
       this.loaded_ = true;
     });
   }
 
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+    this.eventTracker_.add(window, 'message', ({data}) => {
+      if (data['cmd'] !== 'resizeDoodle') {
+        return;
+      }
+      this.duration_ = assert(data.duration);
+      this.height_ = assert(data.height);
+      this.width_ = assert(data.width);
+    });
+  }
+
+  /** @override */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.eventTracker_.removeAll();
+  }
+
   /**
    * @return {string}
    * @private
@@ -112,6 +153,15 @@ class LogoElement extends PolymerElement {
         `iframe?${this.doodle_.content.url.url}` :
         '';
   }
+
+  /**
+   * @param {string} value
+   * @return {string}
+   * @private
+   */
+  valueOrUnset_(value) {
+    return value || 'unset';
+  }
 }
 
 customElements.define(LogoElement.is, LogoElement);

chrome/browser/resources/new_tab_page/untrusted_iframe.html

 <style>
-  iframe {
+  :host(:not([hidden])) {
+    display: inline-block;
+  }
+
+  #iframe {
     border: none;
     border-radius: inherit;
     height: inherit;

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

@@ -6,7 +6,7 @@ import 'chrome://new-tab-page/logo.js';
 
 import {BrowserProxy} from 'chrome://new-tab-page/browser_proxy.js';
 import {assertNotStyle, assertStyle, createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
-import {flushTasks} from 'chrome://test/test_util.m.js';
+import {eventToPromise, flushTasks} from 'chrome://test/test_util.m.js';
 
 suite('NewTabPageLogoTest', () => {
   /**
@@ -106,4 +106,57 @@ suite('NewTabPageLogoTest', () => {
     assertStyle(logo.$.singleColoredLogo, 'background-color', 'rgb(255, 0, 0)');
     assertStyle(logo.$.multiColoredLogo, 'display', 'none');
   });
+
+  test('receiving resize message resizes doodle', async () => {
+    // Arrange.
+    const logo = await createLogo({content: {url: {url: 'https://foo.com'}}});
+    const transitionend = eventToPromise('transitionend', logo.$.iframe);
+
+    // Act.
+    window.postMessage(
+        {
+          cmd: 'resizeDoodle',
+          duration: '500ms',
+          height: '500px',
+          width: '700px',
+        },
+        '*');
+    await transitionend;
+
+    // Assert.
+    const transitionedProperties = window.getComputedStyle(logo.$.iframe)
+                                       .getPropertyValue('transition-property')
+                                       .trim()
+                                       .split(',')
+                                       .map(s => s.trim());
+    assertStyle(logo.$.iframe, 'transition-duration', '0.5s');
+    assertTrue(transitionedProperties.includes('height'));
+    assertTrue(transitionedProperties.includes('width'));
+    assertEquals(logo.$.iframe.offsetHeight, 500);
+    assertEquals(logo.$.iframe.offsetWidth, 700);
+    assertGE(logo.offsetHeight, 500);
+    assertGE(logo.offsetWidth, 700);
+  });
+
+  test('receiving other message does not resize doodle', async () => {
+    // Arrange.
+    const logo = await createLogo({content: {url: {url: 'https://foo.com'}}});
+    const height = logo.$.iframe.offsetHeight;
+    const width = logo.$.iframe.offsetWidth;
+
+    // Act.
+    window.postMessage(
+        {
+          cmd: 'foo',
+          duration: '500ms',
+          height: '500px',
+          width: '700px',
+        },
+        '*');
+    await flushTasks();
+
+    // Assert.
+    assertEquals(logo.$.iframe.offsetHeight, height);
+    assertEquals(logo.$.iframe.offsetWidth, width);
+  });
 });