<style include="shared-style cr-shared-style">
:host {
display: block;
overflow: auto;
}
#illustration {
background: url(images/sign_in_promo.svg) no-repeat center center;
background-size: contain;
height: 222px;
margin-top: 100px;
width: 594.5px;
}
@media (prefers-color-scheme: dark) {
#illustration {
background-image: url(images/sign_in_promo_dark.svg);
}
}
#no-synced-tabs {
height: 100%;
}
#sign-in-guide {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
text-align: center;
}
#turn-on-sync-promo {
font-size: 215%;
margin-top: 40px;
}
#turn-on-sync-promo-desc {
color: var(--cr-secondary-text-color);
font-size: 123%;
margin-top: 10px;
}
#turn-on-sync-button {
margin: 24px 0;
}
#synced-device-list {
padding-top: var(--first-card-padding-top);
}
history-synced-device-card {
margin-block-end: var(--card-padding-between);
}
</style>
<div id="synced-device-list" class="history-cards"
hidden="[[!syncedDevices_.length]]">
<template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
<history-synced-device-card
device="[[syncedDevice.device]]"
last-update-time="[[syncedDevice.lastUpdateTime]]"
tabs="[[syncedDevice.tabs]]"
separator-indexes="[[syncedDevice.separatorIndexes]]"
search-term="[[searchTerm]]"
session-tag="[[syncedDevice.tag]]"
opened="{{syncedDevice.opened}}">
</history-synced-device-card>
</template>
</div>
<div id="no-synced-tabs" class="centered-message"
hidden="[[!showNoSyncedMessage(signInState, syncedDevices_.length,
guestSession_)]]">
[[noSyncedTabsMessage(fetchingSyncedTabs_, searchTerm)]]
</div>
<div id="sign-in-guide"
hidden="[[!showSignInGuide(signInState, guestSession_,
signInAllowed_)]]">
<div id="illustration"></div>
<div id="turn-on-sync-promo">$i18n{turnOnSyncPromo}</div>
<div id="turn-on-sync-promo-desc">$i18n{turnOnSyncPromoDesc}</div>
<cr-button id="turn-on-sync-button" class="action-button"
on-click="onTurnOnSyncClick_">
$i18n{turnOnSyncButton}
</cr-button>
</div>
<cr-lazy-render id="menu">
<template>
<cr-action-menu role-description="$i18n{menu}">
<button id="menuOpenButton" class="dropdown-item"
on-click="onOpenAllClick_">
$i18n{openAll}
</button>
<button id="menuDeleteButton" class="dropdown-item"
on-click="onDeleteSessionClick_">
$i18n{deleteSession}
</button>
</cr-action-menu>
</template>
</cr-lazy-render>