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