[webui][ntp] Fix doodle sizing

Image Doodles: Before, image doodles were only given a max width of
500x. This CL increases this to the width of the window since that is
what the local NTP does. Additionally, the doodle share button is now
placed relative to the top left corner of the doodle instead of the
previously fixed-size image doodle container.

Interactive Doodles: This CL uses the initial iframe size provided in
the doodle response instead of a fixed initial size of 500x230px.

Fixed: 1039910
Change-Id: Ibaa23976a02c9215e80f3cc55fa2a5fcbc4781e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150007
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Commit-Queue: Alex Gough <ajgo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#759255}

chrome/browser/resources/new_tab_page/logo.html

 <style include="cr-hidden-style">
   :host {
+    --ntp-logo-height: 230px;
     display: inline-block;
-    min-height: 230px;
+    min-height: var(--ntp-logo-height);
   }
 
   #singleColoredLogo,
@@ -25,10 +26,10 @@
   #imageContainer {
     cursor: pointer;
     display: grid;
-    height: 230px;
+    height: fit-content;
     outline: none;
     position: relative;
-    width: 500px;
+    width: fit-content;
   }
 
   :host-context(.focus-outline-visible) #imageContainer:focus {
@@ -41,7 +42,7 @@
   }
 
   #image {
-    max-height: 100%;
+    max-height: var(--ntp-logo-height);
     max-width: 100%;
   }
 
@@ -67,11 +68,10 @@
   }
 
   #iframe {
-    height: var(--height, 200px);
-    margin-bottom: 30px;
+    height: var(--height);
     transition-duration: var(--duration, 100ms);
     transition-property: height, width;
-    width: var(--width, 500px);
+    width: var(--width);
   }
 </style>
 <iron-pages selected="[[mode_]]" attr-for-selected="id">

chrome/browser/resources/new_tab_page/logo.js

@@ -112,6 +112,10 @@ class LogoElement extends PolymerElement {
     BrowserProxy.getInstance().handler.getDoodle().then(({doodle}) => {
       this.doodle_ = doodle;
       this.loaded_ = true;
+      if (this.doodle_ && this.doodle_.content.interactiveDoodle) {
+        this.width_ = `${this.doodle_.content.interactiveDoodle.width}px`;
+        this.height_ = `${this.doodle_.content.interactiveDoodle.height}px`;
+      }
     });
   }
 
@@ -146,7 +150,8 @@ class LogoElement extends PolymerElement {
       if (this.doodle_ &&
           /* We hide interactive doodles when offline. Otherwise, the iframe
              would show an ugly error page. */
-          (!this.doodle_.content.url || window.navigator.onLine)) {
+          (!this.doodle_.content.interactiveDoodle ||
+           window.navigator.onLine)) {
         return 'doodle';
       }
     }
@@ -206,8 +211,8 @@ class LogoElement extends PolymerElement {
    * @private
    */
   computeIframeUrl_() {
-    return (this.doodle_ && this.doodle_.content.url) ?
-        `iframe?${this.doodle_.content.url.url}` :
+    return (this.doodle_ && this.doodle_.content.interactiveDoodle) ?
+        `iframe?${this.doodle_.content.interactiveDoodle.url.url}` :
         '';
   }
 

chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom

@@ -136,12 +136,21 @@ struct ImageDoodleContent {
   url.mojom.Url share_url;
 };
 
+// The contents of interactive doodles.
+struct InteractiveDoodleContent {
+  // URL pointing to doodle page.
+  url.mojom.Url url;
+  // Initial width and height of the doodle iframe in pixels.
+  uint32 width;
+  uint32 height;
+};
+
 // The contents of a doodle.
 union DoodleContent {
   // Set for simple and animated doodles.
   ImageDoodleContent image_doodle;
-  // URL pointing to doodle page. Set for interactive doodles.
-  url.mojom.Url url;
+  // Set for interactive doodles.
+  InteractiveDoodleContent interactive_doodle;
 };
 
 // A doodle. Retrieved from the Google doodle server.

chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.cc

@@ -454,8 +454,13 @@ void NewTabPageHandler::OnLogoAvailable(
         std::move(image_doodle_content));
   } else if (logo->metadata.type ==
              search_provider_logos::LogoType::INTERACTIVE) {
-    doodle->content = new_tab_page::mojom::DoodleContent::NewUrl(
-        logo->metadata.full_page_url);
+    auto interactive_doodle_content =
+        new_tab_page::mojom::InteractiveDoodleContent::New();
+    interactive_doodle_content->url = logo->metadata.full_page_url;
+    interactive_doodle_content->width = logo->metadata.iframe_width_px;
+    interactive_doodle_content->height = logo->metadata.iframe_height_px;
+    doodle->content = new_tab_page::mojom::DoodleContent::NewInteractiveDoodle(
+        std::move(interactive_doodle_content));
   } else {
     std::move(callback).Run(nullptr);
     return;

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

@@ -95,13 +95,23 @@ suite('NewTabPageLogoTest', () => {
 
   test('setting interactive doodle shows iframe', async () => {
     // Act.
-    const logo = await createLogo({content: {url: {url: 'https://foo.com'}}});
+    const logo = await createLogo({
+      content: {
+        interactiveDoodle: {
+          url: {url: 'https://foo.com'},
+          width: 200,
+          height: 100,
+        }
+      }
+    });
 
     // Assert.
     assertNotStyle(logo.$.doodle, 'display', 'none');
     assertStyle(logo.$.logo, 'display', 'none');
     assertEquals(logo.$.iframe.path, 'iframe?https://foo.com');
     assertNotStyle(logo.$.iframe, 'display', 'none');
+    assertStyle(logo.$.iframe, 'width', '200px');
+    assertStyle(logo.$.iframe, 'height', '100px');
     assertStyle(logo.$.imageContainer, 'display', 'none');
   });
 
@@ -159,7 +169,8 @@ suite('NewTabPageLogoTest', () => {
   // Disabled for flakiness, see https://crbug.com/1065812.
   test.skip('receiving resize message resizes doodle', async () => {
     // Arrange.
-    const logo = await createLogo({content: {url: {url: 'https://foo.com'}}});
+    const logo = await createLogo(
+        {content: {interactiveDoodle: {url: {url: 'https://foo.com'}}}});
     const transitionend = eventToPromise('transitionend', logo.$.iframe);
 
     // Act.
@@ -190,7 +201,8 @@ suite('NewTabPageLogoTest', () => {
 
   test('receiving other message does not resize doodle', async () => {
     // Arrange.
-    const logo = await createLogo({content: {url: {url: 'https://foo.com'}}});
+    const logo = await createLogo(
+        {content: {interactiveDoodle: {url: {url: 'https://foo.com'}}}});
     const height = logo.$.iframe.offsetHeight;
     const width = logo.$.iframe.offsetWidth;