Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(112)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: runtime/bin/vmservice/client/lib/src/elements/heap_profile.html

Issue 342513004: Visual refresh of allocation profile page (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('K') | « runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('k') | runtime/bin/vmservice/client/lib/src/elements/instance_ref.html » ('j') | runtime/bin/vmservice/client/lib/src/service/object.dart » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <head> 1 <link rel="import" href="../../../../packages/polymer/polymer.html">
2 <link rel="import" href="class_ref.html"> 2 <link rel="import" href="class_ref.html">
3 <link rel="import" href="observatory_element.html"> 3 <link rel="import" href="observatory_element.html">
4 <link rel="import" href="nav_bar.html"> 4 <link rel="import" href="nav_bar.html">
5 </head> 5
6 <polymer-element name="heap-profile" extends="observatory-element"> 6 <polymer-element name="heap-profile" extends="observatory-element">
7 <template> 7 <template>
8 <link rel="stylesheet" href="css/shared.css"> 8 <link rel="stylesheet" href="css/shared.css">
9 <style> 9 <style>
10 .table { 10 .table {
11 border-collapse: collapse!important; 11 border-collapse: collapse!important;
12 width: 100%;
13 margin-bottom: 20px 12 margin-bottom: 20px
14 table-layout: fixed; 13 table-layout: fixed;
15 } 14 }
16 .table td:nth-of-type(1) { 15 .table td:nth-of-type(1) {
17 width: 30%; 16 width: 30%;
18 } 17 }
19 .th, .td { 18 .th, .td {
20 padding: 8px; 19 padding: 8px;
21 vertical-align: top; 20 vertical-align: top;
22 } 21 }
23 .table thead > tr > th { 22 .table thead > tr > th {
24 vertical-align: bottom; 23 vertical-align: bottom;
25 text-align: left; 24 text-align: left;
26 border-bottom:2px solid #ddd; 25 border-bottom:2px solid #ddd;
27 } 26 }
27 .spacer {
28 width: 16px;
29 }
30 .left-border-spacer {
31 width: 16px;
32 border-left: 1px solid;
33 }
28 .clickable { 34 .clickable {
29 color: #0489c3; 35 color: #0489c3;
30 text-decoration: none; 36 text-decoration: none;
31 cursor: pointer; 37 cursor: pointer;
32 } 38 }
33 .clickable:hover { 39 .clickable:hover {
34 text-decoration: underline; 40 text-decoration: underline;
35 cursor: pointer; 41 cursor: pointer;
36 } 42 }
37 #classtable tr:hover > td { 43 #classtable tr:hover > td {
38 background-color: #F4C7C3; 44 background-color: #F4C7C3;
39 } 45 }
40 </style> 46 </style>
41 <nav-bar> 47 <nav-bar>
42 <top-nav-menu></top-nav-menu> 48 <top-nav-menu></top-nav-menu>
43 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> 49 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
44 <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anc hor="heap profile" last="{{ true }}"></nav-menu> 50 <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anc hor="allocation profile" last="{{ true }}"></nav-menu>
45 <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></n av-refresh> 51 <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></n av-refresh>
46 <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh> 52 <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
47 <nav-refresh callback="{{ refresh }}"></nav-refresh> 53 <nav-refresh callback="{{ refresh }}"></nav-refresh>
48 <nav-control></nav-control> 54 <nav-control></nav-control>
49 </nav-bar> 55 </nav-bar>
50 56 <div class="content">
51 <div class="flex-row"> 57 <h1>Allocation Profile</h1>
52 <div id="newPieChart" class="flex-item-fixed-4-12" style="height: 400px"> 58 <br>
59 <div class="memberList">
60 <div class="memberItem">
61 <div class="memberName">last forced GC at</div>
62 <div class="memberValue">{{ lastServiceGC }}</div>
63 </div>
64 <div class="memberItem">
65 <div class="memberName">last accumulator reset at</div>
66 <div class="memberValue">{{ lastAccumulatorReset }}</div>
67 </div>
53 </div> 68 </div>
54 <div id="newStatus" class="flex-item-fixed-2-12"> 69 </div>
55 <div class="memberList"> 70 <hr>
71 <div class="content-centered-big">
72 <div class="flex-row">
73 <div id="newSpace" class="flex-item-50-percent">
74 <h2>New Generation</h2>
75 <br>
76 <div class="memberList">
77 <div class="memberItem">
78 <div class="memberName">used</div>
79 <div class="memberValue">
80 {{ isolate.newSpace.used | formatSize }}
81 of
82 {{ isolate.newSpace.capacity | formatSize }}
83 </div>
84 </div>
85 <div class="memberItem">
86 <div class="memberName">external</div>
87 <div class="memberValue">
88 {{ isolate.newSpace.external | formatSize }}
89 </div>
90 </div>
56 <div class="memberItem"> 91 <div class="memberItem">
57 <div class="memberName">Collections</div> 92 <div class="memberName">Collections</div>
58 <div class="memberValue">{{ formattedCollections(true) }}</div> 93 <div class="memberValue">{{ formattedCollections(true) }}</div>
59 </div> 94 </div>
60 <div class="memberItem"> 95 <div class="memberItem">
61 <div class="memberName">Average Collection Time</div> 96 <div class="memberName">Average Collection Time</div>
62 <div class="memberValue">{{ formattedAverage(true) }}</div> 97 <div class="memberValue">{{ formattedAverage(true) }}</div>
63 </div> 98 </div>
64 <div class="memberItem"> 99 <div class="memberItem">
65 <div class="memberName">Cumulative Collection Time</div> 100 <div class="memberName">Cumulative Collection Time</div>
66 <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</d iv> 101 <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</d iv>
67 </div> 102 </div>
103 </div>
104 <div id="newPieChart" style="height: 300px"></div>
68 </div> 105 </div>
69 </div> 106 <div id="oldSpace" class="flex-item-50-percent">
70 <div id="oldPieChart" class="flex-item-fixed-4-12" style="height: 400px"> 107 <h2>Old Generation</h2>
71 </div> 108 <br>
72 <div id="oldStatus" class="flex-item-fixed-2-12"> 109 <div class="memberList">
73 <div class="memberList"> 110 <div class="memberItem">
111 <div class="memberName">used</div>
112 <div class="memberValue">
113 {{ isolate.oldSpace.used | formatSize }}
114 of
115 {{ isolate.oldSpace.capacity | formatSize }}
116 </div>
117 </div>
118 <div class="memberItem">
119 <div class="memberName">external</div>
120 <div class="memberValue">
121 {{ isolate.oldSpace.external | formatSize }}
122 </div>
123 </div>
74 <div class="memberItem"> 124 <div class="memberItem">
75 <div class="memberName">Collections</div> 125 <div class="memberName">Collections</div>
76 <div class="memberValue">{{ formattedCollections(false) }}</div> 126 <div class="memberValue">{{ formattedCollections(false) }}</div>
77 </div> 127 </div>
78 <div class="memberItem"> 128 <div class="memberItem">
79 <div class="memberName">Average Collection Time</div> 129 <div class="memberName">Average Collection Time</div>
80 <div class="memberValue">{{ formattedAverage(false) }}</div> 130 <div class="memberValue">{{ formattedAverage(false) }}</div>
81 </div> 131 </div>
82 <div class="memberItem"> 132 <div class="memberItem">
83 <div class="memberName">Cumulative Collection Time</div> 133 <div class="memberName">Cumulative Collection Time</div>
84 <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</ div> 134 <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</ div>
85 </div> 135 </div>
136 </div>
137 <div id="oldPieChart" style="height: 300px"></div>
86 </div> 138 </div>
87 </div> 139 </div>
88 </div> 140 </div>
89 <div class="flex-row"> 141 <br>
90 <table id="classtable" class="flex-item-fixed-12-12 table"> 142 <hr>
91 <thead> 143 <div class="content-centered-big">
144 <table id="classtable" class="flex-item-100-percent table">
145 <thead id="classTableHead">
92 <tr> 146 <tr>
93 <th on-click="{{changeSort}}" class="clickable" title="Class">{{ class Table.getColumnLabel(0) }}</th> 147 <th on-click="{{changeSort}}" class="clickable" title="Class">{{ class Table.getColumnLabel(0) }}</th>
94 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(1) }}</th> 148 <th class="spacer"></th>
95 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(2) }}</th> 149 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
96 <th on-click="{{changeSort}}" class="clickable" title="New Current Siz e">{{ classTable.getColumnLabel(3) }}</th> 150 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
97 <th on-click="{{changeSort}}" class="clickable" title="New Current Ins tances">{{ classTable.getColumnLabel(4) }}</th> 151 <th on-click="{{changeSort}}" class="clickable" title="New Current Siz e">{{ classTable.getColumnLabel(4) }}</th>
98 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(5) }}</th> 152 <th on-click="{{changeSort}}" class="clickable" title="New Current Ins tances">{{ classTable.getColumnLabel(5) }}</th>
99 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(6) }}</th> 153 <th class="spacer"></th>
100 <th on-click="{{changeSort}}" class="clickable" title="Old Current Siz e">{{ classTable.getColumnLabel(7) }}</th> 154 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
101 <th on-click="{{changeSort}}" class="clickable" title="Old Current Ins tances">{{ classTable.getColumnLabel(8) }}</th> 155 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
156 <th on-click="{{changeSort}}" class="clickable" title="Old Current Siz e">{{ classTable.getColumnLabel(9) }}</th>
157 <th on-click="{{changeSort}}" class="clickable" title="Old Current Ins tances">{{ classTable.getColumnLabel(10) }}</th>
102 </tr> 158 </tr>
103 </thead> 159 </thead>
104 <tbody> 160 <tbody id="classTableBody">
105 <tr template repeat="{{row in classTable.sortedRows }}">
106 <td><class-ref ref="{{ classTable.getValue(row, 0) }}"></class-ref></t d>
107 <td title="{{ classTable.getValue(row, 1) }}">{{ classTable.getFormatt edValue(row, 1) }}</td>
108 <td title="{{ classTable.getValue(row, 2) }}">{{ classTable.getFormatt edValue(row, 2) }}</td>
109 <td title="{{ classTable.getValue(row, 3) }}">{{ classTable.getFormatt edValue(row, 3) }}</td>
110 <td title="{{ classTable.getValue(row, 4) }}">{{ classTable.getFormatt edValue(row, 4) }}</td>
111 <td title="{{ classTable.getValue(row, 5) }}">{{ classTable.getFormatt edValue(row, 5) }}</td>
112 <td title="{{ classTable.getValue(row, 6) }}">{{ classTable.getFormatt edValue(row, 6) }}</td>
113 <td title="{{ classTable.getValue(row, 7) }}">{{ classTable.getFormatt edValue(row, 7) }}</td>
114 <td title="{{ classTable.getValue(row, 8) }}">{{ classTable.getFormatt edValue(row, 8) }}</td>
115 </tr>
116 </tbody> 161 </tbody>
117 </table> 162 </table>
163 <br><br><br>
164 <br><br><br>
118 </div> 165 </div>
119 </template> 166 </template>
120 <script type="application/dart" src="heap_profile.dart"></script>
121 </polymer-element> 167 </polymer-element>
168
169 <script type="application/dart" src="heap_profile.dart"></script>
OLDNEW
« runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('K') | « runtime/bin/vmservice/client/lib/src/elements/heap_profile.dart ('k') | runtime/bin/vmservice/client/lib/src/elements/instance_ref.html » ('j') | runtime/bin/vmservice/client/lib/src/service/object.dart » ('J')

Powered by Google App Engine
This is Rietveld 408576698