Local NTP: implement Doodle resize API

A postMessage call from the doodle resizes the iframe. The event data
supports these parameters.
  cmd (required): must be "resizeDoodle".
  width (optional): a CSS width (with units) or null. Because the doodle
    cannot know the size of the outer page, only "100%" (full page
    width) and null (default width) are recommended.
  height (optional): a CSS height (with units) or null for the default
    (200px). Must not be a percentage, but otherwise any units are OK.
  duration (optional): a CSS duration, such as 130ms or 1s. If null or
    absent, 0s (no transition) is assumed.

If a second resize is requested while a first resize is in in
transition, the doodle will eventually reach the size from the second
call, but the interpretation of the duration is not defined.

Bug: 761994
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9f6afe956e710001a45a9b327748a74eab36ea01
Reviewed-on: https://chromium-review.googlesource.com/804034
Commit-Queue: Chris Pickel <sfiera@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521700}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -11,6 +11,11 @@ html {
       /* We add an extra pixel because rounding errors on different zooms can
        * make the width shorter than it should be. */
       + 1px);
+
+  --logo-height: 200px; /* Normal height of a doodle. */
+  --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */
+  --logo-margin-bottom: 24px; /* Between logo and fakebox. */
+
   --tile-height: 128px;
   --tile-margin: 16px;
   --tile-width: 154px;
@@ -69,9 +74,11 @@ button {
   display: flex;
   flex-direction: column;
   height: 100%;
-  margin: 0 auto;
-  text-align: -webkit-center;
-  width: var(--content-width);
+}
+
+#logo,
+#fakebox-container {
+  flex-shrink: 0;
 }
 
 .non-google-page #ntp-contents {
@@ -83,14 +90,10 @@ body.hide-fakebox-logo #fakebox {
   visibility: hidden;
 }
 
-#search {
-  margin: 0 calc(var(--tile-margin) / 2);
-  width: calc(100% - var(--tile-margin));
-}
-
 #logo {
-  height: 249px;
-  margin-bottom: 24px;
+  height: calc(var(--logo-height) + var(--logo-margin-bottom));
+  margin-top: var(--logo-margin-top);
+  min-height: fit-content;
   position: relative;
 }
 
@@ -98,12 +101,6 @@ body.hide-fakebox-logo #fakebox {
   display: none;
 }
 
-#logo-default,
-#logo-non-white,
-#logo-doodle {
-  position: absolute;
-}
-
 #logo-default,
 #logo-doodle {
   opacity: 0;
@@ -135,9 +132,10 @@ body.hide-fakebox-logo #fakebox {
 #logo-non-white {
   background-image: url(../../../../ui/webui/resources/images/google_logo.svg);
   background-repeat: no-repeat;
+  bottom: var(--logo-margin-bottom);
   height: 92px;
   left: calc(50% - 272px/2);
-  top: 157px;
+  position: absolute;
   width: 272px;
 }
 
@@ -159,19 +157,13 @@ body.alternate-logo #logo-non-white {
   display: none;
 }
 
-#logo-doodle {
-  /* Normally, logos are aligned with tiles and bounded to their left and right
-   * edges. Doodles may be larger than this. In order that they are centered and
-   * cropped, instead of left-aligned, give them 100px of extra space on the
-   * left and the right side.
-   */
-  left: -100px;
-  right: -100px;
-  top: 44px;
-}
-
 #logo-doodle-button {
+  /* An image logo is allowed to spill into the margin below, so it's not a
+   * real bottom margin. If the image extends further than that margin, it
+   * is cropped. */
   margin: 0 auto;
+  max-height: calc(var(--logo-height) + var(--logo-margin-bottom));
+  overflow: hidden;
 }
 
 .non-white-bg #logo-doodle-button,
@@ -181,8 +173,9 @@ body.alternate-logo #logo-non-white {
 
 #logo-doodle-iframe {
   border: 0;
-  height: 228px;
-  width: 100%;
+  height: var(--logo-height);
+  margin: 0 auto var(--logo-margin-bottom) auto;
+  width: var(--content-width);
 }
 
 #logo-doodle-notifier {
