res/imp/dbg-info.html

<!-- The <dbg-info-sk> custom element declaration.

  Displays current clip and transform info.

  Attributes:
    info - The current clip rectangle and view matrix in the following format:

      {
        "ClipRect": [
          0,    0,
          1014, 602
        ],
        "ViewMatrix": [
          [ 1, 0, 0 ],
          [ 0, 1, 0 ],
          [ 0, 0, 1 ]
        ]
      },

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="dbg-info-sk">
  <style>
    td {
      padding: 0.3em;
      font-family: monospace;
    }
    h2 {
      font-size: 18px;
      margin: 0.2em 0;
    }
  </style>
  <template>
    <h2>Clip</h2>
    <table>
      <tr><td>{{ info.ClipRect.0 }}</td><td>{{ info.ClipRect.1 }}</td></tr>
      <tr><td>{{ info.ClipRect.2 }}</td><td>{{ info.ClipRect.3 }}</td></tr>
    </table>
    <h2>Matrix</h2>
    <table>
      <tr><td>{{ info.ViewMatrix.0.0 }}</td><td>{{ info.ViewMatrix.0.1 }}</td><td>{{ info.ViewMatrix.0.2 }}</td></tr>
      <tr><td>{{ info.ViewMatrix.1.0 }}</td><td>{{ info.ViewMatrix.1.1 }}</td><td>{{ info.ViewMatrix.1.2 }}</td></tr>
      <tr><td>{{ info.ViewMatrix.2.0 }}</td><td>{{ info.ViewMatrix.2.1 }}</td><td>{{ info.ViewMatrix.2.2 }}</td></tr>
    </table>
  </template>
</dom-module>

<script>
  Polymer({
    is: "dbg-info-sk",

    properties: {
      info: {
        type: Object,
        value: function() { return {} },
        reflectToAttribute: false,
      },
    },

  });
</script>