OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @constructor | |
7 * @param {!WebInspector.NetworkLogView} networkLogView | |
8 */ | |
9 WebInspector.NetworkLogViewColumns = function(networkLogView) | |
10 { | |
11 this._networkLogView = networkLogView; | |
12 | |
13 var defaultColumnsVisibility = WebInspector.NetworkLogViewColumns._defaultCo lumnsVisibility; | |
14 /** @type {!WebInspector.Setting} */ | |
15 this._columnsVisibilitySetting = WebInspector.settings.createSetting("networ kLogColumnsVisibility", defaultColumnsVisibility); | |
16 var savedColumnsVisibility = this._columnsVisibilitySetting.get(); | |
17 /** @type {!Object.<boolean>} */ | |
18 var columnsVisibility = {}; | |
19 for (var columnId in defaultColumnsVisibility) | |
20 columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(colu mnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId]; | |
21 this._columnsVisibilitySetting.set(columnsVisibility); | |
22 | |
23 /** @type {!Array<{time: number, element: !Element}>} */ | |
24 this._eventDividers = []; | |
25 | |
26 this._gridMode = true; | |
27 | |
28 /** @type {?WebInspector.DataGrid} */ | |
29 this._dataGrid = null; | |
30 /** @type {!Array.<!WebInspector.ColumnConfig>} */ | |
31 this._columns = []; | |
32 /** @type {!Object.<string, function(!WebInspector.NetworkDataGridNode, !Web Inspector.NetworkDataGridNode) : number>} */ | |
33 this._sortingFunctions = {}; | |
34 /** @type {!Object.<string, !WebInspector.NetworkTimeCalculator>} */ | |
35 this._calculators = {}; | |
36 /** @type {?Element} */ | |
37 this._timelineSortSelector = null; | |
38 | |
39 /** @type {?WebInspector.TimelineGrid} */ | |
40 this._timelineGrid = null; | |
41 | |
42 /** @type {!WebInspector.Linkifier} */ | |
43 this._popupLinkifier = new WebInspector.Linkifier(); | |
44 } | |
45 | |
46 WebInspector.NetworkLogViewColumns._responseHeaderColumns = ["Cache-Control", "C onnection", "Content-Encoding", "Content-Length", "ETag", "Keep-Alive", "Last-Mo dified", "Server", "Vary"]; | |
47 WebInspector.NetworkLogViewColumns._defaultColumnsVisibility = { | |
48 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, | |
49 "Cache-Control": false, "Connection": false, "Content-Encoding": false, "Con tent-Length": false, "ETag": false, "Keep-Alive": false, "Last-Modified": false, "Server": false, "Vary": false | |
50 }; | |
51 | |
52 /** | |
53 * @typedef {{ | |
54 * id: string, | |
55 * title: string, | |
56 * titleDOMFragment: !DocumentFragment, | |
57 * sortable: boolean, | |
58 * weight: number, | |
59 * sort: (?WebInspector.DataGrid.Order|undefined), | |
60 * align: (?WebInspector.DataGrid.Align|undefined), | |
61 * }} | |
62 */ | |
63 WebInspector.ColumnConfig; | |
64 | |
65 /** @type {!Object.<string, string>} */ | |
66 WebInspector.NetworkLogViewColumns._columnTitles = { | |
67 "name": WebInspector.UIString("Name"), | |
68 "method": WebInspector.UIString("Method"), | |
69 "status": WebInspector.UIString("Status"), | |
70 "protocol": WebInspector.UIString("Protocol"), | |
71 "scheme": WebInspector.UIString("Scheme"), | |
72 "domain": WebInspector.UIString("Domain"), | |
73 "remoteAddress": WebInspector.UIString("Remote Address"), | |
74 "type": WebInspector.UIString("Type"), | |
75 "initiator": WebInspector.UIString("Initiator"), | |
76 "cookies": WebInspector.UIString("Cookies"), | |
77 "setCookies": WebInspector.UIString("Set-Cookies"), | |
78 "size": WebInspector.UIString("Size"), | |
79 "time": WebInspector.UIString("Time"), | |
80 "connectionId": WebInspector.UIString("Connection Id"), | |
81 "priority": WebInspector.UIString("Priority"), | |
82 "timeline": WebInspector.UIString("Timeline"), | |
83 | |
84 // Response header columns | |
85 "Cache-Control": WebInspector.UIString("Cache-Control"), | |
86 "Connection": WebInspector.UIString("Connection"), | |
87 "Content-Encoding": WebInspector.UIString("Content-Encoding"), | |
88 "Content-Length": WebInspector.UIString("Content-Length"), | |
89 "ETag": WebInspector.UIString("ETag"), | |
90 "Keep-Alive": WebInspector.UIString("Keep-Alive"), | |
91 "Last-Modified": WebInspector.UIString("Last-Modified"), | |
92 "Server": WebInspector.UIString("Server"), | |
93 "Vary": WebInspector.UIString("Vary") | |
94 }; | |
95 | |
96 WebInspector.NetworkLogViewColumns.prototype = { | |
97 willHide: function() | |
98 { | |
99 this._popoverHelper.hidePopover(); | |
100 }, | |
101 | |
102 reset: function() | |
103 { | |
104 if (this._popoverHelper) | |
105 this._popoverHelper.hidePopover(); | |
106 this._timelineGrid.removeEventDividers(); | |
107 this.updateDividersIfNeeded(); | |
108 }, | |
109 | |
110 /** | |
111 * @param {!WebInspector.SortableDataGrid} dataGrid | |
112 */ | |
113 setDataGrid: function(dataGrid) | |
114 { | |
115 this._createTimelineGrid(); | |
dgozman
2016/07/01 00:54:24
Let's inline this into createDataGrid.
Allada-Google
2016/07/01 01:28:39
Done.
| |
116 this._dataGrid = dataGrid; | |
117 this._updateColumns(); | |
118 this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChan ged, this._sortItems, this); | |
119 this._dataGrid.sortNodes(this._sortingFunctions.startTime, false); | |
120 this._patchTimelineHeader(); | |
121 | |
122 this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResi zed, this.updateDividersIfNeeded, this); | |
123 }, | |
124 | |
125 initializeView: function() | |
dgozman
2016/07/01 00:54:24
And combine with this.
Allada-Google
2016/07/01 01:28:39
Done.
| |
126 { | |
127 this._createSortingFunctions(); | |
128 this._popoverHelper = new WebInspector.PopoverHelper(this._networkLogVie w.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this ._onHidePopover.bind(this)); | |
129 }, | |
130 | |
131 /** | |
132 * @return {!WebInspector.SortableDataGrid} dataGrid | |
133 */ | |
134 createGrid: function() | |
135 { | |
136 this._dataGrid = new WebInspector.SortableDataGrid(this._columns); | |
137 return this._dataGrid | |
dgozman
2016/07/01 00:54:23
style: semicolon
Allada-Google
2016/07/01 01:28:39
Done.
| |
138 }, | |
139 | |
140 _createSortingFunctions: function() | |
141 { | |
142 this._sortingFunctions.name = WebInspector.NetworkDataGridNode.NameCompa rator; | |
143 this._sortingFunctions.method = WebInspector.NetworkDataGridNode.Request PropertyComparator.bind(null, "requestMethod"); | |
144 this._sortingFunctions.status = WebInspector.NetworkDataGridNode.Request PropertyComparator.bind(null, "statusCode"); | |
145 this._sortingFunctions.protocol = WebInspector.NetworkDataGridNode.Reque stPropertyComparator.bind(null, "protocol"); | |
146 this._sortingFunctions.scheme = WebInspector.NetworkDataGridNode.Request PropertyComparator.bind(null, "scheme"); | |
147 this._sortingFunctions.domain = WebInspector.NetworkDataGridNode.Request PropertyComparator.bind(null, "domain"); | |
148 this._sortingFunctions.remoteAddress = WebInspector.NetworkDataGridNode. RemoteAddressComparator; | |
149 this._sortingFunctions.type = WebInspector.NetworkDataGridNode.TypeCompa rator; | |
150 this._sortingFunctions.initiator = WebInspector.NetworkDataGridNode.Init iatorComparator; | |
151 this._sortingFunctions.cookies = WebInspector.NetworkDataGridNode.Reques tCookiesCountComparator; | |
152 this._sortingFunctions.setCookies = WebInspector.NetworkDataGridNode.Res ponseCookiesCountComparator; | |
153 this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeCompa rator; | |
154 this._sortingFunctions.time = WebInspector.NetworkDataGridNode.RequestPr opertyComparator.bind(null, "duration"); | |
155 this._sortingFunctions.connectionId = WebInspector.NetworkDataGridNode.R equestPropertyComparator.bind(null, "connectionId"); | |
156 this._sortingFunctions.priority = WebInspector.NetworkDataGridNode.Initi alPriorityComparator; | |
157 this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.Reque stPropertyComparator.bind(null, "startTime"); | |
158 this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.Requ estPropertyComparator.bind(null, "startTime"); | |
159 this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.Reques tPropertyComparator.bind(null, "endTime"); | |
160 this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.R equestPropertyComparator.bind(null, "responseReceivedTime"); | |
161 this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.Reque stPropertyComparator.bind(null, "duration"); | |
162 this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.Reques tPropertyComparator.bind(null, "latency"); | |
163 | |
164 this._sortingFunctions["Cache-Control"] = WebInspector.NetworkDataGridNo de.ResponseHeaderStringComparator.bind(null, "Cache-Control"); | |
165 this._sortingFunctions["Connection"] = WebInspector.NetworkDataGridNode. ResponseHeaderStringComparator.bind(null, "Connection"); | |
166 this._sortingFunctions["Content-Encoding"] = WebInspector.NetworkDataGri dNode.ResponseHeaderStringComparator.bind(null, "Content-Encoding"); | |
167 this._sortingFunctions["Content-Length"] = WebInspector.NetworkDataGridN ode.ResponseHeaderNumberComparator.bind(null, "Content-Length"); | |
168 this._sortingFunctions["ETag"] = WebInspector.NetworkDataGridNode.Respon seHeaderStringComparator.bind(null, "ETag"); | |
169 this._sortingFunctions["Keep-Alive"] = WebInspector.NetworkDataGridNode. ResponseHeaderStringComparator.bind(null, "Keep-Alive"); | |
170 this._sortingFunctions["Last-Modified"] = WebInspector.NetworkDataGridNo de.ResponseHeaderDateComparator.bind(null, "Last-Modified"); | |
171 this._sortingFunctions["Server"] = WebInspector.NetworkDataGridNode.Resp onseHeaderStringComparator.bind(null, "Server"); | |
172 this._sortingFunctions["Vary"] = WebInspector.NetworkDataGridNode.Respon seHeaderStringComparator.bind(null, "Vary"); | |
173 }, | |
174 | |
175 _sortItems: function() | |
176 { | |
177 this._networkLogView.onWillSort(); | |
178 var columnIdentifier = this._dataGrid.sortColumnIdentifier(); | |
179 if (!columnIdentifier) | |
180 return; | |
181 if (columnIdentifier === "timeline") { | |
182 this._sortByTimeline(); | |
183 return; | |
184 } | |
185 var sortingFunction = this._sortingFunctions[columnIdentifier]; | |
186 if (!sortingFunction) | |
187 return; | |
188 | |
189 this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAsc ending()); | |
190 this._timelineSortSelector.selectedIndex = 0; | |
191 this._networkLogView.onSorted(); | |
192 }, | |
193 | |
194 _sortByTimeline: function() | |
195 { | |
196 this._networkLogView.onWillSort(); | |
197 var selectedIndex = this._timelineSortSelector.selectedIndex; | |
198 if (!selectedIndex) | |
199 selectedIndex = 1; // Sort by start time by default. | |
200 var selectedOption = this._timelineSortSelector[selectedIndex]; | |
201 var value = selectedOption.value; | |
202 | |
203 this._networkLogView.setCalculator(this._calculators[value]); | |
204 var sortingFunction = this._sortingFunctions[value]; | |
205 this._dataGrid.sortNodes(sortingFunction); | |
206 | |
207 this._networkLogView.onSorted(); | |
208 | |
209 this._dataGrid.markColumnAsSortedBy("timeline", selectedOption.sortOrder ); | |
210 }, | |
211 | |
212 setupColumns: function() | |
dgozman
2016/07/01 00:54:23
And also combine with this.
Allada-Google
2016/07/01 01:28:39
Done.
| |
213 { | |
214 var timeCalculator = this._networkLogView.timeCalculator(); | |
215 var durationCalculator = this._networkLogView.durationCalculator(); | |
216 | |
217 this._calculators.timeline = timeCalculator; | |
218 this._calculators.startTime = timeCalculator; | |
219 this._calculators.endTime = timeCalculator; | |
220 this._calculators.responseTime = timeCalculator; | |
221 this._calculators.duration = durationCalculator; | |
222 this._calculators.latency = durationCalculator; | |
223 | |
224 var columns = []; | |
225 columns.push({ | |
226 id: "name", | |
227 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Na me"), WebInspector.UIString("Path")), | |
228 title: WebInspector.NetworkLogViewColumns._columnTitles["name"], | |
229 weight: 20 | |
230 }); | |
231 | |
232 columns.push({ | |
233 id: "method", | |
234 title: WebInspector.NetworkLogViewColumns._columnTitles["method"], | |
235 weight: 6 | |
236 }); | |
237 | |
238 columns.push({ | |
239 id: "status", | |
240 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("St atus"), WebInspector.UIString("Text")), | |
241 title: WebInspector.NetworkLogViewColumns._columnTitles["status"], | |
242 weight: 6 | |
243 }); | |
244 | |
245 columns.push({ | |
246 id: "protocol", | |
247 title: WebInspector.NetworkLogViewColumns._columnTitles["protocol"], | |
248 weight: 6 | |
249 }); | |
250 | |
251 columns.push({ | |
252 id: "scheme", | |
253 title: WebInspector.NetworkLogViewColumns._columnTitles["scheme"], | |
254 weight: 6 | |
255 }); | |
256 | |
257 columns.push({ | |
258 id: "domain", | |
259 title: WebInspector.NetworkLogViewColumns._columnTitles["domain"], | |
260 weight: 6 | |
261 }); | |
262 | |
263 columns.push({ | |
264 id: "remoteAddress", | |
265 title: WebInspector.NetworkLogViewColumns._columnTitles["remoteAddre ss"], | |
266 weight: 10, | |
267 align: WebInspector.DataGrid.Align.Right | |
268 }); | |
269 | |
270 columns.push({ | |
271 id: "type", | |
272 title: WebInspector.NetworkLogViewColumns._columnTitles["type"], | |
273 weight: 6 | |
274 }); | |
275 | |
276 columns.push({ | |
277 id: "initiator", | |
278 title: WebInspector.NetworkLogViewColumns._columnTitles["initiator"] , | |
279 weight: 10 | |
280 }); | |
281 | |
282 columns.push({ | |
283 id: "cookies", | |
284 title: WebInspector.NetworkLogViewColumns._columnTitles["cookies"], | |
285 weight: 6, | |
286 align: WebInspector.DataGrid.Align.Right | |
287 }); | |
288 | |
289 columns.push({ | |
290 id: "setCookies", | |
291 title: WebInspector.NetworkLogViewColumns._columnTitles["setCookies" ], | |
292 weight: 6, | |
293 align: WebInspector.DataGrid.Align.Right | |
294 }); | |
295 | |
296 columns.push({ | |
297 id: "size", | |
298 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Si ze"), WebInspector.UIString("Content")), | |
299 title: WebInspector.NetworkLogViewColumns._columnTitles["size"], | |
300 weight: 6, | |
301 align: WebInspector.DataGrid.Align.Right | |
302 }); | |
303 | |
304 columns.push({ | |
305 id: "time", | |
306 titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Ti me"), WebInspector.UIString("Latency")), | |
307 title: WebInspector.NetworkLogViewColumns._columnTitles["time"], | |
308 weight: 6, | |
309 align: WebInspector.DataGrid.Align.Right | |
310 }); | |
311 | |
312 columns.push({ | |
313 id: "priority", | |
314 title: WebInspector.NetworkLogViewColumns._columnTitles["priority"], | |
315 weight: 6 | |
316 }); | |
317 | |
318 columns.push({ | |
319 id: "connectionId", | |
320 title: WebInspector.NetworkLogViewColumns._columnTitles["connectionI d"], | |
321 weight: 6 | |
322 }); | |
323 | |
324 var responseHeaderColumns = WebInspector.NetworkLogViewColumns._response HeaderColumns; | |
325 for (var i = 0; i < responseHeaderColumns.length; ++i) { | |
326 var headerName = responseHeaderColumns[i]; | |
327 var descriptor = { | |
328 id: headerName, | |
329 title: WebInspector.NetworkLogViewColumns._columnTitles[headerNa me], | |
330 weight: 6 | |
331 }; | |
332 if (headerName === "Content-Length") | |
333 descriptor.align = WebInspector.DataGrid.Align.Right; | |
334 columns.push(descriptor); | |
335 } | |
336 | |
337 columns.push({ | |
338 id: "timeline", | |
339 title: WebInspector.NetworkLogViewColumns._columnTitles["timeline"], | |
340 sortable: false, | |
341 weight: 40, | |
342 sort: WebInspector.DataGrid.Order.Ascending | |
343 }); | |
344 | |
345 for (var column of columns) { | |
346 column.sortable = column.id !== "timeline"; | |
347 column.nonSelectable = column.id !== "name"; | |
348 } | |
349 this._columns = columns; | |
350 | |
351 this._networkLogView.switchViewMode(true); | |
352 }, | |
353 | |
354 _patchTimelineHeader: function() | |
355 { | |
356 var timelineSorting = createElement("select"); | |
357 | |
358 var option = createElement("option"); | |
359 option.value = "startTime"; | |
360 option.label = WebInspector.UIString("Timeline"); | |
361 option.disabled = true; | |
362 timelineSorting.appendChild(option); | |
363 | |
364 option = createElement("option"); | |
365 option.value = "startTime"; | |
366 option.label = WebInspector.UIString("Timeline \u2013 Start Time"); | |
367 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
368 timelineSorting.appendChild(option); | |
369 | |
370 option = createElement("option"); | |
371 option.value = "responseTime"; | |
372 option.label = WebInspector.UIString("Timeline \u2013 Response Time"); | |
373 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
374 timelineSorting.appendChild(option); | |
375 | |
376 option = createElement("option"); | |
377 option.value = "endTime"; | |
378 option.label = WebInspector.UIString("Timeline \u2013 End Time"); | |
379 option.sortOrder = WebInspector.DataGrid.Order.Ascending; | |
380 timelineSorting.appendChild(option); | |
381 | |
382 option = createElement("option"); | |
383 option.value = "duration"; | |
384 option.label = WebInspector.UIString("Timeline \u2013 Total Duration"); | |
385 option.sortOrder = WebInspector.DataGrid.Order.Descending; | |
386 timelineSorting.appendChild(option); | |
387 | |
388 option = createElement("option"); | |
389 option.value = "latency"; | |
390 option.label = WebInspector.UIString("Timeline \u2013 Latency"); | |
391 option.sortOrder = WebInspector.DataGrid.Order.Descending; | |
392 timelineSorting.appendChild(option); | |
393 | |
394 var header = this._dataGrid.headerTableHeader("timeline"); | |
395 header.replaceChild(timelineSorting, header.firstChild); | |
396 header.createChild("div", "sort-order-icon-container").createChild("div" , "sort-order-icon"); | |
397 | |
398 timelineSorting.selectedIndex = 1; | |
399 timelineSorting.addEventListener("click", function(event) { event.consum e(); }, false); | |
400 timelineSorting.addEventListener("change", this._sortByTimeline.bind(thi s), false); | |
401 this._timelineSortSelector = timelineSorting; | |
402 }, | |
403 | |
404 _updateColumns: function() | |
405 { | |
406 if (!this._dataGrid) | |
407 return; | |
408 var gridMode = this._gridMode; | |
409 var visibleColumns = {"name": true}; | |
410 if (gridMode) | |
411 visibleColumns["timeline"] = true; | |
412 if (gridMode) { | |
413 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
414 for (var columnIdentifier in columnsVisibility) | |
415 visibleColumns[columnIdentifier] = columnsVisibility[columnIdent ifier]; | |
416 } | |
417 | |
418 this._dataGrid.setColumnsVisiblity(visibleColumns); | |
419 }, | |
420 | |
421 /** | |
422 * @param {boolean} gridMode | |
423 */ | |
424 switchViewMode: function(gridMode) | |
425 { | |
426 if (this._gridMode === gridMode) | |
427 return; | |
428 this._gridMode = gridMode; | |
429 | |
430 if (gridMode) { | |
431 if (this._dataGrid.selectedNode) | |
432 this._dataGrid.selectedNode.selected = false; | |
433 } else { | |
434 this._networkLogView.removeAllNodeHighlights(); | |
435 this._popoverHelper.hidePopover(); | |
436 } | |
437 | |
438 this._networkLogView.element.classList.toggle("brief-mode", !gridMode); | |
439 this._updateColumns(); | |
440 }, | |
441 | |
442 /** | |
443 * @param {string} columnIdentifier | |
444 */ | |
445 _toggleColumnVisibility: function(columnIdentifier) | |
446 { | |
447 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
448 columnsVisibility[columnIdentifier] = !columnsVisibility[columnIdentifie r]; | |
449 this._columnsVisibilitySetting.set(columnsVisibility); | |
450 | |
451 this._updateColumns(); | |
452 }, | |
453 | |
454 /** | |
455 * @return {!Array.<string>} | |
456 */ | |
457 _getConfigurableColumnIDs: function() | |
458 { | |
459 if (this._configurableColumnIDs) | |
460 return this._configurableColumnIDs; | |
461 | |
462 var columnTitles = WebInspector.NetworkLogViewColumns._columnTitles; | |
463 function compare(id1, id2) | |
464 { | |
465 return columnTitles[id1].compareTo(columnTitles[id2]); | |
466 } | |
467 | |
468 var columnIDs = Object.keys(this._columnsVisibilitySetting.get()); | |
469 this._configurableColumnIDs = columnIDs.sort(compare); | |
470 return this._configurableColumnIDs; | |
471 }, | |
472 | |
473 /** | |
474 * @param {string} title | |
475 * @param {string} subtitle | |
476 * @return {!DocumentFragment} | |
477 */ | |
478 _makeHeaderFragment: function(title, subtitle) | |
479 { | |
480 var fragment = createDocumentFragment(); | |
481 fragment.createTextChild(title); | |
482 var subtitleDiv = fragment.createChild("div", "network-header-subtitle") ; | |
483 subtitleDiv.createTextChild(subtitle); | |
484 return fragment; | |
485 }, | |
486 | |
487 /** | |
488 * @param {!Event} event | |
489 * @return {boolean} | |
490 */ | |
491 contextMenu: function(event) | |
492 { | |
493 if (!this._gridMode || !event.target.isSelfOrDescendant(this._dataGrid.h eaderTableBody)) | |
494 return false; | |
495 | |
496 var contextMenu = new WebInspector.ContextMenu(event); | |
497 | |
498 var columnsVisibility = this._columnsVisibilitySetting.get(); | |
499 var columnIDs = this._getConfigurableColumnIDs(); | |
500 var columnTitles = WebInspector.NetworkLogViewColumns._columnTitles; | |
501 for (var i = 0; i < columnIDs.length; ++i) { | |
502 var columnIdentifier = columnIDs[i]; | |
503 contextMenu.appendCheckboxItem(columnTitles[columnIdentifier], this. _toggleColumnVisibility.bind(this, columnIdentifier), !!columnsVisibility[column Identifier]); | |
504 } | |
505 contextMenu.show(); | |
506 return true; | |
507 }, | |
508 | |
509 _createTimelineGrid: function() | |
510 { | |
511 this._timelineGrid = new WebInspector.TimelineGrid(); | |
512 this._timelineGrid.element.classList.add("network-timeline-grid"); | |
513 this._dataGrid.element.appendChild(this._timelineGrid.element); | |
514 }, | |
515 | |
516 updateDividersIfNeeded: function() | |
517 { | |
518 if (!this._networkLogView.isShowing()) { | |
519 this._networkLogView.scheduleRefresh(); | |
520 return; | |
521 } | |
522 | |
523 var timelineOffset = this._dataGrid.columnOffset("timeline"); | |
524 // Position timline grid location. | |
525 if (timelineOffset) | |
526 this._timelineGrid.element.style.left = timelineOffset + "px"; | |
527 | |
528 var calculator = this._networkLogView.calculator(); | |
529 calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWid th); | |
530 this._timelineGrid.updateDividers(calculator, 75); | |
531 | |
532 if (calculator.startAtZero) { | |
533 // If our current sorting method starts at zero, that means it shows all | |
534 // requests starting at the same point, and so onLoad event and DOMC ontent | |
535 // event lines really wouldn't make much sense here, so don't render them. | |
536 return; | |
537 } | |
538 | |
539 this._updateEventDividers(); | |
540 }, | |
541 | |
542 /** | |
543 * @param {!Element} element | |
544 * @param {!Event} event | |
545 * @return {!Element|!AnchorBox|undefined} | |
546 */ | |
547 _getPopoverAnchor: function(element, event) | |
548 { | |
549 if (!this._gridMode) | |
550 return; | |
551 var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") | | element.enclosingNodeOrSelfWithClass("network-graph-label"); | |
552 if (anchor && anchor.parentElement.request && anchor.parentElement.reque st.timing) | |
553 return anchor; | |
554 anchor = element.enclosingNodeOrSelfWithClass("network-script-initiated" ); | |
555 if (anchor && anchor.request) { | |
556 var initiator = /** @type {!WebInspector.NetworkRequest} */ (anchor. request).initiator(); | |
557 if (initiator && initiator.stack) | |
558 return anchor; | |
559 } | |
560 }, | |
561 | |
562 /** | |
563 * @param {!Element} anchor | |
564 * @param {!WebInspector.Popover} popover | |
565 */ | |
566 _showPopover: function(anchor, popover) | |
567 { | |
568 var content; | |
569 if (anchor.classList.contains("network-script-initiated")) { | |
570 var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.re quest); | |
571 var initiator = /** @type {!NetworkAgent.Initiator} */ (request.init iator()); | |
572 content = WebInspector.DOMPresentationUtils.buildStackTracePreviewCo ntents(request.target(), this._popupLinkifier, initiator.stack); | |
573 popover.setCanShrink(true); | |
574 } else { | |
575 content = WebInspector.RequestTimingView.createTimingTable(anchor.pa rentElement.request, this._networkLogView.timeCalculator().minimumBoundary()); | |
576 popover.setCanShrink(false); | |
577 } | |
578 popover.showForAnchor(content, anchor); | |
579 }, | |
580 | |
581 _onHidePopover: function() | |
582 { | |
583 this._popupLinkifier.reset(); | |
584 }, | |
585 | |
586 /** | |
587 * @param {!Array<number>} times | |
588 * @param {string} className | |
589 */ | |
590 addEventDividers: function(times, className) | |
591 { | |
592 for (var i = 0; i < times.length; ++i) { | |
593 var element = createElementWithClass("div", "network-event-divider " + className); | |
594 this._timelineGrid.addEventDivider(element); | |
595 this._eventDividers.push({time: times[i], element: element}); | |
596 } | |
597 // Update event dividers immediately | |
598 this._updateEventDividers(); | |
599 // Schedule refresh in case dividers change the calculator span. | |
600 this._networkLogView.scheduleRefresh(); | |
601 }, | |
602 | |
603 _updateEventDividers: function() | |
604 { | |
605 var calculator = this._networkLogView.calculator(); | |
606 for (var divider of this._eventDividers) { | |
607 var timePercent = calculator.computePercentageFromEventTime(divider. time); | |
608 divider.element.classList.toggle("invisible", timePercent < 0); | |
609 divider.element.style.left = timePercent + "%"; | |
610 } | |
611 }, | |
612 | |
613 hideEventDividers: function() | |
614 { | |
615 this._timelineGrid.hideEventDividers(); | |
616 }, | |
617 | |
618 showEventDividers: function() | |
619 { | |
620 this._timelineGrid.showEventDividers(); | |
621 }, | |
622 | |
623 /** | |
624 * @param {boolean} isLargeRows | |
625 */ | |
626 rowSizeUpdated: function(isLargeRows) | |
627 { | |
628 this._timelineGrid.element.classList.toggle("small", !isLargeRows); | |
629 } | |
630 } | |
OLD | NEW |