WebUI NTP: style the middle-slot promo to match modules

The restyle to match the modules is only enabled when the ntp-modules
feature flag is enabled.

Bug: 1110067
Change-Id: Ib394df60498bca8845b3cbd49bd49cdedd72c2c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2429230
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#810673}

chrome/browser/resources/new_tab_page/app.html

@@ -80,6 +80,15 @@
     width: var(--ntp-search-box-width);
   }
 
+  :host([modules-enabled_]) ntp-middle-slot-promo {
+    width: var(--ntp-search-box-width);
+  }
+
+  :host(:not([modules-enabled_])) ntp-middle-slot-promo {
+    bottom: 16px;
+    position: fixed;
+  }
+
   ntp-realbox {
     visibility: hidden;
   }
@@ -94,11 +103,7 @@
     --tile-hover-color: rgba(255, 255, 255, .1);
   }
 
-  ntp-middle-slot-promo {
-    bottom: 16px;
-    position: fixed;
-  }
-
+  ntp-middle-slot-promo + ntp-module-wrapper,
   ntp-module-wrapper + ntp-module-wrapper {
     margin-top: 24px;
   }

chrome/browser/resources/new_tab_page/app.js

@@ -191,6 +191,13 @@ class AppElement extends PolymerElement {
         computed: 'computeRealboxShown_(theme_)',
       },
 
+      /** @private */
+      modulesEnabled_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('modulesEnabled'),
+        reflectToAttribute: true,
+      },
+
       /**
        * If true, renders additional elements that were not deemed crucial to
        * to show up immediately on load.
@@ -732,6 +739,11 @@ class AppElement extends PolymerElement {
 
   /** @private */
   onMiddleSlotPromoLoaded_() {
+    // The promo is always shown when modules are enabled since it will not
+    // overlap with other elements.
+    if (this.modulesEnabled_) {
+      return;
+    }
     const onResize = () => {
       const promoElement = $$(this, 'ntp-middle-slot-promo');
       const hidePromo = this.$.mostVisited.getBoundingClientRect().bottom >=

chrome/browser/resources/new_tab_page/middle_slot_promo.html

 <style include="cr-hidden-style">
   :host {
     font-size: 12px;
-    max-width: 537px;
     white-space: pre;
   }
 
+  :host([modules-enabled_]):host {
+    font-size: 13px;
+  }
+
+  :host(:not([modules-enabled_])):host {
+    max-width: 537px;
+  }
+
   #container {
     align-items: center;
-    background-color: var(--cr-card-background-color);
-    border: 1px solid var(--ntp-border-color);
-    border-radius: 16px;
+    background-color: var(--ntp-background-override-color);
+    border: solid var(--ntp-border-color) 1px;
+    border-radius: 24px;
     box-sizing: border-box;
     color: var(--cr-primary-text-color);
     display: flex;
     flex-direction: row;
-    height: 32px;
-    padding: 0 16px;
+    height: 30px;
+    justify-content: center;
+    padding-inline-end: 8px;
+    padding-inline-start: 8px;
+  }
+
+  :host([modules-enabled_]) #container {
+    border-radius: 5px;
+    height: 48px;
   }
 
   a {
@@ -30,9 +44,12 @@
     outline: none;
   }
 
-  .image {
-    margin-inline-end: 8px;
-    margin-inline-start: -12px;
+  * + .image {
+    margin-inline-start: 8px;
+  }
+
+  .image + * {
+    margin-inline-start: 8px;
   }
 
   img {
@@ -42,6 +59,13 @@
     width: 24px;
   }
 
+  :host([modules-enabled_]) img {
+    background-color: var(--google-grey-refresh-100);
+    height: 22px;
+    padding: 5px;
+    width: 22px;
+  }
+
   @media (prefers-color-scheme: dark) {
     img {
       background-color: var(--google-grey-200);

chrome/browser/resources/new_tab_page/middle_slot_promo.js

@@ -5,6 +5,7 @@
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.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';
 
 import {BrowserProxy} from './browser_proxy.js';
@@ -23,6 +24,17 @@ class MiddleSlotPromoElement extends PolymerElement {
     return html`{__html_template__}`;
   }
 
+  static get properties() {
+    return {
+      /** @private */
+      modulesEnabled_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('modulesEnabled'),
+        reflectToAttribute: true,
+      },
+    };
+  }
+
   constructor() {
     super();
     /** @private {newTabPage.mojom.PageHandlerRemote} */