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
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149

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

<style include="diagnostics-shared">
  :host-context(body.jelly-enabled) #additionalMessage {
    font: var(--cros-body-2-font);
  }

  :host-context(body.jelly-enabled) #testStatusText {
    font: var(--cros-body-2-font);
  }

  #additionalMessage {
    color: var(--cros-text-color-primary);
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 13px;
    font-weight: var(--diagnostics-regular-font-weight);
  }

  .button-container {
    padding: 8px 0 4px;
  }

  .learn-more-button {
    border-radius: 4px;
    height: 32px;
    margin-top: 12px;
    padding: 8px 16px;
  }

  :host-context(body.jelly-enabled) .button-container,
  :host-context(body.jelly-enabled) .learn-more-button {
    font: var(--cros-button-2-font);
  }

  .button-container,
  .learn-more-button {
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 13px;
    font-weight: var(--diagnostics-medium-font-weight);
  }

  #messageIcon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    fill: var(--cros-icon-color-secondary);
    margin-inline-end: 8px;
  }

  .result-list {
    margin: 20px 0;
  }

  .routine-container {
    display: flex;
    justify-content: space-between;
  }

  .routine-section-container {
    display: flex;
    flex-direction: column;
  }

  .routine-status-container {
    display: flex;
    flex-direction: column;
  }

  #testStatusBadge {
    margin-bottom: 4px;
  }

  #testStatusText {
    color: var(--cros-text-color-secondary);
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 13px;
    font-weight: var(--diagnostics-regular-font-weight);
    padding-inline-start: 6px;
  }

  #toggleReportButton {
    margin-inline-end: 8px;
  }

  :host([hide-routine-status]) .container-spacing {
    padding-inline: 20px;
  }

  :host(:not([hide-routine-status])) .container-spacing {
    margin-bottom: 16px;
    margin-top: 12px;
    padding-inline: 20px;
  }
</style>
<div class="routine-section-container container-spacing"
    hidden$="[[hideRoutineSection(routines.*)]]">
  <div id="routineSection" class="routine-container">
    <div class="routine-status-container" hidden$="[[hideRoutineStatus]]">
      <text-badge id="testStatusBadge" badge-type="[[badgeType]]"
          hidden="[[isStatusHidden(executionStatus)]]"
          value="[[badgeText]]">
      </text-badge>
      <span id="testStatusText"
          hidden$="[[isStatusHidden(executionStatus)]]">
        [[statusText]]
        <span id="learnMoreText" class="link-text"
            hidden$="[[isLearnMoreHidden(executionStatus)]]"
            on-click="onLearnMoreClicked">
          [[i18n('learnMoreShort')]]
        </span>
      </span>
    </div>
    <div class="button-container" hidden$="[[hideRoutineStatus]]">
        <iron-icon id="messageIcon" icon="diagnostics:info"
            hidden$="[[isAdditionalMessageHidden(additionalMessage)]]">
        </iron-icon>
        <paper-tooltip for="messageIcon" aria-hidden="true" id="additionalMessage">
          [[additionalMessage]]
        </paper-tooltip>
      <cr-button id="toggleReportButton" on-click="onToggleReportClicked"
          hidden="[[isResultButtonHidden(executionStatus, routines.*)]]">
        [[getReportToggleButtonText(opened)]]
      </cr-button>
      <cr-button id="runTestsButton"
          hidden$="[[isRunTestsButtonHidden(testSuiteStatus,
              executionStatus)]]"
          on-click="runTests"
          disabled="[[isRunTestsButtonDisabled(testSuiteStatus,
                                                additionalMessage)]]">
        [[runTestsButtonText]]
      </cr-button>
      <cr-button id="stopTestsButton"
          hidden$="[[isStopTestsButtonHidden(executionStatus)]]"
          on-click="stopTests">
        [[i18n('stopTestButtonText')]]
      </cr-button>
    </div>
  </div>
  <iron-collapse id="collapse" opened="{{opened}}">
    <div class="result-list">
      <routine-result-list id="resultList"
          hide-vertical-lines="[[hideVerticalLines]]"
          using-routine-groups="[[usingRoutineGroups]]">
      </routine-result-list>
    </div>
    <cr-button id="learnMoreButton" class="learn-more-button"
        on-click="onLearnMoreClicked"
        hidden$="[[isLearnMoreButtonHidden(isLoggedIn, hideRoutineStatus)]]">
      [[i18n('learnMore')]]
    </cr-button>
  </iron-collapse>
</div>