runtime/observatory/lib/src/elements/script_inset.html

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

<polymer-element name="icon-refresh" noscript>
  <template>
    <style>
      svg {
        fill: currentColor
      }
    </style>
    <svg width="24" height="24">
      <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-whatshot" noscript>
  <template>
    <style>
      svg {
        fill: currentColor
      }
    </style>
    <svg width="24" height="24">
      <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"></path>
    </svg>
  </template>
</polymer-element>

<polymer-element name="script-inset" extends="observatory-element">
  <template>
    <style>
      a {
        color: #0489c3;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .sourceInset {
      }
      .sourceTable {
        position: relative;
        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, .hitsCompiled, .hitsNotCompiled {
        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;
      }
      .hitsCompiled {
        background-color: #e0e0e0;
      }
      .hitsNotCompiled {
        background-color: #f0c5c5;
      }

      .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;
      }
      .notSourceProfile, .noProfile, .coldProfile, .mediumProfile, .hotProfile {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        width: 4em;
        text-align: right;
        cursor: pointer;
        margin-left: 5px;
        margin-right: 5px;
      }
      .notSourceProfile {
      }
      .noProfile {
        background-color: #e0e0e0;
      }
      .coldProfile {
        background-color: #aea;
      }
      .mediumProfile {
        background-color: #fe9;
      }
      .hotProfile {
        background-color: #faa;
      }
    </style>
  </template>
</polymer-element>

<polymer-element name="refresh-button">
  <template>
    <style>
      .refreshButton {
        color: rgba(0,0,0,.3);
      }
      .refreshButton:hover {
        color: black;
      }
      .refreshButtonDisabled {
        color: white;
        cursor: wait;
      }
    </style>
    <template if="{{ callback != null }}">
      <template if="{{ busy }}">
        <icon-refresh id="refreshIcon" class="refreshButtonDisabled">
        </icon-refresh>
      </template>
      <template if="{{ !busy }}">
        <a on-click="{{ buttonClick }}">
          <icon-refresh id="refreshIcon" class="refreshButton"></icon-refresh>
        </a>
      </template>
    </template>
  </template>
</polymer-element>

<polymer-element name="toggle-button">
  <template>
    <style>
    </style>
    <template if="{{ callback != null }}">
      <template if="{{ enabled }}">
        <a on-click="{{ buttonClick }}">
          <content></content>
        </a>
      </template>
      <template if="{{ !enabled }}">
        <a on-click="{{ buttonClick }}">
          <content></content>
        </a>
      </template>
    </template>
  </template>
</polymer-element>

<polymer-element name="source-inset">
<template>
  <template if="{{ location != null }}">
    <script-inset script="{{ location.script }}"
                  startPos="{{ location.tokenPos }}"
                  scroller="{{ scroller }}"
                  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>