| OLD | NEW |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> |
| 2 <link rel="import" href="function_ref.html"> | 2 <link rel="import" href="function_ref.html"> |
| 3 <link rel="import" href="instance_ref.html"> | 3 <link rel="import" href="instance_ref.html"> |
| 4 <link rel="import" href="observatory_element.html"> | 4 <link rel="import" href="observatory_element.html"> |
| 5 <link rel="import" href="nav_bar.html"> | 5 <link rel="import" href="nav_bar.html"> |
| 6 <link rel="import" href="script_ref.html"> | 6 <link rel="import" href="script_ref.html"> |
| 7 | 7 |
| 8 <polymer-element name="code-view" extends="observatory-element"> | 8 <polymer-element name="code-view" extends="observatory-element"> |
| 9 <template> | 9 <template> |
| 10 <link rel="stylesheet" href="css/shared.css"> | 10 <link rel="stylesheet" href="css/shared.css"> |
| 11 <style> | 11 <style> |
| 12 div.flex-row:hover { | 12 .table { |
| 13 background-color: #FFF3E3; | 13 table-layout: fixed; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .highlight { | 16 th:nth-of-type(1), td:nth-of-type(1) { |
| 17 background-color: #FFF3E3; | 17 min-width: 10em; |
| 18 text-align: left; |
| 18 } | 19 } |
| 19 | 20 |
| 20 .tooltip { | 21 th:nth-of-type(2), td:nth-of-type(2) { |
| 21 display: block; | 22 min-width: 10em; |
| 22 position: absolute; | 23 text-align: left; |
| 23 visibility: hidden; | |
| 24 opacity: 0; | |
| 25 transition: visibility 0s linear 0.5s; | |
| 26 transition: opacity .4s ease-in-out; | |
| 27 } | 24 } |
| 28 | 25 |
| 29 .flex-row:hover .tooltip { | 26 th:nth-of-type(3), td:nth-of-type(3) { |
| 30 display: block; | 27 padding-right: 3em; |
| 31 position: absolute; | |
| 32 top: 100%; | |
| 33 visibility: visible; | |
| 34 z-index: 999; | |
| 35 width: auto; | |
| 36 min-width: 400px; | |
| 37 color: #ffffff; | |
| 38 background-color: #FFF3E3; | |
| 39 border-bottom-right-radius: 8px; | |
| 40 border-bottom-left-radius: 8px; | |
| 41 transition: visibility 0s linear 0.5s; | |
| 42 transition: opacity .4s ease-in-out; | |
| 43 opacity: 1; | |
| 44 } | 28 } |
| 45 | 29 |
| 46 .descriptor-address { | 30 th:nth-of-type(4), td:nth-of-type(4) { |
| 47 color: #0489c3; | 31 padding-left: 3em; |
| 32 overflow: visible; |
| 33 white-space: pre; |
| 34 display: block; |
| 48 } | 35 } |
| 49 | 36 |
| 50 .snippet { | 37 tr:hover > td { |
| 51 text-align: center; | 38 background-color: #F4C7C3; |
| 52 margin-left: 10px; | |
| 53 margin-right: 10px; | |
| 54 } | 39 } |
| 55 | 40 |
| 56 </style> | 41 </style> |
| 57 <nav-bar> | 42 <nav-bar> |
| 58 <top-nav-menu></top-nav-menu> | 43 <top-nav-menu></top-nav-menu> |
| 59 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu> | 44 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu> |
| 60 <nav-menu link="{{ makeLink('/inspect', code) }}" anchor="{{ code.name }}"
last="{{ true }}"></nav-menu> | 45 <nav-menu link="{{ makeLink('/inspect', code) }}" anchor="{{ code.name }}"
last="{{ true }}"></nav-menu> |
| 61 <nav-refresh callback="{{ refresh }}"></nav-refresh> | 46 <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| 47 <nav-refresh callback="{{ refreshTicks }}" label="Refresh Ticks"></nav-ref
resh> |
| 62 <nav-control></nav-control> | 48 <nav-control></nav-control> |
| 63 </nav-bar> | 49 </nav-bar> |
| 64 <div class="content"> | 50 <div class="content"> |
| 65 <template if="{{ code.isDartCode && code.isOptimized }}"> | 51 <template if="{{ code.isDartCode && code.isOptimized }}"> |
| 66 <h1>Optimized code for {{ code.name }}</h1> | 52 <h1>Optimized code for {{ code.name }}</h1> |
| 67 </template> | 53 </template> |
| 68 <template if="{{ !(code.isDartCode && code.isOptimized) }}"> | 54 <template if="{{ !(code.isDartCode && code.isOptimized) }}"> |
| 69 <h1>Code for {{ code.name }}</h1> | 55 <h1>Code for {{ code.name }}</h1> |
| 70 </template> | 56 </template> |
| 71 <div class="memberList"> | 57 <div class="memberList"> |
| 72 <div class="memberItem"> | 58 <div class="memberItem"> |
| 73 <div class="memberName">Kind</div> | 59 <div class="memberName">Kind</div> |
| 74 <div class="memberValue">{{code.kind}}</div> | 60 <div class="memberValue">{{ code.kind.toString() }}</div> |
| 75 </div> | 61 </div> |
| 76 <template if="{{ code.isDartCode }}"> | 62 <template if="{{ code.isDartCode }}"> |
| 77 <div class="memberItem"> | 63 <div class="memberItem"> |
| 78 <div class="memberName">Optimized</div> | 64 <div class="memberName">Optimized</div> |
| 79 <div class="memberValue">{{code.isOptimized}}</div> | 65 <div class="memberValue">{{ code.isOptimized }}</div> |
| 80 </div> | 66 </div> |
| 81 </template> | 67 </template> |
| 82 <div class="memberItem"> | 68 <div class="memberItem"> |
| 83 <div class="memberName">Function</div> | 69 <div class="memberName">Function</div> |
| 84 <div class="memberValue"> | 70 <div class="memberValue"> |
| 85 <function-ref ref="{{code.function}}"> | 71 <function-ref ref="{{code.function}}"> |
| 86 </function-ref> | 72 </function-ref> |
| 87 </div> | 73 </div> |
| 88 </div> | 74 </div> |
| 89 <div class="memberItem"> | 75 <div class="memberItem"> |
| 90 <div class="memberName">Inclusive</div> | 76 <div class="memberName">Inclusive</div> |
| 91 <div class="memberValue">{{ code.formattedInclusiveTicks }}</div> | 77 <div class="memberValue">{{ code.profile.formattedInclusiveTicks }}</d
iv> |
| 92 </div> | 78 </div> |
| 93 <div class="memberItem"> | 79 <div class="memberItem"> |
| 94 <div class="memberName">Exclusive</div> | 80 <div class="memberName">Exclusive</div> |
| 95 <div class="memberValue">{{ code.formattedExclusiveTicks }}</div> | 81 <div class="memberValue">{{ code.profile.formattedExclusiveTicks }}</d
iv> |
| 96 </div> | 82 </div> |
| 97 <div class="memberItem"> | 83 <div class="memberItem"> |
| 98 <div class="memberName">Constant object pool</div> | 84 <div class="memberName">Constant object pool</div> |
| 99 <div class="memberValue"> | 85 <div class="memberValue"> |
| 100 <any-service-ref ref="{{ code.objectPool }}"></any-service-ref> | 86 <any-service-ref ref="{{ code.objectPool }}"></any-service-ref> |
| 101 </div> | 87 </div> |
| 102 </div> | 88 </div> |
| 89 <template if="{{ code.inlinedFunctions.isNotEmpty }}"> |
| 90 <div class="memberItem"> |
| 91 <div class="memberName">inlined functions ({{ code.inlinedFunctions.
length }})</div> |
| 92 <div class="memberValue"> |
| 93 <curly-block expand="{{ code.inlinedFunctions.length <= 8 }}"> |
| 94 <div class="memberList"> |
| 95 <template repeat="{{ func in code.inlinedFunctions }}"> |
| 96 <div class="memberItem"> |
| 97 <div class="memberValue"> |
| 98 <function-ref ref="{{ func }}"></function-ref> |
| 99 </div> |
| 100 </div> |
| 101 </template> |
| 102 </div> |
| 103 </curly-block> |
| 104 </div> |
| 105 </div> |
| 106 </template> |
| 103 </div> | 107 </div> |
| 104 </div> | 108 </div> |
| 105 <hr> | 109 <hr> |
| 106 <div class="content"> | 110 <table id="inlineRangeTable" class="table"> |
| 107 <template if="{{ code.hasDisassembly }}"> | 111 <thead id="inlineRangeTableHead"> |
| 108 <div class="flex-row"> | 112 <tr> |
| 109 <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div> | 113 <th class="address" title="Address range">Address Range</th> |
| 110 <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div> | 114 <th class="tick" title="Inclusive">Inclusive</th> |
| 111 <div class="flex-item-fixed-2-12 memberHeader">Address</div> | 115 <th class="tick" title="Exclusive">Exclusive</th> |
| 112 <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div> | 116 <th title="Functions">Functions</th> |
| 113 </div> | 117 </tr> |
| 114 </template> | 118 </thead> |
| 115 <template repeat="{{ instruction in code.instructions }}"> | 119 <tbody class="monospace" id="inlineRangeTableBody"> |
| 116 <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mou
seOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ in
struction.address }}" style="position: relative"> | 120 </tbody> |
| 117 <template if="{{ instruction.isComment }}"> | 121 </table> |
| 118 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted
Inclusive(code) }}</div> | 122 <hr> |
| 119 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted
Exclusive(code) }}</div> | 123 <table id="disassemblyTable" class="table"> |
| 120 <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}<
/div> | 124 <thead id="disassemblyTableHead"> |
| 121 </template> | 125 <tr> |
| 122 <template if="{{ !instruction.isComment }}"> | 126 <th class="address" title="Address">Address</th> |
| 123 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted
Inclusive(code) }}</div> | 127 <th class="tick" title="Inclusive">Inclusive</th> |
| 124 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted
Exclusive(code) }}</div> | 128 <th class="tick" title="Exclusive">Exclusive</th> |
| 125 <template if="{{ instruction.hasDescriptors }}"> | 129 <th class="disassembly" title="Disassembly">Disassembly</th> |
| 126 <div class="flex-item-fixed-2-12 monospace descriptor-address"> | 130 </tr> |
| 127 <div class="tooltip"> | 131 </thead> |
| 128 <template repeat="{{ descriptor in instruction.descriptors }}"
> | 132 <tbody class="monospace" id="disassemblyTableBody"> |
| 129 <div class="memberList"> | 133 </tbody> |
| 130 <div class="memberItem"> | 134 </table> |
| 131 <div class="memberName">Kind</div> | 135 <br><br><br> |
| 132 <div class="memberValue">{{ descriptor.kind }}</div> | 136 <br><br><br> |
| 133 </div> | |
| 134 <div class="memberItem"> | |
| 135 <div class="memberName">Deoptimization ID</div> | |
| 136 <div class="memberValue">{{ descriptor.formattedDeoptId()
}}</div> | |
| 137 </div> | |
| 138 <template if="{{ descriptor.script != null }}"> | |
| 139 <div class="memberItem"> | |
| 140 <div class="memberName">Script</div> | |
| 141 <div class="memberValue"><script-ref ref="{{ descriptor
.script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div> | |
| 142 </div> | |
| 143 </template> | |
| 144 </div> | |
| 145 <template if="{{ descriptor.script != null }}"> | |
| 146 <div class="snippet monospace"> | |
| 147 <span>{{ descriptor.formattedLine }}</span> | |
| 148 </div> | |
| 149 </template> | |
| 150 </template> | |
| 151 </div> | |
| 152 {{ instruction.formattedAddress() }} | |
| 153 </div> | |
| 154 </template> | |
| 155 <template if="{{ !instruction.hasDescriptors }}"> | |
| 156 <div class="flex-item-fixed-2-12 monospace"> | |
| 157 {{ instruction.formattedAddress() }} | |
| 158 </div> | |
| 159 </template> | |
| 160 <div class="flex-item-fixed-6-12 monospace"> | |
| 161 {{ instruction.human }} | |
| 162 </div> | |
| 163 </template> | |
| 164 </div> | |
| 165 </template> | |
| 166 </div> | |
| 167 </template> | 137 </template> |
| 168 </polymer-element> | 138 </polymer-element> |
| 169 | 139 |
| 170 <script type="application/dart" src="code_view.dart"></script> | 140 <script type="application/dart" src="code_view.dart"></script> |
| OLD | NEW |