[Merge M123][NTP XDTR] Update preredesign UI to match drive
Matches image size and alignment for XDTR preredesign to drive image size and alignment, matches line height, adds back device name string with associated string resource, and updates preredesign have a max of 3
tabs.
Screenshot: http://screenshot/879WMuu6JMqKZiY
(cherry picked from commit 724ca2d8f8cfb29ad9d23e23beceee3f131e2f68)
Bug: 328292081, 328296450,
Change-Id: I1543798286db9d314e787c3a1eb5c9889a4ba0bd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5344994
Commit-Queue: Marlon Facey <mfacey@chromium.org>
Reviewed-by: Roman Arora <romanarora@chromium.org>
Cr-Original-Commit-Position: refs/heads/main@{#1269084}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5362373
Cr-Commit-Position: refs/branch-heads/6312@{#525}
Cr-Branched-From: 6711dcdae48edaf98cbc6964f90fac85b7d9986e-refs/heads/main@{#1262506}
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 54d13ff..d8f4d98 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -8474,6 +8474,9 @@
<message name="IDS_NTP_MODULES_TAB_RESUMPTION_RECENTLY_OPENED" desc="Default string text for when a tab was opened less than 60 seconds ago." translateable="false">
Recently opened
</message>
+ <message name="IDS_NTP_MODULES_TAB_RESUMPTION_DEVICE_PREFIX" desc="Prefix for device name to be shown in various UIs." translateable="false">
+ From your
+ </message>
<!-- Extensions NTP Middle Slot Promo -->
<message name="IDS_EXTENSIONS_PROMO_PERFORMANCE">
diff --git a/chrome/app/generated_resources_grd/IDS_NTP_MODULES_TAB_RESUMPTION_DEVICE_PREFIX.png.sha1 b/chrome/app/generated_resources_grd/IDS_NTP_MODULES_TAB_RESUMPTION_DEVICE_PREFIX.png.sha1
new file mode 100644
index 0000000..2924c0be
--- /dev/null
+++ b/chrome/app/generated_resources_grd/IDS_NTP_MODULES_TAB_RESUMPTION_DEVICE_PREFIX.png.sha1
@@ -0,0 +1 @@
+3efecf5f7af429e5adbd74a029914ea4901fc68a
\ No newline at end of file
diff --git a/chrome/browser/new_tab_page/modules/v2/tab_resumption/tab_resumption_page_handler.cc b/chrome/browser/new_tab_page/modules/v2/tab_resumption/tab_resumption_page_handler.cc
index b49ee16..65496cbf 100644
--- a/chrome/browser/new_tab_page/modules/v2/tab_resumption/tab_resumption_page_handler.cc
+++ b/chrome/browser/new_tab_page/modules/v2/tab_resumption/tab_resumption_page_handler.cc
@@ -234,7 +234,8 @@
std::vector<history::mojom::TabPtr> tabs_mojom;
const int kSampleSessionsCount = 3;
for (int i = 0; i < kSampleSessionsCount; i++) {
- auto session_tabs_mojom = SessionToMojom(SampleSession("", 3, 1).get());
+ auto session_tabs_mojom =
+ SessionToMojom(SampleSession("Test Session Name", 3, 1).get());
for (auto& tab_mojom : session_tabs_mojom) {
tabs_mojom.push_back(std::move(tab_mojom));
}
diff --git a/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.html b/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.html
index 501efcc..d644ca50 100644
--- a/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.html
+++ b/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.html
@@ -8,6 +8,10 @@
width: 100%;
}
+ :host(:not([modules-redesigned_])) ntp-module-header {
+ margin-bottom: 8px;
+ }
+
@media (forced-colors: active) {
/* Set outline since background isn't visible in hcm */
ntp-module-header-v2,
@@ -94,9 +98,11 @@
:host(:not([modules-redesigned_])) .icon {
background-position: unset;
- height: 24px;
- margin-inline: 18px 16px;
- width: 24px;
+ border-radius: 0;
+ height: 40px;
+ margin-inline: 18px 19px;
+ margin-top: 3px;
+ width: 19px;
}
.tab-info {
@@ -113,7 +119,8 @@
}
.tab-title,
- .tab-domain {
+ .tab-domain,
+ :host(:not([modules-redesigned_])) .tab-device {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -121,18 +128,22 @@
.tab-title {
color: var(--color-new-tab-page-primary-foreground);
- font-size: 13px;
+ font-size: var(--ntp-module-text-size);
line-height: 20px;
}
.tab-description {
display: flex;
flex-direction: row;
- font-size: 11px;
+ font-size: var(--ntp-module-secondary-text-size);
line-height: 16px;
}
- .tab-device {
+ :host(:not([modules-redesigned_])) .tab-description {
+ line-height: 20px;
+ }
+
+ :host([modules-redesigned_]) .tab-device {
height: 14px;
margin-bottom: auto;
margin-inline: 0 4px;
@@ -175,12 +186,19 @@
<template id="tabRepeat" is="dom-repeat" items="[[tabs]]">
<a class="tab" href="[[item.url.url]]" on-click="onTabClick_">
<div id="hover-layer"></div>
- <page-favicon class="icon" url="[[item.url]]" size="16">
+ <page-favicon class="icon" url="[[item.url]]"
+ size="[[computeFaviconSize_()]]">
</page-favicon>
<div class="tab-info">
<div class="tab-title">[[item.title]]</div>
<div class="tab-description">
- <iron-icon class="tab-device" icon="[[computeIcon_(item)]]"></iron-icon>
+ <iron-icon class="tab-device" icon="[[computeIcon_(item)]]"
+ hidden="[[!modulesRedesigned_]]"></iron-icon>
+ <div class="tab-device" hidden="[[modulesRedesigned_]]">
+ [[i18n('modulesTabResumptionDevicePrefix')]]
+ [[item.sessionName]]</div>
+ <span class="dot" hidden="[[modulesRedesigned_]]">
+  • </span>
<div class="tab-domain">[[computeDomain_(item)]]</div>
<span class="dot"> • </span>
<div class="date">[[item.relativeTimeText]]</div>
diff --git a/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.ts b/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.ts
index 4d213c1..3c3ebb1a 100644
--- a/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.ts
+++ b/chrome/browser/resources/new_tab_page/modules/v2/tab_resumption/module.ts
@@ -21,7 +21,8 @@
import {getTemplate} from './module.html.js';
import {TabResumptionProxyImpl} from './tab_resumption_proxy.js';
-export const MAX_TABS = 5;
+export const MAX_TABS =
+ !loadTimeData.getBoolean('modulesRedesignedEnabled') ? 3 : 5;
export interface TabResumptionModuleElement {
$: {
@@ -173,6 +174,10 @@
private computeIsSingleTab_(): boolean {
return this.tabs && this.tabs.length === 1;
}
+
+ private computeFaviconSize_(): number {
+ return loadTimeData.getBoolean('modulesRedesignedEnabled') ? 16 : 19;
+ }
}
customElements.define(
diff --git a/chrome/browser/resources/new_tab_page/shared_vars.css b/chrome/browser/resources/new_tab_page/shared_vars.css
index 60466ca3..1e7f5a4 100644
--- a/chrome/browser/resources/new_tab_page/shared_vars.css
+++ b/chrome/browser/resources/new_tab_page/shared_vars.css
@@ -17,4 +17,5 @@
--ntp-focus-shadow: 0 0 0 2px var(--color-new-tab-page-focus-ring);
--ntp-module-item-border-radius: 4px;
--ntp-module-text-size: 13px;
+ --ntp-module-secondary-text-size: 11px;
}
diff --git a/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc b/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
index 2f57dcaa..1ae55ec 100644
--- a/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
+++ b/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
@@ -558,6 +558,8 @@
{"modulesTabResumptionTitle", IDS_NTP_TAB_RESUMPTION_TITLE},
{"modulesTabResumptionInfo", IDS_NTP_MODULES_TAB_RESUMPTION_INFO},
{"modulesTabResumptionSentence", IDS_NTP_MODULES_TAB_RESUMPTION_SENTENCE},
+ {"modulesTabResumptionDevicePrefix",
+ IDS_NTP_MODULES_TAB_RESUMPTION_DEVICE_PREFIX},
// Middle slot promo.
{"undoDismissPromoButtonToast", IDS_NTP_UNDO_DISMISS_PROMO_BUTTON_TOAST},