[SCM] WebKit Debian packaging branch, debian/experimental, updated. upstream/1.3.3-9427-gc2be6fc
pfeldman at chromium.org
pfeldman at chromium.org
Wed Dec 22 13:54:30 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit 091644a6a5b03d460da02ce8e223c35f64dfd485
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Wed Sep 29 09:14:34 2010 +0000
2010-09-28 Pavel Feldman <pfeldman at chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: [Resources panel] Need more visible "at a glance".
https://bugs.webkit.org/show_bug.cgi?id=45657
* WebCore.gypi:
* WebCore.vcproj/WebCore.vcproj:
* inspector/front-end/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.updateWidths):
(WebInspector.DataGrid.prototype.sortNodes):
(WebInspector.DataGrid.prototype._resizerDragging):
(WebInspector.DataGrid.prototype._endResizerDragging):
(WebInspector.DataGridNode.prototype.selectable.true.get element):
(WebInspector.DataGridNode.prototype.createCells):
(WebInspector.DataGridNode.prototype.refresh):
* inspector/front-end/Images/networkIcon.png: Copied from WebCore/inspector/front-end/Images/resourcesIcon.png.
* inspector/front-end/NetworkPanel.js: Added.
* inspector/front-end/Settings.js:
* inspector/front-end/WebKit.qrc:
* inspector/front-end/inspector.css:
(.toolbar-item.network .toolbar-icon):
(.data-grid .data-container):
* inspector/front-end/inspector.html:
* inspector/front-end/inspector.js:
(WebInspector._createPanels):
(WebInspector.updateResource):
* inspector/front-end/networkPanel.css: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@68636 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 6162c51..47e6581 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,34 @@
+2010-09-28 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Timothy Hatcher.
+
+ Web Inspector: [Resources panel] Need more visible "at a glance".
+ https://bugs.webkit.org/show_bug.cgi?id=45657
+
+ * WebCore.gypi:
+ * WebCore.vcproj/WebCore.vcproj:
+ * inspector/front-end/DataGrid.js:
+ (WebInspector.DataGrid):
+ (WebInspector.DataGrid.prototype.updateWidths):
+ (WebInspector.DataGrid.prototype.sortNodes):
+ (WebInspector.DataGrid.prototype._resizerDragging):
+ (WebInspector.DataGrid.prototype._endResizerDragging):
+ (WebInspector.DataGridNode.prototype.selectable.true.get element):
+ (WebInspector.DataGridNode.prototype.createCells):
+ (WebInspector.DataGridNode.prototype.refresh):
+ * inspector/front-end/Images/networkIcon.png: Copied from WebCore/inspector/front-end/Images/resourcesIcon.png.
+ * inspector/front-end/NetworkPanel.js: Added.
+ * inspector/front-end/Settings.js:
+ * inspector/front-end/WebKit.qrc:
+ * inspector/front-end/inspector.css:
+ (.toolbar-item.network .toolbar-icon):
+ (.data-grid .data-container):
+ * inspector/front-end/inspector.html:
+ * inspector/front-end/inspector.js:
+ (WebInspector._createPanels):
+ (WebInspector.updateResource):
+ * inspector/front-end/networkPanel.css: Added.
+
2010-09-28 Ilya Tikhonovsky <loislo at chromium.org>
Reviewed by Yury Semikhatsky.
diff --git a/WebCore/English.lproj/localizedStrings.js b/WebCore/English.lproj/localizedStrings.js
index 5489879..62103d7 100644
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
diff --git a/WebCore/WebCore.gypi b/WebCore/WebCore.gypi
index 651a178..2b2c92c 100644
--- a/WebCore/WebCore.gypi
+++ b/WebCore/WebCore.gypi
@@ -4334,6 +4334,7 @@
'inspector/front-end/inspector.js',
'inspector/front-end/KeyboardShortcut.js',
'inspector/front-end/MetricsSidebarPane.js',
+ 'inspector/front-end/NetworkPanel.js',
'inspector/front-end/Object.js',
'inspector/front-end/ObjectPropertiesSection.js',
'inspector/front-end/Panel.js',
@@ -4392,6 +4393,7 @@
'inspector/front-end/helpScreen.css',
'inspector/front-end/inspector.css',
'inspector/front-end/inspectorSyntaxHighlight.css',
+ 'inspector/front-end/networkPanel.css',
'inspector/front-end/popover.css',
'inspector/front-end/textViewer.css',
],
@@ -4448,6 +4450,7 @@
'inspector/front-end/Images/grayConnectorPoint.png',
'inspector/front-end/Images/largerResourcesButtonGlyph.png',
'inspector/front-end/Images/localStorage.png',
+ 'inspector/front-end/Images/networkIcon.png',
'inspector/front-end/Images/nodeSearchButtonGlyph.png',
'inspector/front-end/Images/paneAddButtons.png',
'inspector/front-end/Images/paneBottomGrow.png',
diff --git a/WebCore/WebCore.vcproj/WebCore.vcproj b/WebCore/WebCore.vcproj/WebCore.vcproj
index a84f15c..f81b77a 100644
--- a/WebCore/WebCore.vcproj/WebCore.vcproj
+++ b/WebCore/WebCore.vcproj/WebCore.vcproj
@@ -53016,6 +53016,14 @@
>
</File>
<File
+ RelativePath="..\inspector\front-end\NetworkPanel.js"
+ >
+ </File>
+ <File
+ RelativePath="..\inspector\front-end\networkPanel.css"
+ >
+ </File>
+ <File
RelativePath="..\inspector\front-end\Object.js"
>
</File>
diff --git a/WebCore/inspector/front-end/DataGrid.js b/WebCore/inspector/front-end/DataGrid.js
index 1ecc4f2..f68fe48 100644
--- a/WebCore/inspector/front-end/DataGrid.js
+++ b/WebCore/inspector/front-end/DataGrid.js
@@ -92,10 +92,8 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
cell.addStyleClass("sortable");
}
- if (column.aligned) {
- cell.addStyleClass(column.aligned);
+ if (column.aligned)
this.aligned[columnIdentifier] = column.aligned;
- }
headerRow.appendChild(cell);
@@ -412,6 +410,7 @@ WebInspector.DataGrid.prototype = {
resizer.style.left = left + "px";
}
+ this.dispatchEventToListeners("width changed");
},
addCreationNode: function(hasChildren)
@@ -535,6 +534,35 @@ WebInspector.DataGrid.prototype = {
this.children = [];
},
+ sortNodes: function(comparator, descending)
+ {
+ function comparatorWrapper(a, b)
+ {
+ var aDataGirdNode = a._dataGridNode;
+ var bDataGirdNode = b._dataGridNode;
+ if (!aDataGirdNode)
+ return 1; // Filler row.
+ if (!bDataGirdNode)
+ return -1; // Filler row.
+ return descending ? comparator(bDataGirdNode, aDataGirdNode) : comparator(aDataGirdNode, bDataGirdNode);
+ }
+
+ var tbody = this.dataTableBody;
+ var tbodyParent = tbody.parentElement;
+ tbodyParent.removeChild(tbody);
+
+ var childNodes = tbody.childNodes;
+ var sortedNodes = Array.prototype.slice.call(childNodes);
+ sortedNodes.sort(comparatorWrapper.bind(this));
+
+ var sortedNodesLength = sortedNodes.length;
+ tbody.removeChildren();
+ for (var i = 0; i < sortedNodesLength; ++i) {
+ var node = sortedNodes[i];
+ tbody.appendChild(node);
+ }
+ tbodyParent.appendChild(tbody);
+ },
_keyDown: function(event)
{
@@ -772,12 +800,14 @@ WebInspector.DataGrid.prototype = {
this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID].style.width = percentRightColumn;
event.preventDefault();
+ this.dispatchEventToListeners("width changed");
},
_endResizerDragging: function(event)
{
WebInspector.elementDragEnd(event);
this.currentResizer = null;
+ this.dispatchEventToListeners("width changed");
},
ColumnResizePadding: 10,
@@ -825,12 +855,16 @@ WebInspector.DataGridNode.prototype = {
if (this.revealed)
this._element.addStyleClass("revealed");
+ this.createCells();
+ return this._element;
+ },
+
+ createCells: function()
+ {
for (var columnIdentifier in this.dataGrid.columns) {
var cell = this.createCell(columnIdentifier);
this._element.appendChild(cell);
}
-
- return this._element;
},
get data()
@@ -964,11 +998,7 @@ WebInspector.DataGridNode.prototype = {
return;
this._element.removeChildren();
-
- for (var columnIdentifier in this.dataGrid.columns) {
- var cell = this.createCell(columnIdentifier);
- this._element.appendChild(cell);
- }
+ this.createCells();
},
createCell: function(columnIdentifier)
diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js
new file mode 100644
index 0000000..f07b3b0
--- /dev/null
+++ b/WebCore/inspector/front-end/NetworkPanel.js
@@ -0,0 +1,1414 @@
+/*
+ * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
+ * Copyright (C) 2008, 2009 Anthony Ricaud <rik at webkit.org>
+ * Copyright (C) 2009, 2010 Google 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.
+ * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ * its contributors may be used to endorse or promote products derived
+ * from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE 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 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.
+ */
+
+WebInspector.NetworkPanel = function()
+{
+ WebInspector.Panel.call(this, "network");
+
+ this._resources = [];
+ this._staleResources = [];
+ this._resourceGridNodes = {};
+ this._mainResourceLoadTime = -1;
+ this._mainResourceDOMContentTime = -1;
+
+ this._viewsContainerElement = document.createElement("div");
+ this._viewsContainerElement.id = "network-views";
+ this.element.appendChild(this._viewsContainerElement);
+
+ this._createSortingFunctions();
+ this._createTimelineGrid();
+ this._createTable();
+ this._createStatusbarButtons();
+
+ this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), true);
+
+ this.calculator = new WebInspector.NetworkTransferTimeCalculator();
+ this.filter(this.filterAllElement, false);
+}
+
+WebInspector.NetworkPanel.prototype = {
+ get toolbarItemLabel()
+ {
+ return WebInspector.UIString("Network");
+ },
+
+ get statusBarItems()
+ {
+ return [this._largerResourcesButton.element, this._clearButton.element];
+ },
+
+ isCategoryVisible: function(categoryName)
+ {
+ return true;
+ },
+
+ elementsToRestoreScrollPositionsFor: function()
+ {
+ return [this.containerElement];
+ },
+
+ resize: function()
+ {
+ WebInspector.Panel.prototype.resize.call(this);
+ this._dataGrid.updateWidths();
+ },
+
+ _createTimelineGrid: function()
+ {
+ this._timelineGrid = new WebInspector.TimelineGrid();
+ this._timelineGrid.element.addStyleClass("network-timeline-grid");
+ this.element.appendChild(this._timelineGrid.element);
+ },
+
+ _createTable: function()
+ {
+ this.containerElement = document.createElement("div");
+ this.containerElement.id = "network-container";
+ this.element.appendChild(this.containerElement);
+
+ var columns = {url: {}, method: {}, status: {}, type: {}, size: {}, time: {}, timeline: {}};
+ columns.url.title = WebInspector.UIString("URL");
+ columns.url.sortable = true;
+ columns.url.width = "20%";
+ columns.url.disclosure = true;
+
+ columns.method.title = WebInspector.UIString("Method");
+ columns.method.sortable = true;
+ columns.method.width = "7%";
+
+ columns.status.title = WebInspector.UIString("Status");
+ columns.status.sortable = true;
+ columns.status.width = "8%";
+
+ columns.type.title = WebInspector.UIString("Type");
+ columns.type.sortable = true;
+ columns.type.width = "7%";
+
+ columns.size.title = WebInspector.UIString("Size");
+ columns.size.sortable = true;
+ columns.size.width = "10%";
+ columns.size.aligned = "right";
+
+ columns.time.title = WebInspector.UIString("Time");
+ columns.time.sortable = true;
+ columns.time.width = "10%";
+ columns.time.aligned = "right";
+
+ columns.timeline.title = "";
+ columns.timeline.sortable = true;
+ columns.timeline.width = "40%";
+ columns.timeline.sort = true;
+
+ this._dataGrid = new WebInspector.DataGrid(columns);
+ this.element.appendChild(this._dataGrid.element);
+ this._dataGrid.addEventListener("sorting changed", this._sortItems, this);
+ this._dataGrid.addEventListener("width changed", this._updateDividersIfNeeded, this);
+ },
+
+ _createSortingFunctions: function()
+ {
+ this._sortingFunctions = {};
+ this._sortingFunctions.url = WebInspector.NetworkDataGridNode.URLComparator;
+ this._sortingFunctions.method = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "method");
+ this._sortingFunctions.status = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "statusCode");
+ this._sortingFunctions.type = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "mimeType");
+ this._sortingFunctions.size = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "resourceSize");
+ this._sortingFunctions.time = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "duration");
+ this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "startTime");
+ },
+
+ filter: function(target, selectMultiple)
+ {
+ },
+
+ _updateFilter: function(e)
+ {
+ var isMac = WebInspector.isMac();
+ var selectMultiple = false;
+ if (isMac && e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey)
+ selectMultiple = true;
+ if (!isMac && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey)
+ selectMultiple = true;
+
+ this.filter(e.target, selectMultiple);
+
+ // When we are updating our filtering, scroll to the top so we don't end up
+ // in blank graph under all the resources.
+ this.containerElement.scrollTop = 0;
+
+ var searchField = document.getElementById("search");
+ WebInspector.doPerformSearch(searchField.value, WebInspector.shortSearchWasForcedByKeyEvent, false, true);
+ },
+
+ _scheduleRefresh: function()
+ {
+ if (this._needsRefresh)
+ return;
+
+ this._needsRefresh = true;
+
+ if (this.visible && !("_refreshTimeout" in this))
+ this._refreshTimeout = setTimeout(this.refresh.bind(this), 500);
+ },
+
+ _sortItems: function()
+ {
+ var columnIdentifier = this._dataGrid.sortColumnIdentifier;
+ var sortingFunction = this._sortingFunctions[columnIdentifier];
+ if (!sortingFunction)
+ return;
+ this._dataGrid.sortNodes(sortingFunction, this._dataGrid.sortOrder === "descending");
+ },
+
+ _updateDividersIfNeeded: function(force)
+ {
+ this._timelineGrid.element.style.left = this._dataGrid.resizers[this._dataGrid.resizers.length - 1].style.left;
+
+ var proceed = true;
+ if (!this.visible) {
+ this._scheduleRefresh();
+ proceed = false;
+ } else
+ proceed = this._timelineGrid.updateDividers(force, this.calculator);
+
+ if (!proceed)
+ return;
+
+ if (this.calculator.startAtZero || !this.calculator.computePercentageFromEventTime) {
+ // If our current sorting method starts at zero, that means it shows all
+ // resources starting at the same point, and so onLoad event and DOMContent
+ // event lines really wouldn't make much sense here, so don't render them.
+ // Additionally, if the calculator doesn't have the computePercentageFromEventTime
+ // function defined, we are probably sorting by size, and event times aren't relevant
+ // in this case.
+ return;
+ }
+
+ this._timelineGrid.removeEventDividers();
+ if (this._mainResourceLoadTime !== -1) {
+ var percent = this.calculator.computePercentageFromEventTime(this._mainResourceLoadTime);
+
+ var loadDivider = document.createElement("div");
+ loadDivider.className = "network-event-divider network-red-divider";
+
+ var loadDividerPadding = document.createElement("div");
+ loadDividerPadding.className = "network-event-divider-padding";
+ loadDividerPadding.title = WebInspector.UIString("Load event fired");
+ loadDividerPadding.appendChild(loadDivider);
+ loadDividerPadding.style.left = percent + "%";
+ this._timelineGrid.addEventDivider(loadDividerPadding);
+ }
+
+ if (this._mainResourceDOMContentTime !== -1) {
+ var percent = this.calculator.computePercentageFromEventTime(this._mainResourceDOMContentTime);
+
+ var domContentDivider = document.createElement("div");
+ domContentDivider.className = "network-event-divider network-blue-divider";
+
+ var domContentDividerPadding = document.createElement("div");
+ domContentDividerPadding.className = "network-event-divider-padding";
+ domContentDividerPadding.title = WebInspector.UIString("DOMContent event fired");
+ domContentDividerPadding.appendChild(domContentDivider);
+ domContentDividerPadding.style.left = percent + "%";
+ this._timelineGrid.addEventDivider(domContentDividerPadding);
+ }
+ },
+
+ _refreshIfNeeded: function()
+ {
+ if (this._needsRefresh)
+ this.refresh();
+ },
+
+ _invalidateAllItems: function()
+ {
+ this._staleResources = this._resources.slice();
+ },
+
+ get calculator()
+ {
+ return this._calculator;
+ },
+
+ set calculator(x)
+ {
+ if (!x || this._calculator === x)
+ return;
+
+ this._calculator = x;
+ this._calculator.reset();
+
+ this._invalidateAllItems();
+ this.refresh();
+ },
+
+ _resourceGridNode: function(resource)
+ {
+ return this._resourceGridNodes[resource.identifier];
+ },
+
+ revealAndSelectItem: function(resource)
+ {
+ var node = this._resourceGridNode(resource);
+ if (node) {
+ node.reveal();
+ node.select(true);
+ }
+ },
+
+ addEventDivider: function(divider)
+ {
+ this._timelineGrid.addEventDivider(divider);
+ },
+
+ get resourceTrackingEnabled()
+ {
+ return this._resourceTrackingEnabled;
+ },
+
+ _createStatusbarButtons: function()
+ {
+ this._clearButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear"), "clear-status-bar-item");
+ this._clearButton.addEventListener("click", this.reset.bind(this), false);
+
+ this._largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "network-larger-resources-status-bar-item");
+ WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
+ this._largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
+ },
+
+ _settingsLoaded: function()
+ {
+ this._largerResourcesButton.toggled = WebInspector.applicationSettings.resourcesLargeRows;
+ if (!WebInspector.applicationSettings.resourcesLargeRows)
+ this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows);
+ },
+
+ set mainResourceLoadTime(x)
+ {
+ if (this._mainResourceLoadTime === x)
+ return;
+
+ this._mainResourceLoadTime = x || -1;
+ // Update the dividers to draw the new line
+ this._updateDividersIfNeeded(true);
+ },
+
+ set mainResourceDOMContentTime(x)
+ {
+ if (this._mainResourceDOMContentTime === x)
+ return;
+
+ this._mainResourceDOMContentTime = x || -1;
+ this._updateDividersIfNeeded(true);
+ },
+
+ show: function()
+ {
+ WebInspector.Panel.prototype.show.call(this);
+
+ this._refreshIfNeeded();
+
+ var visibleView = this.visibleView;
+ if (this.visibleResource) {
+ this.visibleView.headersVisible = true;
+ this.visibleView.show(this._viewsContainerElement);
+ } else if (visibleView)
+ visibleView.show();
+
+ // Hide any views that are visible that are not this panel's current visible view.
+ // This can happen when a ResourceView is visible in the Scripts panel then switched
+ // to the this panel.
+ var resourcesLength = this._resources.length;
+ for (var i = 0; i < resourcesLength; ++i) {
+ var resource = this._resources[i];
+ var view = resource._resourcesView;
+ if (!view || view === visibleView)
+ continue;
+ view.visible = false;
+ }
+ this._dataGrid.updateWidths();
+ },
+
+ get searchableViews()
+ {
+ var views = [];
+
+ const visibleView = this.visibleView;
+ if (visibleView && visibleView.performSearch)
+ views.push(visibleView);
+
+ var resourcesLength = this._resources.length;
+ for (var i = 0; i < resourcesLength; ++i) {
+ var resource = this._resources[i];
+ if (!this._resourceGridNode(resource) || !this._resourceGridNode(resource).selectable)
+ continue;
+ var resourceView = this.resourceViewForResource(resource);
+ if (!resourceView.performSearch || resourceView === visibleView)
+ continue;
+ views.push(resourceView);
+ }
+
+ return views;
+ },
+
+ searchMatchFound: function(view, matches)
+ {
+ this._resourceGridNode(view.resource).searchMatches = matches;
+ },
+
+ searchCanceled: function(startingNewSearch)
+ {
+ WebInspector.Panel.prototype.searchCanceled.call(this, startingNewSearch);
+
+ if (startingNewSearch || !this._resources)
+ return;
+ },
+
+ performSearch: function(query)
+ {
+ WebInspector.Panel.prototype.performSearch.call(this, query);
+ },
+
+ get visibleView()
+ {
+ if (this.visibleResource)
+ return this.visibleResource._resourcesView;
+ return null;
+ },
+
+ refresh: function()
+ {
+ this._needsRefresh = false;
+ if ("_refreshTimeout" in this) {
+ clearTimeout(this._refreshTimeout);
+ delete this._refreshTimeout;
+ }
+
+ var staleItemsLength = this._staleResources.length;
+
+ var boundariesChanged = false;
+
+ for (var i = 0; i < staleItemsLength; ++i) {
+ var resource = this._staleResources[i];
+ var node = this._resourceGridNode(resource);
+ if (!node) {
+ // Create the timeline tree element and graph.
+ node = new WebInspector.NetworkDataGridNode(resource);
+ this._resourceGridNodes[resource.identifier] = node;
+ this._dataGrid.appendChild(node);
+ }
+ node.refreshResource();
+
+ if (this.calculator.updateBoundaries(resource))
+ boundariesChanged = true;
+ }
+
+ if (boundariesChanged) {
+ // The boundaries changed, so all item graphs are stale.
+ this._invalidateAllItems();
+ staleItemsLength = this._staleResources.length;
+ }
+
+ for (var i = 0; i < staleItemsLength; ++i)
+ this._resourceGridNode(this._staleResources[i]).refreshGraph(this.calculator);
+
+ this._staleResources = [];
+ this._sortItems();
+ this._dataGrid.updateWidths();
+ },
+
+ reset: function()
+ {
+ this._popoverHelper.hidePopup();
+ this.closeVisibleResource();
+
+ delete this.currentQuery;
+ this.searchCanceled();
+
+ if (this._resources) {
+ var resourcesLength = this._resources.length;
+ for (var i = 0; i < resourcesLength; ++i) {
+ var resource = this._resources[i];
+
+ resource.warnings = 0;
+ resource.errors = 0;
+
+ delete resource._resourcesView;
+ }
+ }
+
+ // Begin reset timeline
+ this.containerElement.scrollTop = 0;
+
+ if (this._calculator)
+ this._calculator.reset();
+
+ if (this._resources) {
+ var itemsLength = this._resources.length;
+ for (var i = 0; i < itemsLength; ++i) {
+ var item = this._resources[i];
+ }
+ }
+
+ this._resources = [];
+ this._staleResources = [];
+ this._resourceGridNodes = {};
+
+ this._dataGrid.removeChildren();
+ this._updateDividersIfNeeded(true);
+ // End reset timeline.
+
+ this._mainResourceLoadTime = -1;
+ this._mainResourceDOMContentTime = -1;
+
+ this._viewsContainerElement.removeChildren();
+ },
+
+ addResource: function(resource)
+ {
+ this._resources.push(resource);
+ this.refreshResource(resource);
+ },
+
+ refreshResource: function(resource)
+ {
+ this._staleResources.push(resource);
+ this._scheduleRefresh();
+ },
+
+ recreateViewForResourceIfNeeded: function(resource)
+ {
+ if (!resource || !resource._resourcesView)
+ return;
+
+ var newView = this._createResourceView(resource);
+ if (newView.__proto__ === resource._resourcesView.__proto__)
+ return;
+
+ if (!this.currentQuery && this._resourceGridNode(resource))
+ this._resourceGridNode(resource).updateErrorsAndWarnings();
+
+ var oldView = resource._resourcesView;
+ var oldViewParentNode = oldView.visible ? oldView.element.parentNode : null;
+
+ resource._resourcesView.detach();
+ delete resource._resourcesView;
+
+ resource._resourcesView = newView;
+
+ newView.headersVisible = oldView.headersVisible;
+
+ if (oldViewParentNode)
+ newView.show(oldViewParentNode);
+
+ WebInspector.panels.scripts.viewRecreated(oldView, newView);
+ },
+
+ canShowSourceLine: function(url, line)
+ {
+ return this._resourceTrackingEnabled && !!WebInspector.resourceForURL(url);
+ },
+
+ showSourceLine: function(url, line)
+ {
+ this.showResource(WebInspector.resourceForURL(url), line);
+ },
+
+ showResource: function(resource, line)
+ {
+ if (!resource)
+ return;
+
+ this._popoverHelper.hidePopup();
+
+ this.containerElement.addStyleClass("viewing-resource");
+
+ if (this.visibleResource && this.visibleResource._resourcesView)
+ this.visibleResource._resourcesView.hide();
+
+ var view = this.resourceViewForResource(resource);
+ view.headersVisible = true;
+ view.show(this._viewsContainerElement);
+
+ if (line) {
+ view.selectContentTab(true);
+ if (view.revealLine)
+ view.revealLine(line);
+ if (view.highlightLine)
+ view.highlightLine(line);
+ }
+
+ this.revealAndSelectItem(resource);
+
+ this.visibleResource = resource;
+
+ this.updateSidebarWidth();
+ },
+
+ showView: function(view)
+ {
+ if (!view)
+ return;
+ this.showResource(view.resource);
+ },
+
+ closeVisibleResource: function()
+ {
+ this.containerElement.removeStyleClass("viewing-resource");
+
+ if (this.visibleResource && this.visibleResource._resourcesView)
+ this.visibleResource._resourcesView.hide();
+ delete this.visibleResource;
+
+ if (this._lastSelectedGraphTreeElement)
+ this._lastSelectedGraphTreeElement.select(true);
+
+ this.updateSidebarWidth();
+ },
+
+ resourceViewForResource: function(resource)
+ {
+ if (!resource)
+ return null;
+ if (!resource._resourcesView)
+ resource._resourcesView = this._createResourceView(resource);
+ return resource._resourcesView;
+ },
+
+ sourceFrameForResource: function(resource)
+ {
+ var view = this.resourceViewForResource(resource);
+ if (!view)
+ return null;
+
+ if (!view.setupSourceFrameIfNeeded)
+ return null;
+
+ // Setting up the source frame requires that we be attached.
+ if (!this.element.parentNode)
+ this.attach();
+
+ view.setupSourceFrameIfNeeded();
+ return view.sourceFrame;
+ },
+
+ _toggleLargerResources: function()
+ {
+ WebInspector.applicationSettings.resourcesLargeRows = !WebInspector.applicationSettings.resourcesLargeRows;
+ this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows);
+ },
+
+ _setLargerResources: function(enabled)
+ {
+ this._largerResourcesButton.toggled = enabled;
+ if (!enabled) {
+ this._largerResourcesButton.title = WebInspector.UIString("Use large resource rows.");
+ this._dataGrid.element.addStyleClass("small");
+ } else {
+ this._largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
+ this._dataGrid.element.removeStyleClass("small");
+ }
+ },
+
+ _createResourceView: function(resource)
+ {
+ switch (resource.category) {
+ case WebInspector.resourceCategories.documents:
+ case WebInspector.resourceCategories.stylesheets:
+ case WebInspector.resourceCategories.scripts:
+ case WebInspector.resourceCategories.xhr:
+ return new WebInspector.SourceView(resource);
+ case WebInspector.resourceCategories.images:
+ return new WebInspector.ImageView(resource);
+ case WebInspector.resourceCategories.fonts:
+ return new WebInspector.FontView(resource);
+ default:
+ return new WebInspector.ResourceView(resource);
+ }
+ },
+
+ _getPopoverAnchor: function(element)
+ {
+ var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
+ if (!anchor)
+ return null;
+ var resource = anchor.parentElement.resource;
+ return resource && resource.timing ? anchor : null;
+ },
+
+ _showPopover: function(anchor)
+ {
+ var tableElement = document.createElement("table");
+ var resource = anchor.parentElement.resource;
+ var rows = [];
+
+ function addRow(title, start, end, color)
+ {
+ var row = {};
+ row.title = title;
+ row.start = start;
+ row.end = end;
+ rows.push(row);
+ }
+
+ if (resource.timing.proxyStart !== -1)
+ addRow(WebInspector.UIString("Proxy"), resource.timing.proxyStart, resource.timing.proxyEnd);
+
+ if (resource.timing.dnsStart !== -1)
+ addRow(WebInspector.UIString("DNS Lookup"), resource.timing.dnsStart, resource.timing.dnsEnd);
+
+ if (resource.timing.connectStart !== -1) {
+ if (resource.connectionReused)
+ addRow(WebInspector.UIString("Blocking"), resource.timing.connectStart, resource.timing.connectEnd);
+ else {
+ var connectStart = resource.timing.connectStart;
+ // Connection includes DNS, subtract it here.
+ if (resource.timing.dnsStart !== -1)
+ connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
+ addRow(WebInspector.UIString("Connecting"), connectStart, resource.timing.connectEnd);
+ }
+ }
+
+ if (resource.timing.sslStart !== -1)
+ addRow(WebInspector.UIString("SSL"), resource.timing.sslStart, resource.timing.sslEnd);
+
+ var sendStart = resource.timing.sendStart;
+ if (resource.timing.sslStart !== -1)
+ sendStart += resource.timing.sslEnd - resource.timing.sslStart;
+
+ addRow(WebInspector.UIString("Sending"), resource.timing.sendStart, resource.timing.sendEnd);
+ addRow(WebInspector.UIString("Waiting"), resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
+ addRow(WebInspector.UIString("Receiving"), (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
+
+ const chartWidth = 200;
+ var total = (resource.endTime - resource.timing.requestTime) * 1000;
+ var scale = chartWidth / total;
+
+ for (var i = 0; i < rows.length; ++i) {
+ var tr = document.createElement("tr");
+ tableElement.appendChild(tr);
+
+ var td = document.createElement("td");
+ td.textContent = rows[i].title;
+ tr.appendChild(td);
+
+ td = document.createElement("td");
+ td.width = chartWidth + "px";
+
+ var row = document.createElement("div");
+ row.className = "network-timing-row";
+ td.appendChild(row);
+
+ var bar = document.createElement("span");
+ bar.className = "network-timing-bar";
+ bar.style.left = scale * rows[i].start + "px";
+ bar.style.right = scale * (total - rows[i].end) + "px";
+ bar.style.backgroundColor = rows[i].color;
+ bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
+ row.appendChild(bar);
+
+ var title = document.createElement("span");
+ title.className = "network-timing-bar-title";
+ if (total - rows[i].end < rows[i].start)
+ title.style.right = (scale * (total - rows[i].end) + 3) + "px";
+ else
+ title.style.left = (scale * rows[i].start + 3) + "px";
+ title.textContent = Number.millisToString(rows[i].end - rows[i].start);
+ row.appendChild(title);
+
+ tr.appendChild(td);
+ }
+
+ var popover = new WebInspector.Popover(tableElement);
+ popover.show(anchor);
+ return popover;
+ },
+
+ hide: function()
+ {
+ WebInspector.Panel.prototype.hide.call(this);
+ this._popoverHelper.hidePopup();
+ }
+}
+
+WebInspector.NetworkPanel.prototype.__proto__ = WebInspector.Panel.prototype;
+
+WebInspector.getResourceContent = function(identifier, callback)
+{
+ InspectorBackend.getResourceContent(identifier, callback);
+}
+
+WebInspector.NetworkBaseCalculator = function()
+{
+}
+
+WebInspector.NetworkBaseCalculator.prototype = {
+ computeSummaryValues: function(items)
+ {
+ var total = 0;
+ var categoryValues = {};
+
+ var itemsLength = items.length;
+ for (var i = 0; i < itemsLength; ++i) {
+ var item = items[i];
+ var value = this._value(item);
+ if (typeof value === "undefined")
+ continue;
+ if (!(item.category.name in categoryValues))
+ categoryValues[item.category.name] = 0;
+ categoryValues[item.category.name] += value;
+ total += value;
+ }
+
+ return {categoryValues: categoryValues, total: total};
+ },
+
+ computeBarGraphPercentages: function(item)
+ {
+ return {start: 0, middle: 0, end: (this._value(item) / this.boundarySpan) * 100};
+ },
+
+ computeBarGraphLabels: function(item)
+ {
+ const label = this.formatValue(this._value(item));
+ return {left: label, right: label, tooltip: label};
+ },
+
+ get boundarySpan()
+ {
+ return this.maximumBoundary - this.minimumBoundary;
+ },
+
+ updateBoundaries: function(item)
+ {
+ this.minimumBoundary = 0;
+
+ var value = this._value(item);
+ if (typeof this.maximumBoundary === "undefined" || value > this.maximumBoundary) {
+ this.maximumBoundary = value;
+ return true;
+ }
+ return false;
+ },
+
+ reset: function()
+ {
+ delete this.minimumBoundary;
+ delete this.maximumBoundary;
+ },
+
+ _value: function(item)
+ {
+ return 0;
+ },
+
+ formatValue: function(value)
+ {
+ return value.toString();
+ }
+}
+
+WebInspector.NetworkTimeCalculator = function(startAtZero)
+{
+ WebInspector.NetworkBaseCalculator.call(this);
+ this.startAtZero = startAtZero;
+}
+
+WebInspector.NetworkTimeCalculator.prototype = {
+ computeSummaryValues: function(resources)
+ {
+ var resourcesByCategory = {};
+ var resourcesLength = resources.length;
+ for (var i = 0; i < resourcesLength; ++i) {
+ var resource = resources[i];
+ if (!(resource.category.name in resourcesByCategory))
+ resourcesByCategory[resource.category.name] = [];
+ resourcesByCategory[resource.category.name].push(resource);
+ }
+
+ var earliestStart;
+ var latestEnd;
+ var categoryValues = {};
+ for (var category in resourcesByCategory) {
+ resourcesByCategory[category].sort(WebInspector.Resource.CompareByTime);
+ categoryValues[category] = 0;
+
+ var segment = {start: -1, end: -1};
+
+ var categoryResources = resourcesByCategory[category];
+ var resourcesLength = categoryResources.length;
+ for (var i = 0; i < resourcesLength; ++i) {
+ var resource = categoryResources[i];
+ if (resource.startTime === -1 || resource.endTime === -1)
+ continue;
+
+ if (typeof earliestStart === "undefined")
+ earliestStart = resource.startTime;
+ else
+ earliestStart = Math.min(earliestStart, resource.startTime);
+
+ if (typeof latestEnd === "undefined")
+ latestEnd = resource.endTime;
+ else
+ latestEnd = Math.max(latestEnd, resource.endTime);
+
+ if (resource.startTime <= segment.end) {
+ segment.end = Math.max(segment.end, resource.endTime);
+ continue;
+ }
+
+ categoryValues[category] += segment.end - segment.start;
+
+ segment.start = resource.startTime;
+ segment.end = resource.endTime;
+ }
+
+ // Add the last segment
+ categoryValues[category] += segment.end - segment.start;
+ }
+
+ return {categoryValues: categoryValues, total: latestEnd - earliestStart};
+ },
+
+ computeBarGraphPercentages: function(resource)
+ {
+ if (resource.startTime !== -1)
+ var start = ((resource.startTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ else
+ var start = 0;
+
+ if (resource.responseReceivedTime !== -1)
+ var middle = ((resource.responseReceivedTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ else
+ var middle = (this.startAtZero ? start : 100);
+
+ if (resource.endTime !== -1)
+ var end = ((resource.endTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ else
+ var end = (this.startAtZero ? middle : 100);
+
+ if (this.startAtZero) {
+ end -= start;
+ middle -= start;
+ start = 0;
+ }
+
+ return {start: start, middle: middle, end: end};
+ },
+
+ computePercentageFromEventTime: function(eventTime)
+ {
+ // This function computes a percentage in terms of the total loading time
+ // of a specific event. If startAtZero is set, then this is useless, and we
+ // want to return 0.
+ if (eventTime !== -1 && !this.startAtZero)
+ return ((eventTime - this.minimumBoundary) / this.boundarySpan) * 100;
+
+ return 0;
+ },
+
+ computeBarGraphLabels: function(resource)
+ {
+ var rightLabel = "";
+ if (resource.responseReceivedTime !== -1 && resource.endTime !== -1)
+ rightLabel = this.formatValue(resource.endTime - resource.responseReceivedTime);
+
+ var hasLatency = resource.latency > 0;
+ if (hasLatency)
+ var leftLabel = this.formatValue(resource.latency);
+ else
+ var leftLabel = rightLabel;
+
+ if (resource.timing)
+ return {left: leftLabel, right: rightLabel};
+
+ if (hasLatency && rightLabel) {
+ var total = this.formatValue(resource.duration);
+ var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total);
+ } else if (hasLatency)
+ var tooltip = WebInspector.UIString("%s latency", leftLabel);
+ else if (rightLabel)
+ var tooltip = WebInspector.UIString("%s download", rightLabel);
+
+ if (resource.cached)
+ tooltip = WebInspector.UIString("%s (from cache)", tooltip);
+ return {left: leftLabel, right: rightLabel, tooltip: tooltip};
+ },
+
+ updateBoundaries: function(resource)
+ {
+ var didChange = false;
+
+ var lowerBound;
+ if (this.startAtZero)
+ lowerBound = 0;
+ else
+ lowerBound = this._lowerBound(resource);
+
+ if (lowerBound !== -1 && (typeof this.minimumBoundary === "undefined" || lowerBound < this.minimumBoundary)) {
+ this.minimumBoundary = lowerBound;
+ didChange = true;
+ }
+
+ var upperBound = this._upperBound(resource);
+ if (upperBound !== -1 && (typeof this.maximumBoundary === "undefined" || upperBound > this.maximumBoundary)) {
+ this.maximumBoundary = upperBound;
+ didChange = true;
+ }
+
+ return didChange;
+ },
+
+ formatValue: function(value)
+ {
+ return Number.secondsToString(value, WebInspector.UIString);
+ },
+
+ _lowerBound: function(resource)
+ {
+ return 0;
+ },
+
+ _upperBound: function(resource)
+ {
+ return 0;
+ }
+}
+
+WebInspector.NetworkTimeCalculator.prototype.__proto__ = WebInspector.NetworkBaseCalculator.prototype;
+
+WebInspector.NetworkTransferTimeCalculator = function()
+{
+ WebInspector.NetworkTimeCalculator.call(this, false);
+}
+
+WebInspector.NetworkTransferTimeCalculator.prototype = {
+ formatValue: function(value)
+ {
+ return Number.secondsToString(value, WebInspector.UIString);
+ },
+
+ _lowerBound: function(resource)
+ {
+ return resource.startTime;
+ },
+
+ _upperBound: function(resource)
+ {
+ return resource.endTime;
+ }
+}
+
+WebInspector.NetworkTransferTimeCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
+
+WebInspector.NetworkTransferDurationCalculator = function()
+{
+ WebInspector.NetworkTimeCalculator.call(this, true);
+}
+
+WebInspector.NetworkTransferDurationCalculator.prototype = {
+ formatValue: function(value)
+ {
+ return Number.secondsToString(value, WebInspector.UIString);
+ },
+
+ _upperBound: function(resource)
+ {
+ return resource.duration;
+ }
+}
+
+WebInspector.NetworkTransferDurationCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
+
+WebInspector.NetworkTransferSizeCalculator = function()
+{
+ WebInspector.NetworkBaseCalculator.call(this);
+}
+
+WebInspector.NetworkTransferSizeCalculator.prototype = {
+ computeBarGraphLabels: function(resource)
+ {
+ var networkBytes = this._networkBytes(resource);
+ var resourceBytes = this._value(resource);
+ if (networkBytes && networkBytes !== resourceBytes) {
+ // Transferred size is not the same as reported resource length.
+ var networkBytesString = this.formatValue(networkBytes);
+ var left = networkBytesString;
+ var right = this.formatValue(resourceBytes);
+ var tooltip = right ? WebInspector.UIString("%s (%s transferred)", right, networkBytesString) : right;
+ } else {
+ var left = this.formatValue(resourceBytes);
+ var right = left;
+ var tooltip = left;
+ }
+ if (resource.cached)
+ tooltip = WebInspector.UIString("%s (from cache)", tooltip);
+ return {left: left, right: right, tooltip: tooltip};
+ },
+
+ computeBarGraphPercentages: function(item)
+ {
+ const resourceBytesAsPercent = (this._value(item) / this.boundarySpan) * 100;
+ const networkBytesAsPercent = this._networkBytes(item) ? (this._networkBytes(item) / this.boundarySpan) * 100 : resourceBytesAsPercent;
+ return {start: 0, middle: networkBytesAsPercent, end: resourceBytesAsPercent};
+ },
+
+ _value: function(resource)
+ {
+ return resource.resourceSize;
+ },
+
+ _networkBytes: function(resource)
+ {
+ return resource.transferSize;
+ },
+
+ formatValue: function(value)
+ {
+ return Number.bytesToString(value, WebInspector.UIString);
+ }
+}
+
+WebInspector.NetworkTransferSizeCalculator.prototype.__proto__ = WebInspector.NetworkBaseCalculator.prototype;
+
+WebInspector.NetworkDataGridNode = function(resource)
+{
+ WebInspector.DataGridNode.call(this, {});
+ this._resource = resource;
+}
+
+WebInspector.NetworkDataGridNode.prototype = {
+ createCells: function()
+ {
+ this._urlCell = this._createDivInTD("url-column");
+ this._methodCell = this._createDivInTD("optional-column");
+ this._statusCell = this._createDivInTD("optional-column");
+ this._typeCell = this._createDivInTD("optional-column");
+ this._sizeCell = this._createDivInTD("optional-column right");
+ this._timeCell = this._createDivInTD("optional-column right");
+ this._createTimelineCell();
+ },
+
+ _createDivInTD: function(className) {
+ var td = document.createElement("td");
+ if (className)
+ td.className = className;
+ var div = document.createElement("div");
+ td.appendChild(div);
+ this._element.appendChild(td);
+ return div;
+ },
+
+
+ _createTimelineCell: function()
+ {
+ this._graphElement = document.createElement("div");
+ this._graphElement.className = "network-graph-side";
+ this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);
+
+ this._barAreaElement = document.createElement("div");
+ // this._barAreaElement.className = "network-graph-bar-area hidden";
+ this._barAreaElement.className = "network-graph-bar-area";
+ this._barAreaElement.resource = this._resource;
+ this._graphElement.appendChild(this._barAreaElement);
+
+ this._barLeftElement = document.createElement("div");
+ this._barLeftElement.className = "network-graph-bar waiting";
+ this._barAreaElement.appendChild(this._barLeftElement);
+
+ this._barRightElement = document.createElement("div");
+ this._barRightElement.className = "network-graph-bar";
+ this._barAreaElement.appendChild(this._barRightElement);
+
+ this._labelLeftElement = document.createElement("div");
+ this._labelLeftElement.className = "network-graph-label waiting";
+ this._barAreaElement.appendChild(this._labelLeftElement);
+
+ this._labelRightElement = document.createElement("div");
+ this._labelRightElement.className = "network-graph-label";
+ this._barAreaElement.appendChild(this._labelRightElement);
+
+ this._timelineCell = document.createElement("td");
+ this._element.appendChild(this._timelineCell);
+ this._timelineCell.appendChild(this._graphElement);
+ },
+
+ refreshResource: function()
+ {
+ this._refreshURLCell();
+
+ this._methodCell.textContent = this._resource.requestMethod;
+
+ this._refreshStatusCell();
+
+ if (this._resource.mimeType) {
+ this._typeCell.removeStyleClass("network-dim-cell");
+ this._typeCell.textContent = this._resource.mimeType;
+ } else {
+ this._typeCell.addStyleClass("network-dim-cell");
+ this._typeCell.textContent = WebInspector.UIString("Pending");
+ }
+
+ this._refreshSizeCell();
+ this._refreshTimeCell();
+
+ if (this._resource.cached)
+ this._graphElement.addStyleClass("resource-cached");
+
+ if (!this._element.hasStyleClass("network-category-" + this._resource.category.name)) {
+ this._element.removeMatchingStyleClasses("network-category-\\w+");
+ this._element.addStyleClass("network-category-" + this._resource.category.name);
+ }
+ },
+
+ _refreshURLCell: function()
+ {
+ this._urlCell.removeChildren();
+
+ if (this._resource.category === WebInspector.resourceCategories.images) {
+ var previewImage = document.createElement("img");
+ previewImage.className = "image-network-icon-preview";
+ previewImage.src = this._resource.url;
+
+ var iconElement = document.createElement("div");
+ iconElement.className = "icon";
+ iconElement.appendChild(previewImage);
+ } else {
+ var iconElement = document.createElement("img");
+ iconElement.className = "icon";
+ }
+ this._urlCell.appendChild(iconElement);
+ this._urlCell.appendChild(document.createTextNode(this._fileName()));
+
+
+ var subtitle = this._resource.displayDomain;
+
+ if (this._resource.path && this._resource.lastPathComponent) {
+ var lastPathComponentIndex = this._resource.path.lastIndexOf("/" + this._resource.lastPathComponent);
+ if (lastPathComponentIndex != -1)
+ subtitle += this._resource.path.substring(0, lastPathComponentIndex);
+ }
+
+ var subtitleElement = document.createElement("div");
+ subtitleElement.className = "network-grid-subtitle";
+ subtitleElement.textContent = subtitle;
+ this._urlCell.appendChild(subtitleElement);
+
+
+ this._urlCell.title = this._resource.url;
+ },
+
+ _fileName: function()
+ {
+ var fileName = this._resource.displayName;
+ if (this._resource.queryString)
+ fileName += "?" + this._resource.queryString;
+ return fileName;
+ },
+
+ _refreshStatusCell: function()
+ {
+ this._statusCell.removeChildren();
+
+ if (this._resource.statusCode) {
+ var img = document.createElement("img");
+ if (this._resource.statusCode < 300)
+ img.src = "Images/successGreenDot.png";
+ else if (this._resource.statusCode < 400)
+ img.src = "Images/warningOrangeDot.png";
+ else
+ img.src = "Images/errorRedDot.png";
+
+ img.className = "resource-status-image";
+ this._statusCell.appendChild(img);
+ this._statusCell.appendChild(document.createTextNode(this._resource.statusCode));
+ this._statusCell.removeStyleClass("network-dim-cell");
+ this._appendSubtitle(this._statusCell, this._resource.statusText);
+ this._statusCell.title = this._resource.statusCode + " " + this._resource.statusText;
+ } else {
+ this._statusCell.addStyleClass("network-dim-cell");
+ this._statusCell.textContent = WebInspector.UIString("Pending");
+ }
+ },
+
+ _refreshSizeCell: function()
+ {
+ var resourceSize = typeof this._resource.resourceSize === "number" ? Number.bytesToString(this._resource.resourceSize) : "?";
+ var transferSize = typeof this._resource.transferSize === "number" ? Number.bytesToString(this._resource.transferSize) : "?";
+ var fromCache = this._resource.cached;
+ this._sizeCell.textContent = !fromCache ? resourceSize : WebInspector.UIString("(from cache)");
+ if (fromCache)
+ this._sizeCell.addStyleClass("network-dim-cell");
+ else
+ this._sizeCell.removeStyleClass("network-dim-cell");
+ if (!fromCache)
+ this._appendSubtitle(this._sizeCell, transferSize);
+ },
+
+ _refreshTimeCell: function()
+ {
+ if (this._resource.duration > 0) {
+ this._timeCell.removeStyleClass("network-dim-cell");
+ this._timeCell.textContent = Number.secondsToString(this._resource.duration);
+ this._appendSubtitle(this._timeCell, Number.secondsToString(this._resource.latency));
+ } else {
+ this._timeCell.addStyleClass("network-dim-cell");
+ this._timeCell.textContent = WebInspector.UIString("Pending");
+ }
+ },
+
+ _appendSubtitle: function(cellElement, subtitleText)
+ {
+ var subtitleElement = document.createElement("div");
+ subtitleElement.className = "network-grid-subtitle";
+ subtitleElement.textContent = subtitleText;
+ cellElement.appendChild(subtitleElement);
+ },
+
+ refreshGraph: function(calculator)
+ {
+ var percentages = calculator.computeBarGraphPercentages(this._resource);
+ var labels = calculator.computeBarGraphLabels(this._resource);
+
+ this._percentages = percentages;
+
+ this._barAreaElement.removeStyleClass("hidden");
+
+ if (!this._graphElement.hasStyleClass("network-category-" + this._resource.category.name)) {
+ this._graphElement.removeMatchingStyleClasses("network-category-\\w+");
+ this._graphElement.addStyleClass("network-category-" + this._resource.category.name);
+ }
+
+ this._barLeftElement.style.setProperty("left", percentages.start + "%");
+ this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
+
+ this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
+ this._barRightElement.style.setProperty("left", percentages.middle + "%");
+
+ this._labelLeftElement.textContent = labels.left;
+ this._labelRightElement.textContent = labels.right;
+
+ var tooltip = (labels.tooltip || "");
+ this._barLeftElement.title = tooltip;
+ this._labelLeftElement.title = tooltip;
+ this._labelRightElement.title = tooltip;
+ this._barRightElement.title = tooltip;
+ },
+
+ _refreshLabelPositions: function()
+ {
+ this._labelLeftElement.style.removeProperty("left");
+ this._labelLeftElement.style.removeProperty("right");
+ this._labelLeftElement.removeStyleClass("before");
+ this._labelLeftElement.removeStyleClass("hidden");
+
+ this._labelRightElement.style.removeProperty("left");
+ this._labelRightElement.style.removeProperty("right");
+ this._labelRightElement.removeStyleClass("after");
+ this._labelRightElement.removeStyleClass("hidden");
+
+ const labelPadding = 10;
+ const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
+ const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
+
+ if (this._barLeftElement) {
+ var leftBarWidth = barLeftElementOffsetWidth - labelPadding;
+ var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding;
+ } else {
+ var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding;
+ var rightBarWidth = barRightElementOffsetWidth - labelPadding;
+ }
+
+ const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth;
+ const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth;
+
+ const labelBefore = (labelLeftElementOffsetWidth > leftBarWidth);
+ const labelAfter = (labelRightElementOffsetWidth > rightBarWidth);
+ const graphElementOffsetWidth = this._graphElement.offsetWidth;
+
+ if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10))
+ var leftHidden = true;
+
+ if (labelAfter && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10))
+ var rightHidden = true;
+
+ if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
+ // The left/right label data are the same, so a before/after label can be replaced by an on-bar label.
+ if (labelBefore && !labelAfter)
+ leftHidden = true;
+ else if (labelAfter && !labelBefore)
+ rightHidden = true;
+ }
+
+ if (labelBefore) {
+ if (leftHidden)
+ this._labelLeftElement.addStyleClass("hidden");
+ this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
+ this._labelLeftElement.addStyleClass("before");
+ } else {
+ this._labelLeftElement.style.setProperty("left", this._percentages.start + "%");
+ this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%");
+ }
+
+ if (labelAfter) {
+ if (rightHidden)
+ this._labelRightElement.addStyleClass("hidden");
+ this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
+ this._labelRightElement.addStyleClass("after");
+ } else {
+ this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
+ this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
+ }
+ }
+}
+
+WebInspector.NetworkDataGridNode.URLComparator = function(a, b)
+{
+ var aFileName = a._resource.displayName + (a._resource.queryString ? a._resource.queryString : "");
+ var bFileName = b._resource.displayName + (b._resource.queryString ? b._resource.queryString : "");
+ if (aFileName > bFileName)
+ return 1;
+ if (bFileName > aFileName)
+ return -1;
+ return 0;
+}
+
+WebInspector.NetworkDataGridNode.ResourcePropertyComparator = function(propertyName, a, b)
+{
+ var aValue = a._resource[propertyName];
+ var bValue = b._resource[propertyName];
+ if (aValue > bValue)
+ return 1;
+ if (bValue > aValue)
+ return -1;
+ return 0;
+}
+
+WebInspector.NetworkDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js
index a678611..c6da14d 100644
--- a/WebCore/inspector/front-end/Settings.js
+++ b/WebCore/inspector/front-end/Settings.js
@@ -42,10 +42,10 @@ var Preferences = {
showColorNicknames: true,
debuggerAlwaysEnabled: false,
profilerAlwaysEnabled: false,
- auditsPanelEnabled: true,
onlineDetectionEnabled: true,
nativeInstrumentationEnabled: false,
- resourceExportEnabled: false
+ resourceExportEnabled: false,
+ networkPanelEnabled: false
}
WebInspector.Settings = function(sessionScope)
diff --git a/WebCore/inspector/front-end/WebKit.qrc b/WebCore/inspector/front-end/WebKit.qrc
index e40bb91..11382cd 100644
--- a/WebCore/inspector/front-end/WebKit.qrc
+++ b/WebCore/inspector/front-end/WebKit.qrc
@@ -53,6 +53,7 @@
<file>InspectorFrontendHostStub.js</file>
<file>KeyboardShortcut.js</file>
<file>MetricsSidebarPane.js</file>
+ <file>NetworkPanel.js</file>
<file>Object.js</file>
<file>ObjectPropertiesSection.js</file>
<file>Panel.js</file>
@@ -111,6 +112,7 @@
<file>helpScreen.css</file>
<file>inspector.css</file>
<file>inspectorSyntaxHighlight.css</file>
+ <file>networkPanel.css</file>
<file>popover.css</file>
<file>textViewer.css</file>
<file>Images/applicationCache.png</file>
@@ -165,6 +167,7 @@
<file>Images/grayConnectorPoint.png</file>
<file>Images/largerResourcesButtonGlyph.png</file>
<file>Images/localStorage.png</file>
+ <file>Images/networkIcon.png</file>
<file>Images/nodeSearchButtonGlyph.png</file>
<file>Images/paneAddButtons.png</file>
<file>Images/paneBottomGrow.png</file>
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 56c5040..848afdc 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -207,6 +207,10 @@ body.attached #search-results-matches {
background-image: url(Images/resourcesIcon.png);
}
+.toolbar-item.network .toolbar-icon {
+ background-image: url(Images/networkIcon.png);
+}
+
.toolbar-item.scripts .toolbar-icon {
background-image: url(Images/scriptsIcon.png);
}
@@ -1981,8 +1985,6 @@ body.inactive .sidebar {
padding-right: 14px;
overflow-x: hidden;
overflow-y: overlay;
- background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), color-stop(0.5, rgb(234, 243, 255)), to(rgb(234, 243, 255)));
- -webkit-background-size: 1px 32px;
}
.data-grid.inline .data-container {
diff --git a/WebCore/inspector/front-end/inspector.html b/WebCore/inspector/front-end/inspector.html
index d792eb1..949b18f 100644
--- a/WebCore/inspector/front-end/inspector.html
+++ b/WebCore/inspector/front-end/inspector.html
@@ -34,6 +34,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<link rel="stylesheet" type="text/css" href="heapProfiler.css">
<link rel="stylesheet" type="text/css" href="inspector.css">
<link rel="stylesheet" type="text/css" href="inspectorSyntaxHighlight.css">
+ <link rel="stylesheet" type="text/css" href="networkPanel.css">
<link rel="stylesheet" type="text/css" href="popover.css">
<link rel="stylesheet" type="text/css" href="textViewer.css">
<script type="text/javascript" src="utilities.js"></script>
@@ -92,6 +93,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<script type="text/javascript" src="StatusBarButton.js"></script>
<script type="text/javascript" src="SummaryBar.js"></script>
<script type="text/javascript" src="ElementsPanel.js"></script>
+ <script type="text/javascript" src="NetworkPanel.js"></script>
<script type="text/javascript" src="ResourcesPanel.js"></script>
<script type="text/javascript" src="InjectedFakeWorker.js"></script>
<script type="text/javascript" src="ScriptsPanel.js"></script>
diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js
index 211b4fc..3edae8f 100644
--- a/WebCore/inspector/front-end/inspector.js
+++ b/WebCore/inspector/front-end/inspector.js
@@ -235,6 +235,8 @@ var WebInspector = {
var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(',');
if (hiddenPanels.indexOf("elements") === -1)
this.panels.elements = new WebInspector.ElementsPanel();
+ if (Preferences.networkPanelEnabled && hiddenPanels.indexOf("network") === -1)
+ this.panels.network = new WebInspector.NetworkPanel();
if (hiddenPanels.indexOf("resources") === -1)
this.panels.resources = new WebInspector.ResourcesPanel();
if (hiddenPanels.indexOf("scripts") === -1)
@@ -249,7 +251,7 @@ var WebInspector = {
}
if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1)
this.panels.storage = new WebInspector.StoragePanel();
- if (Preferences.auditsPanelEnabled && hiddenPanels.indexOf("audits") === -1)
+ if (hiddenPanels.indexOf("audits") === -1)
this.panels.audits = new WebInspector.AuditsPanel();
if (hiddenPanels.indexOf("console") === -1)
this.panels.console = new WebInspector.ConsolePanel();
@@ -1225,10 +1227,10 @@ WebInspector.updateResource = function(payload)
resource = new WebInspector.Resource(identifier, payload.url);
this.resources[identifier] = resource;
this.resourceURLMap[resource.url] = resource;
- if (this.panels.resources)
- this.panels.resources.addResource(resource);
- if (this.panels.audits)
- this.panels.audits.resourceStarted(resource);
+ this.panels.resources.addResource(resource);
+ this.panels.audits.resourceStarted(resource);
+ if (this.panels.network)
+ this.panels.network.addResource(resource);
}
if (payload.didRequestChange) {
@@ -1270,13 +1272,11 @@ WebInspector.updateResource = function(payload)
resource.webSocketChallengeResponse = payload.webSocketChallengeResponse;
}
- if (payload.didTypeChange) {
+ if (payload.didTypeChange)
resource.type = payload.type;
- }
- if (payload.didLengthChange) {
+ if (payload.didLengthChange)
resource.resourceSize = payload.resourceSize;
- }
if (payload.didCompletionChange) {
resource.failed = payload.failed;
@@ -1298,21 +1298,24 @@ WebInspector.updateResource = function(payload)
// This loadEventTime is for the main resource, and we want to show it
// for all resources on this page. This means we want to set it as a member
// of the resources panel instead of the individual resource.
- if (this.panels.resources)
- this.panels.resources.mainResourceLoadTime = payload.loadEventTime;
- if (this.panels.audits)
- this.panels.audits.mainResourceLoadTime = payload.loadEventTime;
+ this.panels.resources.mainResourceLoadTime = payload.loadEventTime;
+ this.panels.audits.mainResourceLoadTime = payload.loadEventTime;
+ if (this.panels.network)
+ this.panels.network.mainResourceLoadTime = payload.loadEventTime;
}
if (payload.domContentEventTime) {
// This domContentEventTime is for the main resource, so it should go in
// the resources panel for the same reasons as above.
- if (this.panels.resources)
- this.panels.resources.mainResourceDOMContentTime = payload.domContentEventTime;
- if (this.panels.audits)
- this.panels.audits.mainResourceDOMContentTime = payload.domContentEventTime;
+ this.panels.resources.mainResourceDOMContentTime = payload.domContentEventTime;
+ this.panels.audits.mainResourceDOMContentTime = payload.domContentEventTime;
+ if (this.panels.network)
+ this.panels.network.mainResourceDOMContentTime = payload.domContentEventTime;
}
}
+
+ if (this.panels.network)
+ this.panels.network.refreshResource(resource);
}
WebInspector.removeResource = function(identifier)
diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css
new file mode 100644
index 0000000..cdea7fe
--- /dev/null
+++ b/WebCore/inspector/front-end/networkPanel.css
@@ -0,0 +1,383 @@
+.network-larger-resources-status-bar-item .glyph {
+ -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
+}
+
+.network.panel .data-grid {
+ border: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ font-size: 11px;
+}
+
+.network.panel .data-grid table.data {
+ -webkit-background-size: 1px 82px;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
+ font-size: 11px;
+}
+
+.network.panel .data-grid.small table.data {
+ -webkit-background-size: 1px 42px;
+}
+
+.network.panel .data-grid td {
+ line-height: 17px;
+ border-right: 1px solid rgb(210, 210, 210);
+ -webkit-user-select: none;
+}
+
+.network.panel .data-grid th {
+ border-bottom: 1px solid rgb(64%, 64%, 64%);
+ height: 22px;
+}
+
+.network.panel .data-grid th, .network.panel .data-grid th.sort-descending, .network.panel .data-grid th.sort-ascending {
+ background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
+}
+
+.network.panel .data-grid .data-container {
+ top: 23px;
+}
+
+.network.panel .data-grid td.url-column {
+ font-weight: bold;
+}
+
+.network.panel .data-grid td.optional-column {
+ background-color: rgba(0, 0, 0, 0.07);
+}
+
+.network.panel .small .network-graph-side {
+ height: 14px;
+}
+
+.network.panel .data-grid th.sortable:active {
+ background-image: none;
+}
+
+.network-grid-subtitle {
+ font-weight: normal;
+ color: grey;
+}
+
+.network.panel .data-grid.small .network-grid-subtitle {
+ display: none;
+}
+
+/* Resource preview icons */
+
+.network.panel .data-grid .icon {
+ content: url(Images/resourcePlainIcon.png);
+}
+
+.network.panel .data-grid.small .icon {
+ content: url(Images/resourcePlainIconSmall.png);
+}
+
+.network.panel .network-category-scripts .icon {
+ content: url(Images/resourceJSIcon.png);
+}
+
+.network.panel .data-grid.small .network-category-scripts .icon {
+ content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.network.panel .network-category-documents .icon {
+ content: url(Images/resourceDocumentIcon.png);
+}
+
+.network.panel .data-grid.small .network-category-documents .icon {
+ content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.network.panel .network-category-stylesheets .icon {
+ content: url(Images/resourceCSSIcon.png);
+}
+
+.network.panel .data-grid.small .network-category-stylesheets .icon {
+ content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.network.panel .network-category-images .icon {
+ position: relative;
+ background-image: url(Images/resourcePlainIcon.png);
+ background-repeat: no-repeat;
+ content: "";
+}
+
+.network.panel .network-category-images .icon {
+ position: relative;
+ background-image: url(Images/resourcePlainIcon.png);
+ background-repeat: no-repeat;
+ content: "";
+}
+
+.network.panel .data-grid.small .network-category-images .icon {
+ background-image: url(Images/resourcePlainIconSmall.png);
+ content: "";
+}
+
+.network.panel .data-grid .icon {
+ float: left;
+ width: 32px;
+ height: 32px;
+ margin-top: 1px;
+ margin-right: 3px;
+}
+
+.network.panel .data-grid.small .icon {
+ width: 16px;
+ height: 16px;
+}
+
+.network.panel .image-network-icon-preview {
+ position: absolute;
+ margin: auto;
+ top: 3px;
+ bottom: 4px;
+ left: 5px;
+ right: 5px;
+ max-width: 18px;
+ max-height: 21px;
+ min-width: 1px;
+ min-height: 1px;
+}
+
+.network.panel .data-grid.small .image-network-icon-preview {
+ top: 2px;
+ bottom: 1px;
+ left: 3px;
+ right: 3px;
+ max-width: 8px;
+ max-height: 11px;
+}
+
+/* Graph styles */
+
+.network-graph-side {
+ position: relative;
+ height: 36px;
+ padding: 0 5px;
+ white-space: nowrap;
+ margin-top: 1px;
+ border-top: 1px solid transparent;
+ overflow: hidden;
+}
+
+.network-graph-bar-area {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 8px;
+ left: 9px;
+}
+
+.network-graph-label {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto -7px;
+ height: 13px;
+ line-height: 13px;
+ font-size: 9px;
+ color: rgba(0, 0, 0, 0.75);
+ text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
+ z-index: 150;
+ overflow: hidden;
+ text-align: center;
+ font-weight: bold;
+ opacity: 0;
+ -webkit-transition: opacity 250ms ease-in-out;
+}
+
+.network-graph-side:hover .network-graph-label {
+ opacity: 1;
+}
+
+.network-graph-label:empty {
+ display: none;
+}
+
+.network-graph-label.waiting {
+ margin-right: 5px;
+}
+
+.network-graph-label.waiting-right {
+ margin-left: 5px;
+}
+
+.network-graph-label.before {
+ color: rgba(0, 0, 0, 0.7);
+ text-shadow: none;
+ text-align: right;
+ margin-right: 2px;
+}
+
+.network-graph-label.before::after {
+ padding-left: 2px;
+ height: 6px;
+ content: url(Images/graphLabelCalloutLeft.png);
+}
+
+.network-graph-label.after {
+ color: rgba(0, 0, 0, 0.7);
+ text-shadow: none;
+ text-align: left;
+ margin-left: 2px;
+}
+
+.network-graph-label.after::before {
+ padding-right: 2px;
+ height: 6px;
+ content: url(Images/graphLabelCalloutRight.png);
+}
+
+.network-graph-bar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto -7px;
+ border-width: 6px 7px;
+ height: 13px;
+ min-width: 14px;
+ opacity: 0.65;
+ -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
+}
+
+.network-graph-bar.waiting, .network-graph-bar.waiting-right {
+ opacity: 0.35;
+}
+
+/* Resource categories */
+
+
+.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
+}
+
+.network-category-documents .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
+}
+
+.network-category-documents.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7;
+}
+
+.network-category-stylesheets .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
+}
+
+.network-category-stylesheets.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7;
+}
+
+.network-category-images .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
+}
+
+.network-category-images.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7;
+}
+
+.network-category-fonts .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
+}
+
+.network-category-fonts.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7;
+}
+
+.network-category-scripts .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
+}
+
+.network-category-scripts.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7;
+}
+
+.network-category-xhr .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
+}
+
+.network-category-xhr.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
+}
+
+.network-category-websockets .network-graph-bar {
+ -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
+}
+
+.network-category-websockets.resource-cached .network-graph-bar {
+ -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
+}
+
+
+/* Popover */
+
+.network-timing-row {
+ position: relative;
+ height: 12px;
+}
+
+.network-timing-bar {
+ position: absolute;
+ background-color: red;
+ border-left: 1px solid red;
+ opacity: 0.4;
+}
+
+.network-timing-bar-title {
+ position: absolute;
+}
+
+.network-dim-cell {
+ color: grey;
+}
+
+/* Dividers */
+
+.network-timeline-grid {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.network-event-divider-padding {
+ position: absolute;
+ width: 8px;
+ top: 0;
+ bottom: 0;
+ pointer-events: auto;
+}
+
+.network-event-divider {
+ position: absolute;
+ width: 2px;
+ top: 0;
+ bottom: 0;
+ z-index: 300;
+}
+
+.network-red-divider {
+ background-color: rgba(255, 0, 0, 0.5);
+}
+
+.network-blue-divider {
+ background-color: rgba(0, 0, 255, 0.5);
+}
+
+.network.panel .resources-dividers-label-bar {
+ background-color: transparent;
+ border: none;
+ height: 23px;
+ pointer-events: none;
+}
+
+.network.panel .resources-divider-label {
+ top: 6px;
+ color: black;
+}
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list