<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="instance_ref.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="script_ref.html">

<polymer-element name="code-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      div.flex-row:hover {
        background-color: #FFF3E3;
      }

      .highlight {
        background-color: #FFF3E3;
      }

      .tooltip {
        display: block;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
      }

      .flex-row:hover .tooltip {
        display: block;
        position: absolute;
        top: 100%;
        visibility: visible;
        z-index: 999;
        width: auto;
        min-width: 400px;
        color: #ffffff;
        background-color: #FFF3E3;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        transition: visibility 0s linear 0.5s;
        transition: opacity .4s ease-in-out;
        opacity: 1;
      }

      .descriptor-address {
        color: #0489c3;
      }

      .snippet {
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
      }

    </style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ makeLink('/inspect', code) }}" anchor="{{ code.name }}" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <div class="content">
      <template if="{{ code.isDartCode && code.isOptimized }}">
        <h1>Optimized code for {{ code.name }}</h1>
      </template>
      <template if="{{ !(code.isDartCode && code.isOptimized) }}">
        <h1>Code for {{ code.name }}</h1>
      </template>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Kind</div>
          <div class="memberValue">{{code.kind}}</div>
        </div>
        <template if="{{ code.isDartCode }}">
          <div class="memberItem">
            <div class="memberName">Optimized</div>
            <div class="memberValue">{{code.isOptimized}}</div>
          </div>
        </template>
        <div class="memberItem">
          <div class="memberName">Function</div>
          <div class="memberValue">
            <function-ref ref="{{code.function}}">
            </function-ref>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">Inclusive</div>
          <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Exclusive</div>
          <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Constant object pool</div>
          <div class="memberValue">
            <any-service-ref ref="{{ code.objectPool }}"></any-service-ref>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="content">
      <template if="{{ code.hasDisassembly }}">
        <div class="flex-row">
            <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div>
            <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div>
            <div class="flex-item-fixed-2-12 memberHeader">Address</div>
            <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div>
        </div>
      </template>
      <template repeat="{{ instruction in code.instructions }}">
        <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mouseOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ instruction.address }}" style="position: relative">
          <template if="{{ instruction.isComment }}">
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div>
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div>
            <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}</div>
          </template>
          <template if="{{ !instruction.isComment }}">
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedInclusive(code) }}</div>
            <div class="flex-item-fixed-2-12 monospace">{{ instruction.formattedExclusive(code) }}</div>
            <template if="{{ instruction.hasDescriptors }}">
              <div class="flex-item-fixed-2-12 monospace descriptor-address">
                <div class="tooltip">
                  <template repeat="{{ descriptor in instruction.descriptors }}">
                    <div class="memberList">
                      <div class="memberItem">
                       <div class="memberName">Kind</div>
                       <div class="memberValue">{{ descriptor.kind }}</div>
                      </div>
                      <div class="memberItem">
                       <div class="memberName">Deoptimization ID</div>
                       <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div>
                      </div>
                      <template if="{{ descriptor.script != null }}">
                        <div class="memberItem">
                         <div class="memberName">Script</div>
                         <div class="memberValue"><script-ref ref="{{ descriptor.script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div>
                        </div>
                      </template>
                    </div>
                    <template if="{{ descriptor.script != null }}">
                      <div class="snippet monospace">
                        <span>{{ descriptor.formattedLine }}</span>
                      </div>
                    </template>
                  </template>
                </div>
                {{ instruction.formattedAddress() }}
              </div>
            </template>
            <template if="{{ !instruction.hasDescriptors }}">
              <div class="flex-item-fixed-2-12 monospace">
                {{ instruction.formattedAddress() }}
              </div>
            </template>
            <div class="flex-item-fixed-6-12 monospace">
              {{ instruction.human }}
            </div>
          </template>
        </div>
      </template>
    </div>
  </template>
</polymer-element>

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