src/third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js

   1 /*
   2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
   4  * Copyright (C) 2011 Google Inc. All rights reserved.
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @implements {WebInspector.Searchable}
  34  * @implements {WebInspector.TargetManager.Observer}
  35  * @extends {WebInspector.VBox}
  36  * @param {!WebInspector.FilterBar} filterBar
  37  * @param {!WebInspector.Setting} coulmnsVisibilitySetting
  38  */
  39 WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
  40 {
  41     WebInspector.VBox.call(this);
  42     this.registerRequiredCSS("networkLogView.css");
  43     this.registerRequiredCSS("filter.css");
  44
  45     this._filterBar = filterBar;
  46     this._coulmnsVisibilitySetting = coulmnsVisibilitySetting;
  47     this._allowRequestSelection = false;
  48     /** @type {!StringMap.<!WebInspector.NetworkDataGridNode>} */
  49     this._nodesByRequestId = new StringMap();
  50     /** @type {!Object.<string, boolean>} */
  51     this._staleRequestIds = {};
  52     /** @type {number} */
  53     this._mainRequestLoadTime = -1;
  54     /** @type {number} */
  55     this._mainRequestDOMContentLoadedTime = -1;
  56     this._matchedRequestCount = 0;
  57     this._highlightedSubstringChanges = [];
  58
  59     /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */
  60     this._filters = [];
  61
  62     this._currentMatchedRequestNode = null;
  63     this._currentMatchedRequestIndex = -1;
  64
  65     this._createStatusbarButtons();
  66     this._createStatusBarItems();
  67     this._linkifier = new WebInspector.Linkifier();
  68
  69     this._allowPopover = true;
  70
  71     /** @type {number} */
  72     this._rowHeight = 0;
  73
  74     this._addFilters();
  75     this._resetSuggestionBuilder();
  76     this._initializeView();
  77     this._recordButton.toggled = true;
  78
  79     WebInspector.targetManager.observeTargets(this);
  80     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.EventTypes.RequestStarted, this._onRequestStarted, this);
  81     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.EventTypes.RequestUpdated, this._onRequestUpdated, this);
  82     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.EventTypes.RequestFinished, this._onRequestUpdated, this);
  83
  84     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.WillReloadPage, this._willReloadPage, this);
  85     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
  86     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.Load, this._loadEventFired, this);
  87     WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.DOMContentLoaded, this._domContentLoadedEventFired, this);
  88 }
  89
  90 WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": true, "wss": true};
  91 WebInspector.NetworkLogView._responseHeaderColumns = ["Cache-Control", "Connection", "Content-Encoding", "Content-Length", "ETag", "Keep-Alive", "Last-Modified", "Server", "Vary"];
  92 WebInspector.NetworkLogView.defaultColumnsVisibility = {
  93     method: true, status: true, scheme: false, domain: false, remoteAddress: false, type: true, initiator: true, cookies: false, setCookies: false, size: true, time: true, connectionId: false,
  94     "Cache-Control": false, "Connection": false, "Content-Encoding": false, "Content-Length": false, "ETag": false, "Keep-Alive": false, "Last-Modified": false, "Server": false, "Vary": false
  95 };
  96 WebInspector.NetworkLogView._defaultRefreshDelay = 500;
  97
  98 /** @enum {string} */
  99 WebInspector.NetworkLogView.FilterType = {
 100     Domain: "Domain",
 101     HasResponseHeader: "HasResponseHeader",
 102     Method: "Method",
 103     MimeType: "MimeType",
 104     Scheme: "Scheme",
 105     SetCookieDomain: "SetCookieDomain",
 106     SetCookieName: "SetCookieName",
 107     SetCookieValue: "SetCookieValue",
 108     StatusCode: "StatusCode"
 109 };
 110
 111 /** @type {!Array.<string>} */
 112 WebInspector.NetworkLogView._searchKeys = Object.values(WebInspector.NetworkLogView.FilterType);
 113
 114 /** @type {!Object.<string, string>} */
 115 WebInspector.NetworkLogView._columnTitles = {
 116     "name": WebInspector.UIString("Name"),
 117     "method": WebInspector.UIString("Method"),
 118     "status": WebInspector.UIString("Status"),
 119     "scheme": WebInspector.UIString("Scheme"),
 120     "domain": WebInspector.UIString("Domain"),
 121     "remoteAddress": WebInspector.UIString("Remote Address"),
 122     "type": WebInspector.UIString("Type"),
 123     "initiator": WebInspector.UIString("Initiator"),
 124     "cookies": WebInspector.UIString("Cookies"),
 125     "setCookies": WebInspector.UIString("Set-Cookies"),
 126     "size": WebInspector.UIString("Size"),
 127     "time": WebInspector.UIString("Time"),
 128     "connectionId": WebInspector.UIString("Connection Id"),
 129     "timeline": WebInspector.UIString("Timeline"),
 130
 131     // Response header columns
 132     "Cache-Control": WebInspector.UIString("Cache-Control"),
 133     "Connection": WebInspector.UIString("Connection"),
 134     "Content-Encoding": WebInspector.UIString("Content-Encoding"),
 135     "Content-Length": WebInspector.UIString("Content-Length"),
 136     "ETag": WebInspector.UIString("ETag"),
 137     "Keep-Alive": WebInspector.UIString("Keep-Alive"),
 138     "Last-Modified": WebInspector.UIString("Last-Modified"),
 139     "Server": WebInspector.UIString("Server"),
 140     "Vary": WebInspector.UIString("Vary")
 141 };
 142
 143 WebInspector.NetworkLogView.prototype = {
 144     /**
 145      * @param {!WebInspector.Target} target
 146      */
 147     targetAdded: function(target)
 148     {
 149         target.networkLog.requests.forEach(this._appendRequest.bind(this));
 150     },
 151
 152     /**
 153      * @param {!WebInspector.Target} target
 154      */
 155     targetRemoved: function(target)
 156     {
 157     },
 158
 159     /**
 160      * @return {boolean}
 161      */
 162     allowRequestSelection: function()
 163     {
 164         return this._allowRequestSelection;
 165     },
 166
 167     _addFilters: function()
 168     {
 169         this._textFilterUI = new WebInspector.TextFilterUI();
 170         this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged, this);
 171         this._filterBar.addFilter(this._textFilterUI);
 172
 173         var types = [];
 174         for (var typeId in WebInspector.resourceTypes) {
 175             var resourceType = WebInspector.resourceTypes[typeId];
 176             types.push({name: resourceType.name(), label: resourceType.categoryTitle()});
 177         }
 178         this._resourceTypeFilterUI = new WebInspector.NamedBitSetFilterUI(types, WebInspector.settings.networkResourceTypeFilters);
 179         this._resourceTypeFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
 180         this._filterBar.addFilter(this._resourceTypeFilterUI);
 181
 182         var dataURLSetting = WebInspector.settings.networkHideDataURL;
 183         this._dataURLFilterUI = new WebInspector.CheckboxFilterUI("hide-data-url", WebInspector.UIString("Hide data URLs"), true, dataURLSetting);
 184         this._dataURLFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
 185         this._filterBar.addFilter(this._dataURLFilterUI);
 186     },
 187
 188     _resetSuggestionBuilder: function()
 189     {
 190         this._suggestionBuilder = new WebInspector.FilterSuggestionBuilder(WebInspector.NetworkLogView._searchKeys);
 191         this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder);
 192     },
 193
 194     /**
 195      * @param {!WebInspector.Event} event
 196      */
 197     _filterChanged: function(event)
 198     {
 199         this._removeAllNodeHighlights();
 200         this._parseFilterQuery(this._textFilterUI.value());
 201         this._filterRequests();
 202     },
 203
 204     _initializeView: function()
 205     {
 206         this.element.id = "network-container";
 207
 208         this._createSortingFunctions();
 209         this._createCalculators();
 210         this._createTable();
 211         this._createTimelineGrid();
 212         this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 213
 214         this._updateRowsSize();
 215
 216         this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
 217         // Enable faster hint.
 218         this._popoverHelper.setTimeout(100);
 219
 220         this.switchViewMode(true);
 221     },
 222
 223     /**
 224      * @return {!Array.<!Element>}
 225      */
 226     statusBarItems: function()
 227     {
 228         return [
 229             this._recordButton.element,
 230             this._clearButton.element,
 231             this._filterBar.filterButton().element,
 232             this._largerRequestsButton.element,
 233             this._preserveLogCheckbox.element,
 234             this._disableCacheCheckbox.element,
 235             this._progressBarContainer];
 236     },
 237
 238     /**
 239      * @return {boolean}
 240      */
 241     usesLargeRows: function()
 242     {
 243         return !!WebInspector.settings.resourcesLargeRows.get();
 244     },
 245
 246     /**
 247      * @param {boolean} flag
 248      */
 249     setAllowPopover: function(flag)
 250     {
 251         this._allowPopover = flag;
 252     },
 253
 254     /**
 255      * @return {!Array.<!Element>}
 256      */
 257     elementsToRestoreScrollPositionsFor: function()
 258     {
 259         if (!this._dataGrid) // Not initialized yet.
 260             return [];
 261         return [this._dataGrid.scrollContainer];
 262     },
 263
 264     _createTimelineGrid: function()
 265     {
 266         this._timelineGrid = new WebInspector.TimelineGrid();
 267         this._timelineGrid.element.classList.add("network-timeline-grid");
 268         this._dataGrid.element.appendChild(this._timelineGrid.element);
 269     },
 270
 271     _createTable: function()
 272     {
 273         var columns = [];
 274         columns.push({
 275             id: "name",
 276             titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Name"), WebInspector.UIString("Path")),
 277             title: WebInspector.NetworkLogView._columnTitles["name"],
 278             sortable: true,
 279             weight: 20,
 280             disclosure: true
 281         });
 282
 283         columns.push({
 284             id: "method",
 285             title: WebInspector.NetworkLogView._columnTitles["method"],
 286             sortable: true,
 287             weight: 6
 288         });
 289
 290         columns.push({
 291             id: "status",
 292             titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Status"), WebInspector.UIString("Text")),
 293             title: WebInspector.NetworkLogView._columnTitles["status"],
 294             sortable: true,
 295             weight: 6
 296         });
 297
 298         columns.push({
 299             id: "scheme",
 300             title: WebInspector.NetworkLogView._columnTitles["scheme"],
 301             sortable: true,
 302             weight: 6
 303         });
 304
 305         columns.push({
 306             id: "domain",
 307             title: WebInspector.NetworkLogView._columnTitles["domain"],
 308             sortable: true,
 309             weight: 6
 310         });
 311
 312         columns.push({
 313             id: "remoteAddress",
 314             title: WebInspector.NetworkLogView._columnTitles["remoteAddress"],
 315             sortable: true,
 316             weight: 10,
 317             align: WebInspector.DataGrid.Align.Right
 318         });
 319
 320         columns.push({
 321             id: "type",
 322             title: WebInspector.NetworkLogView._columnTitles["type"],
 323             sortable: true,
 324             weight: 6
 325         });
 326
 327         columns.push({
 328             id: "initiator",
 329             title: WebInspector.NetworkLogView._columnTitles["initiator"],
 330             sortable: true,
 331             weight: 10
 332         });
 333
 334         columns.push({
 335             id: "cookies",
 336             title: WebInspector.NetworkLogView._columnTitles["cookies"],
 337             sortable: true,
 338             weight: 6,
 339             align: WebInspector.DataGrid.Align.Right
 340         });
 341
 342         columns.push({
 343             id: "setCookies",
 344             title: WebInspector.NetworkLogView._columnTitles["setCookies"],
 345             sortable: true,
 346             weight: 6,
 347             align: WebInspector.DataGrid.Align.Right
 348         });
 349
 350         columns.push({
 351             id: "size",
 352             titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Size"), WebInspector.UIString("Content")),
 353             title: WebInspector.NetworkLogView._columnTitles["size"],
 354             sortable: true,
 355             weight: 6,
 356             align: WebInspector.DataGrid.Align.Right
 357         });
 358
 359         columns.push({
 360             id: "time",
 361             titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Time"), WebInspector.UIString("Latency")),
 362             title: WebInspector.NetworkLogView._columnTitles["time"],
 363             sortable: true,
 364             weight: 6,
 365             align: WebInspector.DataGrid.Align.Right
 366         });
 367
 368         columns.push({
 369             id: "connectionId",
 370             title: WebInspector.NetworkLogView._columnTitles["connectionId"],
 371             sortable: true,
 372             weight: 6
 373         });
 374
 375         var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderColumns;
 376         for (var i = 0; i < responseHeaderColumns.length; ++i) {
 377             var headerName = responseHeaderColumns[i];
 378             var descriptor = {
 379                 id: headerName,
 380                 title: WebInspector.NetworkLogView._columnTitles[headerName],
 381                 weight: 6
 382             }
 383             if (headerName === "Content-Length")
 384                 descriptor.align = WebInspector.DataGrid.Align.Right;
 385             columns.push(descriptor);
 386         }
 387
 388         columns.push({
 389             id: "timeline",
 390             titleDOMFragment: document.createDocumentFragment(),
 391             title: WebInspector.NetworkLogView._columnTitles["timeline"],
 392             sortable: false,
 393             weight: 40,
 394             sort: WebInspector.DataGrid.Order.Ascending
 395         });
 396
 397         this._dataGrid = new WebInspector.SortableDataGrid(columns);
 398         this._dataGrid.setStickToBottom(true);
 399         this._updateColumns();
 400         this._dataGrid.setName("networkLog");
 401         this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last);
 402         this._dataGrid.element.classList.add("network-log-grid");
 403         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
 404         this._dataGrid.show(this.element);
 405
 406         // Event listeners need to be added _after_ we attach to the document, so that owner document is properly update.
 407         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
 408         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this);
 409
 410         this._patchTimelineHeader();
 411         this._dataGrid.sortNodes(this._sortingFunctions.startTime, false);
 412     },
 413
 414     /**
 415      * @param {string} title
 416      * @param {string} subtitle
 417      * @return {!DocumentFragment}
 418      */
 419     _makeHeaderFragment: function(title, subtitle)
 420     {
 421         var fragment = document.createDocumentFragment();
 422         fragment.createTextChild(title);
 423         var subtitleDiv = fragment.createChild("div", "network-header-subtitle");
 424         subtitleDiv.createTextChild(subtitle);
 425         return fragment;
 426     },
 427
 428     _patchTimelineHeader: function()
 429     {
 430         var timelineSorting = document.createElement("select");
 431
 432         var option = document.createElement("option");
 433         option.value = "startTime";
 434         option.label = WebInspector.UIString("Timeline");
 435         timelineSorting.appendChild(option);
 436
 437         option = document.createElement("option");
 438         option.value = "startTime";
 439         option.label = WebInspector.UIString("Start Time");
 440         timelineSorting.appendChild(option);
 441
 442         option = document.createElement("option");
 443         option.value = "responseTime";
 444         option.label = WebInspector.UIString("Response Time");
 445         timelineSorting.appendChild(option);
 446
 447         option = document.createElement("option");
 448         option.value = "endTime";
 449         option.label = WebInspector.UIString("End Time");
 450         timelineSorting.appendChild(option);
 451
 452         option = document.createElement("option");
 453         option.value = "duration";
 454         option.label = WebInspector.UIString("Duration");
 455         timelineSorting.appendChild(option);
 456
 457         option = document.createElement("option");
 458         option.value = "latency";
 459         option.label = WebInspector.UIString("Latency");
 460         timelineSorting.appendChild(option);
 461
 462         var header = this._dataGrid.headerTableHeader("timeline");
 463         header.replaceChild(timelineSorting, header.firstChild);
 464
 465         timelineSorting.addEventListener("click", function(event) { event.consume() }, false);
 466         timelineSorting.addEventListener("change", this._sortByTimeline.bind(this), false);
 467         this._timelineSortSelector = timelineSorting;
 468     },
 469
 470     _createSortingFunctions: function()
 471     {
 472         this._sortingFunctions = {};
 473         this._sortingFunctions.name = WebInspector.NetworkDataGridNode.NameComparator;
 474         this._sortingFunctions.method = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "method", false);
 475         this._sortingFunctions.status = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "statusCode", false);
 476         this._sortingFunctions.scheme = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "scheme", false);
 477         this._sortingFunctions.domain = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "domain", false);
 478         this._sortingFunctions.remoteAddress = WebInspector.NetworkDataGridNode.RemoteAddressComparator;
 479         this._sortingFunctions.type = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "mimeType", false);
 480         this._sortingFunctions.initiator = WebInspector.NetworkDataGridNode.InitiatorComparator;
 481         this._sortingFunctions.cookies = WebInspector.NetworkDataGridNode.RequestCookiesCountComparator;
 482         this._sortingFunctions.setCookies = WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator;
 483         this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeComparator;
 484         this._sortingFunctions.time = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", false);
 485         this._sortingFunctions.connectionId = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "connectionId", false);
 486         this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
 487         this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
 488         this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "endTime", false);
 489         this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "responseReceivedTime", false);
 490         this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", true);
 491         this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "latency", true);
 492     },
 493
 494     _createCalculators: function()
 495     {
 496         /** @type {!WebInspector.NetworkTransferTimeCalculator} */
 497         this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
 498         /** @type {!WebInspector.NetworkTransferDurationCalculator} */
 499         this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
 500
 501         /** @type {!Object.<string, !WebInspector.NetworkTimeCalculator>} */
 502         this._calculators = {};
 503         this._calculators.timeline = this._timeCalculator;
 504         this._calculators.startTime = this._timeCalculator;
 505         this._calculators.endTime = this._timeCalculator;
 506         this._calculators.responseTime = this._timeCalculator;
 507         this._calculators.duration = this._durationCalculator;
 508         this._calculators.latency = this._durationCalculator;
 509
 510         this._calculator = this._timeCalculator;
 511     },
 512
 513     _sortItems: function()
 514     {
 515         this._removeAllNodeHighlights();
 516         var columnIdentifier = this._dataGrid.sortColumnIdentifier();
 517         if (columnIdentifier === "timeline") {
 518             this._sortByTimeline();
 519             return;
 520         }
 521         var sortingFunction = this._sortingFunctions[columnIdentifier];
 522         if (!sortingFunction)
 523             return;
 524
 525         this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
 526         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
 527         this._timelineSortSelector.selectedIndex = 0;
 528
 529         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
 530             action: WebInspector.UserMetrics.UserActionNames.NetworkSort,
 531             column: columnIdentifier,
 532             sortOrder: this._dataGrid.sortOrder()
 533         });
 534     },
 535
 536     _sortByTimeline: function()
 537     {
 538         this._removeAllNodeHighlights();
 539         var selectedIndex = this._timelineSortSelector.selectedIndex;
 540         if (!selectedIndex)
 541             selectedIndex = 1; // Sort by start time by default.
 542         var selectedOption = this._timelineSortSelector[selectedIndex];
 543         var value = selectedOption.value;
 544
 545         this._setCalculator(this._calculators[value]);
 546         var sortingFunction = this._sortingFunctions[value];
 547         this._dataGrid.sortNodes(sortingFunction);
 548         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
 549         this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
 550     },
 551
 552     _createStatusBarItems: function()
 553     {
 554         this._progressBarContainer = document.createElement("div");
 555         this._progressBarContainer.className = "status-bar-item";
 556     },
 557
 558     _updateSummaryBar: function()
 559     {
 560         var requestsNumber = this._nodesByRequestId.size;
 561
 562         if (!requestsNumber) {
 563             if (this._summaryBarElement._isDisplayingWarning)
 564                 return;
 565             this._summaryBarElement._isDisplayingWarning = true;
 566             this._summaryBarElement.removeChildren();
 567             this._summaryBarElement.createChild("div", "warning-icon-small");
 568             var text = WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity.");
 569             this._summaryBarElement.createTextChild(text);
 570             this._summaryBarElement.title = text;
 571             return;
 572         }
 573         delete this._summaryBarElement._isDisplayingWarning;
 574
 575         var transferSize = 0;
 576         var selectedRequestsNumber = 0;
 577         var selectedTransferSize = 0;
 578         var baseTime = -1;
 579         var maxTime = -1;
 580         var nodes = this._nodesByRequestId.values();
 581         for (var i = 0; i < nodes.length; ++i) {
 582             var request = nodes[i].request();
 583             var requestTransferSize = request.transferSize;
 584             transferSize += requestTransferSize;
 585             if (!nodes[i]._isFilteredOut) {
 586                 selectedRequestsNumber++;
 587                 selectedTransferSize += requestTransferSize;
 588             }
 589             if (request.url === request.target().resourceTreeModel.inspectedPageURL())
 590                 baseTime = request.startTime;
 591             if (request.endTime > maxTime)
 592                 maxTime = request.endTime;
 593         }
 594         var text = "";
 595         if (selectedRequestsNumber !== requestsNumber) {
 596             text += String.sprintf(WebInspector.UIString("%d / %d requests"), selectedRequestsNumber, requestsNumber);
 597             text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s / %s transferred"), Number.bytesToString(selectedTransferSize), Number.bytesToString(transferSize));
 598         } else {
 599             text += String.sprintf(WebInspector.UIString("%d requests"), requestsNumber);
 600             text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s transferred"), Number.bytesToString(transferSize));
 601         }
 602         if (baseTime !== -1 && this._mainRequestLoadTime !== -1 && this._mainRequestDOMContentLoadedTime !== -1 && this._mainRequestDOMContentLoadedTime > baseTime) {
 603             text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s (load: %s, DOMContentLoaded: %s)"),
 604                         Number.secondsToString(maxTime - baseTime),
 605                         Number.secondsToString(this._mainRequestLoadTime - baseTime),
 606                         Number.secondsToString(this._mainRequestDOMContentLoadedTime - baseTime));
 607         }
 608         this._summaryBarElement.textContent = text;
 609         this._summaryBarElement.title = text;
 610     },
 611
 612     _scheduleRefresh: function()
 613     {
 614         if (this._needsRefresh)
 615             return;
 616
 617         this._needsRefresh = true;
 618
 619         if (this.isShowing() && !this._refreshTimeout)
 620             this._refreshTimeout = setTimeout(this.refresh.bind(this), WebInspector.NetworkLogView._defaultRefreshDelay);
 621     },
 622
 623     _updateDividersIfNeeded: function()
 624     {
 625         var timelineOffset = this._dataGrid.columnOffset("timeline");
 626         // Position timline grid location.
 627         if (timelineOffset)
 628             this._timelineGrid.element.style.left = timelineOffset + "px";
 629
 630         var calculator = this.calculator();
 631         var proceed = true;
 632         if (!this.isShowing()) {
 633             this._scheduleRefresh();
 634             proceed = false;
 635         } else {
 636             calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWidth);
 637             proceed = this._timelineGrid.updateDividers(calculator);
 638         }
 639         if (!proceed)
 640             return;
 641
 642         if (calculator.startAtZero) {
 643             // If our current sorting method starts at zero, that means it shows all
 644             // requests starting at the same point, and so onLoad event and DOMContent
 645             // event lines really wouldn't make much sense here, so don't render them.
 646             return;
 647         }
 648
 649         this._timelineGrid.removeEventDividers();
 650         if (this._mainRequestLoadTime !== -1) {
 651             var percent = calculator.computePercentageFromEventTime(this._mainRequestLoadTime);
 652
 653             var loadDivider = document.createElement("div");
 654             loadDivider.className = "network-event-divider network-red-divider";
 655
 656             var loadDividerPadding = document.createElement("div");
 657             loadDividerPadding.className = "network-event-divider-padding";
 658             loadDividerPadding.title = WebInspector.UIString("Load event");
 659             loadDividerPadding.appendChild(loadDivider);
 660             loadDividerPadding.style.left = percent + "%";
 661             this._timelineGrid.addEventDivider(loadDividerPadding);
 662         }
 663
 664         if (this._mainRequestDOMContentLoadedTime !== -1) {
 665             var percent = calculator.computePercentageFromEventTime(this._mainRequestDOMContentLoadedTime);
 666
 667             var domContentLoadedDivider = document.createElement("div");
 668             domContentLoadedDivider.className = "network-event-divider network-blue-divider";
 669
 670             var domContentLoadedDividerPadding = document.createElement("div");
 671             domContentLoadedDividerPadding.className = "network-event-divider-padding";
 672             domContentLoadedDividerPadding.title = WebInspector.UIString("DOMContentLoaded event");
 673             domContentLoadedDividerPadding.appendChild(domContentLoadedDivider);
 674             domContentLoadedDividerPadding.style.left = percent + "%";
 675             this._timelineGrid.addEventDivider(domContentLoadedDividerPadding);
 676         }
 677     },
 678
 679     _refreshIfNeeded: function()
 680     {
 681         if (this._needsRefresh)
 682             this.refresh();
 683     },
 684
 685     _invalidateAllItems: function()
 686     {
 687         var requestIds = this._nodesByRequestId.keys();
 688         for (var i = 0; i < requestIds.length; ++i)
 689             this._staleRequestIds[requestIds[i]] = true;
 690     },
 691
 692     /**
 693      * @return {!WebInspector.NetworkTimeCalculator}
 694      */
 695     calculator: function()
 696     {
 697         return this._calculator;
 698     },
 699
 700     /**
 701      * @param {!WebInspector.NetworkTimeCalculator} x
 702      */
 703     _setCalculator: function(x)
 704     {
 705         if (!x || this._calculator === x)
 706             return;
 707
 708         this._calculator = x;
 709         this._calculator.reset();
 710
 711         if (this._calculator.startAtZero)
 712             this._timelineGrid.hideEventDividers();
 713         else
 714             this._timelineGrid.showEventDividers();
 715
 716         this._invalidateAllItems();
 717         this.refresh();
 718     },
 719
 720     _createStatusbarButtons: function()
 721     {
 722         this._recordButton = new WebInspector.StatusBarButton(WebInspector.UIString("Record Network Log"), "record-profile-status-bar-item");
 723         this._recordButton.addEventListener("click", this._onRecordButtonClicked, this);
 724
 725         this._clearButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear"), "clear-status-bar-item");
 726         this._clearButton.addEventListener("click", this._reset, this);
 727
 728         this._largerRequestsButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "network-larger-resources-status-bar-item");
 729         this._largerRequestsButton.toggled = WebInspector.settings.resourcesLargeRows.get();
 730         this._largerRequestsButton.addEventListener("click", this._toggleLargerRequests, this);
 731
 732         this._preserveLogCheckbox = new WebInspector.StatusBarCheckbox(WebInspector.UIString("Preserve log"));
 733         this._preserveLogCheckbox.element.title = WebInspector.UIString("Do not clear log on page reload / navigation.");
 734
 735         this._disableCacheCheckbox = new WebInspector.StatusBarCheckbox(WebInspector.UIString("Disable cache"));
 736         WebInspector.SettingsUI.bindCheckbox(this._disableCacheCheckbox.inputElement, WebInspector.settings.cacheDisabled);
 737         this._disableCacheCheckbox.element.title = WebInspector.UIString("Disable cache (while DevTools is open).");
 738     },
 739
 740     /**
 741      * @param {!WebInspector.Event} event
 742      */
 743     _loadEventFired: function(event)
 744     {
 745         if (!this._recordButton.toggled)
 746             return;
 747
 748         var data = /** @type {number} */ (event.data);
 749         this._mainRequestLoadTime = data || -1;
 750         // Schedule refresh to update boundaries and draw the new line.
 751         this._scheduleRefresh();
 752     },
 753
 754     /**
 755      * @param {!WebInspector.Event} event
 756      */
 757     _domContentLoadedEventFired: function(event)
 758     {
 759         if (!this._recordButton.toggled)
 760             return;
 761         var data = /** @type {number} */ (event.data);
 762         this._mainRequestDOMContentLoadedTime = data || -1;
 763         // Schedule refresh to update boundaries and draw the new line.
 764         this._scheduleRefresh();
 765     },
 766
 767     wasShown: function()
 768     {
 769         this._refreshIfNeeded();
 770     },
 771
 772     willHide: function()
 773     {
 774         this._popoverHelper.hidePopover();
 775     },
 776
 777     refresh: function()
 778     {
 779         this._needsRefresh = false;
 780         if (this._refreshTimeout) {
 781             clearTimeout(this._refreshTimeout);
 782             delete this._refreshTimeout;
 783         }
 784
 785         this._removeAllNodeHighlights();
 786         var boundariesChanged = false;
 787         var calculator = this.calculator();
 788         if (calculator.updateBoundariesForEventTime) {
 789             boundariesChanged = calculator.updateBoundariesForEventTime(this._mainRequestLoadTime) || boundariesChanged;
 790             boundariesChanged = calculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime) || boundariesChanged;
 791         }
 792
 793         var dataGrid = this._dataGrid;
 794         var rootNode = dataGrid.rootNode();
 795         var nodesToInsert = [];
 796         for (var requestId in this._staleRequestIds) {
 797             var node = this._nodesByRequestId.get(requestId);
 798             if (!node)
 799                 continue;
 800             if (!node._isFilteredOut)
 801                 rootNode.removeChild(node);
 802             node._isFilteredOut = !this._applyFilter(node);
 803             if (!node._isFilteredOut)
 804                 nodesToInsert.push(node);
 805         }
 806
 807         for (var i = 0; i < nodesToInsert.length; ++i) {
 808             var node = nodesToInsert[i];
 809             var request = node.request();
 810             node.refresh();
 811             dataGrid.insertChild(node);
 812             node._isMatchingSearchQuery = this._matchRequest(request);
 813             if (calculator.updateBoundaries(request))
 814                 boundariesChanged = true;
 815         }
 816
 817         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
 818
 819         if (boundariesChanged) {
 820             // The boundaries changed, so all item graphs are stale.
 821             this._updateDividersIfNeeded();
 822             var nodes = this._nodesByRequestId.values();
 823             for (var i = 0; i < nodes.length; ++i)
 824                 nodes[i].refreshGraph();
 825         }
 826
 827         this._staleRequestIds = {};
 828         this._updateSummaryBar();
 829     },
 830
 831     _onRecordButtonClicked: function()
 832     {
 833         if (!this._recordButton.toggled)
 834             this._reset();
 835         this._recordButton.toggled = !this._recordButton.toggled;
 836     },
 837
 838     _reset: function()
 839     {
 840         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.ViewCleared);
 841
 842         this._clearSearchMatchedList();
 843         if (this._popoverHelper)
 844             this._popoverHelper.hidePopover();
 845
 846         if (this._calculator)
 847             this._calculator.reset();
 848
 849         var nodes = this._nodesByRequestId.values();
 850         for (var i = 0; i < nodes.length; ++i)
 851             nodes[i].dispose();
 852
 853         this._nodesByRequestId.clear();
 854         this._staleRequestIds = {};
 855         this._resetSuggestionBuilder();
 856
 857         if (this._dataGrid) {
 858             this._dataGrid.rootNode().removeChildren();
 859             this._updateDividersIfNeeded();
 860             this._updateSummaryBar();
 861         }
 862
 863         this._mainRequestLoadTime = -1;
 864         this._mainRequestDOMContentLoadedTime = -1;
 865     },
 866
 867     /**
 868      * @param {!WebInspector.Event} event
 869      */
 870     _onRequestStarted: function(event)
 871     {
 872         if (this._recordButton.toggled) {
 873             var request = /** @type {!WebInspector.NetworkRequest} */ (event.data);
 874             this._appendRequest(request);
 875         }
 876     },
 877
 878     /**
 879      * @param {!WebInspector.NetworkRequest} request
 880      */
 881     _appendRequest: function(request)
 882     {
 883         var node = new WebInspector.NetworkDataGridNode(this, request);
 884
 885         // In case of redirect request id is reassigned to a redirected
 886         // request and we need to update _nodesByRequestId and search results.
 887         var originalRequestNode = this._nodesByRequestId.get(request.requestId);
 888         if (originalRequestNode)
 889             this._nodesByRequestId.set(originalRequestNode.request().requestId, originalRequestNode);
 890         this._nodesByRequestId.set(request.requestId, node);
 891
 892         // Pull all the redirects of the main request upon commit load.
 893         if (request.redirects) {
 894             for (var i = 0; i < request.redirects.length; ++i)
 895                 this._refreshRequest(request.redirects[i]);
 896         }
 897
 898         this._refreshRequest(request);
 899     },
 900
 901     /**
 902      * @param {!WebInspector.Event} event
 903      */
 904     _onRequestUpdated: function(event)
 905     {
 906         var request = /** @type {!WebInspector.NetworkRequest} */ (event.data);
 907         this._refreshRequest(request);
 908     },
 909
 910     /**
 911      * @param {!WebInspector.NetworkRequest} request
 912      */
 913     _refreshRequest: function(request)
 914     {
 915         if (!this._nodesByRequestId.get(request.requestId))
 916             return;
 917
 918         this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Domain, request.domain);
 919         this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Method, request.requestMethod);
 920         this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.MimeType, request.mimeType);
 921         this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Scheme, "" + request.scheme);
 922         this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.StatusCode, "" + request.statusCode);
 923
 924         var responseHeaders = request.responseHeaders;
 925         for (var i = 0, l = responseHeaders.length; i < l; ++i)
 926             this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.HasResponseHeader, responseHeaders[i].name);
 927         var cookies = request.responseCookies;
 928         for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) {
 929             var cookie = cookies[i];
 930             this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieDomain, cookie.domain());
 931             this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieName, cookie.name());
 932             this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieValue, cookie.value());
 933         }
 934
 935         this._staleRequestIds[request.requestId] = true;
 936         this._scheduleRefresh();
 937     },
 938
 939     /**
 940      * @param {!WebInspector.Event} event
 941      */
 942     _willReloadPage: function(event)
 943     {
 944         this._recordButton.toggled = true;
 945         if (!this._preserveLogCheckbox.checked())
 946             this._reset();
 947     },
 948
 949     /**
 950      * @param {!WebInspector.Event} event
 951      */
 952     _mainFrameNavigated: function(event)
 953     {
 954         if (!this._recordButton.toggled || this._preserveLogCheckbox.checked())
 955             return;
 956
 957         var frame = /** @type {!WebInspector.ResourceTreeFrame} */ (event.data);
 958         var loaderId = frame.loaderId;
 959
 960         // Pick provisional load requests.
 961         var requestsToPick = [];
 962         var requests = frame.target().networkLog.requests;
 963         for (var i = 0; i < requests.length; ++i) {
 964             var request = requests[i];
 965             if (request.loaderId === loaderId)
 966                 requestsToPick.push(request);
 967         }
 968
 969         this._reset();
 970
 971         for (var i = 0; i < requestsToPick.length; ++i)
 972             this._appendRequest(requestsToPick[i]);
 973     },
 974
 975     /**
 976      * @param {boolean} detailed
 977      */
 978     switchViewMode: function(detailed)
 979     {
 980         if (this._detailedMode === detailed)
 981             return;
 982         this._detailedMode = detailed;
 983
 984         if (detailed) {
 985             if (this._dataGrid.selectedNode)
 986                 this._dataGrid.selectedNode.selected = false;
 987         } else {
 988             this._removeAllNodeHighlights();
 989             this._popoverHelper.hidePopover();
 990         }
 991
 992         this.element.classList.toggle("brief-mode", !detailed);
 993         this._updateColumns();
 994     },
 995
 996     _toggleLargerRequests: function()
 997     {
 998         WebInspector.settings.resourcesLargeRows.set(!WebInspector.settings.resourcesLargeRows.get());
 999         this._updateRowsSize();
1000     },
1001
1002     /**
1003      * @return {number}
1004      */
1005     rowHeight: function()
1006     {
1007         return this._rowHeight;
1008     },
1009
1010     _updateRowsSize: function()
1011     {
1012         var largeRows = this.usesLargeRows();
1013         this._largerRequestsButton.toggled = largeRows;
1014         this._rowHeight = largeRows ? 41 : 21;
1015         this._largerRequestsButton.title = WebInspector.UIString(largeRows ? "Use small resource rows." : "Use large resource rows.");
1016         this._dataGrid.element.classList.toggle("small", !largeRows);
1017         this._timelineGrid.element.classList.toggle("small", !largeRows);
1018         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: largeRows });
1019     },
1020
1021     /**
1022      * @param {!Element} element
1023      * @param {!Event} event
1024      * @return {!Element|!AnchorBox|undefined}
1025      */
1026     _getPopoverAnchor: function(element, event)
1027     {
1028         if (!this._allowPopover)
1029             return;
1030         var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
1031         if (anchor && anchor.parentElement.request && anchor.parentElement.request.timing)
1032             return anchor;
1033         anchor = element.enclosingNodeOrSelfWithClass("network-script-initiated");
1034         if (anchor && anchor.request) {
1035             var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request);
1036             var initiator = anchor.request.initiator();
1037             if (initiator && (initiator.stackTrace || initiator.asyncStackTrace))
1038                 return anchor;
1039         }
1040     },
1041
1042     /**
1043      * @param {!Element} anchor
1044      * @param {!WebInspector.Popover} popover
1045      */
1046     _showPopover: function(anchor, popover)
1047     {
1048         var content;
1049         if (anchor.classList.contains("network-script-initiated"))
1050             content = this._generateScriptInitiatedPopoverContent(anchor.request);
1051         else
1052             content = WebInspector.RequestTimingView.createTimingTable(anchor.parentElement.request);
1053         popover.show(content, anchor);
1054     },
1055
1056     _onHidePopover: function()
1057     {
1058         this._linkifier.reset();
1059     },
1060
1061     /**
1062      * @param {!WebInspector.NetworkRequest} request
1063      * @return {!Element}
1064      */
1065     _generateScriptInitiatedPopoverContent: function(request)
1066     {
1067         var framesTable = document.createElementWithClass("table", "network-stack-trace");
1068
1069         /**
1070          * @param {!Array.<!ConsoleAgent.CallFrame>} stackTrace
1071          * @this {WebInspector.NetworkLogView}
1072          */
1073         function appendStackTrace(stackTrace)
1074         {
1075             for (var i = 0; i < stackTrace.length; ++i) {
1076                 var stackFrame = stackTrace[i];
1077                 var row = document.createElement("tr");
1078                 row.createChild("td").textContent = stackFrame.functionName || WebInspector.UIString("(anonymous function)");
1079                 row.createChild("td").textContent = " @ ";
1080                 row.createChild("td").appendChild(this._linkifier.linkifyConsoleCallFrame(request.target(), stackFrame));
1081                 framesTable.appendChild(row);
1082             }
1083         }
1084
1085         // Initiator is not null, checked in _getPopoverAnchor.
1086         var initiator = /** @type {!NetworkAgent.Initiator} */ (request.initiator());
1087         if (initiator.stackTrace)
1088             appendStackTrace.call(this, initiator.stackTrace);
1089
1090         var asyncStackTrace = initiator.asyncStackTrace;
1091         while (asyncStackTrace) {
1092             var callFrames = asyncStackTrace.callFrames;
1093             if (!callFrames || !callFrames.length)
1094                 break;
1095             var row = framesTable.createChild("tr");
1096             row.createChild("td", "network-async-trace-description").textContent = WebInspector.asyncStackTraceLabel(asyncStackTrace.description);
1097             row.createChild("td");
1098             row.createChild("td");
1099             appendStackTrace.call(this, callFrames);
1100             asyncStackTrace = asyncStackTrace.asyncStackTrace;
1101         }
1102
1103         return framesTable;
1104     },
1105
1106     _updateColumns: function()
1107     {
1108         var detailedMode = !!this._detailedMode;
1109         var visibleColumns = {"name": true};
1110         if (detailedMode) {
1111             visibleColumns["timeline"] = true;
1112             var columnsVisibility = this._coulmnsVisibilitySetting.get();
1113             for (var columnIdentifier in columnsVisibility)
1114                 visibleColumns[columnIdentifier] = columnsVisibility[columnIdentifier];
1115         }
1116
1117         this._dataGrid.setColumnsVisiblity(visibleColumns);
1118     },
1119
1120     /**
1121      * @param {string} columnIdentifier
1122      */
1123     _toggleColumnVisibility: function(columnIdentifier)
1124     {
1125         var columnsVisibility = this._coulmnsVisibilitySetting.get();
1126         columnsVisibility[columnIdentifier] = !columnsVisibility[columnIdentifier];
1127         this._coulmnsVisibilitySetting.set(columnsVisibility);
1128
1129         this._updateColumns();
1130     },
1131
1132     /**
1133      * @return {!Array.<string>}
1134      */
1135     _getConfigurableColumnIDs: function()
1136     {
1137         if (this._configurableColumnIDs)
1138             return this._configurableColumnIDs;
1139
1140         var columnTitles = WebInspector.NetworkLogView._columnTitles;
1141         function compare(id1, id2)
1142         {
1143             return columnTitles[id1].compareTo(columnTitles[id2]);
1144         }
1145
1146         var columnIDs = Object.keys(this._coulmnsVisibilitySetting.get());
1147         this._configurableColumnIDs = columnIDs.sort(compare);
1148         return this._configurableColumnIDs;
1149     },
1150
1151     /**
1152      * @param {!Event} event
1153      */
1154     _contextMenu: function(event)
1155     {
1156         var contextMenu = new WebInspector.ContextMenu(event);
1157
1158         if (this._detailedMode && event.target.isSelfOrDescendant(this._dataGrid.headerTableBody)) {
1159             var columnsVisibility = this._coulmnsVisibilitySetting.get();
1160             var columnIDs = this._getConfigurableColumnIDs();
1161             var columnTitles = WebInspector.NetworkLogView._columnTitles;
1162             for (var i = 0; i < columnIDs.length; ++i) {
1163                 var columnIdentifier = columnIDs[i];
1164                 contextMenu.appendCheckboxItem(columnTitles[columnIdentifier], this._toggleColumnVisibility.bind(this, columnIdentifier), !!columnsVisibility[columnIdentifier]);
1165             }
1166             contextMenu.show();
1167             return;
1168         }
1169
1170         var gridNode = this._dataGrid.dataGridNodeFromNode(event.target);
1171         var request = gridNode && gridNode.request();
1172
1173         /**
1174          * @param {string} url
1175          */
1176         function openResourceInNewTab(url)
1177         {
1178             InspectorFrontendHost.openInNewTab(url);
1179         }
1180
1181         if (request) {
1182             contextMenu.appendItem(WebInspector.openLinkExternallyLabel(), openResourceInNewTab.bind(null, request.url));
1183             contextMenu.appendSeparator();
1184             contextMenu.appendItem(WebInspector.copyLinkAddressLabel(), this._copyLocation.bind(this, request));
1185             if (request.requestHeadersText())
1186                 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy request headers" : "Copy Request Headers"), this._copyRequestHeaders.bind(this, request));
1187             if (request.responseHeadersText)
1188                 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy response headers" : "Copy Response Headers"), this._copyResponseHeaders.bind(this, request));
1189             if (request.finished)
1190                 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy response" : "Copy Response"), this._copyResponse.bind(this, request));
1191             contextMenu.appendItem(WebInspector.UIString("Copy as cURL"), this._copyCurlCommand.bind(this, request));
1192         }
1193         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy all as HAR" : "Copy All as HAR"), this._copyAll.bind(this));
1194
1195         contextMenu.appendSeparator();
1196         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Save as HAR with content" : "Save as HAR with Content"), this._exportAll.bind(this));
1197
1198         contextMenu.appendSeparator();
1199         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Clear browser cache" : "Clear Browser Cache"), this._clearBrowserCache.bind(this));
1200         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Clear browser cookies" : "Clear Browser Cookies"), this._clearBrowserCookies.bind(this));
1201
1202         if (request && request.type === WebInspector.resourceTypes.XHR) {
1203             contextMenu.appendSeparator();
1204             contextMenu.appendItem(WebInspector.UIString("Replay XHR"), request.replayXHR.bind(request));
1205             contextMenu.appendSeparator();
1206         }
1207
1208         contextMenu.show();
1209     },
1210
1211     _harRequests: function()
1212     {
1213         var requests = this._nodesByRequestId.values().map(function(node) { return node.request(); });
1214         var httpRequests = requests.filter(WebInspector.NetworkLogView.HTTPRequestsFilter);
1215         httpRequests = httpRequests.filter(WebInspector.NetworkLogView.FinishedRequestsFilter);
1216         return httpRequests.filter(WebInspector.NetworkLogView.NonDevToolsRequestsFilter);
1217     },
1218
1219     _copyAll: function()
1220     {
1221         var harArchive = {
1222             log: (new WebInspector.HARLog(this._harRequests())).build()
1223         };
1224         InspectorFrontendHost.copyText(JSON.stringify(harArchive, null, 2));
1225     },
1226
1227     /**
1228      * @param {!WebInspector.NetworkRequest} request
1229      */
1230     _copyLocation: function(request)
1231     {
1232         InspectorFrontendHost.copyText(request.url);
1233     },
1234
1235     /**
1236      * @param {!WebInspector.NetworkRequest} request
1237      */
1238     _copyRequestHeaders: function(request)
1239     {
1240         InspectorFrontendHost.copyText(request.requestHeadersText());
1241     },
1242
1243     /**
1244      * @param {!WebInspector.NetworkRequest} request
1245      */
1246     _copyResponse: function(request)
1247     {
1248         /**
1249          * @param {?string} content
1250          */
1251         function callback(content)
1252         {
1253             if (request.contentEncoded)
1254                 content = request.asDataURL();
1255             InspectorFrontendHost.copyText(content || "");
1256         }
1257         request.requestContent(callback);
1258     },
1259
1260     /**
1261      * @param {!WebInspector.NetworkRequest} request
1262      */
1263     _copyResponseHeaders: function(request)
1264     {
1265         InspectorFrontendHost.copyText(request.responseHeadersText);
1266     },
1267
1268     /**
1269      * @param {!WebInspector.NetworkRequest} request
1270      */
1271     _copyCurlCommand: function(request)
1272     {
1273         InspectorFrontendHost.copyText(this._generateCurlCommand(request));
1274     },
1275
1276     _exportAll: function()
1277     {
1278         var filename = WebInspector.targetManager.inspectedPageDomain() + ".har";
1279         var stream = new WebInspector.FileOutputStream();
1280         stream.open(filename, openCallback.bind(this));
1281
1282         /**
1283          * @param {boolean} accepted
1284          * @this {WebInspector.NetworkLogView}
1285          */
1286         function openCallback(accepted)
1287         {
1288             if (!accepted)
1289                 return;
1290             var progressIndicator = new WebInspector.ProgressIndicator();
1291             this._progressBarContainer.appendChild(progressIndicator.element);
1292             var harWriter = new WebInspector.HARWriter();
1293             harWriter.write(stream, this._harRequests(), progressIndicator);
1294         }
1295     },
1296
1297     _clearBrowserCache: function()
1298     {
1299         if (confirm(WebInspector.UIString("Are you sure you want to clear browser cache?")))
1300             NetworkAgent.clearBrowserCache();
1301     },
1302
1303     _clearBrowserCookies: function()
1304     {
1305         if (confirm(WebInspector.UIString("Are you sure you want to clear browser cookies?")))
1306             NetworkAgent.clearBrowserCookies();
1307     },
1308
1309     /**
1310      * @param {!WebInspector.NetworkRequest} request
1311      * @return {boolean}
1312      */
1313     _matchRequest: function(request)
1314     {
1315         var re = this._searchRegExp;
1316         if (!re)
1317             return false;
1318         return re.test(request.name()) || re.test(request.path());
1319     },
1320
1321     _clearSearchMatchedList: function()
1322     {
1323         this._matchedRequestCount = -1;
1324         this._currentMatchedRequestNode = null;
1325         this._removeAllHighlights();
1326     },
1327
1328     _removeAllHighlights: function()
1329     {
1330         this._removeAllNodeHighlights();
1331         for (var i = 0; i < this._highlightedSubstringChanges.length; ++i)
1332             WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]);
1333         this._highlightedSubstringChanges = [];
1334     },
1335
1336     /**
1337      * @param {number} n
1338      * @param {boolean} reveal
1339      */
1340     _highlightNthMatchedRequestForSearch: function(n, reveal)
1341     {
1342         this._removeAllHighlights();
1343
1344         /** @type {!Array.<!WebInspector.NetworkDataGridNode>} */
1345         var nodes = this._dataGrid.rootNode().children;
1346         var matchCount = 0;
1347         var node = null;
1348         for (var i = 0; i < nodes.length; ++i) {
1349             if (nodes[i]._isMatchingSearchQuery) {
1350                 if (matchCount === n) {
1351                     node = nodes[i];
1352                     break;
1353                 }
1354                 matchCount++;
1355             }
1356         }
1357         if (!node) {
1358             this._currentMatchedRequestNode = null;
1359             return;
1360         }
1361
1362         var request = node.request();
1363         var regExp = this._searchRegExp;
1364         var nameMatched = request.name().match(regExp);
1365         var pathMatched = request.path().match(regExp);
1366         if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
1367             this._toggleLargerRequests();
1368         if (reveal)
1369             WebInspector.Revealer.reveal(request);
1370         var highlightedSubstringChanges = node.highlightMatchedSubstring(regExp);
1371         this._highlightedSubstringChanges.push(highlightedSubstringChanges);
1372
1373         this._currentMatchedRequestNode = node;
1374         this._currentMatchedRequestIndex = n;
1375         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, n);
1376     },
1377
1378     /**
1379      * @param {string} query
1380      * @param {boolean} shouldJump
1381      * @param {boolean=} jumpBackwards
1382      */
1383     performSearch: function(query, shouldJump, jumpBackwards)
1384     {
1385         var currentMatchedRequestNode = this._currentMatchedRequestNode;
1386         this._clearSearchMatchedList();
1387         this._searchRegExp = createPlainTextSearchRegex(query, "i");
1388
1389         /** @type {!Array.<!WebInspector.NetworkDataGridNode>} */
1390         var nodes = this._dataGrid.rootNode().children;
1391         for (var i = 0; i < nodes.length; ++i)
1392             nodes[i]._isMatchingSearchQuery = this._matchRequest(nodes[i].request());
1393         var newMatchedRequestIndex = this._updateMatchCountAndFindMatchIndex(currentMatchedRequestNode);
1394         if (!newMatchedRequestIndex && jumpBackwards)
1395             newMatchedRequestIndex = this._matchedRequestCount - 1;
1396         this._highlightNthMatchedRequestForSearch(newMatchedRequestIndex, shouldJump);
1397     },
1398
1399     /**
1400      * @param {?WebInspector.NetworkDataGridNode} node
1401      * @return {number}
1402      */
1403     _updateMatchCountAndFindMatchIndex: function(node)
1404     {
1405         /** @type {!Array.<!WebInspector.NetworkDataGridNode>} */
1406         var nodes = this._dataGrid.rootNode().children;
1407         var matchCount = 0;
1408         var matchIndex = 0;
1409         for (var i = 0; i < nodes.length; ++i) {
1410             if (!nodes[i]._isMatchingSearchQuery)
1411                 continue;
1412             if (node === nodes[i])
1413                 matchIndex = matchCount;
1414             matchCount++;
1415         }
1416         if (this._matchedRequestCount !== matchCount) {
1417             this._matchedRequestCount = matchCount;
1418             this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, matchCount);
1419         }
1420         return matchIndex;
1421     },
1422
1423     /**
1424      * @param {number} index
1425      * @return {number}
1426      */
1427     _normalizeSearchResultIndex: function(index)
1428     {
1429         return (index + this._matchedRequestCount) % this._matchedRequestCount;
1430     },
1431
1432     /**
1433      * @param {!WebInspector.NetworkDataGridNode} node
1434      * @return {boolean}
1435      */
1436     _applyFilter: function(node)
1437     {
1438         var request = node.request();
1439         if (!this._resourceTypeFilterUI.accept(request.type.name()))
1440             return false;
1441         if (this._dataURLFilterUI.checked() && request.parsedURL.isDataURL())
1442             return false;
1443         for (var i = 0; i < this._filters.length; ++i) {
1444             if (!this._filters[i](request))
1445                 return false;
1446         }
1447         return true;
1448     },
1449
1450     /**
1451      * @param {string} query
1452      */
1453     _parseFilterQuery: function(query)
1454     {
1455         var parsedQuery = this._suggestionBuilder.parseQuery(query);
1456         this._filters = parsedQuery.text.map(this._createTextFilter);
1457         for (var key in parsedQuery.filters) {
1458             var filterType = /** @type {!WebInspector.NetworkLogView.FilterType} */ (key);
1459             this._filters.push(this._createFilter(filterType, parsedQuery.filters[key]));
1460         }
1461     },
1462
1463     /**
1464      * @param {string} text
1465      * @return {!WebInspector.NetworkLogView.Filter}
1466      */
1467     _createTextFilter: function(text)
1468     {
1469         var regexp = new RegExp(text.escapeForRegExp(), "i");
1470         return WebInspector.NetworkLogView._requestNameOrPathFilter.bind(null, regexp);
1471     },
1472
1473     /**
1474      * @param {!WebInspector.NetworkLogView.FilterType} type
1475      * @param {string} value
1476      * @return {!WebInspector.NetworkLogView.Filter}
1477      */
1478     _createFilter: function(type, value) {
1479         switch (type) {
1480         case WebInspector.NetworkLogView.FilterType.Domain:
1481             return WebInspector.NetworkLogView._requestDomainFilter.bind(null, value);
1482
1483         case WebInspector.NetworkLogView.FilterType.HasResponseHeader:
1484             return WebInspector.NetworkLogView._requestResponseHeaderFilter.bind(null, value);
1485
1486         case WebInspector.NetworkLogView.FilterType.Method:
1487             return WebInspector.NetworkLogView._requestMethodFilter.bind(null, value);
1488
1489         case WebInspector.NetworkLogView.FilterType.MimeType:
1490             return WebInspector.NetworkLogView._requestMimeTypeFilter.bind(null, value);
1491
1492         case WebInspector.NetworkLogView.FilterType.Scheme:
1493             return WebInspector.NetworkLogView._requestSchemeFilter.bind(null, value);
1494
1495         case WebInspector.NetworkLogView.FilterType.SetCookieDomain:
1496             return WebInspector.NetworkLogView._requestSetCookieDomainFilter.bind(null, value);
1497
1498         case WebInspector.NetworkLogView.FilterType.SetCookieName:
1499             return WebInspector.NetworkLogView._requestSetCookieNameFilter.bind(null, value);
1500
1501         case WebInspector.NetworkLogView.FilterType.SetCookieValue:
1502             return WebInspector.NetworkLogView._requestSetCookieValueFilter.bind(null, value);
1503
1504         case WebInspector.NetworkLogView.FilterType.StatusCode:
1505             return WebInspector.NetworkLogView._statusCodeFilter.bind(null, value);
1506         }
1507         return this._createTextFilter(type + ":" + value);
1508     },
1509
1510     _filterRequests: function()
1511     {
1512         this._removeAllHighlights();
1513         this._invalidateAllItems();
1514         this.refresh();
1515     },
1516
1517     jumpToPreviousSearchResult: function()
1518     {
1519         if (!this._matchedRequestCount)
1520             return;
1521         var index = this._normalizeSearchResultIndex(this._currentMatchedRequestIndex - 1);
1522         this._highlightNthMatchedRequestForSearch(index, true);
1523     },
1524
1525     jumpToNextSearchResult: function()
1526     {
1527         if (!this._matchedRequestCount)
1528             return;
1529         var index = this._normalizeSearchResultIndex(this._currentMatchedRequestIndex + 1);
1530         this._highlightNthMatchedRequestForSearch(index, true);
1531     },
1532
1533     searchCanceled: function()
1534     {
1535         delete this._searchRegExp;
1536         this._clearSearchMatchedList();
1537         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, 0);
1538     },
1539
1540     /**
1541      * @param {!WebInspector.NetworkRequest} request
1542      */
1543     revealAndHighlightRequest: function(request)
1544     {
1545         this._removeAllNodeHighlights();
1546
1547         var node = this._nodesByRequestId.get(request.requestId);
1548         if (node) {
1549             node.reveal();
1550             this._highlightNode(node);
1551         }
1552     },
1553
1554     _removeAllNodeHighlights: function()
1555     {
1556         if (this._highlightedNode) {
1557             this._highlightedNode.element().classList.remove("highlighted-row");
1558             delete this._highlightedNode;
1559         }
1560     },
1561
1562     /**
1563      * @param {!WebInspector.NetworkDataGridNode} node
1564      */
1565     _highlightNode: function(node)
1566     {
1567         WebInspector.runCSSAnimationOnce(node.element(), "highlighted-row");
1568         this._highlightedNode = node;
1569     },
1570
1571     /**
1572      * @param {!WebInspector.NetworkRequest} request
1573      * @return {string}
1574      */
1575     _generateCurlCommand: function(request)
1576     {
1577         var command = ["curl"];
1578         // These headers are derived from URL (except "version") and would be added by cURL anyway.
1579         var ignoredHeaders = {"host": 1, "method": 1, "path": 1, "scheme": 1, "version": 1};
1580
1581         function escapeStringWin(str)
1582         {
1583             /* Replace quote by double quote (but not by \") because it is
1584                recognized by both cmd.exe and MS Crt arguments parser.
1585
1586                Replace % by "%" because it could be expanded to an environment
1587                variable value. So %% becomes "%""%". Even if an env variable ""
1588                (2 doublequotes) is declared, the cmd.exe will not
1589                substitute it with its value.
1590
1591                Replace each backslash with double backslash to make sure
1592                MS Crt arguments parser won't collapse them.
1593
1594                Replace new line outside of quotes since cmd.exe doesn't let
1595                to do it inside.
1596             */
1597             return "\"" + str.replace(/"/g, "\"\"")
1598                              .replace(/%/g, "\"%\"")
1599                              .replace(/\\/g, "\\\\")
1600                              .replace(/[\r\n]+/g, "\"^$&\"") + "\"";
1601         }
1602
1603         function escapeStringPosix(str)
1604         {
1605             function escapeCharacter(x)
1606             {
1607                 var code = x.charCodeAt(0);
1608                 if (code < 256) {
1609                     // Add leading zero when needed to not care about the next character.
1610                     return code < 16 ? "\\x0" + code.toString(16) : "\\x" + code.toString(16);
1611                  }
1612                  code = code.toString(16);
1613                  return "\\u" + ("0000" + code).substr(code.length, 4);
1614              }
1615
1616             if (/[^\x20-\x7E]|\'/.test(str)) {
1617                 // Use ANSI-C quoting syntax.
1618                 return "$\'" + str.replace(/\\/g, "\\\\")
1619                                   .replace(/\'/g, "\\\'")
1620                                   .replace(/\n/g, "\\n")
1621                                   .replace(/\r/g, "\\r")
1622                                   .replace(/[^\x20-\x7E]/g, escapeCharacter) + "'";
1623             } else {
1624                 // Use single quote syntax.
1625                 return "'" + str + "'";
1626             }
1627         }
1628
1629         // cURL command expected to run on the same platform that DevTools run
1630         // (it may be different from the inspected page platform).
1631         var escapeString = WebInspector.isWin() ? escapeStringWin : escapeStringPosix;
1632
1633         command.push(escapeString(request.url).replace(/[[{}\]]/g, "\\$&"));
1634
1635         var inferredMethod = "GET";
1636         var data = [];
1637         var requestContentType = request.requestContentType();
1638         if (requestContentType && requestContentType.startsWith("application/x-www-form-urlencoded") && request.requestFormData) {
1639            data.push("--data");
1640            data.push(escapeString(request.requestFormData));
1641            ignoredHeaders["content-length"] = true;
1642            inferredMethod = "POST";
1643         } else if (request.requestFormData) {
1644            data.push("--data-binary");
1645            data.push(escapeString(request.requestFormData));
1646            ignoredHeaders["content-length"] = true;
1647            inferredMethod = "POST";
1648         }
1649
1650         if (request.requestMethod !== inferredMethod) {
1651             command.push("-X");
1652             command.push(request.requestMethod);
1653         }
1654
1655         var requestHeaders = request.requestHeaders();
1656         for (var i = 0; i < requestHeaders.length; i++) {
1657             var header = requestHeaders[i];
1658             var name = header.name.replace(/^:/, ""); // Translate SPDY v3 headers to HTTP headers.
1659             if (name.toLowerCase() in ignoredHeaders)
1660                 continue;
1661             command.push("-H");
1662             command.push(escapeString(name + ": " + header.value));
1663         }
1664         command = command.concat(data);
1665         command.push("--compressed");
1666         return command.join(" ");
1667     },
1668
1669     __proto__: WebInspector.VBox.prototype
1670 }
1671
1672 /** @typedef {function(!WebInspector.NetworkRequest): boolean} */
1673 WebInspector.NetworkLogView.Filter;
1674
1675 /**
1676  * @param {!RegExp} regex
1677  * @param {!WebInspector.NetworkRequest} request
1678  * @return {boolean}
1679  */
1680 WebInspector.NetworkLogView._requestNameOrPathFilter = function(regex, request)
1681 {
1682     return regex.test(request.name()) || regex.test(request.path());
1683 }
1684
1685 /**
1686  * @param {string} value
1687  * @param {!WebInspector.NetworkRequest} request
1688  * @return {boolean}
1689  */
1690 WebInspector.NetworkLogView._requestDomainFilter = function(value, request)
1691 {
1692     return request.domain === value;
1693 }
1694
1695 /**
1696  * @param {string} value
1697  * @param {!WebInspector.NetworkRequest} request
1698  * @return {boolean}
1699  */
1700 WebInspector.NetworkLogView._requestResponseHeaderFilter = function(value, request)
1701 {
1702     return request.responseHeaderValue(value) !== undefined;
1703 }
1704
1705 /**
1706  * @param {string} value
1707  * @param {!WebInspector.NetworkRequest} request
1708  * @return {boolean}
1709  */
1710 WebInspector.NetworkLogView._requestMethodFilter = function(value, request)
1711 {
1712     return request.requestMethod === value;
1713 }
1714
1715 /**
1716  * @param {string} value
1717  * @param {!WebInspector.NetworkRequest} request
1718  * @return {boolean}
1719  */
1720 WebInspector.NetworkLogView._requestMimeTypeFilter = function(value, request)
1721 {
1722     return request.mimeType === value;
1723 }
1724
1725 /**
1726  * @param {string} value
1727  * @param {!WebInspector.NetworkRequest} request
1728  * @return {boolean}
1729  */
1730 WebInspector.NetworkLogView._requestSchemeFilter = function(value, request)
1731 {
1732     return request.scheme === value;
1733 }
1734
1735 /**
1736  * @param {string} value
1737  * @param {!WebInspector.NetworkRequest} request
1738  * @return {boolean}
1739  */
1740 WebInspector.NetworkLogView._requestSetCookieDomainFilter = function(value, request)
1741 {
1742     var cookies = request.responseCookies;
1743     for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) {
1744         if (cookies[i].domain() === value)
1745             return false;
1746     }
1747     return false;
1748 }
1749
1750 /**
1751  * @param {string} value
1752  * @param {!WebInspector.NetworkRequest} request
1753  * @return {boolean}
1754  */
1755 WebInspector.NetworkLogView._requestSetCookieNameFilter = function(value, request)
1756 {
1757     var cookies = request.responseCookies;
1758     for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) {
1759         if (cookies[i].name() === value)
1760             return false;
1761     }
1762     return false;
1763 }
1764
1765 /**
1766  * @param {string} value
1767  * @param {!WebInspector.NetworkRequest} request
1768  * @return {boolean}
1769  */
1770 WebInspector.NetworkLogView._requestSetCookieValueFilter = function(value, request)
1771 {
1772     var cookies = request.responseCookies;
1773     for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) {
1774         if (cookies[i].value() === value)
1775             return false;
1776     }
1777     return false;
1778 }
1779
1780 /**
1781  * @param {string} value
1782  * @param {!WebInspector.NetworkRequest} request
1783  * @return {boolean}
1784  */
1785 WebInspector.NetworkLogView._statusCodeFilter = function(value, request)
1786 {
1787     return ("" + request.statusCode) === value;
1788 }
1789
1790 /**
1791  * @param {!WebInspector.NetworkRequest} request
1792  * @return {boolean}
1793  */
1794 WebInspector.NetworkLogView.HTTPRequestsFilter = function(request)
1795 {
1796     return request.parsedURL.isValid && (request.scheme in WebInspector.NetworkLogView.HTTPSchemas);
1797 }
1798
1799 /**
1800  * @param {!WebInspector.NetworkRequest} request
1801  * @return {boolean}
1802  */
1803 WebInspector.NetworkLogView.NonDevToolsRequestsFilter = function(request)
1804 {
1805     return !WebInspector.NetworkManager.hasDevToolsRequestHeader(request);
1806 }
1807
1808 /**
1809  * @param {!WebInspector.NetworkRequest} request
1810  * @return {boolean}
1811  */
1812 WebInspector.NetworkLogView.FinishedRequestsFilter = function(request)
1813 {
1814     return request.finished;
1815 }
1816
1817 WebInspector.NetworkLogView.EventTypes = {
1818     ViewCleared: "ViewCleared",
1819     RowSizeChanged: "RowSizeChanged",
1820     RequestSelected: "RequestSelected",
1821     SearchCountUpdated: "SearchCountUpdated",
1822     SearchIndexUpdated: "SearchIndexUpdated"
1823 };
1824
1825 /**
1826  * @constructor
1827  * @implements {WebInspector.ContextMenu.Provider}
1828  * @implements {WebInspector.Searchable}
1829  * @extends {WebInspector.Panel}
1830  */
1831 WebInspector.NetworkPanel = function()
1832 {
1833     WebInspector.Panel.call(this, "network");
1834     this.registerRequiredCSS("networkPanel.css");
1835
1836     this._panelStatusBarElement = this.element.createChild("div", "panel-status-bar");
1837     this._filterBar = new WebInspector.FilterBar();
1838     this._filtersContainer = this.element.createChild("div", "network-filters-header hidden");
1839     this._filtersContainer.appendChild(this._filterBar.filtersElement());
1840     this._filterBar.addEventListener(WebInspector.FilterBar.Events.FiltersToggled, this._onFiltersToggled, this);
1841     this._filterBar.setName("networkPanel");
1842
1843     this._searchableView = new WebInspector.SearchableView(this);
1844     this._searchableView.show(this.element);
1845     var contentsElement = this._searchableView.element;
1846
1847     this._splitView = new WebInspector.SplitView(true, false, "networkPanelSplitViewState");
1848     this._splitView.show(contentsElement);
1849     this._splitView.hideMain();
1850
1851     var defaultColumnsVisibility = WebInspector.NetworkLogView.defaultColumnsVisibility;
1852     var networkLogColumnsVisibilitySetting = WebInspector.settings.createSetting("networkLogColumnsVisibility", defaultColumnsVisibility);
1853     var savedColumnsVisibility = networkLogColumnsVisibilitySetting.get();
1854     var columnsVisibility = {};
1855     for (var columnId in defaultColumnsVisibility)
1856         columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(columnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId];
1857     networkLogColumnsVisibilitySetting.set(columnsVisibility);
1858
1859     /** @type {!WebInspector.NetworkLogView} */
1860     this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, networkLogColumnsVisibilitySetting);
1861     this._networkLogView.show(this._splitView.sidebarElement());
1862
1863     var viewsContainerView = new WebInspector.VBox();
1864     this._viewsContainerElement = viewsContainerView.element;
1865     this._viewsContainerElement.id = "network-views";
1866     if (!this._networkLogView.usesLargeRows())
1867         this._viewsContainerElement.classList.add("small");
1868     viewsContainerView.show(this._splitView.mainElement());
1869
1870     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.ViewCleared, this._onViewCleared, this);
1871     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, this._onRowSizeChanged, this);
1872     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.RequestSelected, this._onRequestSelected, this);
1873     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._onSearchCountUpdated, this);
1874     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._onSearchIndexUpdated, this);
1875
1876     this._closeButtonElement = this._viewsContainerElement.createChild("div", "close-button");
1877     this._closeButtonElement.id = "network-close-button";
1878     this._closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false);
1879     this._viewsContainerElement.appendChild(this._closeButtonElement);
1880
1881     var statusBarItems = this._networkLogView.statusBarItems();
1882     for (var i = 0; i < statusBarItems.length; ++i)
1883         this._panelStatusBarElement.appendChild(statusBarItems[i]);
1884
1885     /**
1886      * @this {WebInspector.NetworkPanel}
1887      * @return {?WebInspector.SourceFrame}
1888      */
1889     function sourceFrameGetter()
1890     {
1891         return this._networkItemView.currentSourceFrame();
1892     }
1893     WebInspector.GoToLineDialog.install(this, sourceFrameGetter.bind(this));
1894 }
1895
1896 WebInspector.NetworkPanel.prototype = {
1897     /**
1898      * @param {!WebInspector.Event} event
1899      */
1900     _onFiltersToggled: function(event)
1901     {
1902         var toggled = /** @type {boolean} */ (event.data);
1903         this._filtersContainer.classList.toggle("hidden", !toggled);
1904         this.element.classList.toggle("filters-toggled", toggled);
1905         this.doResize();
1906     },
1907
1908     /**
1909      * @return {!Array.<!Element>}
1910      */
1911     elementsToRestoreScrollPositionsFor: function()
1912     {
1913         return this._networkLogView.elementsToRestoreScrollPositionsFor();
1914     },
1915
1916     /**
1917      * @return {!WebInspector.SearchableView}
1918      */
1919     searchableView: function()
1920     {
1921         return this._searchableView;
1922     },
1923
1924     /**
1925      * @param {!KeyboardEvent} event
1926      */
1927     handleShortcut: function(event)
1928     {
1929         if (this._viewingRequestMode && event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
1930             this._toggleGridMode();
1931             event.handled = true;
1932             return;
1933         }
1934
1935         WebInspector.Panel.prototype.handleShortcut.call(this, event);
1936     },
1937
1938     wasShown: function()
1939     {
1940         WebInspector.Panel.prototype.wasShown.call(this);
1941     },
1942
1943     /**
1944      * @param {!WebInspector.NetworkRequest} request
1945      */
1946     revealAndHighlightRequest: function(request)
1947     {
1948         this._toggleGridMode();
1949         if (request)
1950             this._networkLogView.revealAndHighlightRequest(request);
1951     },
1952
1953     /**
1954      * @param {!WebInspector.Event} event
1955      */
1956     _onViewCleared: function(event)
1957     {
1958         this._closeVisibleRequest();
1959         this._toggleGridMode();
1960         this._viewsContainerElement.removeChildren();
1961         this._viewsContainerElement.appendChild(this._closeButtonElement);
1962     },
1963
1964     /**
1965      * @param {!WebInspector.Event} event
1966      */
1967     _onRowSizeChanged: function(event)
1968     {
1969         this._viewsContainerElement.classList.toggle("small", !event.data.largeRows);
1970     },
1971
1972     /**
1973      * @param {!WebInspector.Event} event
1974      */
1975     _onSearchCountUpdated: function(event)
1976     {
1977         var count = /** @type {number} */ (event.data);
1978         this._searchableView.updateSearchMatchesCount(count);
1979     },
1980
1981     /**
1982      * @param {!WebInspector.Event} event
1983      */
1984     _onSearchIndexUpdated: function(event)
1985     {
1986         var index = /** @type {number} */ (event.data);
1987         this._searchableView.updateCurrentMatchIndex(index);
1988     },
1989
1990     /**
1991      * @param {!WebInspector.Event} event
1992      */
1993     _onRequestSelected: function(event)
1994     {
1995         var request = /** @type {!WebInspector.NetworkRequest} */ (event.data);
1996         this._showRequest(request);
1997     },
1998
1999     /**
2000      * @param {?WebInspector.NetworkRequest} request
2001      */
2002     _showRequest: function(request)
2003     {
2004         if (!request)
2005             return;
2006
2007         this._toggleViewingRequestMode();
2008
2009         if (this._networkItemView) {
2010             this._networkItemView.detach();
2011             delete this._networkItemView;
2012         }
2013
2014         var view = new WebInspector.NetworkItemView(request);
2015         view.show(this._viewsContainerElement);
2016         this._networkItemView = view;
2017     },
2018
2019     _closeVisibleRequest: function()
2020     {
2021         this.element.classList.remove("viewing-resource");
2022
2023         if (this._networkItemView) {
2024             this._networkItemView.detach();
2025             delete this._networkItemView;
2026         }
2027     },
2028
2029     _toggleGridMode: function()
2030     {
2031         if (this._viewingRequestMode) {
2032             this._viewingRequestMode = false;
2033             this.element.classList.remove("viewing-resource");
2034             this._splitView.hideMain();
2035         }
2036
2037         this._networkLogView.switchViewMode(true);
2038         this._networkLogView.setAllowPopover(true);
2039         this._networkLogView._allowRequestSelection = false;
2040     },
2041
2042     _toggleViewingRequestMode: function()
2043     {
2044         if (this._viewingRequestMode)
2045             return;
2046         this._viewingRequestMode = true;
2047
2048         this.element.classList.add("viewing-resource");
2049         this._splitView.showBoth();
2050         this._networkLogView.setAllowPopover(false);
2051         this._networkLogView._allowRequestSelection = true;
2052         this._networkLogView.switchViewMode(false);
2053     },
2054
2055     /**
2056      * @param {string} query
2057      * @param {boolean} shouldJump
2058      * @param {boolean=} jumpBackwards
2059      */
2060     performSearch: function(query, shouldJump, jumpBackwards)
2061     {
2062         this._networkLogView.performSearch(query, shouldJump, jumpBackwards);
2063     },
2064
2065     jumpToPreviousSearchResult: function()
2066     {
2067         this._networkLogView.jumpToPreviousSearchResult();
2068     },
2069
2070     jumpToNextSearchResult: function()
2071     {
2072         this._networkLogView.jumpToNextSearchResult();
2073     },
2074
2075     searchCanceled: function()
2076     {
2077         this._networkLogView.searchCanceled();
2078     },
2079
2080     /**
2081      * @param {!Event} event
2082      * @param {!WebInspector.ContextMenu} contextMenu
2083      * @param {!Object} target
2084      * @this {WebInspector.NetworkPanel}
2085      */
2086     appendApplicableItems: function(event, contextMenu, target)
2087     {
2088         /**
2089          * @this {WebInspector.NetworkPanel}
2090          */
2091         function reveal(request)
2092         {
2093             WebInspector.inspectorView.setCurrentPanel(this);
2094             this.revealAndHighlightRequest(request);
2095         }
2096
2097         /**
2098          * @this {WebInspector.NetworkPanel}
2099          */
2100         function appendRevealItem(request)
2101         {
2102             var revealText = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Network panel" : "Reveal in Network Panel");
2103             contextMenu.appendItem(revealText, reveal.bind(this, request));
2104         }
2105
2106         if (target instanceof WebInspector.Resource) {
2107             var resource = /** @type {!WebInspector.Resource} */ (target);
2108             if (resource.request)
2109                 appendRevealItem.call(this, resource.request);
2110             return;
2111         }
2112         if (target instanceof WebInspector.UISourceCode) {
2113             var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (target);
2114             var resource = WebInspector.resourceForURL(uiSourceCode.url);
2115             if (resource && resource.request)
2116                 appendRevealItem.call(this, resource.request);
2117             return;
2118         }
2119
2120         if (!(target instanceof WebInspector.NetworkRequest))
2121             return;
2122         var request = /** @type {!WebInspector.NetworkRequest} */ (target);
2123         if (this._networkItemView && this._networkItemView.isShowing() && this._networkItemView.request() === request)
2124             return;
2125
2126         appendRevealItem.call(this, request);
2127     },
2128
2129     __proto__: WebInspector.Panel.prototype
2130 }
2131
2132 /**
2133  * @constructor
2134  * @implements {WebInspector.ContextMenu.Provider}
2135  */
2136 WebInspector.NetworkPanel.ContextMenuProvider = function()
2137 {
2138 }
2139
2140 WebInspector.NetworkPanel.ContextMenuProvider.prototype = {
2141     /**
2142      * @param {!Event} event
2143      * @param {!WebInspector.ContextMenu} contextMenu
2144      * @param {!Object} target
2145      */
2146     appendApplicableItems: function(event, contextMenu, target)
2147     {
2148         WebInspector.inspectorView.panel("network").appendApplicableItems(event, contextMenu, target);
2149     }
2150 }
2151
2152 /**
2153  * @constructor
2154  * @implements {WebInspector.Revealer}
2155  */
2156 WebInspector.NetworkPanel.RequestRevealer = function()
2157 {
2158 }
2159
2160 WebInspector.NetworkPanel.RequestRevealer.prototype = {
2161     /**
2162      * @param {!Object} request
2163      * @param {number=} lineNumber
2164      */
2165     reveal: function(request, lineNumber)
2166     {
2167         if (request instanceof WebInspector.NetworkRequest) {
2168             var panel = /** @type {?WebInspector.NetworkPanel} */ (WebInspector.inspectorView.showPanel("network"));
2169             if (panel)
2170                 panel.revealAndHighlightRequest(request);
2171         }
2172     }
2173 }
2174
2175 /**
2176  * @constructor
2177  * @implements {WebInspector.TimelineGrid.Calculator}
2178  */
2179 WebInspector.NetworkTimeCalculator = function(startAtZero)
2180 {
2181     this.startAtZero = startAtZero;
2182 }
2183
2184 /** @type {!WebInspector.UIStringFormat} */
2185 WebInspector.NetworkTimeCalculator._latencyDownloadTotalFormat = new WebInspector.UIStringFormat("%s latency, %s download (%s total)");
2186
2187 /** @type {!WebInspector.UIStringFormat} */
2188 WebInspector.NetworkTimeCalculator._latencyFormat = new WebInspector.UIStringFormat("%s latency");
2189
2190 /** @type {!WebInspector.UIStringFormat} */
2191 WebInspector.NetworkTimeCalculator._downloadFormat = new WebInspector.UIStringFormat("%s download");
2192
2193 /** @type {!WebInspector.UIStringFormat} */
2194 WebInspector.NetworkTimeCalculator._fromServiceWorkerFormat = new WebInspector.UIStringFormat("%s (from ServiceWorker)");
2195
2196 /** @type {!WebInspector.UIStringFormat} */
2197 WebInspector.NetworkTimeCalculator._fromCacheFormat = new WebInspector.UIStringFormat("%s (from cache)");
2198
2199 WebInspector.NetworkTimeCalculator.prototype = {
2200     /**
2201      * @override
2202      * @return {number}
2203      */
2204     paddingLeft: function()
2205     {
2206         return 0;
2207     },
2208
2209     /**
2210      * @override
2211      * @param {number} time
2212      * @return {number}
2213      */
2214     computePosition: function(time)
2215     {
2216         return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea;
2217     },
2218
2219     /**
2220      * @override
2221      * @param {number} value
2222      * @param {number=} precision
2223      * @return {string}
2224      */
2225     formatTime: function(value, precision)
2226     {
2227         return Number.secondsToString(value);
2228     },
2229
2230     /**
2231      * @override
2232      * @return {number}
2233      */
2234     minimumBoundary: function()
2235     {
2236         return this._minimumBoundary;
2237     },
2238
2239     /**
2240      * @override
2241      * @return {number}
2242      */
2243     zeroTime: function()
2244     {
2245         return this._minimumBoundary;
2246     },
2247
2248     /**
2249      * @override
2250      * @return {number}
2251      */
2252     maximumBoundary: function()
2253     {
2254         return this._maximumBoundary;
2255     },
2256
2257     /**
2258      * @override
2259      * @return {number}
2260      */
2261     boundarySpan: function()
2262     {
2263         return this._maximumBoundary - this._minimumBoundary;
2264     },
2265
2266     reset: function()
2267     {
2268         delete this._minimumBoundary;
2269         delete this._maximumBoundary;
2270     },
2271
2272     /**
2273      * @return {number}
2274      */
2275     _value: function(item)
2276     {
2277         return 0;
2278     },
2279
2280     /**
2281      * @param {number} clientWidth
2282      */
2283     setDisplayWindow: function(clientWidth)
2284     {
2285         this._workingArea = clientWidth;
2286     },
2287
2288     /**
2289      * @param {!WebInspector.NetworkRequest} request
2290      * @return {!{start: number, middle: number, end: number}}
2291      */
2292     computeBarGraphPercentages: function(request)
2293     {
2294         if (request.startTime !== -1)
2295             var start = ((request.startTime - this._minimumBoundary) / this.boundarySpan()) * 100;
2296         else
2297             var start = 0;
2298
2299         if (request.responseReceivedTime !== -1)
2300             var middle = ((request.responseReceivedTime - this._minimumBoundary) / this.boundarySpan()) * 100;
2301         else
2302             var middle = (this.startAtZero ? start : 100);
2303
2304         if (request.endTime !== -1)
2305             var end = ((request.endTime - this._minimumBoundary) / this.boundarySpan()) * 100;
2306         else
2307             var end = (this.startAtZero ? middle : 100);
2308
2309         if (this.startAtZero) {
2310             end -= start;
2311             middle -= start;
2312             start = 0;
2313         }
2314
2315         return {start: start, middle: middle, end: end};
2316     },
2317
2318     /**
2319      * @param {number} eventTime
2320      * @return {number}
2321      */
2322     computePercentageFromEventTime: function(eventTime)
2323     {
2324         // This function computes a percentage in terms of the total loading time
2325         // of a specific event. If startAtZero is set, then this is useless, and we
2326         // want to return 0.
2327         if (eventTime !== -1 && !this.startAtZero)
2328             return ((eventTime - this._minimumBoundary) / this.boundarySpan()) * 100;
2329
2330         return 0;
2331     },
2332
2333     /**
2334      * @param {number} eventTime
2335      * @return {boolean}
2336      */
2337     updateBoundariesForEventTime: function(eventTime)
2338     {
2339         if (eventTime === -1 || this.startAtZero)
2340             return false;
2341
2342         if (typeof this._maximumBoundary === "undefined" || eventTime > this._maximumBoundary) {
2343             this._maximumBoundary = eventTime;
2344             return true;
2345         }
2346         return false;
2347     },
2348
2349     /**
2350      * @param {!WebInspector.NetworkRequest} request
2351      * @return {!{left: string, right: string, tooltip: (string|undefined)}}
2352      */
2353     computeBarGraphLabels: function(request)
2354     {
2355         var rightLabel = "";
2356         if (request.responseReceivedTime !== -1 && request.endTime !== -1)
2357             rightLabel = Number.secondsToString(request.endTime - request.responseReceivedTime);
2358
2359         var hasLatency = request.latency > 0;
2360         if (hasLatency)
2361             var leftLabel = Number.secondsToString(request.latency);
2362         else
2363             var leftLabel = rightLabel;
2364
2365         if (request.timing)
2366             return {left: leftLabel, right: rightLabel};
2367
2368         if (hasLatency && rightLabel) {
2369             var total = Number.secondsToString(request.duration);
2370             var tooltip = WebInspector.NetworkTimeCalculator._latencyDownloadTotalFormat.format(leftLabel, rightLabel, total);
2371         } else if (hasLatency)
2372             var tooltip = WebInspector.NetworkTimeCalculator._latencyFormat.format(leftLabel);
2373         else if (rightLabel)
2374             var tooltip = WebInspector.NetworkTimeCalculator._downloadFormat.format(rightLabel);
2375
2376         if (request.fetchedViaServiceWorker)
2377             tooltip = WebInspector.NetworkTimeCalculator._fromServiceWorkerFormat.format(tooltip);
2378         else if (request.cached)
2379             tooltip = WebInspector.NetworkTimeCalculator._fromCacheFormat.format(tooltip);
2380         return {left: leftLabel, right: rightLabel, tooltip: tooltip};
2381     },
2382
2383     /**
2384      * @param {!WebInspector.NetworkRequest} request
2385      * @return {boolean}
2386      */
2387     updateBoundaries: function(request)
2388     {
2389         var didChange = false;
2390
2391         var lowerBound;
2392         if (this.startAtZero)
2393             lowerBound = 0;
2394         else
2395             lowerBound = this._lowerBound(request);
2396
2397         if (lowerBound !== -1 && (typeof this._minimumBoundary === "undefined" || lowerBound < this._minimumBoundary)) {
2398             this._minimumBoundary = lowerBound;
2399             didChange = true;
2400         }
2401
2402         var upperBound = this._upperBound(request);
2403         if (upperBound !== -1 && (typeof this._maximumBoundary === "undefined" || upperBound > this._maximumBoundary)) {
2404             this._maximumBoundary = upperBound;
2405             didChange = true;
2406         }
2407
2408         return didChange;
2409     },
2410
2411     /**
2412      * @param {!WebInspector.NetworkRequest} request
2413      * @return {number}
2414      */
2415     _lowerBound: function(request)
2416     {
2417         return 0;
2418     },
2419
2420     /**
2421      * @param {!WebInspector.NetworkRequest} request
2422      * @return {number}
2423      */
2424     _upperBound: function(request)
2425     {
2426         return 0;
2427     }
2428 }
2429
2430 /**
2431  * @constructor
2432  * @extends {WebInspector.NetworkTimeCalculator}
2433  */
2434 WebInspector.NetworkTransferTimeCalculator = function()
2435 {
2436     WebInspector.NetworkTimeCalculator.call(this, false);
2437 }
2438
2439 WebInspector.NetworkTransferTimeCalculator.prototype = {
2440     /**
2441      * @override
2442      * @param {number} value
2443      * @param {number=} precision
2444      * @return {string}
2445      */
2446     formatTime: function(value, precision)
2447     {
2448         return Number.secondsToString(value - this.zeroTime());
2449     },
2450
2451     /**
2452      * @override
2453      * @param {!WebInspector.NetworkRequest} request
2454      * @return {number}
2455      */
2456     _lowerBound: function(request)
2457     {
2458         return request.startTime;
2459     },
2460
2461     /**
2462      * @override
2463      * @param {!WebInspector.NetworkRequest} request
2464      * @return {number}
2465      */
2466     _upperBound: function(request)
2467     {
2468         return request.endTime;
2469     },
2470
2471     __proto__: WebInspector.NetworkTimeCalculator.prototype
2472 }
2473
2474 /**
2475  * @constructor
2476  * @extends {WebInspector.NetworkTimeCalculator}
2477  */
2478 WebInspector.NetworkTransferDurationCalculator = function()
2479 {
2480     WebInspector.NetworkTimeCalculator.call(this, true);
2481 }
2482
2483 WebInspector.NetworkTransferDurationCalculator.prototype = {
2484     /**
2485      * @override
2486      * @param {number} value
2487      * @param {number=} precision
2488      * @return {string}
2489      */
2490     formatTime: function(value, precision)
2491     {
2492         return Number.secondsToString(value);
2493     },
2494
2495     /**
2496      * @override
2497      * @param {!WebInspector.NetworkRequest} request
2498      * @return {number}
2499      */
2500     _upperBound: function(request)
2501     {
2502         return request.duration;
2503     },
2504
2505     __proto__: WebInspector.NetworkTimeCalculator.prototype
2506 }
2507
2508 /**
2509  * @constructor
2510  * @extends {WebInspector.SortableDataGridNode}
2511  * @param {!WebInspector.NetworkLogView} parentView
2512  * @param {!WebInspector.NetworkRequest} request
2513  */
2514 WebInspector.NetworkDataGridNode = function(parentView, request)
2515 {
2516     WebInspector.SortableDataGridNode.call(this, {});
2517     this._parentView = parentView;
2518     this._request = request;
2519     this._linkifier = new WebInspector.Linkifier();
2520     this._isFilteredOut = true;
2521     this._isMatchingSearchQuery = false;
2522     this._staleGraph = true;
2523 }
2524
2525 WebInspector.NetworkDataGridNode.prototype = {
2526     /**
2527      * @return {!WebInspector.NetworkRequest}
2528      */
2529     request: function()
2530     {
2531         return this._request;
2532     },
2533
2534     /**
2535      * @override
2536      * @return {number}
2537      */
2538     nodeSelfHeight: function() {
2539         return this._parentView.rowHeight();
2540     },
2541
2542     /** override */
2543     createCells: function()
2544     {
2545         this._nameCell = null;
2546         this._timelineCell = null;
2547
2548         this._element.classList.toggle("network-error-row", this._isFailed());
2549         WebInspector.SortableDataGridNode.prototype.createCells.call(this);
2550
2551         this._updateGraph();
2552     },
2553
2554     /**
2555      * @override
2556      * @param {string} columnIdentifier
2557      * @return {!Element}
2558      */
2559     createCell: function(columnIdentifier)
2560     {
2561         var cell = this.createTD(columnIdentifier);
2562         switch (columnIdentifier) {
2563         case "name": this._renderNameCell(cell); break;
2564         case "timeline": this._createTimelineBar(cell); break;
2565         case "method": cell.setTextAndTitle(this._request.requestMethod); break;
2566         case "status": this._renderStatusCell(cell); break;
2567         case "scheme": cell.setTextAndTitle(this._request.scheme); break;
2568         case "domain": cell.setTextAndTitle(this._request.domain); break;
2569         case "remoteAddress": cell.setTextAndTitle(this._request.remoteAddress()); break;
2570         case "cookies": cell.setTextAndTitle(this._arrayLength(this._request.requestCookies)); break;
2571         case "setCookies": cell.setTextAndTitle(this._arrayLength(this._request.responseCookies)); break;
2572         case "connectionId": cell.setTextAndTitle(this._request.connectionId); break;
2573         case "type": cell.setTextAndTitle(this._request.mimeType || this._request.requestContentType() || ""); break;
2574         case "initiator": this._renderInitiatorCell(cell); break;
2575         case "size": this._renderSizeCell(cell); break;
2576         case "time": this._renderTimeCell(cell); break;
2577         default: cell.setTextAndTitle(this._request.responseHeaderValue(columnIdentifier) || ""); break;
2578         }
2579
2580         return cell;
2581     },
2582
2583     /**
2584      * @param {?Array} array
2585      * @return {string}
2586      */
2587     _arrayLength: function(array)
2588     {
2589         return array ? "" + array.length : "";
2590     },
2591
2592     /**
2593      * @override
2594      * @protected
2595      */
2596     willAttach: function()
2597     {
2598         if (this._staleGraph)
2599             this._updateGraph();
2600     },
2601
2602     wasDetached: function()
2603     {
2604         if (this._linkifiedInitiatorAnchor)
2605             this._linkifiedInitiatorAnchor.remove();
2606     },
2607
2608     dispose: function()
2609     {
2610         this._linkifier.reset();
2611     },
2612
2613     _onClick: function()
2614     {
2615         if (!this._parentView.allowRequestSelection())
2616             this.select();
2617     },
2618
2619     select: function()
2620     {
2621         this._parentView.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RequestSelected, this._request);
2622         WebInspector.SortableDataGridNode.prototype.select.apply(this, arguments);
2623
2624         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
2625             action: WebInspector.UserMetrics.UserActionNames.NetworkRequestSelected,
2626             url: this._request.url
2627         });
2628     },
2629
2630     /**
2631      * @param {!RegExp=} regexp
2632      * @return {!Array.<!Object>}
2633      */
2634     highlightMatchedSubstring: function(regexp)
2635     {
2636         // Ensure element is created.
2637         this.element();
2638         var domChanges = [];
2639         var matchInfo = this._nameCell.textContent.match(regexp);
2640         if (matchInfo)
2641             WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
2642         return domChanges;
2643     },
2644
2645     _openInNewTab: function()
2646     {
2647         InspectorFrontendHost.openInNewTab(this._request.url);
2648     },
2649
2650     get selectable()
2651     {
2652         return this._parentView.allowRequestSelection();
2653     },
2654
2655     /**
2656      * @param {!Element} cell
2657      */
2658     _createTimelineBar: function(cell)
2659     {
2660         cell = cell.createChild("div");
2661         this._timelineCell = cell;
2662
2663         cell.className = "network-graph-side";
2664
2665         this._barAreaElement = cell.createChild("div", "network-graph-bar-area");
2666         this._barAreaElement.request = this._request;
2667
2668         var type = this._request.type.name();
2669         var cached = this._request.cached;
2670
2671         this._barLeftElement = this._barAreaElement.createChild("div", "network-graph-bar");
2672         this._barLeftElement.classList.add(type, "waiting");
2673         this._barLeftElement.classList.toggle("cached", cached);
2674
2675         this._barRightElement = this._barAreaElement.createChild("div", "network-graph-bar");
2676         this._barRightElement.classList.add(type);
2677         this._barRightElement.classList.toggle("cached", cached);
2678
2679         this._labelLeftElement = this._barAreaElement.createChild("div", "network-graph-label");
2680         this._labelLeftElement.classList.add("waiting");
2681
2682         this._labelRightElement = this._barAreaElement.createChild("div", "network-graph-label");
2683
2684         cell.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);
2685     },
2686
2687     /**
2688      * @return {boolean}
2689      */
2690     _isFailed: function()
2691     {
2692         return (this._request.failed && !this._request.statusCode) || (this._request.statusCode >= 400);
2693     },
2694
2695     /**
2696      * @param {!Element} cell
2697      */
2698     _renderNameCell: function(cell)
2699     {
2700         this._nameCell = cell;
2701         cell.addEventListener("click", this._onClick.bind(this), false);
2702         cell.addEventListener("dblclick", this._openInNewTab.bind(this), false);
2703         var iconElement;
2704         if (this._request.type === WebInspector.resourceTypes.Image) {
2705             var previewImage = document.createElementWithClass("img", "image-network-icon-preview");
2706             this._request.populateImageSource(previewImage);
2707
2708             iconElement = document.createElementWithClass("div", "icon");
2709             iconElement.appendChild(previewImage);
2710         } else {
2711             iconElement = document.createElementWithClass("img", "icon");
2712         }
2713         iconElement.classList.add(this._request.type.name());
2714
2715         cell.appendChild(iconElement);
2716         cell.createTextChild(this._request.name());
2717         this._appendSubtitle(cell, this._request.path());
2718         cell.title = this._request.url;
2719     },
2720
2721     /**
2722      * @param {!Element} cell
2723      */
2724     _renderStatusCell: function(cell)
2725     {
2726         cell.classList.toggle("network-dim-cell", !this._isFailed() && (this._request.cached || !this._request.statusCode));
2727
2728         if (this._request.failed && !this._request.canceled) {
2729             var failText = WebInspector.UIString("(failed)");
2730             if (this._request.localizedFailDescription) {
2731                 cell.createTextChild(failText);
2732                 this._appendSubtitle(cell, this._request.localizedFailDescription);
2733                 cell.title = failText + " " + this._request.localizedFailDescription;
2734             } else
2735                 cell.setTextAndTitle(failText);
2736         } else if (this._request.statusCode) {
2737             cell.createTextChild("" + this._request.statusCode);
2738             this._appendSubtitle(cell, this._request.statusText);
2739             cell.title = this._request.statusCode + " " + this._request.statusText;
2740         } else if (this._request.parsedURL.isDataURL()) {
2741             cell.setTextAndTitle(WebInspector.UIString("(data)"));
2742         } else if (this._request.canceled) {
2743             cell.setTextAndTitle(WebInspector.UIString("(canceled)"));
2744         } else if (this._request.finished) {
2745             cell.setTextAndTitle(WebInspector.UIString("Finished"));
2746         } else {
2747             cell.setTextAndTitle(WebInspector.UIString("(pending)"));
2748         }
2749     },
2750
2751     /**
2752      * @param {!Element} cell
2753      */
2754     _renderInitiatorCell: function(cell)
2755     {
2756         var request = this._request;
2757         var initiator = request.initiatorInfo();
2758
2759         switch (initiator.type) {
2760         case WebInspector.NetworkRequest.InitiatorType.Parser:
2761             cell.title = initiator.url + ":" + initiator.lineNumber;
2762             cell.appendChild(WebInspector.linkifyResourceAsNode(initiator.url, initiator.lineNumber - 1));
2763             this._appendSubtitle(cell, WebInspector.UIString("Parser"));
2764             break;
2765
2766         case WebInspector.NetworkRequest.InitiatorType.Redirect:
2767             cell.title = initiator.url;
2768             console.assert(request.redirectSource);
2769             var redirectSource = /** @type {!WebInspector.NetworkRequest} */ (request.redirectSource);
2770             cell.appendChild(WebInspector.linkifyRequestAsNode(redirectSource));
2771             this._appendSubtitle(cell, WebInspector.UIString("Redirect"));
2772             break;
2773
2774         case WebInspector.NetworkRequest.InitiatorType.Script:
2775             if (!this._linkifiedInitiatorAnchor) {
2776                 this._linkifiedInitiatorAnchor = this._linkifier.linkifyScriptLocation(request.target(), null, initiator.url, initiator.lineNumber - 1, initiator.columnNumber - 1);
2777                 this._linkifiedInitiatorAnchor.title = "";
2778             }
2779             cell.appendChild(this._linkifiedInitiatorAnchor);
2780             this._appendSubtitle(cell, WebInspector.UIString("Script"));
2781             cell.classList.add("network-script-initiated");
2782             cell.request = request;
2783             break;
2784
2785         default:
2786             cell.title = "";
2787             cell.classList.add("network-dim-cell");
2788             cell.setTextAndTitle(WebInspector.UIString("Other"));
2789         }
2790     },
2791
2792     /**
2793      * @param {!Element} cell
2794      */
2795     _renderSizeCell: function(cell)
2796     {
2797         if (this._request.fetchedViaServiceWorker) {
2798             cell.setTextAndTitle(WebInspector.UIString("(from ServiceWorker)"));
2799             cell.classList.add("network-dim-cell");
2800         } else if (this._request.cached) {
2801             cell.setTextAndTitle(WebInspector.UIString("(from cache)"));
2802             cell.classList.add("network-dim-cell");
2803         } else {
2804             var resourceSize = Number.bytesToString(this._request.resourceSize);
2805             var transferSize = Number.bytesToString(this._request.transferSize);
2806             cell.setTextAndTitle(transferSize);
2807             this._appendSubtitle(cell, resourceSize);
2808         }
2809     },
2810
2811     /**
2812      * @param {!Element} cell
2813      */
2814     _renderTimeCell: function(cell)
2815     {
2816         if (this._request.duration > 0) {
2817             cell.setTextAndTitle(Number.secondsToString(this._request.duration));
2818             this._appendSubtitle(cell, Number.secondsToString(this._request.latency));
2819         } else {
2820             cell.classList.add("network-dim-cell");
2821             cell.setTextAndTitle(WebInspector.UIString("Pending"));
2822         }
2823     },
2824
2825     /**
2826      * @param {!Element} cellElement
2827      * @param {string} subtitleText
2828      */
2829     _appendSubtitle: function(cellElement, subtitleText)
2830     {
2831         var subtitleElement = document.createElement("div");
2832         subtitleElement.className = "network-cell-subtitle";
2833         subtitleElement.textContent = subtitleText;
2834         cellElement.appendChild(subtitleElement);
2835     },
2836
2837     refreshGraph: function()
2838     {
2839         if (!this._timelineCell)
2840             return;
2841         this._staleGraph = true;
2842         if (this.attached())
2843             this.dataGrid.scheduleUpdate();
2844     },
2845
2846     _updateGraph: function()
2847     {
2848         this._staleGraph = false;
2849         if (!this._timelineCell)
2850             return;
2851
2852         var calculator = this._parentView.calculator();
2853         var percentages = calculator.computeBarGraphPercentages(this._request);
2854         this._percentages = percentages;
2855
2856         this._barAreaElement.classList.remove("hidden");
2857
2858         this._barLeftElement.style.setProperty("left", percentages.start + "%");
2859         this._barLeftElement.style.setProperty("right", (100 - percentages.middle) + "%");
2860
2861         this._barRightElement.style.setProperty("left", percentages.middle + "%");
2862         this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
2863
2864         var labels = calculator.computeBarGraphLabels(this._request);
2865         this._labelLeftElement.textContent = labels.left;
2866         this._labelRightElement.textContent = labels.right;
2867
2868         var tooltip = (labels.tooltip || "");
2869         this._barLeftElement.title = tooltip;
2870         this._labelLeftElement.title = tooltip;
2871         this._labelRightElement.title = tooltip;
2872         this._barRightElement.title = tooltip;
2873     },
2874
2875     _refreshLabelPositions: function()
2876     {
2877         if (!this._percentages)
2878             return;
2879         this._labelLeftElement.style.removeProperty("left");
2880         this._labelLeftElement.style.removeProperty("right");
2881         this._labelLeftElement.classList.remove("before");
2882         this._labelLeftElement.classList.remove("hidden");
2883
2884         this._labelRightElement.style.removeProperty("left");
2885         this._labelRightElement.style.removeProperty("right");
2886         this._labelRightElement.classList.remove("after");
2887         this._labelRightElement.classList.remove("hidden");
2888
2889         const labelPadding = 10;
2890         const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
2891         const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
2892
2893         if (this._barLeftElement) {
2894             var leftBarWidth = barLeftElementOffsetWidth - labelPadding;
2895             var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding;
2896         } else {
2897             var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding;
2898             var rightBarWidth = barRightElementOffsetWidth - labelPadding;
2899         }
2900
2901         const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth;
2902         const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth;
2903
2904         const labelBefore = (labelLeftElementOffsetWidth > leftBarWidth);
2905         const labelAfter = (labelRightElementOffsetWidth > rightBarWidth);
2906         const graphElementOffsetWidth = this._timelineCell.offsetWidth;
2907
2908         if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
2909             var leftHidden = true;
2910
2911         if (labelAfter && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
2912             var rightHidden = true;
2913
2914         if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
2915             // The left/right label data are the same, so a before/after label can be replaced by an on-bar label.
2916             if (labelBefore && !labelAfter)
2917                 leftHidden = true;
2918             else if (labelAfter && !labelBefore)
2919                 rightHidden = true;
2920         }
2921
2922         if (labelBefore) {
2923             if (leftHidden)
2924                 this._labelLeftElement.classList.add("hidden");
2925             this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
2926             this._labelLeftElement.classList.add("before");
2927         } else {
2928             this._labelLeftElement.style.setProperty("left", this._percentages.start + "%");
2929             this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%");
2930         }
2931
2932         if (labelAfter) {
2933             if (rightHidden)
2934                 this._labelRightElement.classList.add("hidden");
2935             this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
2936             this._labelRightElement.classList.add("after");
2937         } else {
2938             this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
2939             this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
2940         }
2941     },
2942
2943     __proto__: WebInspector.SortableDataGridNode.prototype
2944 }
2945
2946 /**
2947  * @param {!WebInspector.NetworkDataGridNode} a
2948  * @param {!WebInspector.NetworkDataGridNode} b
2949  * @return {number}
2950  */
2951 WebInspector.NetworkDataGridNode.NameComparator = function(a, b)
2952 {
2953     var aFileName = a._request.name();
2954     var bFileName = b._request.name();
2955     if (aFileName > bFileName)
2956         return 1;
2957     if (bFileName > aFileName)
2958         return -1;
2959     return a._request.indentityCompare(b._request);
2960 }
2961
2962 /**
2963  * @param {!WebInspector.NetworkDataGridNode} a
2964  * @param {!WebInspector.NetworkDataGridNode} b
2965  * @return {number}
2966  */
2967 WebInspector.NetworkDataGridNode.RemoteAddressComparator = function(a, b)
2968 {
2969     var aRemoteAddress = a._request.remoteAddress();
2970     var bRemoteAddress = b._request.remoteAddress();
2971     if (aRemoteAddress > bRemoteAddress)
2972         return 1;
2973     if (bRemoteAddress > aRemoteAddress)
2974         return -1;
2975     return a._request.indentityCompare(b._request);
2976 }
2977
2978 /**
2979  * @param {!WebInspector.NetworkDataGridNode} a
2980  * @param {!WebInspector.NetworkDataGridNode} b
2981  * @return {number}
2982  */
2983 WebInspector.NetworkDataGridNode.SizeComparator = function(a, b)
2984 {
2985     if (b._request.cached && !a._request.cached)
2986         return 1;
2987     if (a._request.cached && !b._request.cached)
2988         return -1;
2989     return (a._request.transferSize - b._request.transferSize) || a._request.indentityCompare(b._request);
2990 }
2991
2992 /**
2993  * @param {!WebInspector.NetworkDataGridNode} a
2994  * @param {!WebInspector.NetworkDataGridNode} b
2995  * @return {number}
2996  */
2997 WebInspector.NetworkDataGridNode.InitiatorComparator = function(a, b)
2998 {
2999     var aInitiator = a._request.initiatorInfo();
3000     var bInitiator = b._request.initiatorInfo();
3001
3002     if (aInitiator.type < bInitiator.type)
3003         return -1;
3004     if (aInitiator.type > bInitiator.type)
3005         return 1;
3006
3007     if (typeof aInitiator.__source === "undefined")
3008         aInitiator.__source = WebInspector.displayNameForURL(aInitiator.url);
3009     if (typeof bInitiator.__source === "undefined")
3010         bInitiator.__source = WebInspector.displayNameForURL(bInitiator.url);
3011
3012     if (aInitiator.__source < bInitiator.__source)
3013         return -1;
3014     if (aInitiator.__source > bInitiator.__source)
3015         return 1;
3016
3017     if (aInitiator.lineNumber < bInitiator.lineNumber)
3018         return -1;
3019     if (aInitiator.lineNumber > bInitiator.lineNumber)
3020         return 1;
3021
3022     if (aInitiator.columnNumber < bInitiator.columnNumber)
3023         return -1;
3024     if (aInitiator.columnNumber > bInitiator.columnNumber)
3025         return 1;
3026
3027     return a._request.indentityCompare(b._request);
3028 }
3029
3030 /**
3031  * @param {!WebInspector.NetworkDataGridNode} a
3032  * @param {!WebInspector.NetworkDataGridNode} b
3033  * @return {number}
3034  */
3035 WebInspector.NetworkDataGridNode.RequestCookiesCountComparator = function(a, b)
3036 {
3037     var aScore = a._request.requestCookies ? a._request.requestCookies.length : 0;
3038     var bScore = b._request.requestCookies ? b._request.requestCookies.length : 0;
3039     return (aScore - bScore) || a._request.indentityCompare(b._request);
3040 }
3041
3042 /**
3043  * @param {!WebInspector.NetworkDataGridNode} a
3044  * @param {!WebInspector.NetworkDataGridNode} b
3045  * @return {number}
3046  */
3047 WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator = function(a, b)
3048 {
3049     var aScore = a._request.responseCookies ? a._request.responseCookies.length : 0;
3050     var bScore = b._request.responseCookies ? b._request.responseCookies.length : 0;
3051     return (aScore - bScore) || a._request.indentityCompare(b._request);
3052 }
3053
3054 /**
3055  * @param {string} propertyName
3056  * @param {boolean} revert
3057  * @param {!WebInspector.NetworkDataGridNode} a
3058  * @param {!WebInspector.NetworkDataGridNode} b
3059  * @return {number}
3060  */
3061 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyName, revert, a, b)
3062 {
3063     var aValue = a._request[propertyName];
3064     var bValue = b._request[propertyName];
3065     if (aValue > bValue)
3066         return revert ? -1 : 1;
3067     if (bValue > aValue)
3068         return revert ? 1 : -1;
3069     return a._request.indentityCompare(b._request);
3070 }