golden/frontend/res/imp/dot-legend-sk.html

<!-- The <dot-legend-sk> custom element declaration.

  A legend for the dots-sk element.

  Attributes:
    test - The name of the test.

    digests - A serialized slice of DigestStatus.
      The 0th digest is considered special, and all other
      legend entries will have a diff link between that digest
      and the 0th digest.

      [
        {
          digest: "b84cb8597a425e73344ffe47befd26eb",
          status: "positive",
        },
        ...
      ]

  Events:
    None.

  Methods:
    None.

-->

<link rel="import" href="dot-styles.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../common/imp/tricon-sk.html">

<dom-module id="dot-legend-sk">
  <template>
    <style include="dot-styles"></style>
    <style include="shared-styles"></style>
    <table>
      <template is="dom-repeat" items="{{digests}}" as="di" index-as="i">
        <tr>
          <td>
            <svg width="10" height="10" viewBox="-1 -1 2 2">
              <circle cx="0" cy="0" r="0.3" class$="{{_computeClass(i)}}"></circle>
            </svg>
          </td>
          <td>
            <template is="dom-if" if="{{_computeIf(i)}}">
              <code><a target="_blank" href$="{{_computeHref(di, test)}}">{{di.digest}}</a></code>
            </template>
            <template is="dom-if" if="{{_computeIf2(i)}}">
              One of many other digests.
            </template>
          </td>
          <td>
            <template is="dom-if" if="{{_computeIf(i)}}">
              <tricon-sk value="{{di.status}}"></tricon-sk>
            </template>
          </td>
          <td>
            <template is="dom-if" if="{{_computeIf3(i)}}">
              <a target="_blank" href$="{{_computeHref2(di, digests, test)}}">diff</a>
            </template>
          </td>
        </tr>
      </template>
    </table>
  </template>
  <script>
    Polymer({
      is: 'dot-legend-sk',

      properties: {
        digest: {
          type: String,
          value: '',
        },
        digests: {
          type: Object,
          value: function () { return {}; },
        },
        test: {
          type: String,
          value: '',
        }
      },

      _computeClass: function (i) {
        return 'status' + i;
      },

      _computeIf: function (i) {
        return i < 8;
      },

      _computeIf2: function (i) {
        return i == 8;
      },

      _computeIf3: function (i) {
        return i > 0 && i < 8;
      },

      _computeHref: function (di, test) {
        return 'detail' + gold.detailQuery(test, di.digest);
      },

      _computeHref2: function (di, digests, test) {
        return 'diff' + gold.diffQuery(test, digests[0].digest, di.digest);
      }
    });
  </script>
</dom-module>