<!-- The <json-source> custom element declaration.

Displays a load button that, when pressed, loads the
JSON file associated with the commit in the given trace.

If, after a file is loaded the values of cid or traceid
change then the displayed JSON is cleared.

  Attributes:
    cid - An object, a cid.CommitID.
    traceid - A string, the id of a trace.

  Events:
    None.

  Methods:
    None.
-->
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">

<dom-module id="json-source">
  <style>
    button,
    paper-spinner {
      display: inline-block;
    }

    paper-spinner {
      margin-top: 0.6em;
      margin-bottom: -0.6em;
    }

    pre {
      box-shadow: 2px 2px 5px gray;
      margin: 0.6em;
      padding: 1em;
    }
  </style>
  <template>
    <div>
      <button on-click="_loadSource">View Source File</button>
      <button on-click="_loadSourceSmall">View Source File Without Results</button>
      <paper-spinner id=spinner></paper-spinner>
    </div>
    <pre id=display></pre>
  </template>
</dom-module>

<script>
  Polymer({
    is: "json-source",

    properties: {
      cid: {
        type: Object,
        value: function() { return {}; },
        reflectToAttribute: false,
        observer: "_clear",
      },
      traceid: {
        type: String,
        value: "",
        reflectToAttribute: false,
        observer: "_clear",
      },
    },

    _loadSource: function() {
      this._loadSourceImpl(false);
    },

    _loadSourceSmall: function() {
      this._loadSourceImpl(true);
    },

    _loadSourceImpl: function(isSmall) {
      if (this.traceid == "") {
        return
      }
      if (this.cid.offset == undefined) {
        return
      }
      var body = {
        cid: this.cid,
        traceid: this.traceid,
      };
      this.$.spinner.active = true;
      var url = "/_/details/";
      if (isSmall) {
        url += "?results=false";
      }
      sk.post(url, JSON.stringify(body)).then(function(text){
        this.$.display.textContent = text;
        this.$.spinner.active = false;
      }.bind(this)).catch(function(e) {
        this.$.spinner.active = false;
        sk.errorMessage(e);
      }.bind(this));
    },

    _clear: function() {
        this.$.display.textContent = "";
    },

  });
</script>