@@ -194,9 +187,9 @@ body.alternate-logo #logo-non-white {
   cursor: pointer;
   display: inline-block;
   height: 24px;
-  left: 148px;
+  left: calc(50% + 148px);
   padding: 0;
-  position: relative;
+  position: absolute;
   top: 100px;
   width: 24px;
 }
@@ -259,6 +252,11 @@ body.alternate-logo #logo-non-white {
       0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));
 }
 
+#fakebox-container {
+  margin: 0 auto 8px auto;
+  width: var(--content-width);
+}
+
 #fakebox {
   background-color: #fff;
   border-radius: 2px;
@@ -267,14 +265,13 @@ body.alternate-logo #logo-non-white {
   font-size: 18px;
   height: 44px;
   line-height: 36px;
-  margin-bottom: 8px;
-  max-width: 672px;
+  margin: 0 calc(var(--tile-margin) / 2 + 1px) 0 calc(var(--tile-margin) / 2);
   outline: none;
   position: relative;
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.non-google-page #fakebox {
+.non-google-page #fakebox-container {
   display: none;
 }
 
@@ -400,6 +397,7 @@ body.fakebox-focused #fakebox-cursor {
   max-height: calc(100% - var(--mv-notice-height));
   position: relative;
   text-align: -webkit-auto;
+  width: var(--content-width);
 }
 
 #mv-notice-x {

chrome/browser/resources/local_ntp/local_ntp.html

@@ -23,28 +23,28 @@
   <div id="one-google" class="hidden"></div>
 
   <div id="ntp-contents">
-    <div id="search">
-      <!-- Container for the logo, whether default or doodle. -->
-      <div id="logo">
-        <!-- The logo that is displayed in the absence of a doodle. -->
-        <div id="logo-default" title="Google"></div>
-        <!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
-        <div id="logo-non-white" title="Google"></div>
-        <!-- A doodle, if any: its link and image. -->
-        <div id="logo-doodle">
-          <button id="logo-doodle-button">
-            <img id="logo-doodle-image"></img>
-          </button>
-          <iframe id="logo-doodle-iframe"></iframe>
-          <!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
-          <button id="logo-doodle-notifier">
-            <div class="outer ball0"><div class="inner"></div></div>
-            <div class="outer ball1"><div class="inner"></div></div>
-            <div class="outer ball2"><div class="inner"></div></div>
-            <div class="outer ball3"><div class="inner"></div></div>
-          </button>
-        </div>
+    <div id="logo">
+      <!-- The logo that is displayed in the absence of a doodle. -->
+      <div id="logo-default" title="Google"></div>
+      <!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
+      <div id="logo-non-white" title="Google"></div>
+      <!-- A doodle, if any: its link and image. -->
+      <div id="logo-doodle">
+        <button id="logo-doodle-button">
+          <img id="logo-doodle-image"></img>
+        </button>
+        <iframe id="logo-doodle-iframe"></iframe>
+        <!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
+        <button id="logo-doodle-notifier">
+          <div class="outer ball0"><div class="inner"></div></div>
+          <div class="outer ball1"><div class="inner"></div></div>
+          <div class="outer ball2"><div class="inner"></div></div>
+          <div class="outer ball3"><div class="inner"></div></div>
+        </button>
       </div>
+    </div>
+
+    <div id="fakebox-container">
       <div id="fakebox">
         <div id="fakebox-text"></div>
         <input id="fakebox-input" autocomplete="off" tabindex="-1" type="url"
@@ -53,6 +53,7 @@
         <button id="fakebox-microphone" hidden></button>
       </div>
     </div>
+
     <div id="most-visited">
       <!-- The container for the tiles. The MV iframe goes in here. -->
       <div id="mv-tiles"></div>

chrome/browser/resources/local_ntp/local_ntp.js

