| OLD | NEW |
| 1 <head> | 1 <head> |
| 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="nav_bar.html"> | 4 <link rel="import" href="nav_bar.html"> |
| 4 <link rel="import" href="observatory_element.html"> | 5 <link rel="import" href="observatory_element.html"> |
| 5 <link rel="import" href="sliding_checkbox.html"> | 6 <link rel="import" href="sliding_checkbox.html"> |
| 6 </head> | 7 </head> |
| 7 <polymer-element name="isolate-profile" extends="observatory-element"> | 8 <polymer-element name="isolate-profile" extends="observatory-element"> |
| 8 <template> | 9 <template> |
| 10 <link rel="stylesheet" href="css/shared.css" /> |
| 9 <nav-bar> | 11 <nav-bar> |
| 10 <top-nav-menu></top-nav-menu> | 12 <top-nav-menu></top-nav-menu> |
| 11 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> | 13 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> |
| 12 <nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu> | 14 <nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu> |
| 13 <nav-refresh callback="{{ refresh }}"></nav-refresh> | 15 <nav-refresh callback="{{ refresh }}"></nav-refresh> |
| 14 </nav-bar> | 16 </nav-bar> |
| 15 <style> | 17 <style> |
| 16 .content { | 18 .table { |
| 17 padding-left: 10%; | 19 border-collapse: collapse!important; |
| 18 font: 400 14px 'Montserrat', sans-serif; | 20 width: 100%; |
| 21 margin-bottom: 20px |
| 19 } | 22 } |
| 20 h1 { | 23 .table thead > tr > th, |
| 21 font: 400 18px 'Montserrat', sans-serif; | 24 .table tbody > tr > th, |
| 25 .table tfoot > tr > th, |
| 26 .table thead > tr > td, |
| 27 .table tbody > tr > td, |
| 28 .table tfoot > tr > td { |
| 29 padding: 8px; |
| 30 vertical-align: top; |
| 22 } | 31 } |
| 23 .member, .memberHeader { | 32 .table thead > tr > th { |
| 24 vertical-align: top; | 33 vertical-align: bottom; |
| 25 padding: 3px 0 3px 1em; | 34 text-align: left; |
| 26 font: 400 14px 'Montserrat', sans-serif; | 35 border-bottom:2px solid #ddd; |
| 27 } | 36 } |
| 28 .monospace { | 37 |
| 29 font-family: consolas, courier, monospace; | 38 tr:hover > td { |
| 30 font-size: 1em; | 39 background-color: #FFF3E3; |
| 31 line-height: 1.2em; | |
| 32 white-space: nowrap; | |
| 33 } | 40 } |
| 41 .rowColor0 { |
| 42 background-color: #FFE9CC; |
| 43 } |
| 44 .rowColor1 { |
| 45 background-color: #FFDEB2; |
| 46 } |
| 47 .rowColor2 { |
| 48 background-color: #FFD399; |
| 49 } |
| 50 .rowColor3 { |
| 51 background-color: #FFC87F; |
| 52 } |
| 53 .rowColor4 { |
| 54 background-color: #FFBD66; |
| 55 } |
| 56 .rowColor5 { |
| 57 background-color: #FFB24C; |
| 58 } |
| 59 .rowColor6 { |
| 60 background-color: #FFA733; |
| 61 } |
| 62 .rowColor7 { |
| 63 background-color: #FF9C19; |
| 64 } |
| 65 .rowColor8 { |
| 66 background-color: #FF9100; |
| 67 } |
| 68 |
| 69 .tooltip { |
| 70 display: block; |
| 71 position: absolute; |
| 72 visibility: hidden; |
| 73 opacity: 0; |
| 74 transition: visibility 0s linear 0.5s; |
| 75 transition: opacity .4s ease-in-out; |
| 76 } |
| 77 |
| 78 tr:hover .tooltip { |
| 79 display: block; |
| 80 position: absolute; |
| 81 top: 100%; |
| 82 right: 100%; |
| 83 visibility: visible; |
| 84 z-index: 999; |
| 85 width: 400px; |
| 86 color: #ffffff; |
| 87 background-color: #0489c3; |
| 88 border-top-right-radius: 8px; |
| 89 border-top-left-radius: 8px; |
| 90 border-bottom-right-radius: 8px; |
| 91 border-bottom-left-radius: 8px; |
| 92 transition: visibility 0s linear 0.5s; |
| 93 transition: opacity .4s ease-in-out; |
| 94 opacity: 1; |
| 95 } |
| 96 |
| 97 .white { |
| 98 color: #ffffff; |
| 99 } |
| 100 |
| 34 </style> | 101 </style> |
| 35 <div class="content"> | 102 <div class="content"> |
| 36 <h1>Sampled CPU profile</h1> | 103 <h1>Sampled CPU profile</h1> |
| 37 <table> | 104 <div class="memberList"> |
| 38 <tr> | 105 <div class="memberItem"> |
| 39 <td class="memberHeader">Timestamp</td> | 106 <div class="memberName">Timestamp</div> |
| 40 <td class="member">{{ refreshTime }}</td> | 107 <div class="memberValue">{{ refreshTime }}</div> |
| 41 </tr> | 108 </div> |
| 42 <tr> | 109 <div class="memberItem"> |
| 43 <td class="memberHeader">Sample count</td> | 110 <div class="memberName">Time span</div> |
| 44 <td class="member">{{ sampleCount }}</td> | 111 <div class="memberValue">{{ timeSpan }}</div> |
| 45 </tr> | 112 </div> |
| 46 <tr> | 113 <div class="memberItem"> |
| 47 <td class="memberHeader">Sample rate</td> | 114 <div class="memberName">Sample count</div> |
| 48 <td class="member">{{ sampleRate }} Hz</td> | 115 <div class="memberValue">{{ sampleCount }}</div> |
| 49 </tr> | 116 </div> |
| 50 <tr> | 117 <div class="memberItem"> |
| 51 <td class="memberHeader">Sample depth</td> | 118 <div class="memberName">Sample rate</div> |
| 52 <td class="member">{{ sampleDepth }} stack frames</td> | 119 <div class="memberValue">{{ sampleRate }} Hz</div> |
| 53 </tr> | 120 </div> |
| 54 <tr> | 121 <div class="memberItem"> |
| 55 <td class="memberHeader">Call graph tree</td> | 122 <div class="memberName">Sample depth</div> |
| 56 <td class="member"> | 123 <div class="memberValue">{{ sampleDepth }} stack frames</div> |
| 57 <input type="checkbox" checked="{{ callGraphChecked }}"> | 124 </div> |
| 58 </td> | 125 <div class="memberItem"> |
| 59 <tr> | 126 <div class="memberName">Display cutoff</div> |
| 60 <td class="memberHeader">Display cutoff</td> | 127 <div class="memberValue">{{ displayCutoff }}</div> |
| 61 <td class="member">{{ displayCutoff }}</td> | 128 </div> |
| 62 </tr> | 129 <div class="memberItem"> |
| 63 <tr> | 130 <div class="memberName">Tags</div> |
| 64 <td class="memberHeader">Hide tags</td> | 131 <div class="memberValue"> |
| 65 <td class="member"> | 132 <select value="{{tagSelector}}"> |
| 66 <input type="checkbox" checked="{{ hideTagsChecked }}"> | 133 <option value="uv">User > VM</option> |
| 67 </td> | 134 <option value="u">User</option> |
| 68 </tr> | 135 <option value="vu">VM > User</option> |
| 69 </table> | 136 <option value="v">VM</option> |
| 137 <option value="hide">None</option> |
| 138 </select> |
| 139 </div> |
| 140 </div> |
| 141 </div> |
| 70 <hr> | 142 <hr> |
| 71 <table id="tableTree" class="table table-hover"> | 143 <table id="tableTree" class="table"> |
| 72 <thead> | 144 <thead> |
| 73 <tr> | 145 <tr> |
| 74 <th>Method</th> | 146 <th>Method</th> |
| 75 <th>Caller</th> | 147 <th>Self</th> |
| 76 <th>Exclusive</th> | |
| 77 </tr> | 148 </tr> |
| 78 </thead> | 149 </thead> |
| 79 <tbody> | 150 <tbody> |
| 80 <tr template repeat="{{row in tree.rows }}" style="{{}}"> | 151 <tr template repeat="{{row in tree.rows }}" style="{{}}"> |
| 81 <td on-click="{{toggleExpanded}}" | 152 <td on-click="{{toggleExpanded}}" |
| 82 class="{{ coloring(row) }}" | 153 class="{{ coloring(row) }}" |
| 83 style="{{ padding(row) }}"> | 154 style="{{ padding(row) }}"> |
| 84 <span id="expand" style="cursor: pointer;">{{ row.expander }}</spa
n> | 155 <span id="expand" style="cursor: pointer;">{{ row.expander }}</spa
n> |
| 85 <code-ref ref="{{ row.code }}"></code-ref> | 156 <div style="position: relative;display: inline"> |
| 157 {{row.columns[0]}} |
| 158 </div> |
| 159 <function-ref ref="{{ row.code.function }}"></function-ref> |
| 86 </td> | 160 </td> |
| 87 <td class="{{ coloring(row) }}">{{row.columns[0]}}</td> | 161 <td class="{{ coloring(row) }}" style="position: relative"> |
| 88 <td class="{{ coloring(row) }}">{{row.columns[1]}}</td> | 162 {{row.columns[1]}} |
| 163 <div class="tooltip"> |
| 164 <div class="memberList"> |
| 165 <div class="memberItem"> |
| 166 <div class="memberName white">Kind</div> |
| 167 <div class="memberValue white">{{ row.tipKind }}</div> |
| 168 </div> |
| 169 <div class="memberItem"> |
| 170 <div class="memberName white">Percent of Parent</div> |
| 171 <div class="memberValue white">{{ row.tipParent }}</div> |
| 172 </div> |
| 173 <div class="memberItem"> |
| 174 <div class="memberName white">Sample Count</div> |
| 175 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip
Exclusive }})</div> |
| 176 </div> |
| 177 <div class="memberItem"> |
| 178 <div class="memberName white">Approximate Execution Time</div
> |
| 179 <div class="memberValue white">{{ row.tipTime }}</div> |
| 180 </div> |
| 181 </div> |
| 182 </div> |
| 183 </td> |
| 89 </tr> | 184 </tr> |
| 90 </tbody> | 185 </tbody> |
| 91 </table> | 186 </table> |
| 92 </div> | 187 </div> |
| 93 </template> | 188 </template> |
| 94 <script type="application/dart" src="isolate_profile.dart"></script> | 189 <script type="application/dart" src="isolate_profile.dart"></script> |
| 95 </polymer-element> | 190 </polymer-element> |
| OLD | NEW |