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 |