| 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="code_ref.html"> | 2 <link rel="import" href="code_ref.html"> |
| 3 <link rel="import" href="function_ref.html"> | 3 <link rel="import" href="function_ref.html"> |
| 4 <link rel="import" href="nav_bar.html"> | 4 <link rel="import" href="nav_bar.html"> |
| 5 <link rel="import" href="observatory_element.html"> | 5 <link rel="import" href="observatory_element.html"> |
| 6 <link rel="import" href="sliding_checkbox.html"> | 6 <link rel="import" href="sliding_checkbox.html"> |
| 7 <link rel="import" href="view_footer.html"> | 7 <link rel="import" href="view_footer.html"> |
| 8 | 8 |
| 9 <polymer-element name="sample-buffer-control" extends="observatory-element"> |
| 10 <template> |
| 11 <link rel="stylesheet" href="css/shared.css"> |
| 12 <style> |
| 13 .statusMessage { |
| 14 font-size: 150%; |
| 15 font-weight: bold; |
| 16 } |
| 17 |
| 18 .statusBox { |
| 19 height: 100%; |
| 20 padding: 1em; |
| 21 } |
| 22 |
| 23 .center { |
| 24 align-items: center; |
| 25 justify-content: center; |
| 26 } |
| 27 |
| 28 .notice { |
| 29 background-color: #fcf8e3; |
| 30 } |
| 31 |
| 32 .red { |
| 33 background-color: #f2dede; |
| 34 } |
| 35 </style> |
| 36 <div class="content-centered-big"> |
| 37 <h2>Sample buffer</h2> |
| 38 <hr> |
| 39 <template if="{{ state == 'kFetching' }}"> |
| 40 <div class="statusBox shadow center"> |
| 41 <div class="statusMessage">Fetching profile from VM...</div> |
| 42 </div> |
| 43 </template> |
| 44 <template if="{{ state == 'kLoading' }}"> |
| 45 <div class="statusBox shadow center"> |
| 46 <div class="statusMessage">Loading profile...</div> |
| 47 </div> |
| 48 </template> |
| 49 <template if="{{ state == 'kDisabled' }}"> |
| 50 <div class="statusBox shadow center"> |
| 51 <div> |
| 52 <h1>Profiling is disabled</h1> |
| 53 <br> |
| 54 Perhaps the <b>profile</b> flag has been disabled for this VM. |
| 55 <br><br> |
| 56 See all |
| 57 <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</
a> |
| 58 </div> |
| 59 </div> |
| 60 </template> |
| 61 <template if="{{ state == 'kException' }}"> |
| 62 <div class="statusBox shadow center"> |
| 63 <div class="statusMessage"> |
| 64 <h1>Profiling is disabled due to unexpected exception:</h1> |
| 65 <br> |
| 66 <pre>{{ exception.toString() }}</pre> |
| 67 <br> |
| 68 <h1>Stack trace:</h1> |
| 69 <br> |
| 70 <pre>{{ stackTrace.toString() }}</pre> |
| 71 </div> |
| 72 </div> |
| 73 </template> |
| 74 <template if="{{ state == 'kLoaded' }}"> |
| 75 <div class="memberList"> |
| 76 <div class="memberItem"> |
| 77 <div class="memberName">Refreshed at </div> |
| 78 <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime
}}) (loaded in {{ loadTime }})</div> |
| 79 </div> |
| 80 <div class="memberItem"> |
| 81 <div class="memberName">Profile contains</div> |
| 82 <div class="memberValue">{{ sampleCount }} samples (spanning {{ time
Span }})</div> |
| 83 </div> |
| 84 <div class="memberItem"> |
| 85 <div class="memberName">Sampling</div> |
| 86 <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRa
te }} Hz</div> |
| 87 </div> |
| 88 <template if="{{ showTagSelector }}"> |
| 89 <div class="memberItem"> |
| 90 <div class="memberName">Tag Order</div> |
| 91 <div class="memberValue"> |
| 92 <select value="{{tagSelector}}"> |
| 93 <option value="UserVM">User > VM</option> |
| 94 <option value="UserOnly">User</option> |
| 95 <option value="VMUser">VM > User</option> |
| 96 <option value="VMOnly">VM</option> |
| 97 <option value="None">None</option> |
| 98 </select> |
| 99 </div> |
| 100 </div> |
| 101 </template> |
| 102 </div> |
| 103 </template> |
| 104 </div> |
| 105 </template> |
| 106 </polymer-element> |
| 107 |
| 108 <polymer-element name="stack-trace-tree-config" extends="observatory-element"> |
| 109 <template> |
| 110 <link rel="stylesheet" href="css/shared.css"> |
| 111 <style> |
| 112 .statusBox { |
| 113 height: 100%; |
| 114 padding: 1em; |
| 115 } |
| 116 </style> |
| 117 <div class="content-centered-big"> |
| 118 <h2>Tree display</h2> |
| 119 <hr> |
| 120 <div class="memberList"> |
| 121 <template if="{{ showModeSelector }}"> |
| 122 <div class="memberItem"> |
| 123 <div class="memberName">Mode</div> |
| 124 <div class="memberValue"> |
| 125 <select value="{{modeSelector}}"> |
| 126 <option value="Code">Code</option> |
| 127 <option value="Function">Function</option> |
| 128 </select> |
| 129 </div> |
| 130 </div> |
| 131 </template> |
| 132 <template if="{{ showDirectionSelector }}"> |
| 133 <div class="memberItem"> |
| 134 <div class="memberName">Call Tree Direction</div> |
| 135 <div class="memberValue"> |
| 136 <select value="{{directionSelector}}"> |
| 137 <option value="Down">Top down</option> |
| 138 <option value="Up">Bottom up</option> |
| 139 </select> |
| 140 </div> |
| 141 </div> |
| 142 </template> |
| 143 </div> |
| 144 <template if="{{ directionSelector == 'Down' }}"> |
| 145 <br> |
| 146 <div class="statusBox shadow"> |
| 147 <div>Tree is rooted at main.</div> |
| 148 <br> |
| 149 <div>Child nodes are callees.</div> |
| 150 </div> |
| 151 </template> |
| 152 <template if="{{ directionSelector == 'Up' }}"> |
| 153 <br> |
| 154 <div class="statusBox shadow"> |
| 155 <div>Tree is rooted at executing function / code.</div> |
| 156 <br> |
| 157 <div>Child nodes are callers.</div> |
| 158 </div> |
| 159 </template> |
| 160 </div> |
| 161 </template> |
| 162 </polymer-element> |
| 163 |
| 9 <polymer-element name="cpu-profile-tree" extends="observatory-element"> | 164 <polymer-element name="cpu-profile-tree" extends="observatory-element"> |
| 10 <template> | 165 <template> |
| 11 <link rel="stylesheet" href="css/shared.css"> | 166 <link rel="stylesheet" href="css/shared.css"> |
| 12 <style> | 167 <style> |
| 13 .infoBox { | 168 .infoBox { |
| 14 position: absolute; | 169 position: absolute; |
| 15 top: 100%; | 170 top: 100%; |
| 16 left: 0%; | 171 left: 0%; |
| 17 z-index: 999; | 172 z-index: 999; |
| 18 opacity: 1; | 173 opacity: 1; |
| (...skipping 185 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 204 } | 359 } |
| 205 | 360 |
| 206 .tree thead > tr > th { | 361 .tree thead > tr > th { |
| 207 padding: 8px; | 362 padding: 8px; |
| 208 vertical-align: bottom; | 363 vertical-align: bottom; |
| 209 text-align: left; | 364 text-align: left; |
| 210 border-bottom: 1px solid #ddd; | 365 border-bottom: 1px solid #ddd; |
| 211 } | 366 } |
| 212 | 367 |
| 213 </style> | 368 </style> |
| 214 <div class="content-centered-big"> | 369 <sample-buffer-control id="sampleBufferControl"></sample-buffer-control> |
| 215 <template if="{{ state == 'Requested' }}"> | 370 <br> |
| 216 <div class="statusBox shadow center"> | |
| 217 <div class="statusMessage">Fetching profile from VM...</div> | |
| 218 </div> | |
| 219 </template> | |
| 220 <template if="{{ state == 'Loading' }}"> | |
| 221 <div class="statusBox shadow center"> | |
| 222 <div class="statusMessage">Loading profile...</div> | |
| 223 </div> | |
| 224 </template> | |
| 225 <template if="{{ state == 'Disabled' }}"> | |
| 226 <div class="statusBox shadow center"> | |
| 227 <div> | |
| 228 <h1>Profiling is disabled</h1> | |
| 229 <br> | |
| 230 Perhaps the <b>profile</b> flag has been disabled for this VM. | |
| 231 <br><br> | |
| 232 See all | |
| 233 <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</
a> | |
| 234 </div> | |
| 235 </div> | |
| 236 </template> | |
| 237 <template if="{{ state == 'Exception' }}"> | |
| 238 <div class="statusBox shadow center"> | |
| 239 <div class="statusMessage"> | |
| 240 <h1>Profiling is disabled due to unexpected exception:</h1> | |
| 241 <br> | |
| 242 <pre>{{ exception.toString() }}</pre> | |
| 243 <br> | |
| 244 <h1>Stack trace:</h1> | |
| 245 <br> | |
| 246 <pre>{{ stackTrace.toString() }}</pre> | |
| 247 </div> | |
| 248 </div> | |
| 249 </template> | |
| 250 <template if="{{ state == 'Loaded' }}"> | |
| 251 <div class="memberList"> | |
| 252 <div class="memberItem"> | |
| 253 <div class="memberName">Refreshed at </div> | |
| 254 <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime
}}) (loaded in {{ loadTime }})</div> | |
| 255 </div> | |
| 256 <div class="memberItem"> | |
| 257 <div class="memberName">Profile contains</div> | |
| 258 <div class="memberValue">{{ sampleCount }} samples (spanning {{ time
Span }})</div> | |
| 259 </div> | |
| 260 <div class="memberItem"> | |
| 261 <div class="memberName">Sampling</div> | |
| 262 <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRa
te }} Hz</div> | |
| 263 </div> | |
| 264 <div class="memberItem"> | |
| 265 <div class="memberName">Call Tree Direction</div> | |
| 266 <div class="memberValue"> | |
| 267 <select value="{{directionSelector}}"> | |
| 268 <option value="Down">Top down</option> | |
| 269 <option value="Up">Bottom up</option> | |
| 270 </select> | |
| 271 </div> | |
| 272 </div> | |
| 273 </div> | |
| 274 </template> | |
| 275 </div> | |
| 276 <hr> | 371 <hr> |
| 277 <div id="main" class="flex-row centered"> | 372 <div id="main" class="flex-row centered"> |
| 278 <div class="flex-item-45-percent full-height outlined scroll"> | 373 <div class="flex-item-45-percent full-height outlined scroll"> |
| 279 <table id="main-table" class="flex-item-100-percent table"> | 374 <table id="main-table" class="flex-item-100-percent table"> |
| 280 <thead> | 375 <thead> |
| 281 <tr> | 376 <tr> |
| 282 <th on-click="{{changeSortProfile}}" class="clickable" title="Execut
ing (%)">{{ profileTable.getColumnLabel(0) }}</th> | 377 <th on-click="{{changeSortProfile}}" class="clickable" title="Execut
ing (%)">{{ profileTable.getColumnLabel(0) }}</th> |
| 283 <th on-click="{{changeSortProfile}}" class="clickable" title="In sta
ck (%)">{{ profileTable.getColumnLabel(1) }}</th> | 378 <th on-click="{{changeSortProfile}}" class="clickable" title="In sta
ck (%)">{{ profileTable.getColumnLabel(1) }}</th> |
| 284 <th on-click="{{changeSortProfile}}" class="clickable" title="Method
">{{ profileTable.getColumnLabel(2) }}</th> | 379 <th on-click="{{changeSortProfile}}" class="clickable" title="Method
">{{ profileTable.getColumnLabel(2) }}</th> |
| 285 </tr> | 380 </tr> |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 322 </tr> | 417 </tr> |
| 323 </thead> | 418 </thead> |
| 324 <tbody id="callees-table"> | 419 <tbody id="callees-table"> |
| 325 </tbody> | 420 </tbody> |
| 326 </table> | 421 </table> |
| 327 </div> | 422 </div> |
| 328 </div> | 423 </div> |
| 329 </div> | 424 </div> |
| 330 </div> | 425 </div> |
| 331 <br> | 426 <br> |
| 427 <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config
> |
| 428 <br> |
| 429 <div class="content-centered-big"> |
| 430 <div class="focused-function-label"> |
| 431 <template if="{{ focusedFunction != null }}"> |
| 432 <span>Filtered tree: </span> |
| 433 <function-ref ref="{{ focusedFunction }}"></function-ref> |
| 434 </template> |
| 435 <template if="{{ focusedFunction == null }}"> |
| 436 <span>No focused function</span> |
| 437 </template> |
| 438 </div> |
| 439 </div> |
| 440 <br> |
| 332 <br> | 441 <br> |
| 333 <div class="focused-function-label"> | |
| 334 <template if="{{ focusedFunction != null }}"> | |
| 335 <span>Filtered tree: </span> | |
| 336 <function-ref ref="{{ focusedFunction }}"></function-ref> | |
| 337 </template> | |
| 338 <template if="{{ focusedFunction == null }}"> | |
| 339 <span>No focused function</span> | |
| 340 </template> | |
| 341 </div> | |
| 342 <div class="flex-row centered"> | 442 <div class="flex-row centered"> |
| 343 <div class="flex-item-90-percent outlined" style="margin: 16px; margin-lef
t: 8px; margin-right: 8px"> | 443 <div class="flex-item-90-percent outlined" style="margin: 16px; margin-lef
t: 8px; margin-right: 8px"> |
| 344 <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree> | 444 <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree> |
| 345 </div> | 445 </div> |
| 346 </div> | 446 </div> |
| 347 </template> | 447 </template> |
| 348 </polymer-element> | 448 </polymer-element> |
| 349 | 449 |
| 350 <polymer-element name="cpu-profile" extends="observatory-element"> | 450 <polymer-element name="cpu-profile" extends="observatory-element"> |
| 351 <template> | 451 <template> |
| 352 <link rel="stylesheet" href="css/shared.css"> | 452 <link rel="stylesheet" href="css/shared.css"> |
| 353 <nav-bar> | 453 <nav-bar> |
| 354 <top-nav-menu></top-nav-menu> | 454 <top-nav-menu></top-nav-menu> |
| 355 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu> | 455 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu> |
| 356 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> | 456 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> |
| 357 <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile"
last="{{ true }}"></nav-menu> | 457 <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile"
last="{{ true }}"></nav-menu> |
| 358 <nav-refresh callback="{{ refresh }}"></nav-refresh> | 458 <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| 359 <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh> | 459 <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh> |
| 360 </nav-bar> | 460 </nav-bar> |
| 361 <style> | 461 <style> |
| 362 .tableWell { | 462 .tableWell { |
| 363 background-color: #ECECEC; | 463 background-color: #ECECEC; |
| 364 padding: 0.2em; | 464 padding: 0.2em; |
| 365 } | 465 } |
| 366 .statusMessage { | |
| 367 font-size: 150%; | |
| 368 font-weight: bold; | |
| 369 } | |
| 370 | |
| 371 .statusBox { | |
| 372 height: 100%; | |
| 373 padding: 1em; | |
| 374 } | |
| 375 | |
| 376 .center { | |
| 377 align-items: center; | |
| 378 justify-content: center; | |
| 379 } | |
| 380 | |
| 381 .notice { | |
| 382 background-color: #fcf8e3; | |
| 383 } | |
| 384 | |
| 385 .red { | |
| 386 background-color: #f2dede; | |
| 387 } | |
| 388 | |
| 389 </style> | 466 </style> |
| 467 <sample-buffer-control id="sampleBufferControl"></sample-buffer-control> |
| 468 <br> |
| 469 <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config
> |
| 470 <br> |
| 390 <div class="content-centered-big"> | 471 <div class="content-centered-big"> |
| 391 <h1>Sampled CPU profile</h1> | |
| 392 <hr> | |
| 393 <template if="{{ state == 'Requested' }}"> | |
| 394 <div class="statusBox shadow center"> | |
| 395 <div class="statusMessage">Fetching profile from VM...</div> | |
| 396 </div> | |
| 397 </template> | |
| 398 <template if="{{ state == 'Loading' }}"> | |
| 399 <div class="statusBox shadow center"> | |
| 400 <div class="statusMessage">Loading profile...</div> | |
| 401 </div> | |
| 402 </template> | |
| 403 <template if="{{ state == 'Disabled' }}"> | |
| 404 <div class="statusBox shadow center"> | |
| 405 <div> | |
| 406 <h1>Profiling is disabled</h1> | |
| 407 <br> | |
| 408 Perhaps the <b>profile</b> flag has been disabled for this VM. | |
| 409 <br><br> | |
| 410 See all | |
| 411 <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</
a> | |
| 412 </div> | |
| 413 </div> | |
| 414 </template> | |
| 415 <template if="{{ state == 'Exception' }}"> | |
| 416 <div class="statusBox shadow center"> | |
| 417 <div class="statusMessage"> | |
| 418 <h1>Profiling is disabled due to unexpected exception:</h1> | |
| 419 <br> | |
| 420 <pre>{{ exception.toString() }}</pre> | |
| 421 <br> | |
| 422 <h1>Stack trace:</h1> | |
| 423 <br> | |
| 424 <pre>{{ stackTrace.toString() }}</pre> | |
| 425 </div> | |
| 426 </div> | |
| 427 </template> | |
| 428 <template if="{{ state == 'Loaded' }}"> | |
| 429 <div class="memberList"> | |
| 430 <div class="memberItem"> | |
| 431 <div class="memberName">Refreshed at </div> | |
| 432 <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime
}}) (loaded in {{ loadTime }})</div> | |
| 433 </div> | |
| 434 <div class="memberItem"> | |
| 435 <div class="memberName">Profile contains</div> | |
| 436 <div class="memberValue">{{ sampleCount }} samples (spanning {{ time
Span }})</div> | |
| 437 </div> | |
| 438 <div class="memberItem"> | |
| 439 <div class="memberName">Sampling</div> | |
| 440 <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRa
te }} Hz</div> | |
| 441 </div> | |
| 442 <div class="memberItem"> | |
| 443 <div class="memberName">Mode</div> | |
| 444 <div class="memberValue"> | |
| 445 <select value="{{modeSelector}}"> | |
| 446 <option value="Code">Code</option> | |
| 447 <option value="Function">Function</option> | |
| 448 </select> | |
| 449 </div> | |
| 450 </div> | |
| 451 <div class="memberItem"> | |
| 452 <div class="memberName">Tag Order</div> | |
| 453 <div class="memberValue"> | |
| 454 <select value="{{tagSelector}}"> | |
| 455 <option value="UserVM">User > VM</option> | |
| 456 <option value="UserOnly">User</option> | |
| 457 <option value="VMUser">VM > User</option> | |
| 458 <option value="VMOnly">VM</option> | |
| 459 <option value="None">None</option> | |
| 460 </select> | |
| 461 </div> | |
| 462 </div> | |
| 463 <!--- Experimental | |
| 464 <div class="memberItem"> | |
| 465 <div class="memberName">Call Tree Direction</div> | |
| 466 <div class="memberValue"> | |
| 467 <select value="{{directionSelector}}"> | |
| 468 <option value="Down">Top down</option> | |
| 469 <option value="Up">Bottom up</option> | |
| 470 </select> | |
| 471 </div> | |
| 472 </div> | |
| 473 ---> | |
| 474 </div> | |
| 475 </template> | |
| 476 <template if="{{ state == 'Loaded' && directionSelector == 'Down' }}"> | |
| 477 <br> | |
| 478 <div class="statusBox shadow"> | |
| 479 <div>Tree is rooted at main.</div> | |
| 480 <br> | |
| 481 <div>Child nodes are callees.</div> | |
| 482 <br> | |
| 483 <div class="notice">To get the most out of this mode you may need to l
aunch Dart with a higher --profile-depth flag value.</div> | |
| 484 <div class="notice">Try 16, 32, ... up to 256 until [Truncated] approa
ches zero.</div> | |
| 485 <div class="red">NOTE: Higher values will impact performance</div> | |
| 486 </div> | |
| 487 </template> | |
| 488 <template if="{{ state == 'Loaded' && directionSelector == 'Up' }}"> | |
| 489 <br> | |
| 490 <div class="statusBox shadow"> | |
| 491 <div>Tree is rooted at executing function / code.</div> | |
| 492 <br> | |
| 493 <div>Child nodes are callers.</div> | |
| 494 </div> | |
| 495 </template> | |
| 496 <br><br> | |
| 497 <div class="tableWell shadow"> | 472 <div class="tableWell shadow"> |
| 498 <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree> | 473 <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree> |
| 499 </div> | 474 </div> |
| 500 </div> | 475 </div> |
| 501 <view-footer></view-footer> | 476 <view-footer></view-footer> |
| 502 </template> | 477 </template> |
| 503 </polymer-element> | 478 </polymer-element> |
| 504 | 479 |
| 505 <script type="application/dart" src="cpu_profile.dart"></script> | 480 <script type="application/dart" src="cpu_profile.dart"></script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1266193003:
Introduce two utility elements for the cpu profiler (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master