<link rel="import" href="sidecar-result.html">
<link rel="import" href="sidecar-err.html">

<template id="tmpl-sidecar-contents">
  <div id="container"></div>
</template>

<script>
(function () {
  var importDoc = document.currentScript.ownerDocument;

  var resultPrototype = Object.create(HTMLElement.prototype);

  resultPrototype.createdCallback = function() {
    var t = importDoc.querySelector('#tmpl-sidecar-contents');
    var clone = document.importNode(t.content, true);
    this.root = this.createShadowRoot();
    this.root.appendChild(clone);

    var ipc = require('ipc');
    var DisplayDispatch = require('./lib/display-dispatch');

    var display = new DisplayDispatch();

    var container = this.root.getElementById('container');

    function appendNode(elementName, html) {
      var node = document.createElement(elementName);
      node.setPayload(html);
      container.appendChild(node);

      node.scrollIntoView();
    }

    ipc.on('message', function (message) {
      display.handleMessage(message, {
        result: function (html) { appendNode('sidecar-result', html); },
        trace: function (html) { appendNode('sidecar-err', html); },
        code: function (js) { eval(js); }
      });
    });

  };

  document.registerElement('sidecar-contents', {prototype: resultPrototype});
})();
</script>

<link rel="import" href="sidecar-result.html">
<link rel="import" href="sidecar-err.html">

<template id="tmpl-sidecar-contents">
  <div id="container"></div>
</template>

<script>
(function () {
  var importDoc = document.currentScript.ownerDocument;

  var resultPrototype = Object.create(HTMLElement.prototype);

  resultPrototype.createdCallback = function() {
    var t = importDoc.querySelector('#tmpl-sidecar-contents');
    var clone = document.importNode(t.content, true);
    this.root = this.createShadowRoot();
    this.root.appendChild(clone);

    var ipc = require('ipc');
    var DisplayDispatch = require('./lib/display-dispatch');

    var display = new DisplayDispatch();

    var container = this.root.getElementById('container');

    function appendNode(elementName, html, label) {
      var node = document.createElement(elementName);
      node.setPayload(html);
      if (label) {
        node.setLabel(label);
      }
      container.appendChild(node);

      node.scrollIntoView();
    }

    ipc.on('message', function (message) {
      display.handleMessage(message, {
        result: function (html, label) { appendNode('sidecar-result', html, label); },
        trace: function (html) { appendNode('sidecar-err', html); },
        code: function (js) { eval(js); }
      });
    });

  };

  document.registerElement('sidecar-contents', {prototype: resultPrototype});
})();
</script>

Set the label of sidecar-results.
Set the label of sidecar-results.