@@ -535,7 +535,7 @@ function registerKeyHandler(element, keycode, handler) {
 function handlePostMessage(event) {
   var cmd = event.data.cmd;
   var args = event.data;
-  if (cmd == 'loaded') {
+  if (cmd === 'loaded') {
     tilesAreLoaded = true;
     if (configData.isGooglePage && !$('one-google-loader')) {
       // Load the OneGoogleBar script. It'll create a global variable name "og"
@@ -550,11 +550,19 @@ function handlePostMessage(event) {
         injectOneGoogleBar(og);
       };
     }
-  } else if (cmd == 'tileBlacklisted') {
+  } else if (cmd === 'tileBlacklisted') {
     showNotification();
     lastBlacklistedTile = args.tid;
 
     ntpApiHandle.deleteMostVisitedItem(args.tid);
+  } else if (cmd === 'resizeDoodle') {
+    let width = args.width || null;
+    let height = args.height || null;
+    let duration = args.duration || '0s';
+    let iframe = $(IDS.LOGO_DOODLE_IFRAME);
+    iframe.style.transition = 'width ' + duration + ', height ' + duration;
+    iframe.style.width = width;
+    iframe.style.height = height;
   }
 }
 

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -14,36 +14,37 @@
   <script src="local_ntp_browsertest.js" charset="utf-8"></script>
   <template id="local-ntp-template">
     <div id="ntp-contents">
-      <div id="search">
-        <!-- Container for the logo, whether default or doodle. -->
-        <div id="logo">
-          <!-- The logo that is displayed in the absence of a doodle. -->
-          <div id="logo-default" title="Google"></div>
-          <!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
-          <div id="logo-non-white" title="Google"></div>
-          <!-- A doodle, if any: its link and image. -->
-          <div id="logo-doodle">
-            <button id="logo-doodle-button">
-              <img id="logo-doodle-image"></img>
-            </button>
-            <iframe id="logo-doodle-iframe"></iframe>
-            <!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
-            <button id="logo-doodle-notifier">
-              <div class="outer ball0"><div class="inner"></div></div>
-              <div class="outer ball1"><div class="inner"></div></div>
-              <div class="outer ball2"><div class="inner"></div></div>
-              <div class="outer ball3"><div class="inner"></div></div>
-            </button>
-          </div>
+      <div id="logo">
+        <!-- The logo that is displayed in the absence of a doodle. -->
+        <div id="logo-default" title="Google"></div>
+        <!-- Logo displayed when theme prevents doodles. Doesn't fade. -->
+        <div id="logo-non-white" title="Google"></div>
+        <!-- A doodle, if any: its link and image. -->
+        <div id="logo-doodle">
+          <button id="logo-doodle-button">
+            <img id="logo-doodle-image"></img>
+          </button>
+          <iframe id="logo-doodle-iframe"></iframe>
+          <!-- A spinner, visible on dark-themed NTPs, prompting the doodle -->
+          <button id="logo-doodle-notifier">
+            <div class="outer ball0"><div class="inner"></div></div>
+            <div class="outer ball1"><div class="inner"></div></div>
+            <div class="outer ball2"><div class="inner"></div></div>
+            <div class="outer ball3"><div class="inner"></div></div>
+          </button>
         </div>
+      </div>
+
+      <div id="fakebox-container">
         <div id="fakebox">
           <div id="fakebox-text"></div>
-          <input id="fakebox-input" autocomplete="off" tabIndex="-1" type="url"
+          <input id="fakebox-input" autocomplete="off" tabindex="-1" type="url"
               aria-hidden="true">
           <div id="fakebox-cursor"></div>
           <button id="fakebox-microphone" hidden></button>
         </div>
       </div>
+
       <div id="most-visited">
         <!-- The container for the tiles. The MV iframe goes in here. -->
         <div id="mv-tiles"></div>

chrome/test/data/local_ntp/voice_browsertest.html

@@ -64,7 +64,7 @@
   </template>
   <template id="voice-speech-template">
     <div id="ntp-contents">
-      <div id="search">
+      <div id="fakebox-container">
         <div id="fakebox">
           <div id="fakebox-text"></div>
           <input id="fakebox-input" autocomplete="off" tabIndex="-1" type="url"