1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84


ash / webui / diagnostics_ui / resources / diagnostics_app.html [blame]

<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>