<style include="cr-shared-style diagnostics-shared">
:host {
display: flex;
flex-direction: column;
height: 100%;
}
/* TODO(b/323429208): Remove jelly-enabled and update css style. */
:host-context(body.jelly-enabled) navigation-view-panel {
--navigation-view-panel-bg-color: var(--cros-sys-app_base_shaded);
}
#diagnosticsAppContainer {
height: 100%;
}
#navigationPanel::part(top-nav) {
height: 56px;
}
page-toolbar {
min-height: 56px;
position: sticky;
top: 0;
}
#download-icon {
--iron-icon-fill-color: currentColor;
height: 20px;
margin-inline-end: 8px;
width: 20px;
}
.session-log-button {
border-radius: 16px;
height: 32px;
margin-inline: 16px;
}
.session-log-button:not([disabled]) {
color: var(--cros-text-color-prominent);
}
.session-log-button[disabled] {
color: var(--cros-text-color-disabled);
}
#toast {
bottom: 0;
left: 0;
}
cr-toast iron-icon {
--iron-icon-fill-color: var(--cros-color-prominent-inverted);
margin-inline-end: 12px;
}
</style>
<div id="diagnosticsAppContainer">
<navigation-view-panel id="navigationPanel" show-tool-bar
title="[[i18n('diagnosticsTitle')]]"
show-banner=[[bannerMessage.length]]>
<diagnostics-sticky-banner slot="banner"
banner-message="{{bannerMessage}}">
</diagnostics-sticky-banner>
<div slot="bottom-nav-content-panel" class="session-log-container">
<cr-button on-click="onSessionLogClick" class="session-log-button"
disabled="[[!saveSessionLogEnabled]]" hidden="[[!isLoggedIn]]">
<iron-icon icon="diagnostics:download" id="download-icon"></iron-icon>
<span>[[i18n('sessionLog')]]</span>
</cr-button>
</div>
<div slot="bottom-nav-content-drawer" class="session-log-container">
<cr-button on-click="onSessionLogClick" class="session-log-button"
disabled="[[!saveSessionLogEnabled]]" hidden="[[!isLoggedIn]]">
<iron-icon icon="diagnostics:download" id="download-icon"></iron-icon>
<span>[[i18n('sessionLog')]]</span>
</cr-button>
</div>
</navigation-view-panel>
<cr-toast id="toast" duration="2500">
<iron-icon icon="diagnostics:info"></iron-icon>
<span>[[toastText]]</span>
</cr-toast>
</div>