| <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="." 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"> |
| <instance-ref ref="{{ code.objectPool }}"></instance-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> |
| <script type="application/dart" src="code_view.dart"></script> |
| </polymer-element> |