[NTP Quests] Adding tile element and tests

Added styling for dynamic tile and tests to make sure the elements are
rendered properly.

Bug: 1410808
Change-Id: I605be71bfbadf33326c68b5716b1458a5487ede0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4264743
Reviewed-by: Riley Tatum <rtatum@google.com>
Commit-Queue: Marlon Facey <mfacey@chromium.org>
Reviewed-by: Roman Arora <romanarora@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1108710}

chrome/browser/resources/new_tab_page/modules/history_clusters/history_clusters.gni

@@ -3,7 +3,10 @@
 # found in the LICENSE file.
 
 # List of files that should be passed to html_to_wrapper().
-history_clusters_web_component_files = [ "modules/history_clusters/module.ts" ]
+history_clusters_web_component_files = [
+  "modules/history_clusters/module.ts",
+  "modules/history_clusters/tile.ts",
+]
 
 # List of files that don't need to be passed to html_to_wrapper().
 history_clusters_non_web_component_files =

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

@@ -18,4 +18,7 @@
     icon-src="chrome://resources/images/icon_journeys.svg">
     [[i18n('modulesJourneysResumeJourney', cluster.label)]]
   </ntp-module-header>
+  <ntp-history-clusters-tile id="main-tile" large-format
+                             visit="[[cluster.visits.0]]">
+  </ntp-history-clusters-tile>
 </div>

chrome/browser/resources/new_tab_page/modules/history_clusters/module.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../module_header.js';
+import './tile.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

chrome/browser/resources/new_tab_page/modules/history_clusters/tile.html

@@ -0,0 +1,113 @@
+<style include="history-clusters-shared-style">
+  #content {
+    background: var(--google-grey-100);
+    border-radius: 25px;
+    color: var(--google-grey-900);
+  }
+
+  /* TODO(crbug.com/1414484): Add comprehensive theming to the hover states */
+  /*:host(:hover) #content {*/
+  /*  background-color: var(--cr-hover-background-color);*/
+  /*}*/
+
+  /*:host(:active) #content {*/
+  /*  background-color: var(--cr-active-background-color);*/
+  /*}*/
+
+  :host([large-format]) #content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  :host([medium-format]) #content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+  }
+
+  #image {
+    background: red;
+    border-radius: 25px;
+  }
+
+  :host([large-format]) #image {
+    height: 152px;
+    margin: 16px auto;
+    width: 320px;
+  }
+
+  :host([medium-format]) #image {
+    height: 128px;
+    margin: 8px;
+    width: 128px;
+  }
+
+  /* TODO(crbug.com/1418528): Add favicon */
+  /*#icon {*/
+  /*  background-color: white;*/
+  /*  height: 16px;*/
+  /*  margin-inline-end: 8px;*/
+  /*  width: 16px;*/
+  /*}*/
+
+  :host([medium-format]) #icon {
+    margin-inline-start: 8px;
+  }
+
+  #title {
+    font-size: 16px;
+    white-space: initial;
+  }
+
+  :host([large-format]) #title {
+    height: 48px;
+    max-width: 298px;
+    padding: 16px 24px 24px;
+  }
+
+  :host([medium-format]) #title {
+    height: 60px;
+    max-width: 184px;
+    padding: 18px 16px 32px 8px;
+  }
+
+  #info-container {
+    color: var(--google-grey-700);
+    display: flex;
+    flex-direction: row;
+    font-size: 11px;
+    margin-inline-start: 24px;
+  }
+
+  :host([large-format]) #label {
+    max-width: 200px;
+  }
+
+  :host([medium-format]) #label {
+    max-width: 90px;
+  }
+
+  #label,
+  #date {
+    bottom: -2px;
+    position: relative;
+  }
+
+  #dot {
+    line-height: 16px;
+  }
+</style>
+<div id="content">
+  <div id="image"></div>
+  <div id="text-container">
+    <div id="title" class="truncate">[[visit.pageTitle]]</div>
+    <div id="info-container">
+      <div id="label" class="truncate"> [[label_]]</div>
+      <span id="dot">&nbsp&#8226&nbsp</span>
+      <div id="date">[[visit.relativeDate]]</div>
+    </div>
+  </div>
+</div>

