| <head> |
| <link rel="import" href="code_ref.html"> |
| <link rel="import" href="function_ref.html"> |
| <link rel="import" href="nav_bar.html"> |
| <link rel="import" href="observatory_element.html"> |
| <link rel="import" href="sliding_checkbox.html"> |
| </head> |
| <polymer-element name="isolate-profile" extends="observatory-element"> |
| <template> |
| <link rel="stylesheet" href="css/shared.css"> |
| <nav-bar> |
| <top-nav-menu></top-nav-menu> |
| <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> |
| <nav-menu link="{{ profile.isolate.relativeHashLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu> |
| <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| </nav-bar> |
| <style> |
| .table { |
| border-collapse: collapse!important; |
| width: 100%; |
| margin-bottom: 20px |
| } |
| .table thead > tr > th, |
| .table tbody > tr > th, |
| .table tfoot > tr > th, |
| .table thead > tr > td, |
| .table tbody > tr > td, |
| .table tfoot > tr > td { |
| padding: 8px; |
| vertical-align: top; |
| } |
| .table thead > tr > th { |
| vertical-align: bottom; |
| text-align: left; |
| border-bottom:2px solid #ddd; |
| } |
| |
| tr:hover > td { |
| background-color: #FFF3E3; |
| } |
| .rowColor0 { |
| background-color: #FFE9CC; |
| } |
| .rowColor1 { |
| background-color: #FFDEB2; |
| } |
| .rowColor2 { |
| background-color: #FFD399; |
| } |
| .rowColor3 { |
| background-color: #FFC87F; |
| } |
| .rowColor4 { |
| background-color: #FFBD66; |
| } |
| .rowColor5 { |
| background-color: #FFB24C; |
| } |
| .rowColor6 { |
| background-color: #FFA733; |
| } |
| .rowColor7 { |
| background-color: #FF9C19; |
| } |
| .rowColor8 { |
| background-color: #FF9100; |
| } |
| |
| .tooltip { |
| display: block; |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| } |
| |
| tr:hover .tooltip { |
| display: block; |
| position: absolute; |
| top: 100%; |
| right: 100%; |
| visibility: visible; |
| z-index: 999; |
| width: 400px; |
| color: #ffffff; |
| background-color: #0489c3; |
| border-top-right-radius: 8px; |
| border-top-left-radius: 8px; |
| border-bottom-right-radius: 8px; |
| border-bottom-left-radius: 8px; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| opacity: 1; |
| } |
| |
| .white { |
| color: #ffffff; |
| } |
| |
| </style> |
| <div class="content"> |
| <h1>Sampled CPU profile</h1> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName">Timestamp</div> |
| <div class="memberValue">{{ refreshTime }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Time span</div> |
| <div class="memberValue">{{ timeSpan }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample count</div> |
| <div class="memberValue">{{ sampleCount }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample rate</div> |
| <div class="memberValue">{{ sampleRate }} Hz</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Sample depth</div> |
| <div class="memberValue">{{ sampleDepth }} stack frames</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Display cutoff</div> |
| <div class="memberValue">{{ displayCutoff }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName">Tags</div> |
| <div class="memberValue"> |
| <select value="{{tagSelector}}"> |
| <option value="uv">User > VM</option> |
| <option value="u">User</option> |
| <option value="vu">VM > User</option> |
| <option value="v">VM</option> |
| <option value="hide">None</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <hr> |
| <table id="tableTree" class="table"> |
| <thead> |
| <tr> |
| <th>Method</th> |
| <th>Self</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr template repeat="{{row in tree.rows }}" style="{{}}"> |
| <td on-click="{{toggleExpanded}}" |
| class="{{ coloring(row) }}" |
| style="{{ padding(row) }}"> |
| <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span> |
| <div style="position: relative;display: inline"> |
| {{row.columns[0]}} |
| </div> |
| <code-ref ref="{{ row.code }}"></code-ref> |
| </td> |
| <td class="{{ coloring(row) }}" style="position: relative"> |
| {{row.columns[1]}} |
| <div class="tooltip"> |
| <div class="memberList"> |
| <div class="memberItem"> |
| <div class="memberName white">Kind</div> |
| <div class="memberValue white">{{ row.tipKind }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Percent of Parent</div> |
| <div class="memberValue white">{{ row.tipParent }}</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Sample Count</div> |
| <div class="memberValue white">{{ row.tipTicks }} ({{ row.tipExclusive }})</div> |
| </div> |
| <div class="memberItem"> |
| <div class="memberName white">Approximate Execution Time</div> |
| <div class="memberValue white">{{ row.tipTime }}</div> |
| </div> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </template> |
| <script type="application/dart" src="isolate_profile.dart"></script> |
| </polymer-element> |
