WebUI NTP: recipe module, website name added and style changes

Screenshots https://crbug.com/1138011#c13.

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

chrome/browser/resources/new_tab_page/modules/task_module/module.html

@@ -25,10 +25,18 @@
     display: flex;
     flex-direction: column;
     outline: none;
+    position: relative;
     text-decoration: none;
+  }
+
+  :host([shopping]) .task-item {
     width: 120px;
   }
 
+  :host([recipe]) .task-item {
+    width: 165px;
+  }
+
   :host-context(.focus-outline-visible) .task-item:focus {
     box-shadow: var(--ntp-focus-shadow);
   }
@@ -38,18 +46,15 @@
   }
 
   .image-background {
-    border-radius: 4px;
-    margin-bottom: 8px;
-    width: 120px;
-  }
-
-  :host([shopping]) .image-background {
     /* Mixes to Google Grey 50 underneath .image-container. */
     background-color: rgb(22, 55, 88);
+    border-radius: 4px;
     height: 120px;
+    margin-bottom: 8px;
+    width: inherit;
   }
 
-  :host([shopping]) .image-container {
+  .image-container {
     background-color: white;
     border-radius: 4px;
     /* Using box-shadow mimics proper rendering,
@@ -57,29 +62,39 @@
      * after rounding edges. */
     box-shadow: 0 0 0 0.2px white;
     box-sizing: border-box;
+    height: 100%;
     opacity: 97%;
     padding: 10px;
   }
 
-  :host([recipe]) .image-background {
-    height: 100px;
-  }
-
-  .image-container,
-  img {
-    height: 100%;
-    width: 100%;
-  }
-
   :host([shopping]) img {
+    height: 100%;
     object-fit: contain;
+    width: 100%;
   }
 
   :host([recipe]) img {
     border-radius: 4px;
+    height: 136px;
+    margin-bottom: 8px;
     object-fit: cover;
   }
 
+  .tag {
+    background: rgba(var(--ntp-background-override-color-rgb), .9);
+    border-radius: 4px;
+    color: var(--cr-primary-text-color);
+    font-size: 9px;
+    margin: 8px;
+    padding:  8px;
+    position: absolute;
+    text-transform: uppercase;
+  }
+
+  :host-context([dir=rtl]) .tag {
+    right: 0;
+  }
+
   .price {
     color: var(--cr-primary-text-color);
     font-size: 13px;
@@ -109,7 +124,7 @@
     white-space: nowrap;
   }
 
-  .info {
+  .secondary {
     color: var(--cr-secondary-text-color);
     font-size: 11px;
     height: 13px;
@@ -193,14 +208,22 @@
         on-dom-change="onDomChange_">
       <a class="task-item" href="[[item.targetUrl.url]]"
           on-click="onTaskItemClick_" on-auxclick="onTaskItemClick_">
-        <div class="image-background">
-          <div class="image-container">
-            <img is="ntp-img" auto-src="[[item.imageUrl.url]]"></img>
+        <template is="dom-if" if="[[isShopping_(taskModuleType)]]">
+          <div class="image-background">
+            <div class="image-container">
+              <img is="ntp-img" auto-src="[[item.imageUrl.url]]"></img>
+            </div>
           </div>
-        </div>
-        <div class="price" hidden$="[[!item.price]]">[[item.price]]</div>
-        <div class="name" title="[[item.name]]">[[item.name]]</div>
-        <div class="info">[[item.info]]</div>
+          <div class="price" hidden$="[[!item.price]]">[[item.price]]</div>
+          <div class="name" title="[[item.name]]">[[item.name]]</div>
+          <div class="secondary">[[item.info]]</div>
+        </template>
+        <template is="dom-if" if="[[isRecipe_(taskModuleType)]]">
+          <img is="ntp-img" auto-src="[[item.imageUrl.url]]"></img>
+          <div class="tag">[[item.info]]</div>
+          <div class="name" title="[[item.name]]">[[item.name]]</div>
+          <div class="secondary">[[item.siteName]]</div>
+        </template>
       </a>
     </template>
   </div>

chrome/browser/resources/new_tab_page/modules/task_module/module.js

@@ -47,6 +47,22 @@ class TaskModuleElement extends PolymerElement {
     this.intersectionObserver_ = null;
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isRecipe_() {
+    return this.taskModuleType === taskModule.mojom.TaskModuleType.kRecipe;
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isShopping_() {
+    return this.taskModuleType === taskModule.mojom.TaskModuleType.kShopping;
+  }
+
   /** @private */
   onTaskModuleTypeChange_() {
     switch (this.taskModuleType) {
@@ -148,7 +164,7 @@ async function createModule(taskModuleType) {
 /** @type {!ModuleDescriptor} */
 export const recipeTasksDescriptor = new ModuleDescriptor(
     /*id=*/ 'recipe_tasks',
-    /*heightPx=*/ 260,
+    /*heightPx=*/ 300,
     createModule.bind(null, taskModule.mojom.TaskModuleType.kRecipe));
 
 /** @type {!ModuleDescriptor} */

chrome/browser/resources/new_tab_page/shared_vars.css

@@ -10,7 +10,9 @@
 html {
   /* Colors: */
   --ntp-active-background-color: rgba(var(--google-grey-900-rgb), .16);
-  --ntp-background-override-color: white;
+  --ntp-background-override-color-rgb: 255, 255, 255;
+  --ntp-background-override-color:
+      rgba(var(--ntp-background-override-color-rgb));
   --ntp-border-color: var(--google-grey-refresh-300);
   --ntp-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4);
   --ntp-hover-background-color: rgba(var(--google-grey-900-rgb), .1);
@@ -33,7 +35,7 @@ html {
   html {
     /* Colors: */
     --ntp-active-background-color: rgba(var(--google-grey-200-rgb), .16);
-    --ntp-background-override-color: var(--google-grey-900);
+    --ntp-background-override-color-rgb: var(--google-grey-900-rgb);
     --ntp-border-color: var(--google-grey-refresh-700);
     --ntp-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
     --ntp-hover-background-color: rgba(var(--google-grey-200-rgb), .1);

chrome/browser/search/task_module/task_module.mojom

@@ -22,6 +22,8 @@ struct TaskItem {
   string? price;
   // Human-readable info.
   string info;
+  // Website name.
+  string? site_name;
   // URL of the target page.
   url.mojom.Url target_url;
 };

chrome/browser/search/task_module/task_module_service.cc

@@ -267,6 +267,7 @@ void TaskModuleService::OnJsonParsed(
       auto* image_url = task_item.FindStringPath("image_url");
       auto* price = task_item.FindStringPath("price");
       auto* info = task_item.FindStringPath("info");
+      auto* site_name = task_item.FindStringPath("site_name");
       auto* target_url = task_item.FindStringPath("target_url");
       if (!name || !image_url || !info || !target_url) {
         continue;
@@ -279,6 +280,10 @@ void TaskModuleService::OnJsonParsed(
       mojom_task_item->name = *name;
       mojom_task_item->image_url = GURL(*image_url);
       mojom_task_item->info = *info;
+      if (task_module_type == task_module::mojom::TaskModuleType::kRecipe &&
+          site_name) {
+        mojom_task_item->site_name = *site_name;
+      }
       mojom_task_item->target_url = GURL(*target_url);
       if (task_module_type == task_module::mojom::TaskModuleType::kShopping) {
         mojom_task_item->price = *price;

chrome/test/data/webui/new_tab_page/modules/task_module/module_test.js

@@ -90,7 +90,7 @@ suite('NewTabPageModulesTaskModuleTest', () => {
         '1 gazillion dollars', products[0].querySelector('.price').innerText);
     assertEquals('foo', products[0].querySelector('.name').innerText);
     assertEquals('foo', products[0].querySelector('.name').title);
-    assertEquals('foo info', products[0].querySelector('.info').innerText);
+    assertEquals('foo info', products[0].querySelector('.secondary').innerText);
     assertEquals('https://bar.com/', products[1].href);
     assertEquals(
         'https://bar.com/img.png', products[1].querySelector('img').autoSrc);
@@ -98,7 +98,7 @@ suite('NewTabPageModulesTaskModuleTest', () => {
         '2 gazillion dollars', products[1].querySelector('.price').innerText);
     assertEquals('bar', products[1].querySelector('.name').innerText);
     assertEquals('bar', products[1].querySelector('.name').title);
-    assertEquals('bar info', products[1].querySelector('.info').innerText);
+    assertEquals('bar info', products[1].querySelector('.secondary').innerText);
     assertEquals('https://baz.com/', pills[0].href);
     assertEquals('baz', pills[0].querySelector('.search-text').innerText);
     assertEquals('https://blub.com/', pills[1].href);