blob: 2796713308c4f57e5baf22aa8627b9fa4b57b88f [file] [log] [blame]
/*
* Copyright (C) 2017 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentView
{
constructor(representedObject, extraArguments)
{
super(representedObject);
// Collections contain the set of values needed to render the table.
// The main collection reflects the main target's live activity.
// We create other collections for HAR imports.
this._collections = [];
this._activeCollection = null;
this._mainCollection = this._addCollection();
this._setActiveCollection(this._mainCollection);
this._entriesSortComparator = null;
this._showingRepresentedObjectCookie = null;
this._table = null;
this._nameColumnWidthSetting = new WI.Setting("network-table-content-view-name-column-width", 250);
this._selectedObject = null;
this._detailView = null;
this._detailViewMap = new Map;
this._domNodeEntries = new Map;
this._waterfallTimelineRuler = null;
this._waterfallPopover = null;
// FIXME: Network Timeline.
// FIXME: Throttling.
this._typeFilterScopeBarItemAll = new WI.ScopeBarItem("network-type-filter-all", WI.UIString("All"), {exclusive: true});
let typeFilterScopeBarItems = [this._typeFilterScopeBarItemAll];
let uniqueTypes = [
["Document", (type) => type === WI.Resource.Type.Document],
["StyleSheet", (type) => type === WI.Resource.Type.StyleSheet],
["Image", (type) => type === WI.Resource.Type.Image],
["Font", (type) => type === WI.Resource.Type.Font],
["Script", (type) => type === WI.Resource.Type.Script],
["XHR", (type) => type === WI.Resource.Type.XHR || type === WI.Resource.Type.Fetch],
["Other", (type) => {
return type !== WI.Resource.Type.Document
&& type !== WI.Resource.Type.StyleSheet
&& type !== WI.Resource.Type.Image
&& type !== WI.Resource.Type.Font
&& type !== WI.Resource.Type.Script
&& type !== WI.Resource.Type.XHR
&& type !== WI.Resource.Type.Fetch;
}],
];
for (let [key, checker] of uniqueTypes) {
let type = WI.Resource.Type[key];
let scopeBarItem = new WI.ScopeBarItem("network-type-filter-" + key, WI.NetworkTableContentView.shortDisplayNameForResourceType(type));
scopeBarItem.__checker = checker;
typeFilterScopeBarItems.push(scopeBarItem);
}
this._typeFilterScopeBar = new WI.ScopeBar("network-type-filter-scope-bar", typeFilterScopeBarItems, typeFilterScopeBarItems[0]);
this._typeFilterScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._typeFilterScopeBarSelectionChanged, this);
if (WI.MediaInstrument.supported()) {
this._groupMediaRequestsByDOMNodeNavigationItem = new WI.CheckboxNavigationItem("group-media-requests", WI.UIString("Group Media Requests"), WI.settings.groupMediaRequestsByDOMNode.value);
this._groupMediaRequestsByDOMNodeNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, this._handleGroupMediaRequestsByDOMNodeCheckedDidChange, this);
} else
WI.settings.groupMediaRequestsByDOMNode.value = false;
this._urlFilterSearchText = null;
this._urlFilterSearchRegex = null;
this._urlFilterIsActive = false;
this._urlFilterNavigationItem = new WI.FilterBarNavigationItem;
this._urlFilterNavigationItem.filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._urlFilterDidChange, this);
this._urlFilterNavigationItem.filterBar.placeholder = WI.UIString("Filter Full URL");
this._activeTypeFilters = this._generateTypeFilter();
this._activeURLFilterResources = new Set;
this._emptyFilterResultsMessageElement = null;
this._clearOnLoadNavigationItem = new WI.CheckboxNavigationItem("preserve-log", WI.UIString("Preserve Log"), !WI.settings.clearNetworkOnNavigate.value);
this._clearOnLoadNavigationItem.tooltip = WI.UIString("Do not clear network items on new page loads");
this._clearOnLoadNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, () => { WI.settings.clearNetworkOnNavigate.value = !WI.settings.clearNetworkOnNavigate.value; });
WI.settings.clearNetworkOnNavigate.addEventListener(WI.Setting.Event.Changed, this._clearNetworkOnNavigateSettingChanged, this);
this._harImportNavigationItem = new WI.ButtonNavigationItem("har-import", WI.UIString("Import"), "Images/Import.svg", 15, 15);
this._harImportNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;
this._harImportNavigationItem.tooltip = WI.UIString("HAR Import");
this._harImportNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => {
this._importHAR();
});
this._harExportNavigationItem = new WI.ButtonNavigationItem("har-export", WI.UIString("Export"), "Images/Export.svg", 15, 15);
this._harExportNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;
this._harExportNavigationItem.tooltip = WI.UIString("HAR Export (%s)").format(WI.saveKeyboardShortcut.displayName);
this._harExportNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => {
this._exportHAR();
});
this._collectionsPathNavigationItem = new WI.HierarchicalPathNavigationItem;
this._collectionsPathNavigationItem.addEventListener(WI.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, this._collectionsHierarchicalPathComponentWasSelected, this);
this._pathComponentsMap = new Map;
this._lastPathComponent = null;
let pathComponent = this._addCollectionPathComponent(this._mainCollection, WI.UIString("Live Activity"), "network-overview-icon");
this._collectionsPathNavigationItem.components = [pathComponent];
this._checkboxesNavigationItemGroup = new WI.GroupNavigationItem([this._clearOnLoadNavigationItem, new WI.DividerNavigationItem]);
this._checkboxesNavigationItemGroup.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
this._pathComponentsNavigationItemGroup = new WI.GroupNavigationItem([this._collectionsPathNavigationItem, new WI.DividerNavigationItem]);
this._pathComponentsNavigationItemGroup.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
this._pathComponentsNavigationItemGroup.hidden = true;
this._buttonsNavigationItemGroup = new WI.GroupNavigationItem([this._harImportNavigationItem, this._harExportNavigationItem, new WI.DividerNavigationItem]);
this._buttonsNavigationItemGroup.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
// COMPATIBILITY (iOS 10.3): Network.setDisableResourceCaching did not exist.
if (window.NetworkAgent && NetworkAgent.setResourceCachingDisabled) {
let toolTipForDisableResourceCache = WI.UIString("Ignore the resource cache when loading resources");
let activatedToolTipForDisableResourceCache = WI.UIString("Use the resource cache when loading resources");
this._disableResourceCacheNavigationItem = new WI.ActivateButtonNavigationItem("disable-resource-cache", toolTipForDisableResourceCache, activatedToolTipForDisableResourceCache, "Images/IgnoreCaches.svg", 16, 16);
this._disableResourceCacheNavigationItem.activated = WI.settings.resourceCachingDisabled.value;
this._disableResourceCacheNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleDisableResourceCache, this);
WI.settings.resourceCachingDisabled.addEventListener(WI.Setting.Event.Changed, this._resourceCachingDisabledSettingChanged, this);
}
this._clearNetworkItemsNavigationItem = new WI.ButtonNavigationItem("clear-network-items", WI.UIString("Clear Network Items (%s)").format(WI.clearKeyboardShortcut.displayName), "Images/NavigationItemTrash.svg", 15, 15);
this._clearNetworkItemsNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => {
this.reset();
});
WI.Target.addEventListener(WI.Target.Event.ResourceAdded, this._handleResourceAdded, this);
WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
WI.Frame.addEventListener(WI.Frame.Event.ResourceWasAdded, this._handleResourceAdded, this);
WI.Frame.addEventListener(WI.Frame.Event.ChildFrameWasAdded, this._handleFrameWasAdded, this);
WI.Resource.addEventListener(WI.Resource.Event.LoadingDidFinish, this._resourceLoadingDidFinish, this);
WI.Resource.addEventListener(WI.Resource.Event.LoadingDidFail, this._resourceLoadingDidFail, this);
WI.Resource.addEventListener(WI.Resource.Event.TransferSizeDidChange, this._resourceTransferSizeDidChange, this);
WI.networkManager.addEventListener(WI.NetworkManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
this._needsInitialPopulate = true;
// FIXME: This is working around the order of events. Normal page navigation
// triggers a MainResource change and then a MainFrame change. Page Transition
// triggers a MainFrame change then a MainResource change.
this._transitioningPageTarget = false;
WI.notifications.addEventListener(WI.Notification.TransitionPageTarget, this._transitionPageTarget, this);
}
// Static
static displayNameForResource(resource)
{
if (resource.type === WI.Resource.Type.Image || resource.type === WI.Resource.Type.Font || resource.type === WI.Resource.Type.Other) {
let fileExtension;
if (resource.mimeType)
fileExtension = WI.fileExtensionForMIMEType(resource.mimeType);
if (!fileExtension)
fileExtension = WI.fileExtensionForURL(resource.url);
if (fileExtension)
return fileExtension;
}
return WI.NetworkTableContentView.shortDisplayNameForResourceType(resource.type).toLowerCase();
}
static shortDisplayNameForResourceType(type)
{
switch (type) {
case WI.Resource.Type.Document:
return WI.UIString("Document");
case WI.Resource.Type.StyleSheet:
return WI.unlocalizedString("CSS");
case WI.Resource.Type.Image:
return WI.UIString("Image");
case WI.Resource.Type.Font:
return WI.UIString("Font");
case WI.Resource.Type.Script:
return WI.unlocalizedString("JS");
case WI.Resource.Type.XHR:
return WI.unlocalizedString("XHR");
case WI.Resource.Type.Fetch:
return WI.repeatedUIString.fetch();
case WI.Resource.Type.Ping:
return WI.UIString("Ping");
case WI.Resource.Type.Beacon:
return WI.UIString("Beacon");
case WI.Resource.Type.WebSocket:
case WI.Resource.Type.Other:
return WI.UIString("Other");
default:
console.error("Unknown resource type", type);
return null;
}
}
static get nodeWaterfallDOMEventSize() { return 8; }
// Public
get selectionPathComponents()
{
return null;
}
get navigationItems()
{
let items = [this._checkboxesNavigationItemGroup, this._pathComponentsNavigationItemGroup, this._buttonsNavigationItemGroup];
if (this._disableResourceCacheNavigationItem)
items.push(this._disableResourceCacheNavigationItem);
items.push(this._clearNetworkItemsNavigationItem);
return items;
}
get filterNavigationItems()
{
let navigationItems = [this._urlFilterNavigationItem, this._typeFilterScopeBar];
if (WI.MediaInstrument.supported())
navigationItems.push(this._groupMediaRequestsByDOMNodeNavigationItem);
return navigationItems;
}
get supportsSave()
{
return this._canExportHAR();
}
get saveData()
{
return {customSaveHandler: () => { this._exportHAR(); }};
}
shown()
{
super.shown();
if (this._detailView)
this._detailView.shown();
if (this._table)
this._table.restoreScrollPosition();
}
hidden()
{
this._hidePopover();
if (this._detailView)
this._detailView.hidden();
super.hidden();
}
closed()
{
for (let detailView of this._detailViewMap.values())
detailView.dispose();
this._detailViewMap.clear();
this._domNodeEntries.clear();
this._hidePopover();
this._hideDetailView();
WI.Target.removeEventListener(null, null, this);
WI.Frame.removeEventListener(null, null, this);
WI.Resource.removeEventListener(null, null, this);
WI.settings.resourceCachingDisabled.removeEventListener(null, null, this);
WI.settings.clearNetworkOnNavigate.removeEventListener(null, null, this);
WI.networkManager.removeEventListener(WI.NetworkManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
super.closed();
}
reset()
{
this._runForMainCollection((collection) => {
this._resetCollection(collection);
});
for (let detailView of this._detailViewMap.values())
detailView.dispose();
this._detailViewMap.clear();
this._domNodeEntries.clear();
this._updateWaterfallTimelineRuler();
this._updateExportButton();
if (this._table) {
this._selectedObject = null;
this._table.reloadData();
this._hidePopover();
this._hideDetailView();
}
}
showRepresentedObject(representedObject, cookie)
{
console.assert(representedObject instanceof WI.Resource);
let rowIndex = this._rowIndexForRepresentedObject(representedObject);
if (rowIndex === -1) {
this._selectedObject = null;
this._table.deselectAll();
this._hideDetailView();
return;
}
this._showingRepresentedObjectCookie = cookie;
this._table.selectRow(rowIndex);
this._showingRepresentedObjectCookie = null;
}
// NetworkDetailView delegate
networkDetailViewClose(networkDetailView)
{
this._selectedObject = null;
this._table.deselectAll();
this._hideDetailView();
}
// Table dataSource
tableIndexForRepresentedObject(table, object)
{
return this._activeCollection.filteredEntries.indexOf(object);
}
tableRepresentedObjectForIndex(table, index)
{
console.assert(index >= 0 && index < this._activeCollection.filteredEntries.length);
return this._activeCollection.filteredEntries[index];
}
tableNumberOfRows(table)
{
return this._activeCollection.filteredEntries.length;
}
tableSortChanged(table)
{
this._generateSortComparator();
if (!this._entriesSortComparator)
return;
this._hideDetailView();
for (let nodeEntry of this._domNodeEntries.values())
nodeEntry.initiatedResourceEntries.sort(this._entriesSortComparator);
this._updateSort();
this._updateFilteredEntries();
this._reloadTable();
}
// Table delegate
tableCellContextMenuClicked(table, cell, column, rowIndex, event)
{
if (column !== this._nameColumn)
return;
this._table.selectRow(rowIndex);
let entry = this._activeCollection.filteredEntries[rowIndex];
let contextMenu = WI.ContextMenu.createFromEvent(event);
WI.appendContextMenuItemsForSourceCode(contextMenu, entry.resource);
contextMenu.appendSeparator();
contextMenu.appendItem(WI.UIString("Export HAR"), () => { this._exportHAR(); }, !this._canExportHAR());
}
tableShouldSelectRow(table, cell, column, rowIndex)
{
return column === this._nameColumn;
}
tableSelectionDidChange(table)
{
let rowIndex = table.selectedRow;
if (isNaN(rowIndex)) {
this._selectedObject = null;
this._hideDetailView();
return;
}
let entry = this._activeCollection.filteredEntries[rowIndex];
if (entry.resource === this._selectedObject || entry.domNode === this._selectedObject)
return;
this._selectedObject = entry.resource || entry.domNode;
if (this._selectedObject)
this._showDetailView(this._selectedObject);
else
this._hideDetailView();
}
tablePopulateCell(table, cell, column, rowIndex)
{
let entry = this._activeCollection.filteredEntries[rowIndex];
if (entry.resource)
cell.classList.toggle("error", entry.resource.hadLoadingError());
let setTextContent = (accessor) => {
let uniqueValues = this._uniqueValuesForDOMNodeEntry(entry, accessor);
if (uniqueValues) {
if (uniqueValues.size > 1) {
cell.classList.add("multiple");
cell.textContent = WI.UIString("(multiple)");
return;
}
cell.textContent = uniqueValues.values().next().value || emDash;
return;
}
cell.textContent = accessor(entry) || emDash;
};
switch (column.identifier) {
case "name":
this._populateNameCell(cell, entry);
break;
case "domain":
this._populateDomainCell(cell, entry);
break;
case "type":
setTextContent((resourceEntry) => resourceEntry.displayType);
break;
case "mimeType":
setTextContent((resourceEntry) => resourceEntry.mimeType);
break;
case "method":
setTextContent((resourceEntry) => resourceEntry.method);
break;
case "scheme":
setTextContent((resourceEntry) => resourceEntry.scheme);
break;
case "status":
setTextContent((resourceEntry) => resourceEntry.status);
break;
case "protocol":
setTextContent((resourceEntry) => resourceEntry.protocol);
break;
case "initiator":
this._populateInitiatorCell(cell, entry);
break;
case "priority":
setTextContent((resourceEntry) => WI.Resource.displayNameForPriority(resourceEntry.priority));
break;
case "remoteAddress":
setTextContent((resourceEntry) => resourceEntry.remoteAddress);
break;
case "connectionIdentifier":
setTextContent((resourceEntry) => resourceEntry.connectionIdentifier);
break;
case "resourceSize": {
let resourceSize = entry.resourceSize;
let resourceEntries = entry.initiatedResourceEntries;
if (resourceEntries)
resourceSize = resourceEntries.reduce((accumulator, current) => accumulator + (current.resourceSize || 0), 0);
cell.textContent = isNaN(resourceSize) ? emDash : Number.bytesToString(resourceSize);
break;
}
case "transferSize":
this._populateTransferSizeCell(cell, entry);
break;
case "time": {
// FIXME: <https://webkit.org/b/176748> Web Inspector: Frontend sometimes receives resources with negative duration (responseEnd - requestStart)
let time = entry.time;
let resourceEntries = entry.initiatedResourceEntries;
if (resourceEntries)
time = resourceEntries.reduce((accumulator, current) => accumulator + (current.time || 0), 0);
cell.textContent = isNaN(time) ? emDash : Number.secondsToString(Math.max(time, 0));
break;
}
case "waterfall":
this._populateWaterfallGraph(cell, entry);
break;
}
return cell;
}
// Private
_addCollection()
{
let collection = {};
this._resetCollection(collection);
this._collections.push(collection);
return collection;
}
_resetCollection(collection)
{
collection.entries = [];
collection.filteredEntries = [];
collection.pendingInsertions = [];
collection.pendingUpdates = [];
collection.waterfallStartTime = NaN;
collection.waterfallEndTime = NaN;
}
_setActiveCollection(collection)
{
console.assert(this._collections.includes(collection));
if (this._activeCollection === collection)
return;
this._activeCollection = collection;
}
_addCollectionPathComponent(collection, displayName, iconClassName)
{
let pathComponent = new WI.HierarchicalPathComponent(displayName, iconClassName, collection);
this._pathComponentsMap.set(collection, pathComponent);
if (this._lastPathComponent) {
this._lastPathComponent.nextSibling = pathComponent;
pathComponent.previousSibling = this._lastPathComponent;
}
this._lastPathComponent = pathComponent;
if (this._pathComponentsNavigationItemGroup && this._pathComponentsMap.size > 1)
this._pathComponentsNavigationItemGroup.hidden = false;
return pathComponent;
}
_collectionsHierarchicalPathComponentWasSelected(event)
{
console.assert(event.data.pathComponent instanceof WI.HierarchicalPathComponent);
let collection = event.data.pathComponent.representedObject;
this._changeCollection(collection);
}
_changeCollection(collection)
{
if (collection === this._activeCollection)
return;
this._setActiveCollection(collection);
let isMain = collection === this._mainCollection;
this._checkboxesNavigationItemGroup.hidden = !isMain;
this._groupMediaRequestsByDOMNodeNavigationItem.hidden = !isMain;
this._clearNetworkItemsNavigationItem.enabled = isMain;
this._collectionsPathNavigationItem.components = [this._pathComponentsMap.get(collection)];
this._updateSort();
this._updateActiveFilterResources();
this._updateFilteredEntries();
this._updateWaterfallTimelineRuler();
this._reloadTable();
this._hideDetailView();
this.needsLayout();
}
_populateNameCell(cell, entry)
{
console.assert(!cell.firstChild, "We expect the cell to be empty.", cell, cell.firstChild);
function createIconElement() {
let iconElement = cell.appendChild(document.createElement("img"));
iconElement.className = "icon";
}
let domNode = entry.domNode;
if (domNode) {
this._table.element.classList.add("grouped");
cell.classList.add("parent");
let disclosureElement = cell.appendChild(document.createElement("img"));
disclosureElement.classList.add("disclosure");
disclosureElement.classList.toggle("expanded", !!entry.expanded);
disclosureElement.addEventListener("click", (event) => {
entry.expanded = !entry.expanded;
this._updateFilteredEntries();
this._reloadTable();
});
createIconElement();
cell.classList.add("dom-node");
cell.appendChild(WI.linkifyNodeReference(domNode));
return;
}
let resource = entry.resource;
if (resource.isLoading()) {
let statusElement = cell.appendChild(document.createElement("div"));
statusElement.className = "status";
let spinner = new WI.IndeterminateProgressSpinner;
statusElement.appendChild(spinner.element);
}
createIconElement();
cell.classList.add(WI.ResourceTreeElement.ResourceIconStyleClassName, ...WI.Resource.classNamesForResource(resource));
if (WI.settings.groupMediaRequestsByDOMNode.value && resource.initiatorNode) {
let nodeEntry = this._domNodeEntries.get(resource.initiatorNode);
if (nodeEntry.initiatedResourceEntries.length > 1 || nodeEntry.domNode.domEvents.length)
cell.classList.add("child");
}
let nameElement = cell.appendChild(document.createElement("span"));
nameElement.textContent = entry.name;
let range = resource.requestedByteRange;
if (range) {
let rangeElement = nameElement.appendChild(document.createElement("span"));
rangeElement.classList.add("range");
rangeElement.textContent = WI.UIString("Byte Range %s\u2013%s").format(range.start, range.end);
}
cell.title = resource.url;
cell.classList.add(...WI.Resource.classNamesForResource(resource));
}
_populateDomainCell(cell, entry)
{
console.assert(!cell.firstChild, "We expect the cell to be empty.", cell, cell.firstChild);
function createIconAndText(scheme, domain) {
let secure = scheme === "https" || scheme === "wss";
if (secure) {
let lockIconElement = cell.appendChild(document.createElement("img"));
lockIconElement.className = "lock";
}
cell.append(domain || emDash);
}
let uniqueSchemeValues = this._uniqueValuesForDOMNodeEntry(entry, (resourceEntry) => resourceEntry.scheme);
let uniqueDomainValues = this._uniqueValuesForDOMNodeEntry(entry, (resourceEntry) => resourceEntry.domain);
if (uniqueSchemeValues && uniqueDomainValues) {
if (uniqueSchemeValues.size > 1 || uniqueDomainValues.size > 1) {
cell.classList.add("multiple");
cell.textContent = WI.UIString("(multiple)");
return;
}
createIconAndText(uniqueSchemeValues.values().next().value, uniqueDomainValues.values().next().value);
return;
}
createIconAndText(entry.scheme, entry.domain);
}
_populateInitiatorCell(cell, entry)
{
let domNode = entry.domNode;
if (domNode) {
cell.textContent = emDash;
return;
}
let initiatorLocation = entry.resource.initiatorSourceCodeLocation;
if (!initiatorLocation) {
cell.textContent = emDash;
return;
}
const options = {
dontFloat: true,
ignoreSearchTab: true,
};
cell.appendChild(WI.createSourceCodeLocationLink(initiatorLocation, options));
}
_populateTransferSizeCell(cell, entry)
{
let resourceEntries = entry.initiatedResourceEntries;
if (resourceEntries) {
if (resourceEntries.every((resourceEntry) => resourceEntry.resource.responseSource === WI.Resource.ResponseSource.MemoryCache)) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(memory)");
return;
}
if (resourceEntries.every((resourceEntry) => resourceEntry.resource.responseSource === WI.Resource.ResponseSource.DiskCache)) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(disk)");
return;
}
if (resourceEntries.every((resourceEntry) => resourceEntry.resource.responseSource === WI.Resource.ResponseSource.ServiceWorker)) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(service worker)");
return;
}
let transferSize = resourceEntries.reduce((accumulator, current) => accumulator + (current.transferSize || 0), 0);
if (isNaN(transferSize))
cell.textContent = emDash;
else
cell.textContent = Number.bytesToString(transferSize);
return;
}
let responseSource = entry.resource.responseSource;
if (responseSource === WI.Resource.ResponseSource.MemoryCache) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(memory)");
return;
}
if (responseSource === WI.Resource.ResponseSource.DiskCache) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(disk)");
return;
}
if (responseSource === WI.Resource.ResponseSource.ServiceWorker) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(service worker)");
return;
}
if (responseSource === WI.Resource.ResponseSource.InspectorOverride) {
cell.classList.add("cache-type");
cell.textContent = WI.UIString("(inspector override)");
return;
}
let transferSize = entry.transferSize;
cell.textContent = isNaN(transferSize) ? emDash : Number.bytesToString(transferSize);
console.assert(!cell.classList.contains("cache-type"), "Should not have cache-type class on cell.");
}
_populateWaterfallGraph(cell, entry)
{
cell.removeChildren();
let container = cell.appendChild(document.createElement("div"));
container.className = "waterfall-container";
let collection = this._activeCollection;
let graphStartTime = this._waterfallTimelineRuler.startTime;
let secondsPerPixel = this._waterfallTimelineRuler.secondsPerPixel;
function positionByStartOffset(element, timestamp) {
let styleAttribute = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR ? "left" : "right";
element.style.setProperty(styleAttribute, ((timestamp - graphStartTime) / secondsPerPixel) + "px");
}
function setWidthForDuration(element, startTimestamp, endTimestamp) {
element.style.setProperty("width", ((endTimestamp - startTimestamp) / secondsPerPixel) + "px");
}
let domNode = entry.domNode;
if (domNode) {
let groupedDOMEvents = [];
for (let domEvent of domNode.domEvents) {
if (domEvent.originator)
continue;
if (!groupedDOMEvents.length || (domEvent.timestamp - groupedDOMEvents.lastValue.endTimestamp) >= (NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel)) {
groupedDOMEvents.push({
startTimestamp: domEvent.timestamp,
domEvents: [],
});
}
groupedDOMEvents.lastValue.endTimestamp = domEvent.timestamp;
groupedDOMEvents.lastValue.domEvents.push(domEvent);
}
let fullscreenDOMEvents = WI.DOMNode.getFullscreenDOMEvents(domNode.domEvents);
if (fullscreenDOMEvents.length) {
if (!fullscreenDOMEvents[0].data.enabled)
fullscreenDOMEvents.unshift({timestamp: graphStartTime});
if (fullscreenDOMEvents.lastValue.data.enabled)
fullscreenDOMEvents.push({timestamp: collection.waterfallEndTime});
console.assert((fullscreenDOMEvents.length % 2) === 0, "Every enter/exit of fullscreen should have a corresponding exit/enter.");
for (let i = 0; i < fullscreenDOMEvents.length; i += 2) {
let fullscreenElement = container.appendChild(document.createElement("div"));
fullscreenElement.classList.add("area", "dom-fullscreen");
positionByStartOffset(fullscreenElement, fullscreenDOMEvents[i].timestamp);
setWidthForDuration(fullscreenElement, fullscreenDOMEvents[i].timestamp, fullscreenDOMEvents[i + 1].timestamp);
let originator = fullscreenDOMEvents[i].originator || fullscreenDOMEvents[i + 1].originator;
if (originator)
fullscreenElement.title = WI.UIString("Full-Screen from \u201C%s\u201D").format(originator.displayName);
else
fullscreenElement.title = WI.UIString("Full-Screen");
}
}
for (let powerEfficientPlaybackRange of domNode.powerEfficientPlaybackRanges) {
let startTimestamp = powerEfficientPlaybackRange.startTimestamp || graphStartTime;
let endTimestamp = powerEfficientPlaybackRange.endTimestamp || collection.waterfallEndTime;
let powerEfficientPlaybackRangeElement = container.appendChild(document.createElement("div"));
powerEfficientPlaybackRangeElement.classList.add("area", "power-efficient-playback");
powerEfficientPlaybackRangeElement.title = WI.UIString("Power Efficient Playback");
positionByStartOffset(powerEfficientPlaybackRangeElement, startTimestamp);
setWidthForDuration(powerEfficientPlaybackRangeElement, startTimestamp, endTimestamp);
}
let playing = false;
function createDOMEventLine(domEvents, startTimestamp, endTimestamp) {
if (WI.DOMNode.isStopEvent(domEvents.lastValue.eventName))
return;
for (let i = domEvents.length - 1; i >= 0; --i) {
let domEvent = domEvents[i];
if (WI.DOMNode.isPlayEvent(domEvent.eventName)) {
playing = true;
break;
}
if (WI.DOMNode.isPauseEvent(domEvent.eventName)) {
playing = false;
break;
}
}
let lineElement = container.appendChild(document.createElement("div"));
lineElement.classList.add("dom-activity");
lineElement.classList.toggle("playing", playing);
positionByStartOffset(lineElement, startTimestamp);
setWidthForDuration(lineElement, startTimestamp, endTimestamp);
}
for (let [a, b] of groupedDOMEvents.adjacencies())
createDOMEventLine(a.domEvents, a.endTimestamp, b.startTimestamp);
if (groupedDOMEvents.length)
createDOMEventLine(groupedDOMEvents.lastValue.domEvents, groupedDOMEvents.lastValue.endTimestamp, collection.waterfallEndTime);
for (let {startTimestamp, endTimestamp, domEvents} of groupedDOMEvents) {
let paddingForCentering = NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel / 2;
let eventElement = container.appendChild(document.createElement("div"));
eventElement.classList.add("dom-event");
positionByStartOffset(eventElement, startTimestamp - paddingForCentering);
setWidthForDuration(eventElement, startTimestamp, endTimestamp + paddingForCentering);
eventElement.addEventListener("mousedown", (event) => {
if (event.button !== 0 || event.ctrlKey)
return;
this._handleNodeEntryMousedownWaterfall(entry, domEvents);
});
for (let domEvent of domEvents)
entry.domEventElements.set(domEvent, eventElement);
}
return;
}
let resource = entry.resource;
if (!resource.hasResponse()) {
cell.textContent = zeroWidthSpace;
return;
}
let {startTime, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd} = resource.timingData;
if (isNaN(startTime) || isNaN(responseEnd) || startTime > responseEnd) {
cell.textContent = zeroWidthSpace;
return;
}
if (responseEnd < graphStartTime) {
cell.textContent = zeroWidthSpace;
return;
}
let graphEndTime = this._waterfallTimelineRuler.endTime;
if (startTime > graphEndTime) {
cell.textContent = zeroWidthSpace;
return;
}
let lastEndTimestamp = NaN;
function appendBlock(startTimestamp, endTimestamp, className) {
if (isNaN(startTimestamp) || isNaN(endTimestamp))
return null;
if (Math.abs(startTimestamp - lastEndTimestamp) < secondsPerPixel * 2)
startTimestamp = lastEndTimestamp;
lastEndTimestamp = endTimestamp;
let block = container.appendChild(document.createElement("div"));
block.classList.add("block", className);
positionByStartOffset(block, startTimestamp);
setWidthForDuration(block, startTimestamp, endTimestamp);
return block;
}
// Mouse block sits on top and accepts mouse events on this group.
let padSeconds = 10 * secondsPerPixel;
let mouseBlock = appendBlock(startTime - padSeconds, responseEnd + padSeconds, "mouse-tracking");
mouseBlock.addEventListener("mousedown", (event) => {
if (event.button !== 0 || event.ctrlKey)
return;
this._handleResourceEntryMousedownWaterfall(entry);
});
// Super small visualization.
let totalWidth = (responseEnd - startTime) / secondsPerPixel;
if (totalWidth <= 3) {
let twoPixels = secondsPerPixel * 2;
appendBlock(startTime, startTime + twoPixels, "queue");
appendBlock(startTime + twoPixels, startTime + (2 * twoPixels), "response");
return;
}
appendBlock(startTime, responseEnd, "filler");
// FIXME: <https://webkit.org/b/190214> Web Inspector: expose full load metrics for redirect requests
appendBlock(redirectStart, redirectEnd, "redirect");
if (domainLookupStart) {
appendBlock(fetchStart, domainLookupStart, "queue");
appendBlock(domainLookupStart, domainLookupEnd || connectStart || requestStart, "dns");
} else if (connectStart)
appendBlock(fetchStart, connectStart, "queue");
else if (requestStart)
appendBlock(fetchStart, requestStart, "queue");
if (connectStart)
appendBlock(connectStart, secureConnectionStart || connectEnd, "connect");
if (secureConnectionStart)
appendBlock(secureConnectionStart, connectEnd, "secure");
appendBlock(requestStart, responseStart, "request");
appendBlock(responseStart, responseEnd, "response");
}
_generateSortComparator()
{
let sortColumnIdentifier = this._table.sortColumnIdentifier;
if (!sortColumnIdentifier) {
this._entriesSortComparator = null;
return;
}
let comparator;
switch (sortColumnIdentifier) {
case "name":
case "domain":
case "mimeType":
case "method":
case "scheme":
case "protocol":
case "initiator":
case "remoteAddress":
// Simple string.
comparator = (a, b) => (a[sortColumnIdentifier] || "").extendedLocaleCompare(b[sortColumnIdentifier] || "");
break;
case "status":
case "connectionIdentifier":
case "resourceSize":
case "time":
// Simple number.
comparator = (a, b) => {
let aValue = a[sortColumnIdentifier];
if (isNaN(aValue))
return 1;
let bValue = b[sortColumnIdentifier];
if (isNaN(bValue))
return -1;
return aValue - bValue;
};
break;
case "priority":
// Resource.NetworkPriority enum.
comparator = (a, b) => WI.Resource.comparePriority(a.priority, b.priority);
break;
case "type":
// Sort by displayType string.
comparator = (a, b) => (a.displayType || "").extendedLocaleCompare(b.displayType || "");
break;
case "transferSize":
// Handle (memory) and (disk) values.
comparator = (a, b) => {
let transferSizeA = a.transferSize;
let transferSizeB = b.transferSize;
// Treat NaN as the largest value.
if (isNaN(transferSizeA))
return 1;
if (isNaN(transferSizeB))
return -1;
// Treat memory cache and disk cache as small values.
let sourceA = a.resource.responseSource;
if (sourceA === WI.Resource.ResponseSource.MemoryCache)
transferSizeA = -20;
else if (sourceA === WI.Resource.ResponseSource.DiskCache)
transferSizeA = -10;
else if (sourceA === WI.Resource.ResponseSource.ServiceWorker)
transferSizeA = -5;
else if (sourceA === WI.Resource.ResponseSource.InspectorOverride)
transferSizeA = -3;
let sourceB = b.resource.responseSource;
if (sourceB === WI.Resource.ResponseSource.MemoryCache)
transferSizeB = -20;
else if (sourceB === WI.Resource.ResponseSource.DiskCache)
transferSizeB = -10;
else if (sourceB === WI.Resource.ResponseSource.ServiceWorker)
transferSizeB = -5;
else if (sourceB === WI.Resource.ResponseSource.InspectorOverride)
transferSizeB = -3;
return transferSizeA - transferSizeB;
};
break;
case "waterfall":
// Sort by startTime number.
comparator = (a, b) => a.startTime - b.startTime;
break;
default:
console.assert("Unexpected sort column", sortColumnIdentifier);
return;
}
let reverseFactor = this._table.sortOrder === WI.Table.SortOrder.Ascending ? 1 : -1;
// If the entry has an `initiatorNode`, use that node's "first" resource as the value of
// `entry`, so long as the entry being compared to doesn't have the same `initiatorNode`.
// This will ensure that all resource entries for a given `initiatorNode` will appear right
// next to each other, as they will all effectively be sorted by the first resource.
let substitute = (entry, other) => {
if (WI.settings.groupMediaRequestsByDOMNode.value && entry.resource.initiatorNode) {
let nodeEntry = this._domNodeEntries.get(entry.resource.initiatorNode);
if (!nodeEntry.initiatedResourceEntries.includes(other))
return nodeEntry.initiatedResourceEntries[0];
}
return entry;
};
this._entriesSortComparator = (a, b) => reverseFactor * comparator(substitute(a, b), substitute(b, a));
}
// Protected
initialLayout()
{
super.initialLayout();
this.element.style.setProperty("--node-waterfall-dom-event-size", NetworkTableContentView.nodeWaterfallDOMEventSize + "px");
this._waterfallTimelineRuler = new WI.TimelineRuler;
this._waterfallTimelineRuler.allowsClippedLabels = true;
this._nameColumn = new WI.TableColumn("name", WI.UIString("Name"), {
minWidth: WI.Sidebar.AbsoluteMinimumWidth,
maxWidth: 500,
initialWidth: this._nameColumnWidthSetting.value,
resizeType: WI.TableColumn.ResizeType.Locked,
});
this._domainColumn = new WI.TableColumn("domain", WI.UIString("Domain"), {
minWidth: 120,
maxWidth: 200,
initialWidth: 150,
});
this._typeColumn = new WI.TableColumn("type", WI.UIString("Type"), {
minWidth: 70,
maxWidth: 120,
initialWidth: 90,
});
this._mimeTypeColumn = new WI.TableColumn("mimeType", WI.UIString("MIME Type"), {
hidden: true,
minWidth: 100,
maxWidth: 150,
initialWidth: 120,
});
this._methodColumn = new WI.TableColumn("method", WI.UIString("Method"), {
hidden: true,
minWidth: 55,
maxWidth: 80,
initialWidth: 65,
});
this._schemeColumn = new WI.TableColumn("scheme", WI.UIString("Scheme"), {
hidden: true,
minWidth: 55,
maxWidth: 80,
initialWidth: 65,
});
this._statusColumn = new WI.TableColumn("status", WI.UIString("Status"), {
hidden: true,
minWidth: 50,
maxWidth: 50,
align: "left",
});
this._protocolColumn = new WI.TableColumn("protocol", WI.UIString("Protocol"), {
hidden: true,
minWidth: 65,
maxWidth: 80,
initialWidth: 75,
});
this._initiatorColumn = new WI.TableColumn("initiator", WI.UIString("Initiator"), {
hidden: true,
minWidth: 75,
maxWidth: 175,
initialWidth: 125,
});
this._priorityColumn = new WI.TableColumn("priority", WI.UIString("Priority"), {
hidden: true,
minWidth: 65,
maxWidth: 80,
initialWidth: 70,
});
this._remoteAddressColumn = new WI.TableColumn("remoteAddress", WI.UIString("IP Address"), {
hidden: true,
minWidth: 150,
});
this._connectionIdentifierColumn = new WI.TableColumn("connectionIdentifier", WI.UIString("Connection ID"), {
hidden: true,
minWidth: 50,
maxWidth: 120,
initialWidth: 80,
align: "right",
});
this._resourceSizeColumn = new WI.TableColumn("resourceSize", WI.UIString("Resource Size"), {
hidden: true,
minWidth: 80,
maxWidth: 100,
initialWidth: 80,
align: "right",
});
this._transferSizeColumn = new WI.TableColumn("transferSize", WI.UIString("Transfer Size", "Amount of data sent over the network for a single resource"), {
minWidth: 100,
maxWidth: 150,
initialWidth: 100,
align: "right",
});
this._timeColumn = new WI.TableColumn("time", WI.UIString("Time"), {
minWidth: 65,
maxWidth: 90,
initialWidth: 65,
align: "right",
});
this._waterfallColumn = new WI.TableColumn("waterfall", WI.UIString("Waterfall"), {
minWidth: 230,
headerView: this._waterfallTimelineRuler,
needsReloadOnResize: true,
});
this._nameColumn.addEventListener(WI.TableColumn.Event.WidthDidChange, this._tableNameColumnDidChangeWidth, this);
this._waterfallColumn.addEventListener(WI.TableColumn.Event.WidthDidChange, this._tableWaterfallColumnDidChangeWidth, this);
this._table = new WI.Table("network-table", this, this, 20);
this._table.addColumn(this._nameColumn);
this._table.addColumn(this._domainColumn);
this._table.addColumn(this._typeColumn);
this._table.addColumn(this._mimeTypeColumn);
this._table.addColumn(this._methodColumn);
this._table.addColumn(this._schemeColumn);
this._table.addColumn(this._statusColumn);
this._table.addColumn(this._protocolColumn);
this._table.addColumn(this._initiatorColumn);
this._table.addColumn(this._priorityColumn);
this._table.addColumn(this._remoteAddressColumn);
this._table.addColumn(this._connectionIdentifierColumn);
this._table.addColumn(this._resourceSizeColumn);
this._table.addColumn(this._transferSizeColumn);
this._table.addColumn(this._timeColumn);
this._table.addColumn(this._waterfallColumn);
if (!this._table.sortColumnIdentifier) {
this._table.sortOrder = WI.Table.SortOrder.Ascending;
this._table.sortColumnIdentifier = "waterfall";
}
this.addSubview(this._table);
}
layout()
{
this._updateWaterfallTimelineRuler();
this._processPendingEntries();
this._positionDetailView();
this._positionEmptyFilterMessage();
this._updateExportButton();
}
didLayoutSubtree()
{
super.didLayoutSubtree();
if (this._waterfallPopover)
this._waterfallPopover.resize();
}
processHAR(result)
{
let resources = WI.networkManager.processHAR(result);
if (!resources)
return;
let importedCollection = this._addCollection();
let displayName = WI.UIString("Imported - %s").format(result.filename);
this._addCollectionPathComponent(importedCollection, displayName, "network-har-icon");
this._changeCollection(importedCollection);
for (let resource of resources)
this._insertResourceAndReloadTable(resource);
}
handleClearShortcut(event)
{
if (!this._isShowingMainCollection())
return;
this.reset();
}
// Private
_updateWaterfallTimeRange(startTimestamp, endTimestamp)
{
let collection = this._activeCollection;
if (isNaN(collection.waterfallStartTime) || startTimestamp < collection.waterfallStartTime)
collection.waterfallStartTime = startTimestamp;
if (isNaN(collection.waterfallEndTime) || endTimestamp > collection.waterfallEndTime)
collection.waterfallEndTime = endTimestamp;
}
_updateWaterfallTimelineRuler()
{
if (!this._waterfallTimelineRuler)
return;
let collection = this._activeCollection;
if (isNaN(collection.waterfallStartTime)) {
this._waterfallTimelineRuler.zeroTime = 0;
this._waterfallTimelineRuler.startTime = 0;
this._waterfallTimelineRuler.endTime = 0.250;
} else {
this._waterfallTimelineRuler.zeroTime = collection.waterfallStartTime;
this._waterfallTimelineRuler.startTime = collection.waterfallStartTime;
this._waterfallTimelineRuler.endTime = collection.waterfallEndTime;
// Add a little bit of padding on the each side.
const paddingPixels = 5;
let padSeconds = paddingPixels * this._waterfallTimelineRuler.secondsPerPixel;
this._waterfallTimelineRuler.zeroTime = collection.waterfallStartTime - padSeconds;
this._waterfallTimelineRuler.startTime = collection.waterfallStartTime - padSeconds;
this._waterfallTimelineRuler.endTime = collection.waterfallEndTime + padSeconds;
}
}
_canExportHAR()
{
if (!this._isShowingMainCollection())
return false;
let mainFrame = WI.networkManager.mainFrame;
if (!mainFrame)
return false;
let mainResource = mainFrame.mainResource;
if (!mainResource)
return false;
if (!mainResource.requestSentDate)
return false;
if (!this._HARResources().length)
return false;
return true;
}
_updateExportButton()
{
this._harExportNavigationItem.enabled = this._canExportHAR();
}
_processPendingEntries()
{
let collection = this._activeCollection;
let needsSort = collection.pendingUpdates.length > 0;
// No global sort is needed, so just insert new records into their sorted position.
if (!needsSort) {
let originalLength = collection.pendingInsertions.length;
for (let resource of collection.pendingInsertions)
this._insertResourceAndReloadTable(resource);
console.assert(collection.pendingInsertions.length === originalLength);
collection.pendingInsertions = [];
return;
}
for (let resource of collection.pendingInsertions) {
let resourceEntry = this._entryForResource(resource);
this._tryLinkResourceToDOMNode(resourceEntry);
collection.entries.push(resourceEntry);
}
collection.pendingInsertions = [];
for (let updateObject of collection.pendingUpdates) {
if (updateObject instanceof WI.Resource)
this._updateEntryForResource(updateObject);
}
collection.pendingUpdates = [];
this._updateSort();
this._updateFilteredEntries();
this._reloadTable();
}
_populateWithInitialResourcesIfNeeded(collection)
{
if (!this._needsInitialPopulate)
return;
this._needsInitialPopulate = false;
let populateResourcesForFrame = (frame) => {
if (frame.provisionalMainResource)
collection.pendingInsertions.push(frame.provisionalMainResource);
else if (frame.mainResource)
collection.pendingInsertions.push(frame.mainResource);
for (let resource of frame.resourceCollection)
collection.pendingInsertions.push(resource);
for (let childFrame of frame.childFrameCollection)
populateResourcesForFrame(childFrame);
};
let populateResourcesForTarget = (target) => {
if (target.mainResource instanceof WI.Resource)
collection.pendingInsertions.push(target.mainResource);
for (let resource of target.resourceCollection)
collection.pendingInsertions.push(resource);
};
for (let target of WI.targets) {
if (target === WI.pageTarget)
populateResourcesForFrame(WI.networkManager.mainFrame);
else
populateResourcesForTarget(target);
}
this.needsLayout();
}
_checkURLFilterAgainstResource(resource)
{
if (this._urlFilterSearchRegex.test(resource.url)) {
this._activeURLFilterResources.add(resource);
return;
}
for (let redirect of resource.redirects) {
if (this._urlFilterSearchRegex.test(redirect.url)) {
this._activeURLFilterResources.add(resource);
return;
}
}
}
_rowIndexForRepresentedObject(object)
{
return this._activeCollection.filteredEntries.findIndex((x) => {
if (x.resource === object)
return true;
if (x.domNode === object)
return true;
return false;
});
}
_updateEntryForResource(resource)
{
let collection = this._activeCollection;
let index = collection.entries.findIndex((x) => x.resource === resource);
if (index === -1)
return;
// Don't wipe out the previous entry, as it may be used by a node entry.
function updateExistingEntry(existingEntry, newEntry) {
for (let key in newEntry)
existingEntry[key] = newEntry[key];
}
let entry = this._entryForResource(resource);
updateExistingEntry(collection.entries[index], entry);
let rowIndex = this._rowIndexForRepresentedObject(resource);
if (rowIndex === -1)
return;
updateExistingEntry(collection.filteredEntries[rowIndex], entry);
}
_hidePopover()
{
if (this._waterfallPopover)
this._waterfallPopover.dismiss();
}
_hideDetailView()
{
if (!this._detailView)
return;
this.element.classList.remove("showing-detail");
this._table.scrollContainer.style.removeProperty("width");
this.removeSubview(this._detailView);
this._detailView.hidden();
this._detailView = null;
this._table.updateLayout(WI.View.LayoutReason.Resize);
this._table.reloadVisibleColumnCells(this._waterfallColumn);
}
_showDetailView(object)
{
let oldDetailView = this._detailView;
this._detailView = this._detailViewMap.get(object);
if (this._detailView === oldDetailView)
return;
if (!this._detailView) {
if (object instanceof WI.Resource)
this._detailView = new WI.NetworkResourceDetailView(object, this);
else if (object instanceof WI.DOMNode) {
this._detailView = new WI.NetworkDOMNodeDetailView(object, this);
}
this._detailViewMap.set(object, this._detailView);
}
if (oldDetailView) {
oldDetailView.hidden();
this.replaceSubview(oldDetailView, this._detailView);
} else
this.addSubview(this._detailView);
if (this._showingRepresentedObjectCookie)
this._detailView.willShowWithCookie(this._showingRepresentedObjectCookie);
this._detailView.shown();
this.element.classList.add("showing-detail");
this._table.scrollContainer.style.width = this._nameColumn.width + "px";
// FIXME: It would be nice to avoid this.
// Currently the ResourceDetailView is in the heirarchy but has not yet done a layout so we
// end up seeing the table behind it. This forces us to layout now instead of after a beat.
this.updateLayout();
}
_positionDetailView()
{
if (!this._detailView)
return;
let side = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left";
this._detailView.element.style[side] = this._nameColumn.width + "px";
this._table.scrollContainer.style.width = this._nameColumn.width + "px";
}
_updateEmptyFilterResultsMessage()
{
if (this._hasActiveFilter() && !this._activeCollection.filteredEntries.length)
this._showEmptyFilterResultsMessage();
else
this._hideEmptyFilterResultsMessage();
}
_showEmptyFilterResultsMessage()
{
if (!this._emptyFilterResultsMessageElement) {
let buttonElement = document.createElement("button");
buttonElement.textContent = WI.UIString("Clear Filters");
buttonElement.addEventListener("click", () => { this._resetFilters(); });
this._emptyFilterResultsMessageElement = WI.createMessageTextView(WI.UIString("No Filter Results"));
this._emptyFilterResultsMessageElement.appendChild(buttonElement);
}
this.element.appendChild(this._emptyFilterResultsMessageElement);
this._positionEmptyFilterMessage();
}
_hideEmptyFilterResultsMessage()
{
if (!this._emptyFilterResultsMessageElement)
return;
this._emptyFilterResultsMessageElement.remove();
}
_positionEmptyFilterMessage()
{
if (!this._emptyFilterResultsMessageElement)
return;
let width = this._nameColumn.width - 1; // For the 1px border.
this._emptyFilterResultsMessageElement.style.width = width + "px";
}
_clearNetworkOnNavigateSettingChanged()
{
this._clearOnLoadNavigationItem.checked = !WI.settings.clearNetworkOnNavigate.value;
}
_resourceCachingDisabledSettingChanged()
{
this._disableResourceCacheNavigationItem.activated = WI.settings.resourceCachingDisabled.value;
}
_toggleDisableResourceCache()
{
WI.settings.resourceCachingDisabled.value = !WI.settings.resourceCachingDisabled.value;
}
_mainResourceDidChange(event)
{
this._runForMainCollection((collection, wasMain) => {
let frame = event.target;
if (frame.isMainFrame() && WI.settings.clearNetworkOnNavigate.value) {
this._resetCollection(collection);
if (wasMain && !this._needsInitialPopulate)
this._hideDetailView();
}
if (this._transitioningPageTarget) {
this._transitioningPageTarget = false;
this._needsInitialPopulate = true;
this._populateWithInitialResourcesIfNeeded(collection);
return;
}
this._insertResourceAndReloadTable(frame.mainResource);
});
}
_mainFrameDidChange()
{
this._runForMainCollection((collection) => {
this._populateWithInitialResourcesIfNeeded(collection);
});
}
_resourceLoadingDidFinish(event)
{
this._runForMainCollection((collection, wasMain) => {
let resource = event.target;
collection.pendingUpdates.push(resource);
this._updateWaterfallTimeRange(resource.firstTimestamp, resource.timingData.responseEnd);
if (this._hasURLFilter())
this._checkURLFilterAgainstResource(resource);
if (wasMain)
this.needsLayout();
});
}
_resourceLoadingDidFail(event)
{
this._runForMainCollection((collection, wasMain) => {
let resource = event.target;
collection.pendingUpdates.push(resource);
this._updateWaterfallTimeRange(resource.firstTimestamp, resource.timingData.responseEnd);
if (this._hasURLFilter())
this._checkURLFilterAgainstResource(resource);
if (wasMain)
this.needsLayout();
});
}
_resourceTransferSizeDidChange(event)
{
if (!this._table)
return;
this._runForMainCollection((collection, wasMain) => {
let resource = event.target;
// In the unlikely event that this is the sort column, we may need to resort.
if (this._table.sortColumnIdentifier === "transferSize") {
collection.pendingUpdates.push(resource);
this.needsLayout();
return;
}
let index = collection.entries.findIndex((x) => x.resource === resource);
if (index === -1)
return;
let entry = collection.entries[index];
entry.transferSize = !isNaN(resource.networkTotalTransferSize) ? resource.networkTotalTransferSize : resource.estimatedTotalTransferSize;
if (!wasMain)
return;
let rowIndex = this._rowIndexForRepresentedObject(resource);
if (rowIndex === -1)
return;
this._table.reloadCell(rowIndex, "transferSize");
});
}
_handleResourceAdded(event)
{
this._runForMainCollection((collection) => {
this._insertResourceAndReloadTable(event.data.resource);
});
}
_handleFrameWasAdded(event)
{
if (this._needsInitialPopulate)
return;
this._runForMainCollection((collection) => {
let frame = event.data.childFrame;
let mainResource = frame.provisionalMainResource || frame.mainResource;
console.assert(mainResource, "Frame should have a main resource.");
this._insertResourceAndReloadTable(mainResource);
console.assert(!frame.resourceCollection.size, "New frame should be empty.");
console.assert(!frame.childFrameCollection.size, "New frame should be empty.");
});
}
_runForMainCollection(callback)
{
let currentCollection = this._activeCollection;
let wasMain = currentCollection === this._mainCollection;
if (!wasMain)
this._setActiveCollection(this._mainCollection);
callback(this._activeCollection, wasMain);
if (!wasMain)
this._setActiveCollection(currentCollection);
}
_isShowingMainCollection()
{
return this._activeCollection === this._mainCollection;
}
_isDefaultSort()
{
return this._table.sortColumnIdentifier === "waterfall" && this._table.sortOrder === WI.Table.SortOrder.Ascending;
}
_insertResourceAndReloadTable(resource)
{
if (this._needsInitialPopulate)
return;
let collection = this._activeCollection;
this._updateWaterfallTimeRange(resource.firstTimestamp, resource.timingData.responseEnd);
if (!this._table || !(WI.tabBrowser.selectedTabContentView instanceof WI.NetworkTabContentView)) {
collection.pendingInsertions.push(resource);
this.needsLayout();
return;
}
let resourceEntry = this._entryForResource(resource);
this._tryLinkResourceToDOMNode(resourceEntry);
if (WI.settings.groupMediaRequestsByDOMNode.value && resource.initiatorNode) {
if (!this._entriesSortComparator)
this._generateSortComparator();
} else if (this._isDefaultSort() || !this._entriesSortComparator) {
// Default sort has fast path.
collection.entries.push(resourceEntry);
if (this._passFilter(resourceEntry)) {
collection.filteredEntries.push(resourceEntry);
this._table.reloadDataAddedToEndOnly();
}
return;
}
insertObjectIntoSortedArray(resourceEntry, collection.entries, this._entriesSortComparator);
if (this._passFilter(resourceEntry)) {
if (WI.settings.groupMediaRequestsByDOMNode.value)
this._updateFilteredEntries();
else
insertObjectIntoSortedArray(resourceEntry, collection.filteredEntries, this._entriesSortComparator);
// Probably a useless optimization here, but if we only added this row to the end
// we may avoid recreating all visible rows by saying as such.
if (collection.filteredEntries.lastValue === resourceEntry)
this._table.reloadDataAddedToEndOnly();
else
this._reloadTable();
}
}
_entryForResource(resource)
{
// FIXME: <https://webkit.org/b/143632> Web Inspector: Resources with the same name in different folders aren't distinguished
// FIXME: <https://webkit.org/b/176765> Web Inspector: Resource names should be less ambiguous
return {
resource,
name: WI.displayNameForURL(resource.url, resource.urlComponents),
domain: WI.displayNameForHost(resource.urlComponents.host),
scheme: resource.urlComponents.scheme ? resource.urlComponents.scheme.toLowerCase() : "",
method: resource.requestMethod,
type: resource.type,
displayType: WI.NetworkTableContentView.displayNameForResource(resource),
mimeType: resource.mimeType,
status: resource.statusCode,
cached: resource.cached,
resourceSize: resource.size,
transferSize: !isNaN(resource.networkTotalTransferSize) ? resource.networkTotalTransferSize : resource.estimatedTotalTransferSize,
time: resource.totalDuration,
protocol: resource.protocol,
initiator: resource.initiatorSourceCodeLocation ? resource.initiatorSourceCodeLocation.displayLocationString() : "",
priority: resource.priority,
remoteAddress: resource.remoteAddress,
connectionIdentifier: resource.connectionIdentifier,
startTime: resource.firstTimestamp,
};
}
_entryForDOMNode(domNode)
{
return {
domNode,
initiatedResourceEntries: [],
domEventElements: new Map,
expanded: true,
};
}
_tryLinkResourceToDOMNode(resourceEntry)
{
let resource = resourceEntry.resource;
if (!resource || !resource.initiatorNode)
return;
let nodeEntry = this._domNodeEntries.get(resource.initiatorNode);
if (!nodeEntry) {
nodeEntry = this._entryForDOMNode(resource.initiatorNode, Object.keys(resourceEntry));
this._domNodeEntries.set(resource.initiatorNode, nodeEntry);
resource.initiatorNode.addEventListener(WI.DOMNode.Event.DidFireEvent, this._handleNodeDidFireEvent, this);
if (resource.initiatorNode.canEnterPowerEfficientPlaybackState())
resource.initiatorNode.addEventListener(WI.DOMNode.Event.PowerEfficientPlaybackStateChanged, this._handleDOMNodePowerEfficientPlaybackStateChanged, this);
}
if (!this._entriesSortComparator)
this._generateSortComparator();
insertObjectIntoSortedArray(resourceEntry, nodeEntry.initiatedResourceEntries, this._entriesSortComparator);
}
_uniqueValuesForDOMNodeEntry(nodeEntry, accessor)
{
let resourceEntries = nodeEntry.initiatedResourceEntries;
if (!resourceEntries)
return null;
return resourceEntries.reduce((accumulator, current) => {
let value = accessor(current);
if (value || typeof value === "number")
accumulator.add(value);
return accumulator;
}, new Set);
}
_handleNodeDidFireEvent(event)
{
this._runForMainCollection((collection, wasMain) => {
let domNode = event.target;
let {domEvent} = event.data;
collection.pendingUpdates.push(domNode);
this._updateWaterfallTimeRange(NaN, domEvent.timestamp + (this._waterfallTimelineRuler.secondsPerPixel * 10));
if (wasMain)
this.needsLayout();
});
}
_handleDOMNodePowerEfficientPlaybackStateChanged(event)
{
this._runForMainCollection((collection, wasMain) => {
let domNode = event.target;
let {timestamp} = event.data;
collection.pendingUpdates.push(domNode);
this._updateWaterfallTimeRange(NaN, timestamp + (this._waterfallTimelineRuler.secondsPerPixel * 10));
if (wasMain)
this.needsLayout();
});
}
_hasTypeFilter()
{
return !!this._activeTypeFilters;
}
_hasURLFilter()
{
return this._urlFilterIsActive;
}
_hasActiveFilter()
{
return this._hasTypeFilter()
|| this._hasURLFilter();
}
_passTypeFilter(entry)
{
if (!this._hasTypeFilter())
return true;
return this._activeTypeFilters.some((checker) => checker(entry.resource.type));
}
_passURLFilter(entry)
{
if (!this._hasURLFilter())
return true;
return this._activeURLFilterResources.has(entry.resource);
}
_passFilter(entry)
{
return this._passTypeFilter(entry)
&& this._passURLFilter(entry);
}
_updateSort()
{
if (this._entriesSortComparator) {
let collection = this._activeCollection;
collection.entries = collection.entries.sort(this._entriesSortComparator);
}
}
_updateFilteredEntries()
{
let collection = this._activeCollection;
if (this._hasActiveFilter())
collection.filteredEntries = collection.entries.filter(this._passFilter, this);
else
collection.filteredEntries = collection.entries.slice();
if (WI.settings.groupMediaRequestsByDOMNode.value) {
for (let nodeEntry of this._domNodeEntries.values()) {
if (nodeEntry.initiatedResourceEntries.length < 2 && !nodeEntry.domNode.domEvents.length)
continue;
let firstIndex = Infinity;
for (let resourceEntry of nodeEntry.initiatedResourceEntries) {
if (this._hasActiveFilter() && !this._passFilter(resourceEntry))
continue;
let index = collection.filteredEntries.indexOf(resourceEntry);
if (index >= 0 && index < firstIndex)
firstIndex = index;
}
if (!isFinite(firstIndex))
continue;
collection.filteredEntries.insertAtIndex(nodeEntry, firstIndex);
}
collection.filteredEntries = collection.filteredEntries.filter((entry) => {
if (entry.resource && entry.resource.initiatorNode) {
let nodeEntry = this._domNodeEntries.get(entry.resource.initiatorNode);
if (!nodeEntry.expanded)
return false;
}
return true;
});
}
this._updateEmptyFilterResultsMessage();
}
_reloadTable()
{
this._table.reloadData();
this._restoreSelectedRow();
}
_generateTypeFilter()
{
let selectedItems = this._typeFilterScopeBar.selectedItems;
if (!selectedItems.length || selectedItems.includes(this._typeFilterScopeBarItemAll))
return null;
return selectedItems.map((item) => item.__checker);
}
_resetFilters()
{
console.assert(this._hasActiveFilter());
// Clear url filter.
this._urlFilterSearchText = null;
this._urlFilterSearchRegex = null;
this._urlFilterIsActive = false;
this._activeURLFilterResources.clear();
this._urlFilterNavigationItem.filterBar.clear();
console.assert(!this._hasURLFilter());
// Clear type filter.
this._typeFilterScopeBar.resetToDefault();
console.assert(!this._hasTypeFilter());
console.assert(!this._hasActiveFilter());
this._updateFilteredEntries();
this._reloadTable();
}
_areFilterListsIdentical(listA, listB)
{
if (listA && listB) {
if (listA.length !== listB.length)
return false;
for (let i = 0; i < listA.length; ++i) {
if (listA[i] !== listB[i])
return false;
}
return true;
}
return false;
}
_typeFilterScopeBarSelectionChanged(event)
{
// FIXME: <https://webkit.org/b/176763> Web Inspector: ScopeBar SelectionChanged event may dispatch multiple times for a single logical change
// We can't use shallow equals here because the contents are functions.
let oldFilter = this._activeTypeFilters;
let newFilter = this._generateTypeFilter();
if (this._areFilterListsIdentical(oldFilter, newFilter))
return;
// Even if the selected resource would still be visible, lets close the detail view if a filter changes.
this._hideDetailView();
this._activeTypeFilters = newFilter;
this._updateFilteredEntries();
this._reloadTable();
}
_handleGroupMediaRequestsByDOMNodeCheckedDidChange(event)
{
WI.settings.groupMediaRequestsByDOMNode.value = this._groupMediaRequestsByDOMNodeNavigationItem.checked;
if (!WI.settings.groupMediaRequestsByDOMNode.value) {
this._table.element.classList.remove("grouped");
if (this._selectedObject && this._selectedObject instanceof WI.DOMNode) {
this._selectedObject = null;
this._hideDetailView();
}
}
this._updateSort();
this._updateFilteredEntries();
this._reloadTable();
}
_urlFilterDidChange(event)
{
let searchQuery = this._urlFilterNavigationItem.filterBar.filters.text;
if (searchQuery === this._urlFilterSearchText)
return;
// Even if the selected resource would still be visible, lets close the detail view if a filter changes.
this._hideDetailView();
// Search cleared.
if (!searchQuery) {
this._urlFilterSearchText = null;
this._urlFilterSearchRegex = null;
this._urlFilterIsActive = false;
this._activeURLFilterResources.clear();
this._updateFilteredEntries();
this._reloadTable();
return;
}
this._urlFilterIsActive = true;
this._urlFilterSearchText = searchQuery;
this._urlFilterSearchRegex = WI.SearchUtilities.regExpForString(searchQuery, WI.SearchUtilities.defaultSettings);
this._updateActiveFilterResources();
this._updateFilteredEntries();
this._reloadTable();
}
_updateActiveFilterResources()
{
this._activeURLFilterResources.clear();
if (this._hasURLFilter()) {
for (let entry of this._activeCollection.entries)
this._checkURLFilterAgainstResource(entry.resource);
}
}
_restoreSelectedRow()
{
if (!this._selectedObject)
return;
let rowIndex = this._rowIndexForRepresentedObject(this._selectedObject);
if (rowIndex === -1) {
this._selectedObject = null;
this._table.deselectAll();
return;
}
this._table.selectRow(rowIndex);
this._showDetailView(this._selectedObject);
}
_HARResources()
{
let resources = this._activeCollection.filteredEntries.map((x) => x.resource);
const supportedHARSchemes = new Set(["http", "https", "ws", "wss"]);
return resources.filter((resource) => {
if (!resource) {
// DOM node entries are also added to `filteredEntries`.
return false;
}
if (!resource.finished)
return false;
if (!resource.requestSentDate)
return false;
if (!supportedHARSchemes.has(resource.urlComponents.scheme))
return false;
return true;
});
}
_exportHAR()
{
let resources = this._HARResources();
if (!resources.length) {
InspectorFrontendHost.beep();
return;
}
WI.HARBuilder.buildArchive(resources).then((har) => {
let mainFrame = WI.networkManager.mainFrame;
let archiveName = mainFrame.mainResource.urlComponents.host || mainFrame.mainResource.displayName || "Archive";
WI.FileUtilities.save({
url: WI.FileUtilities.inspectorURLForFilename(archiveName + ".har"),
content: JSON.stringify(har, null, 2),
forceSaveAs: true,
});
});
}
_importHAR()
{
WI.FileUtilities.importJSON((result) => this.processHAR(result));
}
_waterfallPopoverContent()
{
let contentElement = document.createElement("div");
contentElement.classList.add("waterfall-popover-content");
return contentElement;
}
_waterfallPopoverContentForResourceEntry(resourceEntry)
{
let contentElement = this._waterfallPopoverContent();
let resource = resourceEntry.resource;
if (!resource.hasResponse() || !resource.firstTimestamp || !resource.lastTimestamp) {
contentElement.textContent = WI.UIString("Resource has no timing data");
return contentElement;
}
let breakdownView = new WI.ResourceTimingBreakdownView(resource, 300);
contentElement.appendChild(breakdownView.element);
breakdownView.updateLayout();
return contentElement;
}
_waterfallPopoverContentForNodeEntry(nodeEntry, domEvents)
{
let contentElement = this._waterfallPopoverContent();
let breakdownView = new WI.DOMEventsBreakdownView(domEvents);
contentElement.appendChild(breakdownView.element);
breakdownView.updateLayout();
return contentElement;
}
_handleResourceEntryMousedownWaterfall(resourceEntry)
{
let popoverContentElement = this._waterfallPopoverContentForResourceEntry(resourceEntry);
this._handleMousedownWaterfall(resourceEntry, popoverContentElement, (cell) => {
return cell.querySelector(".block.mouse-tracking");
});
}
_handleNodeEntryMousedownWaterfall(nodeEntry, domEvents)
{
let popoverContentElement = this._waterfallPopoverContentForNodeEntry(nodeEntry, domEvents);
this._handleMousedownWaterfall(nodeEntry, popoverContentElement, (cell) => {
let domEventElement = nodeEntry.domEventElements.get(domEvents[0]);
// Show any additional DOM events that have been merged into the range.
if (domEventElement && this._waterfallPopover.visible) {
let newDOMEvents = Array.from(nodeEntry.domEventElements)
.filter(([domEvent, element]) => element === domEventElement)
.map(([domEvent, element]) => domEvent);
this._waterfallPopover.content = this._waterfallPopoverContentForNodeEntry(nodeEntry, newDOMEvents);
}
return domEventElement;
});
}
_handleMousedownWaterfall(entry, popoverContentElement, updateTargetAndContentFunction)
{
if (!this._waterfallPopover) {
this._waterfallPopover = new WI.Popover;
this._waterfallPopover.element.classList.add("waterfall-popover");
}
if (this._waterfallPopover.visible)
return;
let calculateTargetFrame = () => {
let rowIndex = this._rowIndexForRepresentedObject(entry.resource || entry.domNode);
let cell = this._table.cellForRowAndColumn(rowIndex, this._waterfallColumn);
if (cell) {
let targetElement = updateTargetAndContentFunction(cell);
if (targetElement)
return WI.Rect.rectFromClientRect(targetElement.getBoundingClientRect());
}
this._waterfallPopover.dismiss();
return null;
};
let targetFrame = calculateTargetFrame();
if (!targetFrame)
return;
if (!targetFrame.size.width && !targetFrame.size.height)
return;
let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;
let preferredEdges = isRTL ? [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X] : [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MIN_X];
this._waterfallPopover.windowResizeHandler = () => {
let bounds = calculateTargetFrame();
if (bounds)
this._waterfallPopover.present(bounds, preferredEdges);
};
this._waterfallPopover.presentNewContentWithFrame(popoverContentElement, targetFrame, preferredEdges);
}
_tableNameColumnDidChangeWidth(event)
{
this._nameColumnWidthSetting.value = event.target.width;
this._positionDetailView();
this._positionEmptyFilterMessage();
}
_tableWaterfallColumnDidChangeWidth(event)
{
this._table.reloadVisibleColumnCells(this._waterfallColumn);
}
_transitionPageTarget(event)
{
this._transitioningPageTarget = true;
}
};