OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * TimelineView displays a zoomable and scrollable graph of a number of values | 6 * TimelineView displays a zoomable and scrollable graph of a number of values |
7 * over time. The TimelineView class itself is responsible primarily for | 7 * over time. The TimelineView class itself is responsible primarily for |
8 * updating the TimelineDataSeries its GraphView displays. | 8 * updating the TimelineDataSeries its GraphView displays. |
9 */ | 9 */ |
10 var TimelineView = (function() { | 10 var TimelineView = (function() { |
11 'use strict'; | 11 'use strict'; |
12 | 12 |
13 // We inherit from HorizontalSplitView. | 13 // We inherit from HorizontalSplitView. |
14 var superClass = HorizontalSplitView; | 14 var superClass = HorizontalSplitView; |
15 | 15 |
16 /** | 16 /** |
17 * @constructor | 17 * @constructor |
18 */ | 18 */ |
19 function TimelineView() { | 19 function TimelineView() { |
20 assertFirstConstructorCall(TimelineView); | 20 assertFirstConstructorCall(TimelineView); |
21 | 21 |
22 this.graphView_ = new TimelineGraphView( | 22 this.graphView_ = new TimelineGraphView( |
23 TimelineView.GRAPH_DIV_ID, | 23 TimelineView.GRAPH_DIV_ID, TimelineView.GRAPH_CANVAS_ID, |
24 TimelineView.GRAPH_CANVAS_ID, | 24 TimelineView.SCROLLBAR_DIV_ID, TimelineView.SCROLLBAR_INNER_DIV_ID); |
25 TimelineView.SCROLLBAR_DIV_ID, | |
26 TimelineView.SCROLLBAR_INNER_DIV_ID); | |
27 | 25 |
28 // Call superclass's constructor. | 26 // Call superclass's constructor. |
29 | 27 |
30 var selectionView = new DivView(TimelineView.SELECTION_DIV_ID); | 28 var selectionView = new DivView(TimelineView.SELECTION_DIV_ID); |
31 superClass.call(this, selectionView, this.graphView_); | 29 superClass.call(this, selectionView, this.graphView_); |
32 | 30 |
33 this.selectionDivFullWidth_ = selectionView.getWidth(); | 31 this.selectionDivFullWidth_ = selectionView.getWidth(); |
34 $(TimelineView.SELECTION_TOGGLE_ID).onclick = | 32 $(TimelineView.SELECTION_TOGGLE_ID).onclick = |
35 this.toggleSelectionDiv_.bind(this); | 33 this.toggleSelectionDiv_.bind(this); |
36 | 34 |
(...skipping 30 matching lines...) Expand all Loading... |
67 TimelineView.SELECTION_UL_ID = 'timeline-view-selection-ul'; | 65 TimelineView.SELECTION_UL_ID = 'timeline-view-selection-ul'; |
68 TimelineView.SCROLLBAR_DIV_ID = 'timeline-view-scrollbar-div'; | 66 TimelineView.SCROLLBAR_DIV_ID = 'timeline-view-scrollbar-div'; |
69 TimelineView.SCROLLBAR_INNER_DIV_ID = 'timeline-view-scrollbar-inner-div'; | 67 TimelineView.SCROLLBAR_INNER_DIV_ID = 'timeline-view-scrollbar-inner-div'; |
70 | 68 |
71 TimelineView.OPEN_SOCKETS_ID = 'timeline-view-open-sockets'; | 69 TimelineView.OPEN_SOCKETS_ID = 'timeline-view-open-sockets'; |
72 TimelineView.IN_USE_SOCKETS_ID = 'timeline-view-in-use-sockets'; | 70 TimelineView.IN_USE_SOCKETS_ID = 'timeline-view-in-use-sockets'; |
73 TimelineView.URL_REQUESTS_ID = 'timeline-view-url-requests'; | 71 TimelineView.URL_REQUESTS_ID = 'timeline-view-url-requests'; |
74 TimelineView.DNS_JOBS_ID = 'timeline-view-dns-jobs'; | 72 TimelineView.DNS_JOBS_ID = 'timeline-view-dns-jobs'; |
75 TimelineView.BYTES_RECEIVED_ID = 'timeline-view-bytes-received'; | 73 TimelineView.BYTES_RECEIVED_ID = 'timeline-view-bytes-received'; |
76 TimelineView.BYTES_SENT_ID = 'timeline-view-bytes-sent'; | 74 TimelineView.BYTES_SENT_ID = 'timeline-view-bytes-sent'; |
77 TimelineView.DISK_CACHE_BYTES_READ_ID = | 75 TimelineView.DISK_CACHE_BYTES_READ_ID = 'timeline-view-disk-cache-bytes-read'; |
78 'timeline-view-disk-cache-bytes-read'; | |
79 TimelineView.DISK_CACHE_BYTES_WRITTEN_ID = | 76 TimelineView.DISK_CACHE_BYTES_WRITTEN_ID = |
80 'timeline-view-disk-cache-bytes-written'; | 77 'timeline-view-disk-cache-bytes-written'; |
81 | 78 |
82 // Class used for hiding the colored squares next to the labels for the | 79 // Class used for hiding the colored squares next to the labels for the |
83 // lines. | 80 // lines. |
84 TimelineView.HIDDEN_CLASS = 'timeline-view-hidden'; | 81 TimelineView.HIDDEN_CLASS = 'timeline-view-hidden'; |
85 | 82 |
86 cr.addSingletonGetter(TimelineView); | 83 cr.addSingletonGetter(TimelineView); |
87 | 84 |
88 // Frequency with which we increase update the end date to be the current | 85 // Frequency with which we increase update the end date to be the current |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
171 this.dataSeries_.push(dataSeries); | 168 this.dataSeries_.push(dataSeries); |
172 var listItem = $(listItemId); | 169 var listItem = $(listItemId); |
173 var checkBox = $(listItemId).querySelector('input'); | 170 var checkBox = $(listItemId).querySelector('input'); |
174 | 171 |
175 // Make sure |listItem| is visible, and then use its color for the | 172 // Make sure |listItem| is visible, and then use its color for the |
176 // DataSource. | 173 // DataSource. |
177 listItem.classList.remove(TimelineView.HIDDEN_CLASS); | 174 listItem.classList.remove(TimelineView.HIDDEN_CLASS); |
178 dataSeries.setColor(getComputedStyle(listItem).color); | 175 dataSeries.setColor(getComputedStyle(listItem).color); |
179 | 176 |
180 this.updateDataSeriesVisibility_(dataSeries, listItem, checkBox); | 177 this.updateDataSeriesVisibility_(dataSeries, listItem, checkBox); |
181 checkBox.onclick = this.dataSeriesClicked_.bind(this, dataSeries, | 178 checkBox.onclick = |
182 listItem, checkBox); | 179 this.dataSeriesClicked_.bind(this, dataSeries, listItem, checkBox); |
183 }, | 180 }, |
184 | 181 |
185 /** | 182 /** |
186 * Recreate all DataSeries. Global constants must have been set before | 183 * Recreate all DataSeries. Global constants must have been set before |
187 * this is called. | 184 * this is called. |
188 */ | 185 */ |
189 createDataSeries_: function() { | 186 createDataSeries_: function() { |
190 this.graphRangeInitialized_ = false; | 187 this.graphRangeInitialized_ = false; |
191 this.dataSeries_ = []; | 188 this.dataSeries_ = []; |
192 | 189 |
193 this.addDataSeries_(new SourceCountDataSeries( | 190 this.addDataSeries_( |
194 EventSourceType.SOCKET, | 191 new SourceCountDataSeries( |
195 EventType.SOCKET_ALIVE), | 192 EventSourceType.SOCKET, EventType.SOCKET_ALIVE), |
196 TimelineView.OPEN_SOCKETS_ID); | 193 TimelineView.OPEN_SOCKETS_ID); |
197 | 194 |
198 this.addDataSeries_(new SocketsInUseDataSeries(), | 195 this.addDataSeries_( |
199 TimelineView.IN_USE_SOCKETS_ID); | 196 new SocketsInUseDataSeries(), TimelineView.IN_USE_SOCKETS_ID); |
200 | 197 |
201 this.addDataSeries_(new SourceCountDataSeries( | 198 this.addDataSeries_( |
202 EventSourceType.URL_REQUEST, | 199 new SourceCountDataSeries( |
203 EventType.REQUEST_ALIVE), | 200 EventSourceType.URL_REQUEST, EventType.REQUEST_ALIVE), |
204 TimelineView.URL_REQUESTS_ID); | 201 TimelineView.URL_REQUESTS_ID); |
205 | 202 |
206 this.addDataSeries_(new SourceCountDataSeries( | 203 this.addDataSeries_( |
207 EventSourceType.HOST_RESOLVER_IMPL_JOB, | 204 new SourceCountDataSeries( |
208 EventType.HOST_RESOLVER_IMPL_JOB), | 205 EventSourceType.HOST_RESOLVER_IMPL_JOB, |
209 TimelineView.DNS_JOBS_ID); | 206 EventType.HOST_RESOLVER_IMPL_JOB), |
| 207 TimelineView.DNS_JOBS_ID); |
210 | 208 |
211 this.addDataSeries_(new NetworkTransferRateDataSeries( | 209 this.addDataSeries_( |
212 EventType.SOCKET_BYTES_RECEIVED, | 210 new NetworkTransferRateDataSeries( |
213 EventType.UDP_BYTES_RECEIVED), | 211 EventType.SOCKET_BYTES_RECEIVED, EventType.UDP_BYTES_RECEIVED), |
214 TimelineView.BYTES_RECEIVED_ID); | 212 TimelineView.BYTES_RECEIVED_ID); |
215 | 213 |
216 this.addDataSeries_(new NetworkTransferRateDataSeries( | 214 this.addDataSeries_( |
217 EventType.SOCKET_BYTES_SENT, | 215 new NetworkTransferRateDataSeries( |
218 EventType.UDP_BYTES_SENT), | 216 EventType.SOCKET_BYTES_SENT, EventType.UDP_BYTES_SENT), |
219 TimelineView.BYTES_SENT_ID); | 217 TimelineView.BYTES_SENT_ID); |
220 | 218 |
221 this.addDataSeries_(new DiskCacheTransferRateDataSeries( | 219 this.addDataSeries_( |
222 EventType.ENTRY_READ_DATA), | 220 new DiskCacheTransferRateDataSeries(EventType.ENTRY_READ_DATA), |
223 TimelineView.DISK_CACHE_BYTES_READ_ID); | 221 TimelineView.DISK_CACHE_BYTES_READ_ID); |
224 | 222 |
225 this.addDataSeries_(new DiskCacheTransferRateDataSeries( | 223 this.addDataSeries_( |
226 EventType.ENTRY_WRITE_DATA), | 224 new DiskCacheTransferRateDataSeries(EventType.ENTRY_WRITE_DATA), |
227 TimelineView.DISK_CACHE_BYTES_WRITTEN_ID); | 225 TimelineView.DISK_CACHE_BYTES_WRITTEN_ID); |
228 | 226 |
229 this.graphView_.setDataSeries(this.dataSeries_); | 227 this.graphView_.setDataSeries(this.dataSeries_); |
230 }, | 228 }, |
231 | 229 |
232 /** | 230 /** |
233 * When we receive the constants, create or recreate the DataSeries. | 231 * When we receive the constants, create or recreate the DataSeries. |
234 */ | 232 */ |
235 onReceivedConstants: function(constants) { | 233 onReceivedConstants: function(constants) { |
236 this.createDataSeries_(); | 234 this.createDataSeries_(); |
237 }, | 235 }, |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
272 timeutil.convertTimeTicksToDate(entries[entries.length - 1].time); | 270 timeutil.convertTimeTicksToDate(entries[entries.length - 1].time); |
273 this.graphView_.setDateRange(startDate, endDate); | 271 this.graphView_.setDateRange(startDate, endDate); |
274 this.graphRangeInitialized_ = true; | 272 this.graphRangeInitialized_ = true; |
275 }, | 273 }, |
276 | 274 |
277 toggleSelectionDiv_: function() { | 275 toggleSelectionDiv_: function() { |
278 var toggle = $(TimelineView.SELECTION_TOGGLE_ID); | 276 var toggle = $(TimelineView.SELECTION_TOGGLE_ID); |
279 var shouldCollapse = toggle.className == 'timeline-view-rotateleft'; | 277 var shouldCollapse = toggle.className == 'timeline-view-rotateleft'; |
280 | 278 |
281 setNodeDisplay($(TimelineView.SELECTION_UL_ID), !shouldCollapse); | 279 setNodeDisplay($(TimelineView.SELECTION_UL_ID), !shouldCollapse); |
282 toggle.className = shouldCollapse ? | 280 toggle.className = shouldCollapse ? 'timeline-view-rotateright' : |
283 'timeline-view-rotateright' : 'timeline-view-rotateleft'; | 281 'timeline-view-rotateleft'; |
284 | 282 |
285 // Figure out the appropriate width for the selection div. | 283 // Figure out the appropriate width for the selection div. |
286 var newWidth; | 284 var newWidth; |
287 if (shouldCollapse) { | 285 if (shouldCollapse) { |
288 newWidth = toggle.offsetWidth; | 286 newWidth = toggle.offsetWidth; |
289 } else { | 287 } else { |
290 newWidth = this.selectionDivFullWidth_; | 288 newWidth = this.selectionDivFullWidth_; |
291 } | 289 } |
292 | 290 |
293 // Change the width on the selection view (doesn't matter what we | 291 // Change the width on the selection view (doesn't matter what we |
294 // set the other values to, since we will re-layout in the next line). | 292 // set the other values to, since we will re-layout in the next line). |
295 this.leftView_.setGeometry(0, 0, newWidth, 100); | 293 this.leftView_.setGeometry(0, 0, newWidth, 100); |
296 | 294 |
297 // Force a re-layout now that the left view has changed width. | 295 // Force a re-layout now that the left view has changed width. |
298 this.setGeometry(this.getLeft(), this.getTop(), this.getWidth(), | 296 this.setGeometry( |
299 this.getHeight()); | 297 this.getLeft(), this.getTop(), this.getWidth(), this.getHeight()); |
300 } | 298 } |
301 }; | 299 }; |
302 | 300 |
303 return TimelineView; | 301 return TimelineView; |
304 })(); | 302 })(); |
OLD | NEW |