| OLD | NEW |
|---|
| (Empty) |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 | |
| 3 <polymer-element name="heap-snapshot"> | |
| 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('/heap-snapshot', isolate) }}" anchor="heap snap
shot" last="{{ true }}"></nav-menu> | |
| 11 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
| 12 <nav-notify notifications="{{ app.notifications }}"></nav-notify> | |
| 13 </nav-bar> | |
| 14 <style> | |
| 15 /* general */ | |
| 16 .well { | |
| 17 background-color: #ECECEC; | |
| 18 padding: 0.2em; | |
| 19 } | |
| 20 .center { | |
| 21 align-items: center; | |
| 22 justify-content: center; | |
| 23 } | |
| 24 | |
| 25 /* status messages */ | |
| 26 .statusMessage { | |
| 27 font-size: 150%; | |
| 28 font-weight: bold; | |
| 29 } | |
| 30 .statusBox { | |
| 31 height: 100%; | |
| 32 padding: 1em; | |
| 33 } | |
| 34 | |
| 35 /* tables */ | |
| 36 .table { | |
| 37 border-collapse: collapse!important; | |
| 38 table-layout: fixed; | |
| 39 height: 100%; | |
| 40 } | |
| 41 .th, .td { | |
| 42 padding: 8px; | |
| 43 vertical-align: top; | |
| 44 } | |
| 45 .table thead > tr > th { | |
| 46 vertical-align: bottom; | |
| 47 text-align: left; | |
| 48 border-bottom:2px solid #ddd; | |
| 49 } | |
| 50 .spacer { | |
| 51 width: 16px; | |
| 52 } | |
| 53 .left-border-spacer { | |
| 54 width: 16px; | |
| 55 border-left: 1px solid; | |
| 56 } | |
| 57 .clickable { | |
| 58 color: #0489c3; | |
| 59 text-decoration: none; | |
| 60 cursor: pointer; | |
| 61 min-width: 8em; | |
| 62 } | |
| 63 .clickable:hover { | |
| 64 text-decoration: underline; | |
| 65 cursor: pointer; | |
| 66 } | |
| 67 tr:hover:not(.focused) > td { | |
| 68 background-color: #FAFAFA; | |
| 69 } | |
| 70 .focused { | |
| 71 background-color: #F4C7C3; | |
| 72 } | |
| 73 .scroll { | |
| 74 overflow: scroll; | |
| 75 } | |
| 76 .outlined { | |
| 77 -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 78 -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 79 box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75); | |
| 80 margin: 4px; | |
| 81 } | |
| 82 .centered { | |
| 83 margin-left: auto; | |
| 84 margin-right: auto; | |
| 85 justify-content: center; | |
| 86 } | |
| 87 .full-height { | |
| 88 height: 100%; | |
| 89 } | |
| 90 .mostly-full-height { | |
| 91 height: 80%; | |
| 92 } | |
| 93 .full-width { | |
| 94 width: 100%; | |
| 95 } | |
| 96 .focused-function-label { | |
| 97 flex: 0 1 auto; | |
| 98 margin-left: auto; | |
| 99 margin-right: auto; | |
| 100 justify-content: center; | |
| 101 } | |
| 102 .call-table { | |
| 103 flex: 1 1 auto; | |
| 104 } | |
| 105 | |
| 106 .tree { | |
| 107 border-spacing: 0px; | |
| 108 width: 100%; | |
| 109 margin-bottom: 20px | |
| 110 vertical-align: middle; | |
| 111 } | |
| 112 | |
| 113 .tree tbody tr { | |
| 114 animation: fadeIn 0.5s; | |
| 115 -moz-animation: fadeIn 0.5s; | |
| 116 -webkit-animation: fadeIn 0.5s; | |
| 117 } | |
| 118 | |
| 119 .tree tbody tr:hover { | |
| 120 background-color: #FAFAFA; | |
| 121 } | |
| 122 | |
| 123 .tree tr td:first-child, | |
| 124 .tree tr th:first-child { | |
| 125 width: 100%; | |
| 126 } | |
| 127 | |
| 128 .tree thead > tr > th { | |
| 129 padding: 8px; | |
| 130 vertical-align: bottom; | |
| 131 text-align: left; | |
| 132 border-bottom: 1px solid #ddd; | |
| 133 } | |
| 134 </style> | |
| 135 <div class="content-centered-big"> | |
| 136 <h1>Heap Snapshot (Experimental)</h1> | |
| 137 <hr> | |
| 138 <template if="{{ state != 'Loaded' }}"> | |
| 139 <div class="statusBox shadow center"> | |
| 140 <div class="statusMessage">{{state}}</div> | |
| 141 </div> | |
| 142 </template> | |
| 143 <template if="{{ state == 'Loaded' }}"> | |
| 144 <div class="memberList"> | |
| 145 <div class="memberItem"> | |
| 146 <div class="memberName">Refreshed at </div> | |
| 147 <div class="memberValue">{{ snapshot.timeStamp }}</div> | |
| 148 </div> | |
| 149 <div class="memberItem"> | |
| 150 <div class="memberName">Objects </div> | |
| 151 <div class="memberValue">{{ snapshot.graph.vertexCount }}</div> | |
| 152 </div> | |
| 153 <div class="memberItem"> | |
| 154 <div class="memberName">References </div> | |
| 155 <div class="memberValue">{{ snapshot.graph.edgeCount }}</div> | |
| 156 </div> | |
| 157 <div class="memberItem"> | |
| 158 <div class="memberName">Size </div> | |
| 159 <div class="memberValue">{{ snapshot.graph.size | formatSize }}</div> | |
| 160 </div> | |
| 161 <div class="memberItem"> | |
| 162 <div class="memberName">Analysis </div> | |
| 163 <div class="memberValue"> | |
| 164 <select value="{{analysisSelector}}"> | |
| 165 <option value="DominatorTree">Dominator tree</option> | |
| 166 <option value="MergeByClass">Group by class</option> | |
| 167 </select> | |
| 168 </div> | |
| 169 </div> | |
| 170 </div> | |
| 171 <template if="{{analysisSelector == 'DominatorTree'}}"><p>In a heap domina
tor tree, an object X is a parent of object Y if every path from the root to Y g
oes through X. This allows you to find "choke points" that are holding onto a lo
t memory. If an object becomes garbage, all its children in the dominator tree b
ecome garbage as well. The retained size of an object is the sum of the retained
sizes of its children in the dominator tree plus its own shallow size, and is t
he amount of memory that would be freed if the object became garbage.</p></templ
ate> | |
| 172 </template> | |
| 173 </div> | |
| 174 <br> | |
| 175 <div class="content-centered-big"> | |
| 176 <div class="tableWell shadow"> | |
| 177 <table class="full-width tree"> | |
| 178 <thead id="treeHeader"> | |
| 179 <tr> | |
| 180 <th> | |
| 181 <template if="{{analysisSelector == 'DominatorTree'}}">Object</templ
ate> | |
| 182 <template if="{{analysisSelector == 'MergeByClass'}}">Class</templat
e> | |
| 183 </th> | |
| 184 <th style="white-space: nowrap"> | |
| 185 <template if="{{analysisSelector == 'DominatorTree'}}">Retained Size
</template> | |
| 186 <template if="{{analysisSelector == 'MergeByClass'}}">Shallow Size</
template> | |
| 187 </th> | |
| 188 </tr> | |
| 189 </thead> | |
| 190 <tbody id="treeBody"></tbody> | |
| 191 </table> | |
| 192 </div> | |
| 193 </div> | |
| 194 <view-footer></view-footer> | |
| 195 </template> | |
| 196 </polymer-element> | |
| 197 | |
| 198 <script type="application/dart" src="heap_snapshot.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2266343002:
Converted Observatory heap-snapshot element (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master