<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="eval_link.html">
<link rel="import" href="script_inset.html">
<link rel="import" href="script_ref.html">

<!-- TODO(turnidge): Use core-icon once core_elements work properly in
     devtools -->
<polymer-element name="icon-expand-less" noscript>
  <template>
    <svg width="24" height="24">
      <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-expand-more" noscript>
  <template>
    <svg width="24" height="24">
      <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-chevron-right" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-chevron-left" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-horizontal-three-dot" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-vertical-three-dot" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-info" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="icon-info-outline" noscript>
  <template>
    <svg width="24" height="24">
      <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
    </svg>
  </template>
</polymer-element>

<polymer-element name="debugger-page">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      nav-bar {
        flex: 0 0 auto;
      }
      .stack {
        flex: 0 0 auto;
        overflow-y: auto;
      }
      .splitter {
        height: 0px;
        margin: 0px;
        font-size: 1px;
        border-bottom: 1px solid #888;
      }
      core-splitter {
        flex: 0 0 auto;
      }
      .console {
        flex: 1 1 auto;
        overflow-x: auto;
        overflow-y: auto;
      }
      .commandline {
        flex: 0 0 auto;
      }
    </style>

    <div class="container">
      <nav-bar id="navbarDiv" >
        <top-nav-menu></top-nav-menu>
	<vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
        <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
        <nav-menu link="{{ makeLink('/debugger', isolate) }}" anchor="debugger" last="{{ true }}"></nav-menu>
        <nav-notify notifications="{{ app.notifications }}"
                                      notifyOnPause="{{ false }}"></nav-notify>
      </nav-bar>
      <div id="stackDiv" class="stack">
        <debugger-stack id="stackElement" isolate="{{ isolate }}"></debugger-stack>
      </div>
      <!--
      <core-splitter direction="up" allowOverflow=true></core-splitter>
      -->
      <div id="splitterDiv"><hr class="splitter"></div>
      <div id="consoleDiv" class="console">
        <debugger-console id="console" isolate="{{ isolate }}"></debugger-console>
      </div>
      <div id="commandDiv" class="commandline">
        <debugger-input id="commandline" isolate="{{ isolate }}"></debugger-input>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="debugger-stack">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .sampledMessage {
        margin: 0px 20px 10px 20px;
        font: 400 14px 'Montserrat', sans-serif;
        line-height: 125%;
      }
      .splitter {
        height: 0px;
        margin: 0px;
        font-size: 1px;
        border-bottom: 1px dashed #888;
      }
      .noMessages, .noStack {
        margin: 10px 0px 10px 25px;
        font: bold 14px 'Montserrat', sans-serif;
        line-height: 125%;
      }
    </style>
    <template if="{{ isSampled }}">
      <div class="sampledMessage">
        The program is not paused.  The stack trace below may be out of date.<br>
        <br>
        <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}">
        </action-link>
        <action-link label="Refresh Stack" callback="{{ doRefreshStack }}">
        </action-link>
        <br>
        <br>
        <hr class="splitter">
      </div>
    </template>
    <template if="{{ !hasStack }}">
      <div class="noStack">No stack</div>
    </template>
    <ul id="frameList" class="list-group">
      <!-- debugger-frame elements are added programmatically -->
    </ul>
    <hr>
    <template if="{{ !hasMessages }}">
      <div class="noMessages">No pending messages</div>
    </template>
    <ul id="messageList" class="list-group">
      <!-- debugger-message elements are added programmatically -->
    </ul>
  </template>
</polymer-element>


<polymer-element name="debugger-frame">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .frameOuter {
        position: relative;
        padding: 5px;
        border: 1px solid white;
      }
      .frameOuter:hover {
        border: 1px solid #e0e0e0;
      }
      .shadow {
        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.16),
                     0 2px 5px 0 rgba(0, 0, 0, 0.26);
      }
      .current {
        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.26),
                     0 2px 5px 0 rgba(0, 0, 0, 0.46);
        border: 1px solid #444;
      }
      .frameSummaryText {
        display: inline-block;
        padding: 5px;
      }
      .frameId {
        display: inline-block;
        width: 60px;
      }
      .frameOuter .frameExpander {
        position: absolute;
        right: 5px;
        top: 5px;
        display: none;
      }
      .frameOuter:hover .frameExpander{
        display: inline-block;
      }
      .frameContractor {
        position: absolute;
        right: 5px;
        bottom: 5px;
        display: inline-block;
      }
      .flex-item-script {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 765px;
      }
      .flex-item-vars {
        flex-grow: 5;
        flex-shrink: 0;
        flex-basis: 250px;
        overflow-x: hidden;
      }
      #vars {
        position: relative;
        top: 5px;
        padding-left:2em;
        padding-bottom: 5px;
      }
    </style>
    <div id="frameOuter" class="frameOuter">
      <a on-click="{{ toggleExpand }}">
        <div class="frameSummary">
          <div class="frameSummaryText">
            <div class="frameId"><b>frame {{ frame.index }}</b></div>
            <function-ref ref="{{ frame.function }}"></function-ref>
            ( <source-link location="{{ frame.location }}"></source-link> )
          </div>
          <template if="{{ !expanded }}">
            <div class="frameExpander">
              <icon-expand-more></icon-expand-more>
            </div>
          </template>
        </div>
      </a>

      <template if="{{expanded}}">
        <div class="frameDetails">
          <div class="flex-row-wrap">
            <div class="flex-item-script">
              <source-inset height="{{ scriptHeight }}"
                            location="{{ frame.function.location }}"
                            currentPos="{{ frame.location.tokenPos }}"
                            inDebuggerContext="{{ true }}"
                            scroller="{{ scroller }}"
                            variables="{{ frame.variables }}">
              </source-inset>
            </div>
            <div class="flex-item-vars">
              <div id="vars" class="memberList">
                <template repeat="{{ v in properLocals }}">
                  {{ v['name']}}&nbsp;:&nbsp;
                  <any-service-ref ref="{{ v['value'] }}"
                                   expandKey="{{ makeExpandKey(v['name']) }}"
                                   asValue="{{ true }}">
                  </any-service-ref><br>
                </template>
              </div>
            </div>
          </div>
          <!-- TODO(turnidge): Add eval box here? -->
          <div class="frameContractor">
            <template if="{{expanded}}">
              <a on-click="{{ toggleExpand }}">
                <icon-expand-less></icon-expand-less>
              </a>
            </template>
          </div>
        </div>
      </template>
    </div>
  </template>
