golden/res/imp/diffdetail.html

<!-- The <diff-detail-sk> custom element declaration.

Presents detailed information about the differences
between two images.

  Attributes:
    value - A serialized PolyTestDiffInfo. An object of the form:

      {
        test: "testname",
        topDigest: "ae321...",
        leftDigest: "bb9087...",
        pixelDiffPercent: 35.9,
        numDiffPixels: 11020,
        maxRGBADiffs: [60, 62, 10, 0],
        diffImg: "https://...",
        topImg: "https://...",
        leftImg: "https://...",
      }


  Events:
    triage - The change event e.detail has the form:
      {
            test: "testname1",
            digest: "aabb112233",
            status: "positive",
      }

  Methods:
    hide - Hide the whole panel.

    doZoom - Force the zoom dialog to open.
-->
<polymer-element name="diff-detail-sk" attributes="value">
  <template>
    <style type="text/css" media="screen">
      th {
        text-align: right;
      }

      th, td {
        text-align: left;
        padding: 5px;
        vertical-align: top;
      }

      tri-sk {
        min-width: 15em;
        display: block;
      }

      #diffInfo {
        display: none;
      }

      #diffInfo.display {
        display: block;
      }
      table {
        margin-left: 5em;
      }

      #zoom {
        display: inline-block;
      }

      img.small {
        display: inline-block;
        border: solid 1px lightgray;
        max-width: 128px;
        max-height: 128px;
        width: auto;
        height: auto;
      }

      #digestRow th,
      #digestRow td {
        padding-top: 2em;
      }

      .openInNew {
        position: relative;
      }

      .openInNew a {
        top: 5px;
        position: absolute;
      }
    </style>
    <div id=diffInfo vertical layout>
      <table border="0" cellspacing="5" cellpadding="5">
        <tr><th>Pixel Diff (%)</th><td>{{value.pixelDiffPercent}}</td></tr>
        <tr><th>Num Diff Pixels</th><td>{{value.numDiffPixels}}</td></tr>
        <tr><th>Max RGBA Diffs</th><td>{{value.maxRGBADiffs}}</td></tr>
        <tr>
          <th>Diff</th>
          <td class=openInNew><img class=small src="{{value.diffImgUrl}}"><a href="{{value.diffImgUrl}}" target=_blank><core-icon icon="open-in-new"></core-icon></a></td>
          <td><paper-button id=zoom>Zoom</paper-button></td>
        </tr>
      </table>
      <detail-table-sk id=detailtable top="{{value.topDigest}}" left="{{value.leftDigest}}" test="{{value.test}}" bothcolumns></detail-table-sk>
    </div>
    <zoom-sk id=zoomer></zoom-sk>
  </template>
  <script>
    Polymer({
      publish: {
        value: {
          value: {},  // A serialized PolyTestDiffInfo.
          reflect: true,
        },
      },

      ready: function() {
        var that = this;
        this.$.zoom.addEventListener('click', function() {
          that.$.zoomer.setDetails(that.value);
          that.$.zoomer.open();
        });
      },

      valueChanged: function() {
        if (this.value) {
          this.$.diffInfo.classList.add('display');
        }
      },

      hide: function() {
        this.$.diffInfo.classList.remove('display');
      },

      doZoom: function() {
        this.$.zoomer.setDetails(this.value);
        this.$.zoomer.open();
      },
    });
  </script>
</polymer-element>