<style include="cr-shared-style">
:host {
background-color: var(--color-new-tab-page-module-background);
border-radius: var(--ntp-module-border-radius);
}
@media (forced-colors: active) {
/* Set outline since background isn't visible in hcm */
ntp-module-header-v2,
a {
border-radius: var(--ntp-module-item-border-radius);
outline: var(--cr-border-hcm);
}
.tab {
overflow: visible;
}
}
ntp-module-header-v2 {
background-color: var(--color-new-tab-page-module-background);
margin: 8px;
}
:host-context(.focus-outline-visible) a:focus,
a:focus-visible {
box-shadow: var(--ntp-focus-shadow);
outline: none;
}
#tabs {
background-color: var(--color-new-tab-page-module-item-background);
border-radius: var(--ntp-module-item-border-radius);
overflow: hidden;
margin: 8px;
}
.tab {
align-items: center;
display: flex;
height: 56px;
position: relative;
text-decoration: none;
overflow: hidden;
}
.tab:hover #hoverLayer {
background: var(--color-new-tab-page-module-item-background-hovered);
display: block;
inset: 0;
pointer-events: none;
position: absolute;
}
#hoverLayer {
display: none;
}
.tab:first-of-type {
border-radius: var(--ntp-module-item-border-radius)
var(--ntp-module-item-border-radius) 0 0;
padding-top: var(--ntp-module-first-element-top-padding);
}
.icon {
background-color: var(--color-new-tab-page-module-icon-background);
border-radius: 8px;
height: var(--ntp-module-icon-size);
margin-inline: 8px;
position: relative;
width: var(--ntp-module-icon-size);
}
.tab-info {
color: var(--color-new-tab-page-secondary-foreground);
min-width: 0;
padding-inline-end: 16px;
position: relative;
}
.tab-title,
.tab-domain,
.tab-device {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-title {
color: var(--color-new-tab-page-primary-foreground);
font-size: var(--ntp-module-text-size);
line-height: var(--ntp-module-line-height);
}
.tab-description {
display: flex;
flex-direction: row;
font-size: var(--ntp-module-secondary-text-size);
line-height: var(--ntp-module-secondary-line-height);
}
.tab-reason {
white-space: nowrap;
}
:host([should-show-device-icon_]) .tab-device {
height: 14px;
margin-bottom: auto;
margin-inline: 0 4px;
margin-top: auto;
width: 14px;
}
cr-icon-button {
--cr-icon-button-fill-color: var(--color-new-tab-page-primary-foreground);
--cr-icon-button-hover-background-color:
var(--color-new-tab-page-active-background);
display: none;
justify-content: flex-end;
margin-left: auto;
margin-right: 16px;
}
.tab:hover cr-icon-button {
display: block;
}
#seeMoreButtonContainer {
padding: 4px 0 8px 0;
}
#seeMoreButtonContainer a {
color: var(--color-new-tab-page-link);
font-size: 13px;
display: block;
font-weight: var(--ntp-module-see-more-font-weight);
line-height: 20px;
padding: 4px 16px 4px 16px;
position: relative;
text-decoration: none;
}
#seeMoreButtonContainer:hover #hoverContainer {
background: var(--color-new-tab-page-module-item-background-hovered);
display: block;
inset: 0;
pointer-events: none;
position: absolute;
}
#seeMoreButtonContainer #hoverContainer {
display: none;
}
</style>
<ntp-module-header-v2
id="moduleHeaderElementV2"
header-text="[[i18n('modulesMostRelevantTabResumptionTitle')]]"
menu-item-groups="[[getMenuItemGroups_()]]"
more-actions-text="[[i18nRecursive('',
'modulesMoreActions',
'modulesTabResumptionTitle')]]"
on-disable-button-click="onDisableButtonClick_"
on-dismiss-button-click="onDismissAllButtonClick_"
on-info-button-click="onInfoButtonClick_"
on-menu-button-click="onMenuButtonClick_">
</ntp-module-header-v2>
<div id="tabs">
<template id="tabRepeat" is="dom-repeat" items="[[getVisibleTabs_()]]">
<a class="tab" href="[[item.url.url]]" on-click="onTabClick_">
<div id="hoverLayer"></div>
<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">
<cr-icon class="tab-device" hidden="[[!shouldShowDeviceIcon_]]"
icon="[[computeIcon_(item)]]"></cr-icon>
<div class="tab-domain">[[computeDomain_(item)]]</div>
<span class="dot" hidden="[[!computeShouldShowDeviceName_(item)]]">
 • </span>
<div class="tab-device"
hidden="[[!computeShouldShowDeviceName_(item)]]">
[[computeDeviceName_(item)]]
</div>
<span class="dot">
 • </span>
<span class="tab-reason">
[[computeReason_(item)]]
</span>
</div>
</div>
<cr-icon-button iron-icon="modules:done" on-click="onDismissButtonClick_"
title="$i18n{modulesHistoryDoneButton}">
</cr-icon-button>
</a>
</template>
<div id="seeMoreButtonContainer">
<a href="chrome://history/syncedTabs">
$i18n{modulesMostRelevantTabResumptionSeeMore}
<div id="hoverContainer"></div>
</a>
</div>
</div>
<cr-lazy-render id="infoDialogRender">
<template>
<ntp-info-dialog
inner-h-t-m-l="[[i18nAdvanced('modulesTabResumptionInfo')]]">
</ntp-info-dialog>
</template>
</cr-lazy-render>