Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(156)

Side by Side Diff: runtime/observatory/lib/src/elements/code_view.html

Issue 928833003: Add Function based profile tree (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 5 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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>
OLDNEW
« no previous file with comments | « runtime/observatory/lib/src/elements/code_view.dart ('k') | runtime/observatory/lib/src/elements/cpu_profile.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698