| OLD | NEW |
|---|
| (Empty) |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 | |
| 3 <polymer-element name="cpu-profile-table"> | |
| 4 <template> | |
| 5 <link rel="stylesheet" href="css/shared.css"> | |
| 6 <nav-bar> | |
| 7 <top-nav-menu></top-nav-menu> | |
| 8 <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu> | |
| 9 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> | |
| 10 <nav-menu link="{{ makeLink('/profiler-table', isolate) }}" anchor="cpu pr
ofile (table)" last="{{ true }}"></nav-menu> | |
| 11 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
| 12 <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh> | |
| 13 <nav-notify notifications="{{ app.notifications }}"></nav-notify> | |
| 14 </nav-bar> | |
| 15 <style> | |
| 16 /* general */ | |
| 17 .well { | |
| 18 background-color: #ECECEC; | |
| 19 padding: 0.2em; | |
| 20 } | |
| 21 .center { | |
| 22 align-items: center; | |
| 23 justify-content: center; | |
| 24 } | |
| 25 | |
| 26 /* status messages */ | |
| 27 .statusMessage { | |
| 28 font-size: 150%; | |
| 29 font-weight: bold; | |
| 30 } | |
| 31 .statusBox { | |
| 32 height: 100%; | |
| 33 padding: 1em; | |
| 34 } | |
| 35 | |
| 36 /* tables */ | |
| 37 .table { | |
| 38 border-collapse: collapse!important; | |
| 39 table-layout: fixed; | |
| 40 height: 100%; | |
| 41 } | |
| 42 .th, .td { | |
| 43 padding: 8px; | |
| 44 vertical-align: top; | |
| 45 } | |
| 46 .table thead > tr > th { | |
| 47 vertical-align: bottom; | |
| 48 text-align: left; | |
| 49 border-bottom:2px solid #ddd; | |
| 50 } | |
| 51 .spacer { | |
| 52 width: 16px; | |
| 53 } | |
| 54 .left-border-spacer { | |
| 55 width: 16px; | |
| 56 border-left: 1px solid; | |
| 57 } | |
| 58 .clickable { | |
| 59 color: #0489c3; | |
| 60 text-decoration: none; | |
| 61 cursor: pointer; | |
| 62 min-width: 8em; | |
| 63 } | |
| 64 .clickable:hover { | |
| 65 text-decoration: underline; | |
| 66 cursor: pointer; | |
| 67 } | |
| 68 tr:hover:not(.focused) > td { | |
| 69 background-color: #FAFAFA; | |
| 70 } | |
| 71 .focused { | |
| 72 background-color: #F4C7C3; | |
| 73 } | |
| 74 .scroll { | |
| 75 overflow: scroll; | |
| 76 } | |
| 77 .outlined { | |
| 78 -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 79 -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 80 box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 81 margin: 4px; | |
| 82 } | |
| 83 .centered { | |
| 84 margin-left: auto; | |
| 85 margin-right: auto; | |
| 86 justify-content: center; | |
| 87 } | |
| 88 .full-height { | |
| 89 height: 100%; | |
| 90 } | |
| 91 .mostly-full-height { | |
| 92 height: 80%; | |
| 93 } | |
| 94 .full-width { | |
| 95 width: 100%; | |
| 96 } | |
| 97 .focused-function-label { | |
| 98 flex: 0 1 auto; | |
| 99 margin-left: auto; | |
| 100 margin-right: auto; | |
| 101 justify-content: center; | |
| 102 } | |
| 103 .call-table { | |
| 104 flex: 1 1 auto; | |
| 105 } | |
| 106 | |
| 107 .tree { | |
| 108 border-spacing: 0px; | |
| 109 width: 100%; | |
| 110 margin-bottom: 20px | |
| 111 vertical-align: middle; | |
| 112 } | |
| 113 | |
| 114 .tree tbody tr { | |
| 115 animation: fadeIn 0.5s; | |
| 116 -moz-animation: fadeIn 0.5s; | |
| 117 -webkit-animation: fadeIn 0.5s; | |
| 118 } | |
| 119 | |
| 120 .tree tbody tr:hover { | |
| 121 background-color: #FAFAFA; | |
| 122 } | |
| 123 | |
| 124 .tree tr td:first-child, | |
| 125 .tree tr th:first-child { | |
| 126 width: 100%; | |
| 127 } | |
| 128 | |
| 129 .tree thead > tr > th { | |
| 130 padding: 8px; | |
| 131 vertical-align: bottom; | |
| 132 text-align: left; | |
| 133 border-bottom: 1px solid #ddd; | |
| 134 } | |
| 135 | |
| 136 </style> | |
| 137 <div id="sampleBufferControl"></div> | |
| 138 <br> | |
| 139 <hr> | |
| 140 <div id="main" class="flex-row centered"> | |
| 141 <div class="flex-item-45-percent full-height outlined scroll"> | |
| 142 <table id="main-table" class="flex-item-100-percent table"> | |
| 143 <thead> | |
| 144 <tr> | |
| 145 <th on-click="{{changeSortProfile}}" class="clickable" title="Execut
ing (%)">{{ profileTable.getColumnLabel(0) }}</th> | |
| 146 <th on-click="{{changeSortProfile}}" class="clickable" title="In sta
ck (%)">{{ profileTable.getColumnLabel(1) }}</th> | |
| 147 <th on-click="{{changeSortProfile}}" class="clickable" title="Method
">{{ profileTable.getColumnLabel(2) }}</th> | |
| 148 </tr> | |
| 149 </thead> | |
| 150 <tbody id="profile-table"> | |
| 151 </tbody> | |
| 152 </table> | |
| 153 </div> | |
| 154 <div class="flex-item-45-percent full-height outlined"> | |
| 155 <div class="flex-column full-height"> | |
| 156 <div class="focused-function-label"> | |
| 157 <template if="{{ focusedFunction != null }}"> | |
| 158 <span>Focused on: </span> | |
| 159 <function-ref ref="{{ focusedFunction }}"></function-ref> | |
| 160 </template> | |
| 161 <template if="{{ focusedFunction == null }}"> | |
| 162 <span>No focused function</span> | |
| 163 </template> | |
| 164 </div> | |
| 165 <hr> | |
| 166 <div class="call-table scroll"> | |
| 167 <table class="full-width table"> | |
| 168 <thead> | |
| 169 <tr> | |
| 170 <th on-click="{{changeSortCallers}}" class="clickable" title="Ca
llers (%)">{{ profileCallersTable.getColumnLabel(0) }}</th> | |
| 171 <th on-click="{{changeSortCallers}}" class="clickable" title="Me
thod">{{ profileCallersTable.getColumnLabel(1) }}</th> | |
| 172 </tr> | |
| 173 </thead> | |
| 174 <tbody id="callers-table"> | |
| 175 </tbody> | |
| 176 </table> | |
| 177 </div> | |
| 178 <hr> | |
| 179 <div class="call-table scroll"> | |
| 180 <table class="full-width table"> | |
| 181 <thead> | |
| 182 <tr> | |
| 183 <th on-click="{{changeSortCallees}}" class="clickable" title="Ca
llees (%)">{{ profileCalleesTable.getColumnLabel(0) }}</th> | |
| 184 <th on-click="{{changeSortCallees}}" class="clickable" title="Me
thod">{{ profileCalleesTable.getColumnLabel(1) }}</th> | |
| 185 </tr> | |
| 186 </thead> | |
| 187 <tbody id="callees-table"> | |
| 188 </tbody> | |
| 189 </table> | |
| 190 </div> | |
| 191 </div> | |
| 192 </div> | |
| 193 </div> | |
| 194 <br> | |
| 195 <div id="stackTraceTreeConfig"></div> | |
| 196 <br> | |
| 197 <div class="content-centered-big"> | |
| 198 <div class="focused-function-label"> | |
| 199 <template if="{{ focusedFunction != null }}"> | |
| 200 <span>Filtered tree: </span> | |
| 201 <function-ref ref="{{ focusedFunction }}"></function-ref> | |
| 202 </template> | |
| 203 <template if="{{ focusedFunction == null }}"> | |
| 204 <span>No focused function</span> | |
| 205 </template> | |
| 206 </div> | |
| 207 </div> | |
| 208 <br> | |
| 209 <br> | |
| 210 <div class="flex-row centered"> | |
| 211 <div class="flex-item-90-percent outlined" style="margin: 16px; margin-lef
t: 8px; margin-right: 8px"> | |
| 212 <div id="cpuProfileTree"></div> | |
| 213 </div> | |
| 214 </div> | |
| 215 </template> | |
| 216 </polymer-element> | |
| 217 | |
| 218 <script type="application/dart" src="cpu_profile.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2273993002:
Converted Observatory cpu-profile-table element (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master