[ChromeCart][modules] Add header chip

This CL adds the header chip for chrome cart module with message "New".
Right now the chip is always showing for cart modules and the
visibility will later be controlled by the mojo interface.

Screenshot: https://drive.google.com/file/d/18L4Q5KtyylqM7VYIjrKlA20hq4al9MI5/view?usp=sharing&resourcekey=0-Z4OayexAew1KS34UMnMeXw
Bug: 1152213
Change-Id: I3a291c64c99dcdab49de2ac250f0c550d756dd0a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2597235
Commit-Queue: Yue Zhang <yuezhanggg@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839132}

chrome/app/generated_resources.grd

@@ -5658,6 +5658,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_NTP_MODULES_SHOPPING_TASKS_INFO_CLOSE" desc="Text shown on close button of a task module.">
         Close
       </message>
+      <message name="IDS_NTP_MODULES_CART_HEADER_CHIP_NEW" desc="Text shown on the header chip of chrome cart module.">
+        New
+      </message>
       <!-- Extensions NTP Middle Slot Promo -->
       <message name="IDS_EXTENSIONS_PROMO_PERFORMANCE">
         Web browsing should be fast. Take a moment to <ph name="BEGIN_LINK">&lt;a href="chrome://extensions"&gt;</ph>check your extensions<ph name="END_LINK">&lt;/a&gt;</ph> now.

chrome/app/generated_resources_grd/IDS_NTP_MODULES_CART_HEADER_CHIP_NEW.png.sha1

+09fb7391b6fac561f75aa1da8c5944660ddef9c5
\ No newline at end of file

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

@@ -102,7 +102,7 @@
     width: 102px;
   }
 </style>
-<ntp-module-header></ntp-module-header>
+<ntp-module-header chip-text="$i18n{modulesCartHeaderNew}"></ntp-module-header>
 <div id="moduleContent">
   <template id="cartItemRepeat" is="dom-repeat" items="[[cartItems]]">
     <a class="cart-item" title="[[item.merchant]]"

chrome/browser/resources/new_tab_page/modules/module_header.html

@@ -11,6 +11,15 @@
     font-size: 15px;
   }
 
+  #chip {
+    background-color: var(--ntp-chip-background-color);
+    border-radius: 4px;
+    color: var(--ntp-chip-text-color);
+    font-size: 10px;
+    margin-inline-start: 10px;
+    padding: 2px 6px;
+  }
+
   #headerSpacer {
     flex-grow: 1;
   }
@@ -24,6 +33,9 @@
   }
 </style>
 <span id="title"><slot></slot></span>
+<template is="dom-if" if="[[chipText]]">
+  <div id="chip">[[chipText]]</div>
+</template>
 <div id="headerSpacer"></div>
 <template is="dom-if" if="[[showInfoButton]]">
   <cr-icon-button id="infoButton" title="$i18n{moduleInfoButtonTitle}"

chrome/browser/resources/new_tab_page/modules/module_header.js

@@ -23,6 +23,12 @@ class ModuleHeaderElement extends PolymerElement {
        */
       title: String,
 
+      /**
+       * The chip text showing on the header.
+       * @type {string}
+       */
+      chipText: String,
+
       /**
        * True if the header should display an info button.
        * @type {boolean}

chrome/browser/resources/new_tab_page/shared_vars.css

@@ -19,6 +19,8 @@ html {
   --ntp-selected-light-background-color: rgba(var(--google-blue-600-rgb), .24);
   --ntp-selected-primary-text-color: var(--google-blue-refresh-700);
   --ntp-module-text-color: #616161;
+  --ntp-chip-background-color: var(--google-blue-600);
+  --ntp-chip-text-color: white;
 
   /* Other: */
   --ntp-focus-shadow: 0 0 0 2px var(--ntp-focus-shadow-color);
@@ -37,5 +39,7 @@ html {
     --ntp-selected-border-color: var(--google-blue-refresh-300);
     --ntp-selected-light-background-color: rgba(var(--google-blue-refresh-300-rgb), .24);
     --ntp-selected-primary-text-color: var(--google-blue-refresh-300);
+    --ntp-chip-background-color: var(--google-blue-300);
+    --ntp-chip-text-color: var(--google-grey-900);
   }
 }

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

@@ -205,6 +205,7 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {"modulesKaleidoscopeTitle", IDS_NTP_MODULES_KALEIDOSCOPE_TITLE},
       {"modulesTasksInfoTitle", IDS_NTP_MODULES_SHOPPING_TASKS_INFO_TITLE},
       {"modulesTasksInfoClose", IDS_NTP_MODULES_SHOPPING_TASKS_INFO_CLOSE},
+      {"modulesCartHeaderNew", IDS_NTP_MODULES_CART_HEADER_CHIP_NEW},
   };
   AddLocalizedStringsBulk(source, kStrings);
 

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {chromeCartDescriptor, ChromeCartProxy} from 'chrome://new-tab-page/new_tab_page.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
 
 suite('NewTabPageModulesChromeCartModuleTest', () => {
@@ -121,4 +122,35 @@ suite('NewTabPageModulesChromeCartModuleTest', () => {
     assertEquals('https://image8.com', thumbnailList[2].autoSrc);
     assertEquals(null, cartItems[1].querySelector('.thumbnail-fallback'));
   });
+
+  test('cart module header chip', async () => {
+    const carts = [
+      {
+        merchant: 'Amazon',
+        cartUrl: {url: 'https://amazon.com'},
+        productImageUrls: [
+          {url: 'https://image1.com'}, {url: 'https://image2.com'},
+          {url: 'https://image3.com'}
+        ],
+      },
+    ];
+    testProxy.handler.setResultFor(
+        'getMerchantCarts', Promise.resolve({carts}));
+
+    // Act.
+    await chromeCartDescriptor.initialize();
+    const moduleElement = chromeCartDescriptor.element;
+    document.body.append(moduleElement);
+    moduleElement.$.cartItemRepeat.render();
+
+    // Assert.
+    const cartItems =
+        Array.from(moduleElement.shadowRoot.querySelectorAll('.cart-item'));
+    assertEquals(1, cartItems.length);
+    const headerChip =
+        moduleElement.shadowRoot.querySelector('ntp-module-header')
+            .shadowRoot.querySelector('#chip');
+    assertEquals(
+        loadTimeData.getString('modulesCartHeaderNew'), headerChip.innerText);
+  });
 });