OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> | 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> |
4 * Copyright (C) 2011 Google Inc. All rights reserved. | 4 * Copyright (C) 2011 Google Inc. All rights reserved. |
5 * | 5 * |
6 * Redistribution and use in source and binary forms, with or without | 6 * Redistribution and use in source and binary forms, with or without |
7 * modification, are permitted provided that the following conditions | 7 * modification, are permitted provided that the following conditions |
8 * are met: | 8 * are met: |
9 * | 9 * |
10 * 1. Redistributions of source code must retain the above copyright | 10 * 1. Redistributions of source code must retain the above copyright |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
44 this.registerRequiredCSS("network/networkLogView.css"); | 44 this.registerRequiredCSS("network/networkLogView.css"); |
45 | 45 |
46 this._networkHideDataURLSetting = WebInspector.settings.createSetting("netwo
rkHideDataURL", false); | 46 this._networkHideDataURLSetting = WebInspector.settings.createSetting("netwo
rkHideDataURL", false); |
47 this._networkResourceTypeFiltersSetting = WebInspector.settings.createSettin
g("networkResourceTypeFilters", {}); | 47 this._networkResourceTypeFiltersSetting = WebInspector.settings.createSettin
g("networkResourceTypeFilters", {}); |
48 this._networkShowPrimaryLoadWaterfallSetting = WebInspector.settings.createS
etting("networkShowPrimaryLoadWaterfall", false); | 48 this._networkShowPrimaryLoadWaterfallSetting = WebInspector.settings.createS
etting("networkShowPrimaryLoadWaterfall", false); |
49 | 49 |
50 this._filterBar = filterBar; | 50 this._filterBar = filterBar; |
51 this._progressBarContainer = progressBarContainer; | 51 this._progressBarContainer = progressBarContainer; |
52 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; | 52 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; |
53 | 53 |
54 var defaultColumnsVisibility = WebInspector.NetworkLogView._defaultColumnsVi
sibility; | 54 this._columns = new WebInspector.NetworkLogViewColumns(this, networkLogLarge
RowsSetting); |
55 this._columnsVisibilitySetting = WebInspector.settings.createSetting("networ
kLogColumnsVisibility", defaultColumnsVisibility); | |
56 var savedColumnsVisibility = this._columnsVisibilitySetting.get(); | |
57 var columnsVisibility = {}; | |
58 for (var columnId in defaultColumnsVisibility) | |
59 columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(colu
mnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId]; | |
60 this._columnsVisibilitySetting.set(columnsVisibility); | |
61 | 55 |
62 /** @type {!Map.<string, !WebInspector.NetworkDataGridNode>} */ | 56 /** @type {!Map.<string, !WebInspector.NetworkDataGridNode>} */ |
63 this._nodesByRequestId = new Map(); | 57 this._nodesByRequestId = new Map(); |
64 /** @type {!Object.<string, boolean>} */ | 58 /** @type {!Object.<string, boolean>} */ |
65 this._staleRequestIds = {}; | 59 this._staleRequestIds = {}; |
66 /** @type {number} */ | 60 /** @type {number} */ |
67 this._mainRequestLoadTime = -1; | 61 this._mainRequestLoadTime = -1; |
68 /** @type {number} */ | 62 /** @type {number} */ |
69 this._mainRequestDOMContentLoadedTime = -1; | 63 this._mainRequestDOMContentLoadedTime = -1; |
70 this._matchedRequestCount = 0; | 64 this._matchedRequestCount = 0; |
71 /** @type {!Array<{time: number, element: !Element}>} */ | |
72 this._eventDividers = []; | |
73 this._highlightedSubstringChanges = []; | 65 this._highlightedSubstringChanges = []; |
74 | 66 |
75 /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */ | 67 /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */ |
76 this._filters = []; | 68 this._filters = []; |
77 /** @type {?WebInspector.NetworkLogView.Filter} */ | 69 /** @type {?WebInspector.NetworkLogView.Filter} */ |
78 this._timeFilter = null; | 70 this._timeFilter = null; |
79 | 71 |
80 this._currentMatchedRequestNode = null; | 72 this._currentMatchedRequestNode = null; |
81 this._currentMatchedRequestIndex = -1; | 73 this._currentMatchedRequestIndex = -1; |
82 | 74 |
83 /** @type {!WebInspector.Linkifier} */ | 75 /** @type {!WebInspector.Linkifier} */ |
84 this._popupLinkifier = new WebInspector.Linkifier(); | |
85 /** @type {!WebInspector.Linkifier} */ | |
86 this.linkifier = new WebInspector.Linkifier(); | 76 this.linkifier = new WebInspector.Linkifier(); |
87 | 77 |
88 this._gridMode = true; | |
89 this._recording = false; | 78 this._recording = false; |
90 this._preserveLog = false; | 79 this._preserveLog = false; |
91 | 80 |
92 /** @type {number} */ | 81 /** @type {number} */ |
93 this._rowHeight = 0; | 82 this._rowHeight = 0; |
94 | 83 |
95 this._addFilters(); | 84 this._addFilters(); |
96 this._resetSuggestionBuilder(); | 85 this._resetSuggestionBuilder(); |
97 this._initializeView(); | 86 this._initializeView(); |
98 | 87 |
99 WebInspector.moduleSetting("networkColorCodeResourceTypes").addChangeListene
r(this._invalidateAllItems, this); | 88 WebInspector.moduleSetting("networkColorCodeResourceTypes").addChangeListene
r(this._invalidateAllItems, this); |
100 this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, thi
s); | 89 this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, thi
s); |
101 | 90 |
102 WebInspector.targetManager.observeTargets(this); | 91 WebInspector.targetManager.observeTargets(this); |
103 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestStarted, this._onRequestStarted, this
); | 92 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestStarted, this._onRequestStarted, this
); |
104 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestUpdated, this._onRequestUpdated, this
); | 93 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestUpdated, this._onRequestUpdated, this
); |
105 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestFinished, this._onRequestUpdated, thi
s); | 94 WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, Web
Inspector.NetworkManager.EventTypes.RequestFinished, this._onRequestUpdated, thi
s); |
106 } | 95 } |
107 | 96 |
108 WebInspector.NetworkLogView._isFilteredOutSymbol = Symbol("isFilteredOut"); | 97 WebInspector.NetworkLogView._isFilteredOutSymbol = Symbol("isFilteredOut"); |
109 WebInspector.NetworkLogView._isMatchingSearchQuerySymbol = Symbol("isMatchingSea
rchQuery"); | 98 WebInspector.NetworkLogView._isMatchingSearchQuerySymbol = Symbol("isMatchingSea
rchQuery"); |
110 | 99 |
111 WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": tr
ue, "wss": true}; | 100 WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": tr
ue, "wss": true}; |
112 WebInspector.NetworkLogView._responseHeaderColumns = ["Cache-Control", "Connecti
on", "Content-Encoding", "Content-Length", "ETag", "Keep-Alive", "Last-Modified"
, "Server", "Vary"]; | 101 |
113 WebInspector.NetworkLogView._defaultColumnsVisibility = { | |
114 method: false, status: true, protocol: false, scheme: false, domain: false,
remoteAddress: false, type: true, initiator: true, cookies: false, setCookies: f
alse, size: true, time: true, priority: false, connectionId: false, | |
115 "Cache-Control": false, "Connection": false, "Content-Encoding": false, "Con
tent-Length": false, "ETag": false, "Keep-Alive": false, "Last-Modified": false,
"Server": false, "Vary": false | |
116 }; | |
117 WebInspector.NetworkLogView._defaultRefreshDelay = 200; | 102 WebInspector.NetworkLogView._defaultRefreshDelay = 200; |
118 | 103 |
119 WebInspector.NetworkLogView._waterfallMinOvertime = 1; | 104 WebInspector.NetworkLogView._waterfallMinOvertime = 1; |
120 WebInspector.NetworkLogView._waterfallMaxOvertime = 3; | 105 WebInspector.NetworkLogView._waterfallMaxOvertime = 3; |
121 | 106 |
122 /** @enum {string} */ | 107 /** @enum {string} */ |
123 WebInspector.NetworkLogView.FilterType = { | 108 WebInspector.NetworkLogView.FilterType = { |
124 Domain: "domain", | 109 Domain: "domain", |
125 HasResponseHeader: "has-response-header", | 110 HasResponseHeader: "has-response-header", |
126 Is: "is", | 111 Is: "is", |
(...skipping 17 matching lines...) Expand all Loading... |
144 } | 129 } |
145 | 130 |
146 /** @enum {string} */ | 131 /** @enum {string} */ |
147 WebInspector.NetworkLogView.IsFilterType = { | 132 WebInspector.NetworkLogView.IsFilterType = { |
148 Running: "running" | 133 Running: "running" |
149 }; | 134 }; |
150 | 135 |
151 /** @type {!Array.<string>} */ | 136 /** @type {!Array.<string>} */ |
152 WebInspector.NetworkLogView._searchKeys = Object.values(WebInspector.NetworkLogV
iew.FilterType); | 137 WebInspector.NetworkLogView._searchKeys = Object.values(WebInspector.NetworkLogV
iew.FilterType); |
153 | 138 |
154 /** @type {!Object.<string, string>} */ | |
155 WebInspector.NetworkLogView._columnTitles = { | |
156 "name": WebInspector.UIString("Name"), | |
157 "method": WebInspector.UIString("Method"), | |
158 "status": WebInspector.UIString("Status"), | |
159 "protocol": WebInspector.UIString("Protocol"), | |
160 "scheme": WebInspector.UIString("Scheme"), | |
161 "domain": WebInspector.UIString("Domain"), | |
162 "remoteAddress": WebInspector.UIString("Remote Address"), | |
163 "type": WebInspector.UIString("Type"), | |
164 "initiator": WebInspector.UIString("Initiator"), | |
165 "cookies": WebInspector.UIString("Cookies"), | |
166 "setCookies": WebInspector.UIString("Set-Cookies"), | |
167 "size": WebInspector.UIString("Size"), | |
168 "time": WebInspector.UIString("Time"), | |
169 "connectionId": WebInspector.UIString("Connection Id"), | |
170 "priority": WebInspector.UIString("Priority"), | |
171 "timeline": WebInspector.UIString("Timeline"), | |
172 | |
173 // Response header columns | |
174 "Cache-Control": WebInspector.UIString("Cache-Control"), | |
175 "Connection": WebInspector.UIString("Connection"), | |
176 "Content-Encoding": WebInspector.UIString("Content-Encoding"), | |
177 "Content-Length": WebInspector.UIString("Content-Length"), | |
178 "ETag": WebInspector.UIString("ETag"), | |
179 "Keep-Alive": WebInspector.UIString("Keep-Alive"), | |
180 "Last-Modified": WebInspector.UIString("Last-Modified"), | |
181 "Server": WebInspector.UIString("Server"), | |
182 "Vary": WebInspector.UIString("Vary") | |
183 }; | |
184 | |
185 WebInspector.NetworkLogView.prototype = { | 139 WebInspector.NetworkLogView.prototype = { |
186 /** | 140 /** |
187 * @param {boolean} recording | 141 * @param {boolean} recording |
188 */ | 142 */ |
189 setRecording: function(recording) | 143 setRecording: function(recording) |
190 { | 144 { |
191 this._recording = recording; | 145 this._recording = recording; |
192 this._updateSummaryBar(); | 146 this._updateSummaryBar(); |
193 }, | 147 }, |
194 | 148 |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
235 */ | 189 */ |
236 setWindow: function(start, end) | 190 setWindow: function(start, end) |
237 { | 191 { |
238 if (!start && !end) { | 192 if (!start && !end) { |
239 this._timeFilter = null; | 193 this._timeFilter = null; |
240 this._timeCalculator.setWindow(null); | 194 this._timeCalculator.setWindow(null); |
241 } else { | 195 } else { |
242 this._timeFilter = WebInspector.NetworkLogView._requestTimeFilter.bi
nd(null, start, end); | 196 this._timeFilter = WebInspector.NetworkLogView._requestTimeFilter.bi
nd(null, start, end); |
243 this._timeCalculator.setWindow(new WebInspector.NetworkTimeBoundary(
start, end)); | 197 this._timeCalculator.setWindow(new WebInspector.NetworkTimeBoundary(
start, end)); |
244 } | 198 } |
245 this._updateDividersIfNeeded(); | 199 this._columns.updateDividersIfNeeded(); |
246 this._filterRequests(); | 200 this._filterRequests(); |
247 }, | 201 }, |
248 | 202 |
249 clearSelection: function() | 203 clearSelection: function() |
250 { | 204 { |
251 if (this._dataGrid.selectedNode) | 205 if (this._dataGrid.selectedNode) |
252 this._dataGrid.selectedNode.deselect(); | 206 this._dataGrid.selectedNode.deselect(); |
253 }, | 207 }, |
254 | 208 |
255 _addFilters: function() | 209 _addFilters: function() |
(...skipping 25 matching lines...) Expand all Loading... |
281 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.L
argerThan, "10k"); | 235 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.L
argerThan, "10k"); |
282 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.L
argerThan, "1M"); | 236 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.L
argerThan, "1M"); |
283 this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder); | 237 this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder); |
284 }, | 238 }, |
285 | 239 |
286 /** | 240 /** |
287 * @param {!WebInspector.Event} event | 241 * @param {!WebInspector.Event} event |
288 */ | 242 */ |
289 _filterChanged: function(event) | 243 _filterChanged: function(event) |
290 { | 244 { |
291 this._removeAllNodeHighlights(); | 245 this.removeAllNodeHighlights(); |
292 this._parseFilterQuery(this._textFilterUI.value()); | 246 this._parseFilterQuery(this._textFilterUI.value()); |
293 this._filterRequests(); | 247 this._filterRequests(); |
294 }, | 248 }, |
295 | 249 |
296 _initializeView: function() | 250 _initializeView: function() |
297 { | 251 { |
298 this.element.id = "network-container"; | 252 this.element.id = "network-container"; |
299 | 253 |
300 this._createSortingFunctions(); | 254 /** @type {!WebInspector.NetworkTransferTimeCalculator} */ |
301 this._createCalculators(); | 255 this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator(); |
| 256 /** @type {!WebInspector.NetworkTransferDurationCalculator} */ |
| 257 this._durationCalculator = new WebInspector.NetworkTransferDurationCalcu
lator(); |
| 258 this._calculator = this._timeCalculator; |
| 259 |
302 this._createTable(); | 260 this._createTable(); |
303 this._createTimelineGrid(); | |
304 this._summaryBarElement = this.element.createChild("div", "network-summa
ry-bar"); | 261 this._summaryBarElement = this.element.createChild("div", "network-summa
ry-bar"); |
305 | 262 |
306 this._updateRowsSize(); | 263 this._updateRowsSize(); |
307 | |
308 this._popoverHelper = new WebInspector.PopoverHelper(this.element, this.
_getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.
bind(this)); | |
309 this.switchViewMode(true); | |
310 }, | 264 }, |
311 | 265 |
312 _showRecordingHint: function() | 266 _showRecordingHint: function() |
313 { | 267 { |
314 this._hideRecordingHint(); | 268 this._hideRecordingHint(); |
315 this._recordingHint = this.element.createChild("div", "network-status-pa
ne fill"); | 269 this._recordingHint = this.element.createChild("div", "network-status-pa
ne fill"); |
316 var hintText = this._recordingHint.createChild("div", "recording-hint"); | 270 var hintText = this._recordingHint.createChild("div", "recording-hint"); |
317 var reloadShortcutNode = this._recordingHint.createChild("b"); | 271 var reloadShortcutNode = this._recordingHint.createChild("b"); |
318 reloadShortcutNode.textContent = WebInspector.shortcutRegistry.shortcutD
escriptorsForAction("main.reload")[0].name; | 272 reloadShortcutNode.textContent = WebInspector.shortcutRegistry.shortcutD
escriptorsForAction("main.reload")[0].name; |
319 | 273 |
(...skipping 20 matching lines...) Expand all Loading... |
340 * @override | 294 * @override |
341 * @return {!Array.<!Element>} | 295 * @return {!Array.<!Element>} |
342 */ | 296 */ |
343 elementsToRestoreScrollPositionsFor: function() | 297 elementsToRestoreScrollPositionsFor: function() |
344 { | 298 { |
345 if (!this._dataGrid) // Not initialized yet. | 299 if (!this._dataGrid) // Not initialized yet. |
346 return []; | 300 return []; |
347 return [this._dataGrid.scrollContainer]; | 301 return [this._dataGrid.scrollContainer]; |
348 }, | 302 }, |
349 | 303 |
350 _createTimelineGrid: function() | |
351 { | |
352 this._timelineGrid = new WebInspector.TimelineGrid(); | |
353 this._timelineGrid.element.classList.add("network-timeline-grid"); | |
354 this._dataGrid.element.appendChild(this._timelineGrid.element); | |
355 }, | |
356 | |
357 _createTable: function() | 304 _createTable: function() |
358 { | 305 { |
359 var columns = []; | 306 this._dataGrid = this._columns.createGrid(this._timeCalculator, this._du
rationCalculator); |
360 columns.push({ | |
361 id: "name", | |
362 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Na
me"), WebInspector.UIString("Path")), | |
363 title: WebInspector.NetworkLogView._columnTitles["name"], | |
364 weight: 20 | |
365 }); | |
366 | |
367 columns.push({ | |
368 id: "method", | |
369 title: WebInspector.NetworkLogView._columnTitles["method"], | |
370 weight: 6 | |
371 }); | |
372 | |
373 columns.push({ | |
374 id: "status", | |
375 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("St
atus"), WebInspector.UIString("Text")), | |
376 title: WebInspector.NetworkLogView._columnTitles["status"], | |
377 weight: 6 | |
378 }); | |
379 | |
380 columns.push({ | |
381 id: "protocol", | |
382 title: WebInspector.NetworkLogView._columnTitles["protocol"], | |
383 weight: 6 | |
384 }); | |
385 | |
386 columns.push({ | |
387 id: "scheme", | |
388 title: WebInspector.NetworkLogView._columnTitles["scheme"], | |
389 weight: 6 | |
390 }); | |
391 | |
392 columns.push({ | |
393 id: "domain", | |
394 title: WebInspector.NetworkLogView._columnTitles["domain"], | |
395 weight: 6 | |
396 }); | |
397 | |
398 columns.push({ | |
399 id: "remoteAddress", | |
400 title: WebInspector.NetworkLogView._columnTitles["remoteAddress"], | |
401 weight: 10, | |
402 align: WebInspector.DataGrid.Align.Right | |
403 }); | |
404 | |
405 columns.push({ | |
406 id: "type", | |
407 title: WebInspector.NetworkLogView._columnTitles["type"], | |
408 weight: 6 | |
409 }); | |
410 | |
411 columns.push({ | |
412 id: "initiator", | |
413 title: WebInspector.NetworkLogView._columnTitles["initiator"], | |
414 weight: 10 | |
415 }); | |
416 | |
417 columns.push({ | |
418 id: "cookies", | |
419 title: WebInspector.NetworkLogView._columnTitles["cookies"], | |
420 weight: 6, | |
421 align: WebInspector.DataGrid.Align.Right | |
422 }); | |
423 | |
424 columns.push({ | |
425 id: "setCookies", | |
426 title: WebInspector.NetworkLogView._columnTitles["setCookies"], | |
427 weight: 6, | |
428 align: WebInspector.DataGrid.Align.Right | |
429 }); | |
430 | |
431 columns.push({ | |
432 id: "size", | |
433 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Si
ze"), WebInspector.UIString("Content")), | |
434 title: WebInspector.NetworkLogView._columnTitles["size"], | |
435 weight: 6, | |
436 align: WebInspector.DataGrid.Align.Right | |
437 }); | |
438 | |
439 columns.push({ | |
440 id: "time", | |
441 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Ti
me"), WebInspector.UIString("Latency")), | |
442 title: WebInspector.NetworkLogView._columnTitles["time"], | |
443 weight: 6, | |
444 align: WebInspector.DataGrid.Align.Right | |
445 }); | |
446 | |
447 columns.push({ | |
448 id: "priority", | |
449 title: WebInspector.NetworkLogView._columnTitles["priority"], | |
450 weight: 6 | |
451 }); | |
452 | |
453 columns.push({ | |
454 id: "connectionId", | |
455 title: WebInspector.NetworkLogView._columnTitles["connectionId"], | |
456 weight: 6 | |
457 }); | |
458 | |
459 var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderC
olumns; | |
460 for (var i = 0; i < responseHeaderColumns.length; ++i) { | |
461 var headerName = responseHeaderColumns[i]; | |
462 var descriptor = { | |
463 id: headerName, | |
464 title: WebInspector.NetworkLogView._columnTitles[headerName], | |
465 weight: 6 | |
466 }; | |
467 if (headerName === "Content-Length") | |
468 descriptor.align = WebInspector.DataGrid.Align.Right; | |
469 columns.push(descriptor); | |
470 } | |
471 | |
472 columns.push({ | |
473 id: "timeline", | |
474 title: WebInspector.NetworkLogView._columnTitles["timeline"], | |
475 sortable: false, | |
476 weight: 40, | |
477 sort: WebInspector.DataGrid.Order.Ascending | |
478 }); | |
479 | |
480 for (var column of columns) { | |
481 column.sortable = column.id !== "timeline"; | |
482 column.nonSelectable = column.id !== "name"; | |
483 } | |
484 | |
485 this._dataGrid = new WebInspector.SortableDataGrid(columns); | |
486 this._dataGrid.setStickToBottom(true); | 307 this._dataGrid.setStickToBottom(true); |
487 this._updateColumns(); | |
488 this._dataGrid.setName("networkLog"); | 308 this._dataGrid.setName("networkLog"); |
489 this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last); | 309 this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last); |
490 this._dataGrid.element.classList.add("network-log-grid"); | 310 this._dataGrid.element.classList.add("network-log-grid"); |
491 this._dataGrid.element.addEventListener("contextmenu", this._contextMenu
.bind(this), true); | 311 this._dataGrid.element.addEventListener("contextmenu", this._contextMenu
.bind(this), true); |
492 this._dataGrid.element.addEventListener("mousedown", this._dataGridMouse
Down.bind(this), true); | 312 this._dataGrid.element.addEventListener("mousedown", this._dataGridMouse
Down.bind(this), true); |
493 this._dataGrid.element.addEventListener("mousemove", this._dataGridMouse
Move.bind(this), true); | 313 this._dataGrid.element.addEventListener("mousemove", this._dataGridMouse
Move.bind(this), true); |
494 this._dataGrid.element.addEventListener("mouseleave", this._highlightIni
tiatorChain.bind(this, null), true); | 314 this._dataGrid.element.addEventListener("mouseleave", this._highlightIni
tiatorChain.bind(this, null), true); |
495 this._dataGrid.asWidget().show(this.element); | |
496 | |
497 // Event listeners need to be added _after_ we attach to the document, s
o that owner document is properly update. | |
498 this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChan
ged, this._sortItems, this); | |
499 this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResi
zed, this._updateDividersIfNeeded, this); | |
500 | |
501 this._patchTimelineHeader(); | |
502 this._dataGrid.sortNodes(this._sortingFunctions.startTime, false); | |
503 }, | 315 }, |
504 | 316 |
505 /** | 317 /** |
506 * @param {!Event} event | 318 * @param {!Event} event |
507 */ | 319 */ |
508 _dataGridMouseDown: function(event) | 320 _dataGridMouseDown: function(event) |
509 { | 321 { |
510 if ((!this._dataGrid.selectedNode && event.button) || event.target.enclo
singNodeOrSelfWithNodeName("a")) | 322 if ((!this._dataGrid.selectedNode && event.button) || event.target.enclo
singNodeOrSelfWithNodeName("a")) |
511 event.consume(); | 323 event.consume(); |
512 }, | 324 }, |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
549 } | 361 } |
550 | 362 |
551 for (var node of this._nodesByRequestId.values()) { | 363 for (var node of this._nodesByRequestId.values()) { |
552 if (!node.dataGrid) | 364 if (!node.dataGrid) |
553 continue; | 365 continue; |
554 node.element().classList.toggle("network-node-on-initiator-path", no
de.request() !== request && initiators.has(node.request())); | 366 node.element().classList.toggle("network-node-on-initiator-path", no
de.request() !== request && initiators.has(node.request())); |
555 node.element().classList.toggle("network-node-on-initiated-path", no
de.request() !== request && initiated.has(node.request())); | 367 node.element().classList.toggle("network-node-on-initiated-path", no
de.request() !== request && initiated.has(node.request())); |
556 } | 368 } |
557 }, | 369 }, |
558 | 370 |
559 /** | |
560 * @param {string} title | |
561 * @param {string} subtitle | |
562 * @return {!DocumentFragment} | |
563 */ | |
564 _makeHeaderFragment: function(title, subtitle) | |
565 { | |
566 var fragment = createDocumentFragment(); | |
567 fragment.createTextChild(title); | |
568 var subtitleDiv = fragment.createChild("div", "network-header-subtitle")
; | |
569 subtitleDiv.createTextChild(subtitle); | |
570 return fragment; | |
571 }, | |
572 | |
573 _patchTimelineHeader: function() | |
574 { | |
575 var timelineSorting = createElement("select"); | |
576 | |
577 var option = createElement("option"); | |
578 option.value = "startTime"; | |
579 option.label = WebInspector.UIString("Timeline"); | |
580 option.disabled = true; | |
581 timelineSorting.appendChild(option); | |
582 | |
583 option = createElement("option"); | |
584 option.value = "startTime"; | |
585 option.label = WebInspector.UIString("Timeline \u2013 Start Time"); | |
586 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
587 timelineSorting.appendChild(option); | |
588 | |
589 option = createElement("option"); | |
590 option.value = "responseTime"; | |
591 option.label = WebInspector.UIString("Timeline \u2013 Response Time"); | |
592 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
593 timelineSorting.appendChild(option); | |
594 | |
595 option = createElement("option"); | |
596 option.value = "endTime"; | |
597 option.label = WebInspector.UIString("Timeline \u2013 End Time"); | |
598 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
599 timelineSorting.appendChild(option); | |
600 | |
601 option = createElement("option"); | |
602 option.value = "duration"; | |
603 option.label = WebInspector.UIString("Timeline \u2013 Total Duration"); | |
604 option.sortOrder = WebInspector.DataGrid.Order.Descending; | |
605 timelineSorting.appendChild(option); | |
606 | |
607 option = createElement("option"); | |
608 option.value = "latency"; | |
609 option.label = WebInspector.UIString("Timeline \u2013 Latency"); | |
610 option.sortOrder = WebInspector.DataGrid.Order.Descending; | |
611 timelineSorting.appendChild(option); | |
612 | |
613 var header = this._dataGrid.headerTableHeader("timeline"); | |
614 header.replaceChild(timelineSorting, header.firstChild); | |
615 header.createChild("div", "sort-order-icon-container").createChild("div"
, "sort-order-icon"); | |
616 | |
617 timelineSorting.selectedIndex = 1; | |
618 timelineSorting.addEventListener("click", function(event) { event.consum
e(); }, false); | |
619 timelineSorting.addEventListener("change", this._sortByTimeline.bind(thi
s), false); | |
620 this._timelineSortSelector = timelineSorting; | |
621 }, | |
622 | |
623 _createSortingFunctions: function() | |
624 { | |
625 this._sortingFunctions = {}; | |
626 this._sortingFunctions.name = WebInspector.NetworkDataGridNode.NameCompa
rator; | |
627 this._sortingFunctions.method = WebInspector.NetworkDataGridNode.Request
PropertyComparator.bind(null, "requestMethod"); | |
628 this._sortingFunctions.status = WebInspector.NetworkDataGridNode.Request
PropertyComparator.bind(null, "statusCode"); | |
629 this._sortingFunctions.protocol = WebInspector.NetworkDataGridNode.Reque
stPropertyComparator.bind(null, "protocol"); | |
630 this._sortingFunctions.scheme = WebInspector.NetworkDataGridNode.Request
PropertyComparator.bind(null, "scheme"); | |
631 this._sortingFunctions.domain = WebInspector.NetworkDataGridNode.Request
PropertyComparator.bind(null, "domain"); | |
632 this._sortingFunctions.remoteAddress = WebInspector.NetworkDataGridNode.
RemoteAddressComparator; | |
633 this._sortingFunctions.type = WebInspector.NetworkDataGridNode.TypeCompa
rator; | |
634 this._sortingFunctions.initiator = WebInspector.NetworkDataGridNode.Init
iatorComparator; | |
635 this._sortingFunctions.cookies = WebInspector.NetworkDataGridNode.Reques
tCookiesCountComparator; | |
636 this._sortingFunctions.setCookies = WebInspector.NetworkDataGridNode.Res
ponseCookiesCountComparator; | |
637 this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeCompa
rator; | |
638 this._sortingFunctions.time = WebInspector.NetworkDataGridNode.RequestPr
opertyComparator.bind(null, "duration"); | |
639 this._sortingFunctions.connectionId = WebInspector.NetworkDataGridNode.R
equestPropertyComparator.bind(null, "connectionId"); | |
640 this._sortingFunctions.priority = WebInspector.NetworkDataGridNode.Initi
alPriorityComparator; | |
641 this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.Reque
stPropertyComparator.bind(null, "startTime"); | |
642 this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.Requ
estPropertyComparator.bind(null, "startTime"); | |
643 this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.Reques
tPropertyComparator.bind(null, "endTime"); | |
644 this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.R
equestPropertyComparator.bind(null, "responseReceivedTime"); | |
645 this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.Reque
stPropertyComparator.bind(null, "duration"); | |
646 this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.Reques
tPropertyComparator.bind(null, "latency"); | |
647 | |
648 this._sortingFunctions["Cache-Control"] = WebInspector.NetworkDataGridNo
de.ResponseHeaderStringComparator.bind(null, "Cache-Control"); | |
649 this._sortingFunctions["Connection"] = WebInspector.NetworkDataGridNode.
ResponseHeaderStringComparator.bind(null, "Connection"); | |
650 this._sortingFunctions["Content-Encoding"] = WebInspector.NetworkDataGri
dNode.ResponseHeaderStringComparator.bind(null, "Content-Encoding"); | |
651 this._sortingFunctions["Content-Length"] = WebInspector.NetworkDataGridN
ode.ResponseHeaderNumberComparator.bind(null, "Content-Length"); | |
652 this._sortingFunctions["ETag"] = WebInspector.NetworkDataGridNode.Respon
seHeaderStringComparator.bind(null, "ETag"); | |
653 this._sortingFunctions["Keep-Alive"] = WebInspector.NetworkDataGridNode.
ResponseHeaderStringComparator.bind(null, "Keep-Alive"); | |
654 this._sortingFunctions["Last-Modified"] = WebInspector.NetworkDataGridNo
de.ResponseHeaderDateComparator.bind(null, "Last-Modified"); | |
655 this._sortingFunctions["Server"] = WebInspector.NetworkDataGridNode.Resp
onseHeaderStringComparator.bind(null, "Server"); | |
656 this._sortingFunctions["Vary"] = WebInspector.NetworkDataGridNode.Respon
seHeaderStringComparator.bind(null, "Vary"); | |
657 }, | |
658 | |
659 _createCalculators: function() | |
660 { | |
661 /** @type {!WebInspector.NetworkTransferTimeCalculator} */ | |
662 this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator(); | |
663 /** @type {!WebInspector.NetworkTransferDurationCalculator} */ | |
664 this._durationCalculator = new WebInspector.NetworkTransferDurationCalcu
lator(); | |
665 | |
666 /** @type {!Object.<string, !WebInspector.NetworkTimeCalculator>} */ | |
667 this._calculators = {}; | |
668 this._calculators.timeline = this._timeCalculator; | |
669 this._calculators.startTime = this._timeCalculator; | |
670 this._calculators.endTime = this._timeCalculator; | |
671 this._calculators.responseTime = this._timeCalculator; | |
672 this._calculators.duration = this._durationCalculator; | |
673 this._calculators.latency = this._durationCalculator; | |
674 | |
675 this._calculator = this._timeCalculator; | |
676 }, | |
677 | |
678 _sortItems: function() | |
679 { | |
680 this._removeAllNodeHighlights(); | |
681 var columnIdentifier = this._dataGrid.sortColumnIdentifier(); | |
682 if (columnIdentifier === "timeline") { | |
683 this._sortByTimeline(); | |
684 return; | |
685 } | |
686 var sortingFunction = this._sortingFunctions[columnIdentifier]; | |
687 if (!sortingFunction) | |
688 return; | |
689 | |
690 this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAsc
ending()); | |
691 this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindM
atchIndex(this._currentMatchedRequestNode), false); | |
692 this._timelineSortSelector.selectedIndex = 0; | |
693 }, | |
694 | |
695 _sortByTimeline: function() | |
696 { | |
697 this._removeAllNodeHighlights(); | |
698 var selectedIndex = this._timelineSortSelector.selectedIndex; | |
699 if (!selectedIndex) | |
700 selectedIndex = 1; // Sort by start time by default. | |
701 var selectedOption = this._timelineSortSelector[selectedIndex]; | |
702 var value = selectedOption.value; | |
703 | |
704 this._setCalculator(this._calculators[value]); | |
705 var sortingFunction = this._sortingFunctions[value]; | |
706 this._dataGrid.sortNodes(sortingFunction); | |
707 this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindM
atchIndex(this._currentMatchedRequestNode), false); | |
708 this._dataGrid.markColumnAsSortedBy("timeline", selectedOption.sortOrder
); | |
709 }, | |
710 | |
711 _updateSummaryBar: function() | 371 _updateSummaryBar: function() |
712 { | 372 { |
713 var requestsNumber = this._nodesByRequestId.size; | 373 var requestsNumber = this._nodesByRequestId.size; |
714 | 374 |
715 if (!requestsNumber) { | 375 if (!requestsNumber) { |
716 this._showRecordingHint(); | 376 this._showRecordingHint(); |
717 return; | 377 return; |
718 } | 378 } |
719 this._hideRecordingHint(); | 379 this._hideRecordingHint(); |
720 | 380 |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
773 } | 433 } |
774 if (this._mainRequestLoadTime !== -1) { | 434 if (this._mainRequestLoadTime !== -1) { |
775 appendChunk(separator); | 435 appendChunk(separator); |
776 var loadText = WebInspector.UIString("Load: %s", Number.secondsT
oString(this._mainRequestLoadTime - baseTime)); | 436 var loadText = WebInspector.UIString("Load: %s", Number.secondsT
oString(this._mainRequestLoadTime - baseTime)); |
777 appendChunk(loadText).classList.add("summary-red"); | 437 appendChunk(loadText).classList.add("summary-red"); |
778 } | 438 } |
779 } | 439 } |
780 summaryBar.title = text; | 440 summaryBar.title = text; |
781 }, | 441 }, |
782 | 442 |
783 _scheduleRefresh: function() | 443 scheduleRefresh: function() |
784 { | 444 { |
785 if (this._needsRefresh) | 445 if (this._needsRefresh) |
786 return; | 446 return; |
787 | 447 |
788 this._needsRefresh = true; | 448 this._needsRefresh = true; |
789 | 449 |
790 if (this.isShowing() && !this._refreshTimeout) | 450 if (this.isShowing() && !this._refreshTimeout) |
791 this._refreshTimeout = setTimeout(this.refresh.bind(this), WebInspec
tor.NetworkLogView._defaultRefreshDelay); | 451 this._refreshTimeout = setTimeout(this.refresh.bind(this), WebInspec
tor.NetworkLogView._defaultRefreshDelay); |
792 }, | 452 }, |
793 | 453 |
794 _updateDividersIfNeeded: function() | |
795 { | |
796 if (!this.isShowing()) { | |
797 this._scheduleRefresh(); | |
798 return; | |
799 } | |
800 | |
801 var timelineOffset = this._dataGrid.columnOffset("timeline"); | |
802 // Position timline grid location. | |
803 if (timelineOffset) | |
804 this._timelineGrid.element.style.left = timelineOffset + "px"; | |
805 | |
806 var calculator = this.calculator(); | |
807 calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWid
th); | |
808 this._timelineGrid.updateDividers(calculator, 75); | |
809 | |
810 if (calculator.startAtZero) { | |
811 // If our current sorting method starts at zero, that means it shows
all | |
812 // requests starting at the same point, and so onLoad event and DOMC
ontent | |
813 // event lines really wouldn't make much sense here, so don't render
them. | |
814 return; | |
815 } | |
816 | |
817 this._updateEventDividers(); | |
818 }, | |
819 | |
820 /** | 454 /** |
821 * @param {!Array<number>} times | 455 * @param {!Array<number>} times |
822 */ | 456 */ |
823 addFilmStripFrames: function(times) | 457 addFilmStripFrames: function(times) |
824 { | 458 { |
825 this._addEventDividers(times, "network-frame-divider"); | 459 this._columns.addEventDividers(times, "network-frame-divider"); |
826 }, | 460 }, |
827 | 461 |
828 /** | 462 /** |
829 * @param {number} time | 463 * @param {number} time |
830 */ | 464 */ |
831 selectFilmStripFrame: function(time) | 465 selectFilmStripFrame: function(time) |
832 { | 466 { |
833 for (var divider of this._eventDividers) | 467 for (var divider of this._eventDividers) |
834 divider.element.classList.toggle("network-frame-divider-selected", d
ivider.time === time); | 468 divider.element.classList.toggle("network-frame-divider-selected", d
ivider.time === time); |
835 }, | 469 }, |
836 | 470 |
837 clearFilmStripFrame: function() | 471 clearFilmStripFrame: function() |
838 { | 472 { |
839 for (var divider of this._eventDividers) | 473 for (var divider of this._eventDividers) |
840 divider.element.classList.toggle("network-frame-divider-selected", f
alse); | 474 divider.element.classList.toggle("network-frame-divider-selected", f
alse); |
841 }, | 475 }, |
842 | 476 |
843 /** | |
844 * @param {!Array<number>} times | |
845 * @param {string} className | |
846 */ | |
847 _addEventDividers: function(times, className) | |
848 { | |
849 for (var i = 0; i < times.length; ++i) { | |
850 var element = createElementWithClass("div", "network-event-divider "
+ className); | |
851 this._timelineGrid.addEventDivider(element); | |
852 this._eventDividers.push({time: times[i], element: element}); | |
853 } | |
854 // Update event dividers immediately | |
855 this._updateEventDividers(); | |
856 // Schedule refresh in case dividers change the calculator span. | |
857 this._scheduleRefresh(); | |
858 }, | |
859 | |
860 _updateEventDividers: function() | |
861 { | |
862 var calculator = this.calculator(); | |
863 for (var divider of this._eventDividers) { | |
864 var timePercent = calculator.computePercentageFromEventTime(divider.
time); | |
865 divider.element.classList.toggle("invisible", timePercent < 0); | |
866 divider.element.style.left = timePercent + "%"; | |
867 } | |
868 }, | |
869 | |
870 _refreshIfNeeded: function() | 477 _refreshIfNeeded: function() |
871 { | 478 { |
872 if (this._needsRefresh) | 479 if (this._needsRefresh) |
873 this.refresh(); | 480 this.refresh(); |
874 }, | 481 }, |
875 | 482 |
876 _invalidateAllItems: function() | 483 _invalidateAllItems: function() |
877 { | 484 { |
878 var requestIds = this._nodesByRequestId.keysArray(); | 485 var requestIds = this._nodesByRequestId.keysArray(); |
879 for (var i = 0; i < requestIds.length; ++i) | 486 for (var i = 0; i < requestIds.length; ++i) |
(...skipping 13 matching lines...) Expand all Loading... |
893 * @return {!WebInspector.NetworkTimeCalculator} | 500 * @return {!WebInspector.NetworkTimeCalculator} |
894 */ | 501 */ |
895 calculator: function() | 502 calculator: function() |
896 { | 503 { |
897 return this._calculator; | 504 return this._calculator; |
898 }, | 505 }, |
899 | 506 |
900 /** | 507 /** |
901 * @param {!WebInspector.NetworkTimeCalculator} x | 508 * @param {!WebInspector.NetworkTimeCalculator} x |
902 */ | 509 */ |
903 _setCalculator: function(x) | 510 setCalculator: function(x) |
904 { | 511 { |
905 if (!x || this._calculator === x) | 512 if (!x || this._calculator === x) |
906 return; | 513 return; |
907 | 514 |
908 this._calculator = x; | 515 this._calculator = x; |
909 this._calculator.reset(); | 516 this._calculator.reset(); |
910 | 517 |
911 if (this._calculator.startAtZero) | 518 if (this._calculator.startAtZero) |
912 this._timelineGrid.hideEventDividers(); | 519 this._columns.hideEventDividers(); |
913 else | 520 else |
914 this._timelineGrid.showEventDividers(); | 521 this._columns.showEventDividers(); |
915 | 522 |
916 this._invalidateAllItems(); | 523 this._invalidateAllItems(); |
917 }, | 524 }, |
918 | 525 |
919 /** | 526 /** |
920 * @param {!WebInspector.Event} event | 527 * @param {!WebInspector.Event} event |
921 */ | 528 */ |
922 _loadEventFired: function(event) | 529 _loadEventFired: function(event) |
923 { | 530 { |
924 if (!this._recording) | 531 if (!this._recording) |
925 return; | 532 return; |
926 | 533 |
927 var data = /** @type {number} */ (event.data); | 534 var data = /** @type {number} */ (event.data); |
928 if (data) { | 535 if (data) { |
929 this._mainRequestLoadTime = data; | 536 this._mainRequestLoadTime = data; |
930 this._addEventDividers([data], "network-red-divider"); | 537 this._columns.addEventDividers([data], "network-red-divider"); |
931 } | 538 } |
932 }, | 539 }, |
933 | 540 |
934 /** | 541 /** |
935 * @param {!WebInspector.Event} event | 542 * @param {!WebInspector.Event} event |
936 */ | 543 */ |
937 _domContentLoadedEventFired: function(event) | 544 _domContentLoadedEventFired: function(event) |
938 { | 545 { |
939 if (!this._recording) | 546 if (!this._recording) |
940 return; | 547 return; |
941 var data = /** @type {number} */ (event.data); | 548 var data = /** @type {number} */ (event.data); |
942 if (data) { | 549 if (data) { |
943 this._mainRequestDOMContentLoadedTime = data; | 550 this._mainRequestDOMContentLoadedTime = data; |
944 this._addEventDividers([data], "network-blue-divider"); | 551 this._columns.addEventDividers([data], "network-blue-divider"); |
945 } | 552 } |
946 }, | 553 }, |
947 | 554 |
948 wasShown: function() | 555 wasShown: function() |
949 { | 556 { |
950 this._refreshIfNeeded(); | 557 this._refreshIfNeeded(); |
951 }, | 558 }, |
952 | 559 |
953 willHide: function() | 560 willHide: function() |
954 { | 561 { |
955 this._popoverHelper.hidePopover(); | 562 this._columns.willHide(); |
956 }, | 563 }, |
957 | 564 |
958 refresh: function() | 565 refresh: function() |
959 { | 566 { |
960 this._needsRefresh = false; | 567 this._needsRefresh = false; |
961 if (this._refreshTimeout) { | 568 if (this._refreshTimeout) { |
962 clearTimeout(this._refreshTimeout); | 569 clearTimeout(this._refreshTimeout); |
963 delete this._refreshTimeout; | 570 delete this._refreshTimeout; |
964 } | 571 } |
965 | 572 |
966 this._removeAllNodeHighlights(); | 573 this.removeAllNodeHighlights(); |
967 | 574 |
968 var oldBoundary = this.calculator().boundary(); | 575 var oldBoundary = this.calculator().boundary(); |
969 this._timeCalculator.updateBoundariesForEventTime(this._mainRequestLoadT
ime); | 576 this._timeCalculator.updateBoundariesForEventTime(this._mainRequestLoadT
ime); |
970 this._durationCalculator.updateBoundariesForEventTime(this._mainRequestL
oadTime); | 577 this._durationCalculator.updateBoundariesForEventTime(this._mainRequestL
oadTime); |
971 this._timeCalculator.updateBoundariesForEventTime(this._mainRequestDOMCo
ntentLoadedTime); | 578 this._timeCalculator.updateBoundariesForEventTime(this._mainRequestDOMCo
ntentLoadedTime); |
972 this._durationCalculator.updateBoundariesForEventTime(this._mainRequestD
OMContentLoadedTime); | 579 this._durationCalculator.updateBoundariesForEventTime(this._mainRequestD
OMContentLoadedTime); |
973 | 580 |
974 var dataGrid = this._dataGrid; | 581 var dataGrid = this._dataGrid; |
975 var rootNode = dataGrid.rootNode(); | 582 var rootNode = dataGrid.rootNode(); |
976 /** @type {!Array<!WebInspector.NetworkDataGridNode> } */ | 583 /** @type {!Array<!WebInspector.NetworkDataGridNode> } */ |
(...skipping 28 matching lines...) Expand all Loading... |
1005 node[WebInspector.NetworkLogView._isMatchingSearchQuerySymbol] = thi
s._matchRequest(request); | 612 node[WebInspector.NetworkLogView._isMatchingSearchQuerySymbol] = thi
s._matchRequest(request); |
1006 } | 613 } |
1007 | 614 |
1008 for (var node of nodesToRefresh) | 615 for (var node of nodesToRefresh) |
1009 node.refresh(); | 616 node.refresh(); |
1010 | 617 |
1011 this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindM
atchIndex(this._currentMatchedRequestNode), false); | 618 this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindM
atchIndex(this._currentMatchedRequestNode), false); |
1012 | 619 |
1013 if (!this.calculator().boundary().equals(oldBoundary)) { | 620 if (!this.calculator().boundary().equals(oldBoundary)) { |
1014 // The boundaries changed, so all item graphs are stale. | 621 // The boundaries changed, so all item graphs are stale. |
1015 this._updateDividersIfNeeded(); | 622 this._columns.updateDividersIfNeeded(); |
1016 var nodes = this._nodesByRequestId.valuesArray(); | 623 var nodes = this._nodesByRequestId.valuesArray(); |
1017 for (var i = 0; i < nodes.length; ++i) | 624 for (var i = 0; i < nodes.length; ++i) |
1018 nodes[i].refreshGraph(); | 625 nodes[i].refreshGraph(); |
1019 } | 626 } |
1020 | 627 |
1021 this._staleRequestIds = {}; | 628 this._staleRequestIds = {}; |
1022 this._updateSummaryBar(); | 629 this._updateSummaryBar(); |
1023 }, | 630 }, |
1024 | 631 |
1025 reset: function() | 632 reset: function() |
1026 { | 633 { |
1027 this._requestWithHighlightedInitiators = null; | 634 this._requestWithHighlightedInitiators = null; |
1028 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Req
uestSelected, null); | 635 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Req
uestSelected, null); |
1029 | 636 |
1030 this._clearSearchMatchedList(); | 637 this._clearSearchMatchedList(); |
1031 if (this._popoverHelper) | 638 |
1032 this._popoverHelper.hidePopover(); | 639 this._columns.reset(); |
1033 | 640 |
1034 this._timeFilter = null; | 641 this._timeFilter = null; |
1035 this._calculator.reset(); | 642 this._calculator.reset(); |
1036 | 643 |
1037 this._timeCalculator.setWindow(null); | 644 this._timeCalculator.setWindow(null); |
1038 | 645 |
1039 var nodes = this._nodesByRequestId.valuesArray(); | 646 var nodes = this._nodesByRequestId.valuesArray(); |
1040 for (var i = 0; i < nodes.length; ++i) | 647 for (var i = 0; i < nodes.length; ++i) |
1041 nodes[i].dispose(); | 648 nodes[i].dispose(); |
1042 | 649 |
1043 this._nodesByRequestId.clear(); | 650 this._nodesByRequestId.clear(); |
1044 this._staleRequestIds = {}; | 651 this._staleRequestIds = {}; |
1045 this._resetSuggestionBuilder(); | 652 this._resetSuggestionBuilder(); |
1046 | 653 |
1047 this._mainRequestLoadTime = -1; | 654 this._mainRequestLoadTime = -1; |
1048 this._mainRequestDOMContentLoadedTime = -1; | 655 this._mainRequestDOMContentLoadedTime = -1; |
1049 this._eventDividers = []; | 656 this._eventDividers = []; |
1050 this._timelineGrid.removeEventDividers(); | |
1051 | 657 |
1052 if (this._dataGrid) { | 658 if (this._dataGrid) { |
1053 this._dataGrid.rootNode().removeChildren(); | 659 this._dataGrid.rootNode().removeChildren(); |
1054 this._updateDividersIfNeeded(); | |
1055 this._updateSummaryBar(); | 660 this._updateSummaryBar(); |
1056 } | 661 } |
1057 }, | 662 }, |
1058 | 663 |
1059 /** | 664 /** |
1060 * @param {string} filterString | 665 * @param {string} filterString |
1061 */ | 666 */ |
1062 setTextFilterValue: function(filterString) | 667 setTextFilterValue: function(filterString) |
1063 { | 668 { |
1064 this._textFilterUI.setValue(filterString); | 669 this._textFilterUI.setValue(filterString); |
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1145 var cookies = request.responseCookies; | 750 var cookies = request.responseCookies; |
1146 for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) { | 751 for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) { |
1147 var cookie = cookies[i]; | 752 var cookie = cookies[i]; |
1148 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieDomain, cookie.domain()); | 753 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieDomain, cookie.domain()); |
1149 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieName, cookie.name()); | 754 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieName, cookie.name()); |
1150 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieValue, cookie.value()); | 755 this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterTy
pe.SetCookieValue, cookie.value()); |
1151 } | 756 } |
1152 | 757 |
1153 this._staleRequestIds[request.requestId] = true; | 758 this._staleRequestIds[request.requestId] = true; |
1154 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Upd
ateRequest, request); | 759 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Upd
ateRequest, request); |
1155 this._scheduleRefresh(); | 760 this.scheduleRefresh(); |
1156 }, | 761 }, |
1157 | 762 |
1158 /** | 763 /** |
1159 * @param {!WebInspector.Event} event | 764 * @param {!WebInspector.Event} event |
1160 */ | 765 */ |
1161 _mainFrameNavigated: function(event) | 766 _mainFrameNavigated: function(event) |
1162 { | 767 { |
1163 if (!this._recording) | 768 if (!this._recording) |
1164 return; | 769 return; |
1165 | 770 |
(...skipping 23 matching lines...) Expand all Loading... |
1189 break; | 794 break; |
1190 } | 795 } |
1191 } | 796 } |
1192 }, | 797 }, |
1193 | 798 |
1194 /** | 799 /** |
1195 * @param {boolean} gridMode | 800 * @param {boolean} gridMode |
1196 */ | 801 */ |
1197 switchViewMode: function(gridMode) | 802 switchViewMode: function(gridMode) |
1198 { | 803 { |
1199 if (this._gridMode === gridMode) | 804 this._columns.switchViewMode(gridMode); |
1200 return; | |
1201 this._gridMode = gridMode; | |
1202 | |
1203 if (gridMode) { | |
1204 if (this._dataGrid.selectedNode) | |
1205 this._dataGrid.selectedNode.selected = false; | |
1206 } else { | |
1207 this._removeAllNodeHighlights(); | |
1208 this._popoverHelper.hidePopover(); | |
1209 } | |
1210 | |
1211 this.element.classList.toggle("brief-mode", !gridMode); | |
1212 this._updateColumns(); | |
1213 }, | 805 }, |
1214 | 806 |
1215 /** | 807 /** |
1216 * @return {number} | 808 * @return {number} |
1217 */ | 809 */ |
1218 rowHeight: function() | 810 rowHeight: function() |
1219 { | 811 { |
1220 return this._rowHeight; | 812 return this._rowHeight; |
1221 }, | 813 }, |
1222 | 814 |
1223 _updateRowsSize: function() | 815 _updateRowsSize: function() |
1224 { | 816 { |
1225 var largeRows = !!this._networkLogLargeRowsSetting.get(); | 817 var largeRows = !!this._networkLogLargeRowsSetting.get(); |
1226 this._rowHeight = largeRows ? 41 : 21; | 818 this._rowHeight = largeRows ? 41 : 21; |
1227 this._dataGrid.element.classList.toggle("small", !largeRows); | 819 this._dataGrid.element.classList.toggle("small", !largeRows); |
1228 this._timelineGrid.element.classList.toggle("small", !largeRows); | |
1229 this._dataGrid.scheduleUpdate(); | 820 this._dataGrid.scheduleUpdate(); |
1230 }, | 821 }, |
1231 | 822 |
1232 /** | 823 /** |
1233 * @param {!Element} element | |
1234 * @param {!Event} event | |
1235 * @return {!Element|!AnchorBox|undefined} | |
1236 */ | |
1237 _getPopoverAnchor: function(element, event) | |
1238 { | |
1239 if (!this._gridMode) | |
1240 return; | |
1241 var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") |
| element.enclosingNodeOrSelfWithClass("network-graph-label"); | |
1242 if (anchor && anchor.parentElement.request && anchor.parentElement.reque
st.timing) | |
1243 return anchor; | |
1244 anchor = element.enclosingNodeOrSelfWithClass("network-script-initiated"
); | |
1245 if (anchor && anchor.request) { | |
1246 var initiator = /** @type {!WebInspector.NetworkRequest} */ (anchor.
request).initiator(); | |
1247 if (initiator && initiator.stack) | |
1248 return anchor; | |
1249 } | |
1250 }, | |
1251 | |
1252 /** | |
1253 * @param {!Element} anchor | |
1254 * @param {!WebInspector.Popover} popover | |
1255 */ | |
1256 _showPopover: function(anchor, popover) | |
1257 { | |
1258 var content; | |
1259 if (anchor.classList.contains("network-script-initiated")) { | |
1260 var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.re
quest); | |
1261 var initiator = /** @type {!NetworkAgent.Initiator} */ (request.init
iator()); | |
1262 content = WebInspector.DOMPresentationUtils.buildStackTracePreviewCo
ntents(request.target(), this._popupLinkifier, initiator.stack); | |
1263 popover.setCanShrink(true); | |
1264 } else { | |
1265 content = WebInspector.RequestTimingView.createTimingTable(anchor.pa
rentElement.request, this._timeCalculator.minimumBoundary()); | |
1266 popover.setCanShrink(false); | |
1267 } | |
1268 popover.showForAnchor(content, anchor); | |
1269 }, | |
1270 | |
1271 _onHidePopover: function() | |
1272 { | |
1273 this._popupLinkifier.reset(); | |
1274 }, | |
1275 | |
1276 _updateColumns: function() | |
1277 { | |
1278 if (!this._dataGrid) | |
1279 return; | |
1280 var gridMode = this._gridMode; | |
1281 var visibleColumns = {"name": true}; | |
1282 if (gridMode) | |
1283 visibleColumns["timeline"] = true; | |
1284 if (gridMode) { | |
1285 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
1286 for (var columnIdentifier in columnsVisibility) | |
1287 visibleColumns[columnIdentifier] = columnsVisibility[columnIdent
ifier]; | |
1288 } | |
1289 | |
1290 this._dataGrid.setColumnsVisiblity(visibleColumns); | |
1291 }, | |
1292 | |
1293 /** | |
1294 * @param {string} columnIdentifier | |
1295 */ | |
1296 _toggleColumnVisibility: function(columnIdentifier) | |
1297 { | |
1298 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
1299 columnsVisibility[columnIdentifier] = !columnsVisibility[columnIdentifie
r]; | |
1300 this._columnsVisibilitySetting.set(columnsVisibility); | |
1301 | |
1302 this._updateColumns(); | |
1303 }, | |
1304 | |
1305 /** | |
1306 * @return {!Array.<string>} | |
1307 */ | |
1308 _getConfigurableColumnIDs: function() | |
1309 { | |
1310 if (this._configurableColumnIDs) | |
1311 return this._configurableColumnIDs; | |
1312 | |
1313 var columnTitles = WebInspector.NetworkLogView._columnTitles; | |
1314 function compare(id1, id2) | |
1315 { | |
1316 return columnTitles[id1].compareTo(columnTitles[id2]); | |
1317 } | |
1318 | |
1319 var columnIDs = Object.keys(this._columnsVisibilitySetting.get()); | |
1320 this._configurableColumnIDs = columnIDs.sort(compare); | |
1321 return this._configurableColumnIDs; | |
1322 }, | |
1323 | |
1324 /** | |
1325 * @param {!Event} event | 824 * @param {!Event} event |
1326 */ | 825 */ |
1327 _contextMenu: function(event) | 826 _contextMenu: function(event) |
1328 { | 827 { |
| 828 // TODO(allada) Fix datagrid's contextmenu so NetworkLogViewColumns can
attach it's own contextmenu event |
| 829 if (this._columns.contextMenu(event)) |
| 830 return; |
1329 var contextMenu = new WebInspector.ContextMenu(event); | 831 var contextMenu = new WebInspector.ContextMenu(event); |
1330 | 832 |
1331 if (this._gridMode && event.target.isSelfOrDescendant(this._dataGrid.hea
derTableBody)) { | |
1332 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
1333 var columnIDs = this._getConfigurableColumnIDs(); | |
1334 var columnTitles = WebInspector.NetworkLogView._columnTitles; | |
1335 for (var i = 0; i < columnIDs.length; ++i) { | |
1336 var columnIdentifier = columnIDs[i]; | |
1337 contextMenu.appendCheckboxItem(columnTitles[columnIdentifier], t
his._toggleColumnVisibility.bind(this, columnIdentifier), !!columnsVisibility[co
lumnIdentifier]); | |
1338 } | |
1339 contextMenu.show(); | |
1340 return; | |
1341 } | |
1342 | |
1343 var gridNode = this._dataGrid.dataGridNodeFromNode(event.target); | 833 var gridNode = this._dataGrid.dataGridNodeFromNode(event.target); |
1344 var request = gridNode && gridNode.request(); | 834 var request = gridNode && gridNode.request(); |
1345 | 835 |
1346 /** | 836 /** |
1347 * @param {string} url | 837 * @param {string} url |
1348 */ | 838 */ |
1349 function openResourceInNewTab(url) | 839 function openResourceInNewTab(url) |
1350 { | 840 { |
1351 InspectorFrontendHost.openInNewTab(url); | 841 InspectorFrontendHost.openInNewTab(url); |
1352 } | 842 } |
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1510 | 1000 |
1511 _clearSearchMatchedList: function() | 1001 _clearSearchMatchedList: function() |
1512 { | 1002 { |
1513 this._matchedRequestCount = -1; | 1003 this._matchedRequestCount = -1; |
1514 this._currentMatchedRequestNode = null; | 1004 this._currentMatchedRequestNode = null; |
1515 this._removeAllHighlights(); | 1005 this._removeAllHighlights(); |
1516 }, | 1006 }, |
1517 | 1007 |
1518 _removeAllHighlights: function() | 1008 _removeAllHighlights: function() |
1519 { | 1009 { |
1520 this._removeAllNodeHighlights(); | 1010 this.removeAllNodeHighlights(); |
1521 for (var i = 0; i < this._highlightedSubstringChanges.length; ++i) | 1011 for (var i = 0; i < this._highlightedSubstringChanges.length; ++i) |
1522 WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]); | 1012 WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]); |
1523 this._highlightedSubstringChanges = []; | 1013 this._highlightedSubstringChanges = []; |
1524 }, | 1014 }, |
1525 | 1015 |
| 1016 dataGridSorted: function() |
| 1017 { |
| 1018 this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindM
atchIndex(this._currentMatchedRequestNode), false); |
| 1019 }, |
| 1020 |
1526 /** | 1021 /** |
1527 * @param {number} n | 1022 * @param {number} n |
1528 * @param {boolean} reveal | 1023 * @param {boolean} reveal |
1529 */ | 1024 */ |
1530 _highlightNthMatchedRequestForSearch: function(n, reveal) | 1025 _highlightNthMatchedRequestForSearch: function(n, reveal) |
1531 { | 1026 { |
1532 this._removeAllHighlights(); | 1027 this._removeAllHighlights(); |
1533 | 1028 |
1534 /** @type {!Array.<!WebInspector.NetworkDataGridNode>} */ | 1029 /** @type {!Array.<!WebInspector.NetworkDataGridNode>} */ |
1535 var nodes = this._dataGrid.rootNode().children; | 1030 var nodes = this._dataGrid.rootNode().children; |
(...skipping 286 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1822 delete this._searchRegex; | 1317 delete this._searchRegex; |
1823 this._clearSearchMatchedList(); | 1318 this._clearSearchMatchedList(); |
1824 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Sea
rchCountUpdated, 0); | 1319 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Sea
rchCountUpdated, 0); |
1825 }, | 1320 }, |
1826 | 1321 |
1827 /** | 1322 /** |
1828 * @param {!WebInspector.NetworkRequest} request | 1323 * @param {!WebInspector.NetworkRequest} request |
1829 */ | 1324 */ |
1830 revealAndHighlightRequest: function(request) | 1325 revealAndHighlightRequest: function(request) |
1831 { | 1326 { |
1832 this._removeAllNodeHighlights(); | 1327 this.removeAllNodeHighlights(); |
1833 | 1328 |
1834 var node = this._nodesByRequestId.get(request.requestId); | 1329 var node = this._nodesByRequestId.get(request.requestId); |
1835 if (node) { | 1330 if (node) { |
1836 node.reveal(); | 1331 node.reveal(); |
1837 this._highlightNode(node); | 1332 this._highlightNode(node); |
1838 } | 1333 } |
1839 }, | 1334 }, |
1840 | 1335 |
1841 _removeAllNodeHighlights: function() | 1336 removeAllNodeHighlights: function() |
1842 { | 1337 { |
1843 if (this._highlightedNode) { | 1338 if (this._highlightedNode) { |
1844 this._highlightedNode.element().classList.remove("highlighted-row"); | 1339 this._highlightedNode.element().classList.remove("highlighted-row"); |
1845 delete this._highlightedNode; | 1340 delete this._highlightedNode; |
1846 } | 1341 } |
1847 }, | 1342 }, |
1848 | 1343 |
1849 /** | 1344 /** |
1850 * @param {!WebInspector.NetworkDataGridNode} node | 1345 * @param {!WebInspector.NetworkDataGridNode} node |
1851 */ | 1346 */ |
(...skipping 341 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2193 return false; | 1688 return false; |
2194 return true; | 1689 return true; |
2195 } | 1690 } |
2196 | 1691 |
2197 WebInspector.NetworkLogView.EventTypes = { | 1692 WebInspector.NetworkLogView.EventTypes = { |
2198 RequestSelected: "RequestSelected", | 1693 RequestSelected: "RequestSelected", |
2199 SearchCountUpdated: "SearchCountUpdated", | 1694 SearchCountUpdated: "SearchCountUpdated", |
2200 SearchIndexUpdated: "SearchIndexUpdated", | 1695 SearchIndexUpdated: "SearchIndexUpdated", |
2201 UpdateRequest: "UpdateRequest" | 1696 UpdateRequest: "UpdateRequest" |
2202 }; | 1697 }; |
OLD | NEW |