| <style include="cr-shared-style diagnostics-shared"> |
| :host { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| :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> |
