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

Side by Side Diff: chrome/browser/resources/net_internals/timeline_view.js

Issue 2602473003: Run tools/clang-format-js on chrome/browser/resources/net_internals (Closed)
Patch Set: drop dep Created 3 years, 11 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
OLDNEW
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
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
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
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 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698