dart/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="script-inset" extends="observatory-element">
  <template>
    <style>
      .sourceInset {
      }
      .sourceTable {
      display: table;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      padding: 10px;
      overflow-y: auto;
      width: 100%;
      }
      .sourceRow {
      display: table-row;
      }
      .sourceItem, .sourceItemCurrent {
      display: table-cell;
      vertical-align: top;
      font: 400 14px consolas, courier, monospace;
      line-height: 125%;
      white-space: pre;
      }
      .currentLine {
      background-color: #fff;
      }
      .currentCol {
      background-color: #6cf;
      }
      .hitsNone, .hitsNotExecuted, .hitsExecuted {
      display: table-cell;
      vertical-align: top;
      font: 400 14px consolas, courier, monospace;
      min-width: 32px;
      text-align: right;
      color: #a8a8a8;
      }
      .hitsNotExecuted {
      background-color: #e66;
      }
      .hitsExecuted {
      background-color: #6d6;
      }
    </style>
  </template>
</polymer-element>

<polymer-element name="breakpoint-toggle" extends="observatory-element">
  <template>
    <style>
      .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpoint, .resolvedBreakpoint  {
        display: table-cell;
        vertical-align: top;
        font: 400 14px consolas, courier, monospace;
        min-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;
      }
    </style>

    <template if="{{ line == null }}">
      <div class="emptyBreakpoint">&nbsp;</div>
    </template>

    <template if="{{ line != null }}">
      <template if="{{ line.possibleBpt && busy}}">
        <div class="busyBreakpoint">B</div>
      </template>

      <template if="{{ line.breakpoints == null && !line.possibleBpt }}">
        <div class="emptyBreakpoint">&nbsp;</div>
      </template>

      <template if="{{ line.breakpoints == null && line.possibleBpt && !busy}}">
        <div class="possibleBreakpoint">
          <a on-click="{{ toggleBreakpoint }}">B</a>
        </div>
      </template>

      <template if="{{ line.breakpoints != null && !line.breakpointResolved && !busy}}">
        <div class="unresolvedBreakpoint">
          <a on-click="{{ toggleBreakpoint }}">B</a>
        </div>
      </template>

      <template if="{{ line.breakpoints != null && line.breakpointResolved && !busy}}">
        <div class="resolvedBreakpoint">
          <a on-click="{{ toggleBreakpoint }}">B</a>
        </div>
      </template>
    </template> <!-- line != null -->

  </template>
</polymer-element>

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