<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="observatory_element.html">

<polymer-element name="script-inset" extends="observatory-element">
  <template>
    <style>
      a {
        color: #0489c3;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .sourceInset {
      }
      .sourceTable {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: scroll;
      }
      .sourceRow {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .sourceItem, .sourceItemCurrent {
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        line-height: 125%;
        white-space: pre;
        max-width: 0;
      }
      .currentLine {
        background-color: #fff;
      }
      .currentCol {
        background-color: #6cf;
      }
      .hitsCurrent, .hitsNone, .hitsNotExecuted, .hitsExecuted {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        margin-left: 5px;
        margin-right: 5px;
        text-align: right;
        color: #a8a8a8;
      }
      .hitsCurrent {
        background-color: #6cf;
        color: black;
      }
      .hitsNotExecuted {
        background-color: #faa;
      }
      .hitsExecuted {
        background-color: #aea;
      }
      .noCopy {}
      .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpoint, .resolvedBreakpoint  {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        width: 1em;
        text-align: center;
        cursor: pointer;
      }
      .possibleBreakpoint {
        color: #e0e0e0;
      }
      .possibleBreakpoint:hover {
        color: white;
        background-color: #777;
      }
      .busyBreakpoint {
        color: white;
        background-color: black;
        cursor: wait;
      }
      .unresolvedBreakpoint {
        color: white;
        background-color: #cac;
      }
      .resolvedBreakpoint {
        color: white;
        background-color: #e66;
      }
      .unresolvedBreakAnnotation {
        color: white;
        background-color: #cac;
      }
      .resolvedBreakAnnotation {
        color: white;
        background-color: #e66;
      }
    </style>
  </template>
</polymer-element>


<polymer-element name="source-inset">
<template>
  <template if="{{ location != null }}">
    <script-inset script="{{ location.script }}"
                  startPos="{{ location.tokenPos }}"
                  endPos="{{ location.endTokenPos }}"
                  height="{{ height }}"
                  currentPos="{{ currentPos }}"
                  inDebuggerContext="{{ inDebuggerContext }}"
                  variables="{{ variables }}">
    </script-inset>
  </template>
</template>
</polymer-element>

<script type="application/dart" src="script_inset.dart"></script>