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