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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 201213004: Use VM tag in profile and add stack trace trie (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 9 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/isolate_profile.dart ('K') | « runtime/bin/vmservice/client/lib/src/elements/isolate_profile.dart ('k') | runtime/bin/vmservice/client/lib/src/service/cache.dart » ('j') | runtime/bin/vmservice/client/lib/src/service/cache.dart » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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="nav_bar.html"> 3 <link rel="import" href="nav_bar.html">
4 <link rel="import" href="observatory_element.html"> 4 <link rel="import" href="observatory_element.html">
5 </head> 5 </head>
6 <polymer-element name="isolate-profile" extends="observatory-element"> 6 <polymer-element name="isolate-profile" extends="observatory-element">
7 <template> 7 <template>
8 <nav-bar> 8 <nav-bar>
9 <top-nav-menu></top-nav-menu> 9 <top-nav-menu></top-nav-menu>
10 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> 10 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
11 <nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu> 11 <nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu>
12 <nav-refresh callback="{{ refresh }}"></nav-refresh> 12 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13 </nav-bar> 13 </nav-bar>
14 <div class="row"> 14 <style>
15 <div class="col-md-12"> 15 .content {
16 <span>Top</span> 16 padding-left: 10%;
17 <select selectedIndex="{{methodCountSelected}}" value="{{methodCounts[me thodCountSelected]}}"> 17 font: 400 14px 'Montserrat', sans-serif;
18 <option template repeat="{{count in methodCounts}}">{{count}}</option> 18 }
19 </select> 19 h1 {
20 <span>exclusive methods</span> 20 font: 400 18px 'Montserrat', sans-serif;
21 </div> 21 }
22 .member, .memberHeader {
23 vertical-align: top;
24 padding: 3px 0 3px 1em;
25 font: 400 14px 'Montserrat', sans-serif;
26 }
27 .monospace {
28 font-family: consolas, courier, monospace;
29 font-size: 1em;
30 line-height: 1.2em;
31 white-space: nowrap;
32 }
33 .tree-mode-switch {
turnidge 2014/03/17 21:19:31 Some comments in the css would help me understand
Cutch 2014/03/18 14:39:19 Done.
34 position: relative; width: 121px;
turnidge 2014/03/17 21:19:31 Can you put one property per line?
Cutch 2014/03/18 14:39:19 Done.
35 -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
36 }
37 .tree-mode-switch-checkbox {
38 display: none;
39 }
40 .tree-mode-switch-label {
41 display: block; overflow: hidden; cursor: pointer;
42 border: 2px solid #999999; border-radius: 15px;
43 }
44 .tree-mode-switch-inner {
45 width: 200%; margin-left: -100%;
46 -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
47 -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0 s;
48 }
49 .tree-mode-switch-inner:before, .tree-mode-switch-inner:after {
50 float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
51 font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif ; font-weight: bold;
turnidge 2014/03/17 21:19:31 We use a different font (Montserrat, etc.) above.
Cutch 2014/03/18 14:39:19 Done.
52 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
53 }
54 .tree-mode-switch-inner:before {
55 content: "Call graph";
turnidge 2014/03/17 21:19:31 I think that injecting content using before/after
Cutch 2014/03/18 14:39:19 Done.
56 padding-left: 10px;
57 background-color: #0489C3; color: #FFFFFF;
58 }
59 .tree-mode-switch-inner:after {
60 content: "Stack trace";
61 padding-right: 10px;
62 background-color: #EEEEEE; color: #999999;
63 text-align: right;
64 }
65 .tree-mode-switch-switch {
66 width: 14px; margin: 8px;
67 background: #FFFFFF;
68 border: 2px solid #999999; border-radius: 15px;
69 position: absolute; top: 0; bottom: 0; right: 87px;
70 -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease- in 0s;
71 -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
72 }
73 .tree-mode-switch-checkbox:checked + .tree-mode-switch-label .tree-mode-sw itch-inner {
74 margin-left: 0;
75 }
76 .tree-mode-switch-checkbox:checked + .tree-mode-switch-label .tree-mode-sw itch-switch {
77 right: 0px;
78 }
79
80
81 .tag-mode-switch {
turnidge 2014/03/17 21:19:31 Can .tree-mode-switch and .tag-mode-switch (and th
82 position: relative; width: 121px;
83 -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
84 }
85 .tag-mode-switch-checkbox {
86 display: none;
87 }
88 .tag-mode-switch-label {
89 display: block; overflow: hidden; cursor: pointer;
90 border: 2px solid #999999; border-radius: 15px;
91 }
92 .tag-mode-switch-inner {
93 width: 200%; margin-left: -100%;
94 -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
95 -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0 s;
96 }
97 .tag-mode-switch-inner:before, .tag-mode-switch-inner:after {
98 float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
99 font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif ; font-weight: bold;
100 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
101 }
102 .tag-mode-switch-inner:before {
103 content: "Hidden";
104 padding-left: 10px;
105 background-color: #0489C3; color: #FFFFFF;
106 }
107 .tag-mode-switch-inner:after {
108 content: "Displayed";
109 padding-right: 10px;
110 background-color: #EEEEEE; color: #999999;
111 text-align: right;
112 }
113 .tag-mode-switch-switch {
114 width: 14px; margin: 8px;
115 background: #FFFFFF;
116 border: 2px solid #999999; border-radius: 15px;
117 position: absolute; top: 0; bottom: 0; right: 87px;
118 -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease- in 0s;
119 -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
120 }
121 .tag-mode-switch-checkbox:checked + .tag-mode-switch-label .tag-mode-switc h-inner {
122 margin-left: 0;
123 }
124 .tag-mode-switch-checkbox:checked + .tag-mode-switch-label .tag-mode-switc h-switch {
125 right: 0px;
126 }
127
128 </style>
129 <div class="content">
130 <h1>Sampled CPU profile</h1>
131 <table>
132 <tr>
133 <td class="memberHeader">Timestamp</td>
134 <td class="member">{{ refreshTime }}</td>
135 </tr>
136 <tr>
137 <td class="memberHeader">Sample count</td>
138 <td class="member">{{ sampleCount }}</td>
139 </tr>
140 <tr>
141 <td class="memberHeader">Sample rate</td>
142 <td class="member">{{ sampleRate }} Hz</td>
143 </tr>
144 <tr>
145 <td class="memberHeader">Sample depth</td>
146 <td class="member">{{ sampleDepth }} stack frames</td>
147 </tr>
148 <tr>
149 <td class="memberHeader">Tree mode</td>
150 <td class="member">
151 <div class="tree-mode-switch">
152 <input type="checkbox" checked="{{ callGraphChecked }}" name="tree-m ode-switch" class="tree-mode-switch-checkbox" id="mytree-mode-switch" checked>
153 <label class="tree-mode-switch-label" for="mytree-mode-switch">
154 <div class="tree-mode-switch-inner"></div>
155 <div class="tree-mode-switch-switch"></div>
156 </label>
157 </div>
158 </td>
159 <tr>
160 <td class="memberHeader">Display cutoff</td>
161 <td class="member">{{ displayCutoff }}</td>
162 </tr>
163 <tr>
164 <td class="memberHeader">Tags</td>
165 <td class="member">
166 <div class="tag-mode-switch">
167 <input type="checkbox" checked="{{ hideTagsChecked }}" name="tag-mod e-switch" class="tag-mode-switch-checkbox" id="mytag-mode-switch">
168 <label class="tag-mode-switch-label" for="mytag-mode-switch">
169 <div class="tag-mode-switch-inner"></div>
170 <div class="tag-mode-switch-switch"></div>
171 </label>
172 </div>
173 </td>
174 </tr>
175 </table>
176 <hr>
177 <table id="tableTree" class="table table-hover">
178 <thead>
179 <tr>
180 <th>Method</th>
181 <th>Caller</th>
182 <th>Exclusive</th>
183 </tr>
184 </thead>
185 <tbody>
186 <tr template repeat="{{row in tree.rows }}" style="{{}}">
187 <td on-click="{{toggleExpanded}}"
188 class="{{ coloring(row) }}"
189 style="{{ padding(row) }}">
190 <code-ref ref="{{ row.code }}"></code-ref>
191 </td>
192 <td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
193 <td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
194 </tr>
195 </tbody>
196 </table>
22 </div> 197 </div>
23 <div class="row">
24 <div class="col-md-12">
25 <p>Refreshed at {{ refreshTime }} with {{ sampleCount }} samples.</p>
26 </div>
27 </div>
28 <table id="tableTree" class="table table-hover">
29 <thead>
30 <tr>
31 <th>Method</th>
32 <th>Exclusive</th>
33 <th>Caller</th>
34 </tr>
35 </thead>
36 <tbody>
37 <tr template repeat="{{row in tree.rows }}" style="{{}}">
38 <td on-click="{{toggleExpanded}}"
39 class="{{ coloring(row) }}"
40 style="{{ padding(row) }}">
41 <code-ref ref="{{ row.code }}"></code-ref>
42 </td>
43 <td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
44 <td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
45 </tr>
46 </tbody>
47 </table>
48 </template> 198 </template>
49 <script type="application/dart" src="isolate_profile.dart"></script> 199 <script type="application/dart" src="isolate_profile.dart"></script>
50 </polymer-element> 200 </polymer-element>
OLDNEW
« runtime/bin/vmservice/client/lib/src/elements/isolate_profile.dart ('K') | « runtime/bin/vmservice/client/lib/src/elements/isolate_profile.dart ('k') | runtime/bin/vmservice/client/lib/src/service/cache.dart » ('j') | runtime/bin/vmservice/client/lib/src/service/cache.dart » ('J')

Powered by Google App Engine
This is Rietveld 408576698