</polymer-element>

<polymer-element name="debugger-message">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .messageOuter {
        position: relative;
        padding: 5px;
        border: 1px solid white;
      }
      .messageOuter:hover {
        border: 1px solid #e0e0e0;
      }
      .shadow {
        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.16),
        0 2px 5px 0 rgba(0, 0, 0, 0.26);
      }
      .current {
        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.26),
        0 2px 5px 0 rgba(0, 0, 0, 0.46);
        border: 1px solid #444;
      }
      .messageSummaryText {
        display: inline-block;
        padding: 5px;
      }
      .messageId {
        display: inline-block;
        width: 100px;
      }
      .messageOuter .messageExpander {
        position: absolute;
        right: 5px;
        top: 5px;
        display: none;
      }
      .messageOuter:hover .messageExpander {
        display: inline-block;
      }
      .messageContractor {
        position: absolute;
        right: 5px;
        bottom: 5px;
        display: inline-block;
      }
      .flex-item-script {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 765px;
      }
      .flex-item-vars {
        flex-grow: 5;
        flex-shrink: 0;
        flex-basis: 225px;
      }
    </style>
    <div id="messageOuter" class="messageOuter">
      <a on-click="{{ toggleExpand }}">
        <div class="messageSummary">
          <div class="messageSummaryText">
            <div class="messageId"><b>message {{ message.index }}</b></div>
            <function-ref ref="{{ message.handler }}"></function-ref>
            ( <source-link location="{{ message.location }}">
            </source-link> )
          </div>
          <template if="{{ !expanded }}">
            <div class="messageExpander">
              <icon-expand-more></icon-expand-more>
            </div>
          </template>
        </div>
      </a>

      <template if="{{expanded}}">
        <div class="messageDetails">
          <div class="flex-row-wrap">
            <div class="flex-item-script">
              <template if="{{ message.handler != null }}">
              <source-inset height="{{ scriptHeight }}"
                            location="{{ message.handler.location }}"
                            inDebuggerContext="{{ true }}">
              </source-inset>
              </template>
            </div>
            <div class="flex-item-vars">
              <div class="memberItem">
                <div class="memberName"></div>
                <div class="memberValue">
                  <eval-link callback="{{ previewMessage }}" label="[preview]" result="{{ preview }}"></eval-link>
                </div>
              </div>
            </div>
          </div>
          <div class="messageContractor">
            <template if="{{expanded}}">
              <a on-click="{{ toggleExpand }}">
                <icon-expand-less></icon-expand-less>
              </a>
            </template>
          </div>
        </div>
      </template>
    </div>
  </template>
</polymer-element>

<polymer-element name="debugger-console">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .console {
        margin: 0px 20px 10px 20px;
      }
      .normal {
        font: normal 14px consolas, courier, monospace;
        white-space: pre;
        line-height: 125%;
      }
      .bold {
        font: bold 14px consolas, courier, monospace;
        white-space: pre;
        line-height: 125%;
      }
      .red {
        font: normal 14px consolas, courier, monospace;
        white-space: pre;
        line-height: 125%;
        color: red;
      }
      .green {
        font: normal 14px consolas, courier, monospace;
        white-space: pre;
        line-height: 125%;
        color: green;
      }
      .spacer {
        height: 20px;
      }
    </style>
    <div id="consoleText" class="console">
      <!-- Console output is added programmatically -->
    </div>
  </template>
</polymer-element>

<polymer-element name="debugger-input">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .container {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .textBox {
        flex: 1 1 auto;
        margin: 20px;
        padding: 5px;
        font: 400 16px consolas, courier, monospace;
        width: 95%;
      }
      .modalPrompt {
        flex: 0 0 auto;
        margin-top: 20px;
        margin-left: 20px;
        padding: 5px;
        font: 400 16px consolas, courier, monospace;
        color: red;
      }
    </style>
    <div class="container">
      <template if="{{ modalPrompt != null }}">
        <div class="modalPrompt">{{ modalPrompt }}</div>
      </template>
      <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus>
    </div>
  </template>
</polymer-element>

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