| OLD | NEW |
|---|
| (Empty) |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 | |
| 3 <polymer-element name="sample-buffer-control"> | |
| 4 <template> | |
| 5 <link rel="stylesheet" href="css/shared.css"> | |
| 6 <style> | |
| 7 .statusMessage { | |
| 8 font-size: 150%; | |
| 9 font-weight: bold; | |
| 10 } | |
| 11 | |
| 12 .statusBox { | |
| 13 height: 100%; | |
| 14 padding: 1em; | |
| 15 } | |
| 16 | |
| 17 .center { | |
| 18 align-items: center; | |
| 19 justify-content: center; | |
| 20 } | |
| 21 | |
| 22 .notice { | |
| 23 background-color: #fcf8e3; | |
| 24 } | |
| 25 | |
| 26 .red { | |
| 27 background-color: #f2dede; | |
| 28 } | |
| 29 </style> | |
| 30 <div class="content-centered-big"> | |
| 31 <template if="{{ state != 'kNotLoaded' }}"> | |
| 32 <h2>Sample buffer</h2> | |
| 33 <hr> | |
| 34 </template> | |
| 35 <template if="{{ state == 'kFetching' }}"> | |
| 36 <div class="statusBox shadow center"> | |
| 37 <div class="statusMessage">Fetching profile from VM...</div> | |
| 38 </div> | |
| 39 </template> | |
| 40 <template if="{{ state == 'kLoading' }}"> | |
| 41 <div class="statusBox shadow center"> | |
| 42 <div class="statusMessage">Loading profile...</div> | |
| 43 </div> | |
| 44 </template> | |
| 45 <template if="{{ state == 'kDisabled' }}"> | |
| 46 <div class="statusBox shadow center"> | |
| 47 <div> | |
| 48 <h1>Profiling is disabled</h1> | |
| 49 <br> | |
| 50 Perhaps the <b>profile</b> flag has been disabled for this VM. | |
| 51 <br><br> | |
| 52 See all | |
| 53 <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">vm flags</
a> | |
| 54 </div> | |
| 55 </div> | |
| 56 </template> | |
| 57 <template if="{{ state == 'kException' }}"> | |
| 58 <div class="statusBox shadow center"> | |
| 59 <div class="statusMessage"> | |
| 60 <h1>Profiling is disabled due to unexpected exception:</h1> | |
| 61 <br> | |
| 62 <pre>{{ exception.toString() }}</pre> | |
| 63 <br> | |
| 64 <h1>Stack trace:</h1> | |
| 65 <br> | |
| 66 <pre>{{ stackTrace.toString() }}</pre> | |
| 67 </div> | |
| 68 </div> | |
| 69 </template> | |
| 70 <template if="{{ state == 'kLoaded' }}"> | |
| 71 <div class="memberList"> | |
| 72 <div class="memberItem"> | |
| 73 <div class="memberName">Refreshed at </div> | |
| 74 <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime
}}) (loaded in {{ loadTime }})</div> | |
| 75 </div> | |
| 76 <div class="memberItem"> | |
| 77 <div class="memberName">Profile contains</div> | |
| 78 <div class="memberValue">{{ sampleCount }} samples (spanning {{ time
Span }})</div> | |
| 79 </div> | |
| 80 <div class="memberItem"> | |
| 81 <div class="memberName">Sampling</div> | |
| 82 <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRa
te }} Hz</div> | |
| 83 </div> | |
| 84 <template if="{{ showTagSelector }}"> | |
| 85 <div class="memberItem"> | |
| 86 <div class="memberName">Tag Order</div> | |
| 87 <div class="memberValue"> | |
| 88 <template if="{{ profileVM }}"> | |
| 89 <select value="{{tagSelector}}"> | |
| 90 <option value="UserVM">User > VM</option> | |
| 91 <option value="UserOnly">User</option> | |
| 92 <option value="VMUser">VM > User</option> | |
| 93 <option value="VMOnly">VM</option> | |
| 94 <option value="None">None</option> | |
| 95 </select> | |
| 96 </template> | |
| 97 <template if="{{ !profileVM }}"> | |
| 98 <select value="{{tagSelector}}"> | |
| 99 <option value="UserOnly">User</option> | |
| 100 <option value="None">None</option> | |
| 101 </select> | |
| 102 </template> | |
| 103 </div> | |
| 104 </div> | |
| 105 </template> | |
| 106 </div> | |
| 107 </template> | |
| 108 </div> | |
| 109 </template> | |
| 110 </polymer-element> | |
| 111 | |
| 112 <polymer-element name="stack-trace-tree-config"> | |
| 113 <template> | |
| 114 <link rel="stylesheet" href="css/shared.css"> | |
| 115 <style> | |
| 116 .statusBox { | |
| 117 height: 100%; | |
| 118 padding: 0.5em; | |
| 119 } | |
| 120 .row { | |
| 121 display: flex; | |
| 122 } | |
| 123 </style> | |
| 124 <div class="content-centered-big"> | |
| 125 <template if="{{ show }}"> | |
| 126 <h2>Tree display</h2> | |
| 127 <hr> | |
| 128 <div class="row"> | |
| 129 <div> | |
| 130 <div class="memberList"> | |
| 131 <template if="{{ showModeSelector }}"> | |
| 132 <div class="memberItem"> | |
| 133 <div class="memberName">Mode</div> | |
| 134 <div class="memberValue"> | |
| 135 <select value="{{modeSelector}}"> | |
| 136 <option value="Code">Code</option> | |
| 137 <option value="Function">Function</option> | |
| 138 </select> | |
| 139 </div> | |
| 140 </div> | |
| 141 </template> | |
| 142 <template if="{{ showDirectionSelector }}"> | |
| 143 <div class="memberItem"> | |
| 144 <div class="memberName">Call Tree Direction</div> | |
| 145 <span class="memberValue"> | |
| 146 <select value="{{directionSelector}}"> | |
| 147 <option value="Down">Top down</option> | |
| 148 <option value="Up">Bottom up</option> | |
| 149 </select> | |
| 150 <template if="{{ directionSelector == 'Down' }}"> | |
| 151 <span> | |
| 152 Tree is rooted at "main". Child nodes are callees. | |
| 153 </span> | |
| 154 </template> | |
| 155 <template if="{{ directionSelector == 'Up' }}"> | |
| 156 <span> | |
| 157 Tree is rooted at executing function / code. Child nodes
are callers. | |
| 158 </span> | |
| 159 </template> | |
| 160 </span> | |
| 161 </div> | |
| 162 </template> | |
| 163 <template if="{{ showFilter }}"> | |
| 164 <div class="memberItem"> | |
| 165 <div title="case-sensitive substring match" class="memberName"
>Call Tree Filter</div> | |
| 166 <span class="memberValue"> | |
| 167 <input type="text" placeholder="Search filter" id="filterInp
ut"> | |
| 168 </span> | |
| 169 </div> | |
| 170 </template> | |
| 171 </div> | |
| 172 </div> | |
| 173 </div> | |
| 174 </template> | |
| 175 </div> | |
| 176 </template> | |
| 177 </polymer-element> | |
| 178 | |
| 179 <polymer-element name="cpu-profile-tree"> | |
| 180 <template> | |
| 181 <link rel="stylesheet" href="css/shared.css"> | |
| 182 <style> | |
| 183 .infoBox { | |
| 184 position: absolute; | |
| 185 top: 100%; | |
| 186 left: 0%; | |
| 187 z-index: 999; | |
| 188 opacity: 1; | |
| 189 padding: 1em; | |
| 190 background-color: #ffffff; | |
| 191 border-left: solid 2px #ECECEC; | |
| 192 border-bottom: solid 2px #ECECEC; | |
| 193 border-right: solid 2px #ECECEC; | |
| 194 } | |
| 195 .full-width { | |
| 196 width: 100%; | |
| 197 } | |
| 198 .tree { | |
| 199 border-spacing: 0px; | |
| 200 width: 100%; | |
| 201 margin-bottom: 20px | |
| 202 vertical-align: middle; | |
| 203 } | |
| 204 .tree tbody tr { | |
| 205 animation: fadeIn 0.5s; | |
| 206 -moz-animation: fadeIn 0.5s; | |
| 207 -webkit-animation: fadeIn 0.5s; | |
| 208 } | |
| 209 .tree tbody tr:hover { | |
| 210 background-color: #FAFAFA; | |
| 211 } | |
| 212 .tree tr td:first-child, | |
| 213 .tree tr th:first-child { | |
| 214 width: 100%; | |
| 215 } | |
| 216 .tree thead > tr > th { | |
| 217 padding: 8px; | |
| 218 vertical-align: bottom; | |
| 219 text-align: left; | |
| 220 border-bottom: 1px solid #ddd; | |
| 221 } | |
| 222 tr { | |
| 223 background-color: #FFFFFF; | |
| 224 } | |
| 225 tbody tr { | |
| 226 animation: fadeIn 0.5s; | |
| 227 -moz-animation: fadeIn 0.5s; | |
| 228 -webkit-animation: fadeIn 0.5s; | |
| 229 } | |
| 230 tbody tr:hover { | |
| 231 background-color: #FAFAFA; | |
| 232 } | |
| 233 tr td:first-child, | |
| 234 tr th:first-child { | |
| 235 width: 100%; | |
| 236 } | |
| 237 </style> | |
| 238 <table id="treeTable" class="full-width tree"> | |
| 239 <thead id="treeHeader"> | |
| 240 <tr> | |
| 241 <th>Method</th> | |
| 242 <th>Executing</th> | |
| 243 </tr> | |
| 244 </thead> | |
| 245 <tbody id="treeBody"> | |
| 246 </tbody> | |
| 247 </table> | |
| 248 </template> | |
| 249 </polymer-element> | |
| 250 | |
| 251 <polymer-element name="cpu-profile-virtual-tree"> | |
| 252 <template> | |
| 253 <link rel="stylesheet" href="css/shared.css"> | |
| 254 <style> | |
| 255 .full { | |
| 256 height: 50%; | |
| 257 width: 100%; | |
| 258 } | |
| 259 .coldProfile { | |
| 260 background-color: #aea; | |
| 261 } | |
| 262 .mediumProfile { | |
| 263 background-color: #fe9; | |
| 264 } | |
| 265 .hotProfile { | |
| 266 background-color: #faa; | |
| 267 } | |
| 268 </style> | |
| 269 <div id="tree" class="full"></div> | |
| 270 </template> | |
| 271 </polymer-element> | |
| 272 | |
| 273 | |
| 274 <polymer-element name="cpu-profile-table"> | |
| 275 <template> | |
| 276 <link rel="stylesheet" href="css/shared.css"> | |
| 277 <nav-bar> | |
| 278 <top-nav-menu></top-nav-menu> | |
| 279 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu> | |
| 280 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> | |
| 281 <nav-menu link="{{ makeLink('/profiler-table', isolate) }}" anchor="cpu pr
ofile (table)" last="{{ true }}"></nav-menu> | |
| 282 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
| 283 <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh> | |
| 284 <nav-notify notifications="{{ app.notifications }}"></nav-notify> | |
| 285 </nav-bar> | |
| 286 <style> | |
| 287 /* general */ | |
| 288 .well { | |
| 289 background-color: #ECECEC; | |
| 290 padding: 0.2em; | |
| 291 } | |
| 292 .center { | |
| 293 align-items: center; | |
| 294 justify-content: center; | |
| 295 } | |
| 296 | |
| 297 /* status messages */ | |
| 298 .statusMessage { | |
| 299 font-size: 150%; | |
| 300 font-weight: bold; | |
| 301 } | |
| 302 .statusBox { | |
| 303 height: 100%; | |
| 304 padding: 1em; | |
| 305 } | |
| 306 | |
| 307 /* tables */ | |
| 308 .table { | |
| 309 border-collapse: collapse!important; | |
| 310 table-layout: fixed; | |
| 311 height: 100%; | |
| 312 } | |
| 313 .th, .td { | |
| 314 padding: 8px; | |
| 315 vertical-align: top; | |
| 316 } | |
| 317 .table thead > tr > th { | |
| 318 vertical-align: bottom; | |
| 319 text-align: left; | |
| 320 border-bottom:2px solid #ddd; | |
| 321 } | |
| 322 .spacer { | |
| 323 width: 16px; | |
| 324 } | |
| 325 .left-border-spacer { | |
| 326 width: 16px; | |
| 327 border-left: 1px solid; | |
| 328 } | |
| 329 .clickable { | |
| 330 color: #0489c3; | |
| 331 text-decoration: none; | |
| 332 cursor: pointer; | |
| 333 min-width: 8em; | |
| 334 } | |
| 335 .clickable:hover { | |
| 336 text-decoration: underline; | |
| 337 cursor: pointer; | |
| 338 } | |
| 339 tr:hover:not(.focused) > td { | |
| 340 background-color: #FAFAFA; | |
| 341 } | |
| 342 .focused { | |
| 343 background-color: #F4C7C3; | |
| 344 } | |
| 345 .scroll { | |
| 346 overflow: scroll; | |
| 347 } | |
| 348 .outlined { | |
| 349 -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 350 -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 351 box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 352 margin: 4px; | |
| 353 } | |
| 354 .centered { | |
| 355 margin-left: auto; | |
| 356 margin-right: auto; | |
| 357 justify-content: center; | |
| 358 } | |
| 359 .full-height { | |
| 360 height: 100%; | |
| 361 } | |
| 362 .mostly-full-height { | |
| 363 height: 80%; | |
| 364 } | |
| 365 .full-width { | |
| 366 width: 100%; | |
| 367 } | |
| 368 .focused-function-label { | |
| 369 flex: 0 1 auto; | |
| 370 margin-left: auto; | |
| 371 margin-right: auto; | |
| 372 justify-content: center; | |
| 373 } | |
| 374 .call-table { | |
| 375 flex: 1 1 auto; | |
| 376 } | |
| 377 | |
| 378 .tree { | |
| 379 border-spacing: 0px; | |
| 380 width: 100%; | |
| 381 margin-bottom: 20px | |
| 382 vertical-align: middle; | |
| 383 } | |
| 384 | |
| 385 .tree tbody tr { | |
| 386 animation: fadeIn 0.5s; | |
| 387 -moz-animation: fadeIn 0.5s; | |
| 388 -webkit-animation: fadeIn 0.5s; | |
| 389 } | |
| 390 | |
| 391 .tree tbody tr:hover { | |
| 392 background-color: #FAFAFA; | |
| 393 } | |
| 394 | |
| 395 .tree tr td:first-child, | |
| 396 .tree tr th:first-child { | |
| 397 width: 100%; | |
| 398 } | |
| 399 | |
| 400 .tree thead > tr > th { | |
| 401 padding: 8px; | |
| 402 vertical-align: bottom; | |
| 403 text-align: left; | |
| 404 border-bottom: 1px solid #ddd; | |
| 405 } | |
| 406 | |
| 407 </style> | |
| 408 <sample-buffer-control id="sampleBufferControl"></sample-buffer-control> | |
| 409 <br> | |
| 410 <hr> | |
| 411 <div id="main" class="flex-row centered"> | |
| 412 <div class="flex-item-45-percent full-height outlined scroll"> | |
| 413 <table id="main-table" class="flex-item-100-percent table"> | |
| 414 <thead> | |
| 415 <tr> | |
| 416 <th on-click="{{changeSortProfile}}" class="clickable" title="Execut
ing (%)">{{ profileTable.getColumnLabel(0) }}</th> | |
| 417 <th on-click="{{changeSortProfile}}" class="clickable" title="In sta
ck (%)">{{ profileTable.getColumnLabel(1) }}</th> | |
| 418 <th on-click="{{changeSortProfile}}" class="clickable" title="Method
">{{ profileTable.getColumnLabel(2) }}</th> | |
| 419 </tr> | |
| 420 </thead> | |
| 421 <tbody id="profile-table"> | |
| 422 </tbody> | |
| 423 </table> | |
| 424 </div> | |
| 425 <div class="flex-item-45-percent full-height outlined"> | |
| 426 <div class="flex-column full-height"> | |
| 427 <div class="focused-function-label"> | |
| 428 <template if="{{ focusedFunction != null }}"> | |
| 429 <span>Focused on: </span> | |
| 430 <function-ref ref="{{ focusedFunction }}"></function-ref> | |
| 431 </template> | |
| 432 <template if="{{ focusedFunction == null }}"> | |
| 433 <span>No focused function</span> | |
| 434 </template> | |
| 435 </div> | |
| 436 <hr> | |
| 437 <div class="call-table scroll"> | |
| 438 <table class="full-width table"> | |
| 439 <thead> | |
| 440 <tr> | |
| 441 <th on-click="{{changeSortCallers}}" class="clickable" title="Ca
llers (%)">{{ profileCallersTable.getColumnLabel(0) }}</th> | |
| 442 <th on-click="{{changeSortCallers}}" class="clickable" title="Me
thod">{{ profileCallersTable.getColumnLabel(1) }}</th> | |
| 443 </tr> | |
| 444 </thead> | |
| 445 <tbody id="callers-table"> | |
| 446 </tbody> | |
| 447 </table> | |
| 448 </div> | |
| 449 <hr> | |
| 450 <div class="call-table scroll"> | |
| 451 <table class="full-width table"> | |
| 452 <thead> | |
| 453 <tr> | |
| 454 <th on-click="{{changeSortCallees}}" class="clickable" title="Ca
llees (%)">{{ profileCalleesTable.getColumnLabel(0) }}</th> | |
| 455 <th on-click="{{changeSortCallees}}" class="clickable" title="Me
thod">{{ profileCalleesTable.getColumnLabel(1) }}</th> | |
| 456 </tr> | |
| 457 </thead> | |
| 458 <tbody id="callees-table"> | |
| 459 </tbody> | |
| 460 </table> | |
| 461 </div> | |
| 462 </div> | |
| 463 </div> | |
| 464 </div> | |
| 465 <br> | |
| 466 <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config
> | |
| 467 <br> | |
| 468 <div class="content-centered-big"> | |
| 469 <div class="focused-function-label"> | |
| 470 <template if="{{ focusedFunction != null }}"> | |
| 471 <span>Filtered tree: </span> | |
| 472 <function-ref ref="{{ focusedFunction }}"></function-ref> | |
| 473 </template> | |
| 474 <template if="{{ focusedFunction == null }}"> | |
| 475 <span>No focused function</span> | |
| 476 </template> | |
| 477 </div> | |
| 478 </div> | |
| 479 <br> | |
| 480 <br> | |
| 481 <div class="flex-row centered"> | |
| 482 <div class="flex-item-90-percent outlined" style="margin: 16px; margin-lef
t: 8px; margin-right: 8px"> | |
| 483 <cpu-profile-virtual-tree id="cpuProfileTree"></cpu-profile-virtual-tree
> | |
| 484 </div> | |
| 485 </div> | |
| 486 </template> | |
| 487 </polymer-element> | |
| 488 | |
| 489 <polymer-element name="cpu-profile"> | |
| 490 <template> | |
| 491 <link rel="stylesheet" href="css/shared.css"> | |
| 492 <nav-bar> | |
| 493 <top-nav-menu></top-nav-menu> | |
| 494 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu> | |
| 495 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> | |
| 496 <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile"
last="{{ true }}"></nav-menu> | |
| 497 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
| 498 <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh> | |
| 499 <nav-notify notifications="{{ app.notifications }}"></nav-notify> | |
| 500 </nav-bar> | |
| 501 <style> | |
| 502 .tableWell { | |
| 503 background-color: #ECECEC; | |
| 504 padding: 0.2em; | |
| 505 } | |
| 506 </style> | |
| 507 <sample-buffer-control id="sampleBufferControl"></sample-buffer-control> | |
| 508 <br> | |
| 509 <stack-trace-tree-config id="stackTraceTreeConfig"></stack-trace-tree-config
> | |
| 510 <br> | |
| 511 <cpu-profile-virtual-tree id="cpuProfileVirtualTree"></cpu-profile-virtual-t
ree> | |
| 512 </template> | |
| 513 </polymer-element> | |
| 514 | |
| 515 <script type="application/dart" src="cpu_profile.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204563003:
Converted Observatory cpu-profile element (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master