src/main/resources/static/cr-buildbucket-view.html

<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<dom-module id="cr-buildbucket-view">
  <template>
    <style>
      :host {
        display: block;
        margin: 1em var(--default-hozizontal-margin, 1rem);
      }
      gr-button {
        font-size: .9em;
        margin: .25em;
        text-decoration: none;
      }
      .builds {
        display: flex;
        flex-wrap: wrap;
      }
      .builder {
        border: 1px solid #ccc;
        display: flex;
        margin: .25em;
      }
      .build {
        background-color: #e0e0e0;
        font-size: .9em;
        margin-right: 1px;
        max-width: 1.35em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .buildRun {
        color: #000;
        display: block;
        padding: .45em 1.35em;
        text-decoration: none;
      }
      .buildRun:hover {
        text-decoration: underline;
      }
      .build:last-of-type {
        margin-right: 0;
        max-width: none;
      }
      .started {
        background-color: #f7dc68;
      }
      .success {
        background-color: #8fdf5f;
      }
      .failure {
        background-color: #df5f5f;
        color: #fff;
      }
      .infraFailure {
        background-color: #e0b0ff;
      }
    </style>
    <div class="loading" hidden$="[[!_loading]]">Loading builds...</div>
    <section class="builds" hidden$="[[_loading]]">
      <template is="dom-repeat" items="[[_buildResults]]" as="builder">
        <div class="builder">
          <template is="dom-repeat" items="[[builder]]" as="build">
            <div class="build">
              <a class$="buildRun [[_getBuildRunClass(build)]]"
                 href$="[[build.url]]"
                 target="_blank">[[_getBuilder(build)]]</a>
            </div>
          </template>
        </div>
      </template>
    </section>
    <gr-button link
        hidden$="[[_computeExpBuildsButtonHidden(_loading, _expBuildResults)]]"
        on-tap="_toggleExpBuilds">
      [[_computeExpBuildsButtonText(_showExpBuilds)]]
    </gr-button>
    <section class="builds"
        hidden$="[[_computeExpBuildsHidden(_loading, _showExpBuilds)]]">
      <template is="dom-repeat" items="[[_expBuildResults]]" as="builder">
        <div class="builder">
          <template is="dom-repeat" items="[[builder]]" as="build">
            <div class="build">
              <a class$="buildRun [[_getBuildRunClass(build)]]"
                 href$="[[build.url]]"
                 target="_blank">[[_getBuilder(build)]]</a>
            </div>
          </template>
        </div>
      </template>
    </section>
    <!-- TODO(andybons): Un-hide once auth is implemented. -->
    <section class="actions" hidden>
      <gr-button on-tap="_handleChooseTryJobsTap">Choose try jobs</gr-button>
      <gr-button on-tap="_handleCQTryRunTap">CQ dry run</gr-button>
    </section>
  </template>
  <script src="cr-buildbucket-view.js"></script>
</dom-module>