chrome/browser/resources/new_tab_page/modules/history_clusters/tile.ts

@@ -0,0 +1,68 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://resources/cr_components/history_clusters/history_clusters_shared_style.css.js';
+
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {Cluster, URLVisit} from '../../history_cluster_types.mojom-webui.js';
+import {I18nMixin} from '../../i18n_setup.js';
+
+import {getTemplate} from './tile.html.js';
+
+export class TileModuleElement extends I18nMixin
+(PolymerElement) {
+  static get is() {
+    return 'ntp-history-clusters-tile';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /* The visit to display. */
+      visit: Object,
+
+      /* The icon to display. */
+      iconStyle_: {
+        type: String,
+        computed: `computeIconStyle_(visit.imageUrl)`,
+      },
+
+      /* The label to display. */
+      label_: {
+        type: String,
+        computed: `computeLabel_(visit.urlForDisplay)`,
+      },
+    };
+  }
+
+  visit: URLVisit;
+  cluster: Cluster;
+
+  constructor() {
+    super();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  private computeIconStyle_(): string {
+    return `-webkit-mask-image: url(${this.visit.imageUrl})`;
+  }
+
+  private computeLabel_(): string {
+    // TODO: Figure out better way to strip host name
+    return this.visit.urlForDisplay;
+  }
+}
+
+customElements.define(TileModuleElement.is, TileModuleElement);

chrome/test/data/webui/new_tab_page/modules/history_clusters/module_test.ts

@@ -7,7 +7,9 @@ import 'chrome://webui-test/mojo_webui_test_support.js';
 import {Cluster, RawVisitData, URLVisit} from 'chrome://new-tab-page/history_cluster_types.mojom-webui.js';
 import {PageHandlerRemote} from 'chrome://new-tab-page/history_clusters.mojom-webui.js';
 import {historyClustersDescriptor, HistoryClustersModuleElement, HistoryClustersProxyImpl} from 'chrome://new-tab-page/lazy_load.js';
+import {$$} from 'chrome://new-tab-page/new_tab_page.js';
 import {assertEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {TestMock} from 'chrome://webui-test/test_mock.js';
 
 import {installMock} from '../../test_support.js';
@@ -32,8 +34,8 @@ suite('NewTabPageModulesHistoryClustersModuleTest', () => {
     const urlVisit1: URLVisit = {
       visitId: BigInt(1),
       normalizedUrl: {url: 'https://www.google.com'},
-      urlForDisplay: 'www.google.com',
-      pageTitle: '',
+      urlForDisplay: 'https://www.google.com',
+      pageTitle: 'Test Title',
       titleMatchPositions: [],
       urlForDisplayMatchPositions: [],
       duplicates: [],
@@ -87,4 +89,22 @@ suite('NewTabPageModulesHistoryClustersModuleTest', () => {
     await handler.whenCalled('getCluster');
     assertTrue(!!moduleElement);
   });
+
+  test('Tile element populated with correct data', async () => {
+    handler.setResultFor(
+        'getCluster', Promise.resolve({cluster: createSampleCluster()}));
+
+    const moduleElement = await historyClustersDescriptor.initialize(0) as
+        HistoryClustersModuleElement;
+
+    document.body.append(moduleElement);
+    assertTrue(!!moduleElement);
+    await handler.whenCalled('getCluster');
+    await waitAfterNextRender(moduleElement);
+
+    const tileElement = $$(moduleElement, 'ntp-history-clusters-tile');
+    assertTrue(!!tileElement);
+
+    assertEquals($$(tileElement, '#title')!.innerHTML, 'Test Title');
+  });
 });