[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 14:26:07 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit 866258d765aba436a780d327ea368e963c5f521b
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Fri Oct 8 15:19:22 2010 +0000
2010-10-07 Pavel Feldman <pfeldman at chromium.org>
Reviewed by Yury Semikhatsky.
Web Inspector: add resource viewer to the network panel.
https://bugs.webkit.org/show_bug.cgi?id=47346
* inspector/front-end/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.autoSizeColumns):
(WebInspector.DataGrid.prototype.updateWidths):
(WebInspector.DataGrid.prototype.columnWidthsMap):
(WebInspector.DataGrid.prototype.applyColumnWidthsMap):
(WebInspector.DataGrid.prototype.isColumnVisible):
(WebInspector.DataGrid.prototype.showColumn):
(WebInspector.DataGrid.prototype.hideColumn):
(WebInspector.DataGrid.prototype._positionResizers):
(WebInspector.DataGrid.prototype._resizerDragging):
* inspector/front-end/NetworkPanel.js:
(WebInspector.NetworkPanel):
(WebInspector.NetworkPanel.prototype.updateSidebarWidth):
(WebInspector.NetworkPanel.prototype.updateMainViewWidth):
(WebInspector.NetworkPanel.prototype.handleShortcut):
(WebInspector.NetworkPanel.prototype._createTable):
(WebInspector.NetworkPanel.prototype._sortItems):
(WebInspector.NetworkPanel.prototype._sortByTimeline):
(WebInspector.NetworkPanel.prototype._createSummaryBar):
(WebInspector.NetworkPanel.prototype._updateDividersIfNeeded):
(WebInspector.NetworkPanel.prototype.hide):
(WebInspector.NetworkPanel.prototype.get searchableViews):
(WebInspector.NetworkPanel.prototype.refresh):
(WebInspector.NetworkPanel.prototype.reset):
(WebInspector.NetworkPanel.prototype.refreshResource):
(WebInspector.NetworkPanel.prototype.canShowSourceLine):
(WebInspector.NetworkPanel.prototype.showSourceLine):
(WebInspector.NetworkPanel.prototype._showResource):
(WebInspector.NetworkPanel.prototype._closeVisibleResource):
(WebInspector.NetworkPanel.prototype._resourceViewForResource):
(WebInspector.NetworkPanel.prototype._resourceViewTypeMatchesResource):
(WebInspector.NetworkPanel.prototype._toggleGridMode):
(WebInspector.NetworkPanel.prototype._toggleViewingResourceMode):
(WebInspector.NetworkDataGridNode):
(WebInspector.NetworkDataGridNode.prototype.select):
(WebInspector.NetworkDataGridNode.prototype._createTimelineCell):
* inspector/front-end/networkPanel.css:
(#network-container):
(#network-views):
(.network.panel .data-grid.full-grid-mode .viewer-column):
(.network.panel .data-grid.brief-grid-mode .time-column):
(.network.panel.viewing-resource .network-timeline-grid):
(.network.panel .data-grid.viewing-resource-mode .timeline-column):
(.network.panel .network-sidebar):
(.network.panel:not(.viewing-resource) .sidebar-resizer-vertical):
(.network.panel.viewing-resource .data-grid-resizer):
(.network.panel .scope-bar):
(.network.panel .resource-view.headers-visible .resource-view-content):
(.network.panel:not(.viewing-resource) .data-grid tr.selected):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@69400 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 73b7654..84a9155 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,61 @@
+2010-10-07 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Yury Semikhatsky.
+
+ Web Inspector: add resource viewer to the network panel.
+ https://bugs.webkit.org/show_bug.cgi?id=47346
+
+ * inspector/front-end/DataGrid.js:
+ (WebInspector.DataGrid):
+ (WebInspector.DataGrid.prototype.autoSizeColumns):
+ (WebInspector.DataGrid.prototype.updateWidths):
+ (WebInspector.DataGrid.prototype.columnWidthsMap):
+ (WebInspector.DataGrid.prototype.applyColumnWidthsMap):
+ (WebInspector.DataGrid.prototype.isColumnVisible):
+ (WebInspector.DataGrid.prototype.showColumn):
+ (WebInspector.DataGrid.prototype.hideColumn):
+ (WebInspector.DataGrid.prototype._positionResizers):
+ (WebInspector.DataGrid.prototype._resizerDragging):
+ * inspector/front-end/NetworkPanel.js:
+ (WebInspector.NetworkPanel):
+ (WebInspector.NetworkPanel.prototype.updateSidebarWidth):
+ (WebInspector.NetworkPanel.prototype.updateMainViewWidth):
+ (WebInspector.NetworkPanel.prototype.handleShortcut):
+ (WebInspector.NetworkPanel.prototype._createTable):
+ (WebInspector.NetworkPanel.prototype._sortItems):
+ (WebInspector.NetworkPanel.prototype._sortByTimeline):
+ (WebInspector.NetworkPanel.prototype._createSummaryBar):
+ (WebInspector.NetworkPanel.prototype._updateDividersIfNeeded):
+ (WebInspector.NetworkPanel.prototype.hide):
+ (WebInspector.NetworkPanel.prototype.get searchableViews):
+ (WebInspector.NetworkPanel.prototype.refresh):
+ (WebInspector.NetworkPanel.prototype.reset):
+ (WebInspector.NetworkPanel.prototype.refreshResource):
+ (WebInspector.NetworkPanel.prototype.canShowSourceLine):
+ (WebInspector.NetworkPanel.prototype.showSourceLine):
+ (WebInspector.NetworkPanel.prototype._showResource):
+ (WebInspector.NetworkPanel.prototype._closeVisibleResource):
+ (WebInspector.NetworkPanel.prototype._resourceViewForResource):
+ (WebInspector.NetworkPanel.prototype._resourceViewTypeMatchesResource):
+ (WebInspector.NetworkPanel.prototype._toggleGridMode):
+ (WebInspector.NetworkPanel.prototype._toggleViewingResourceMode):
+ (WebInspector.NetworkDataGridNode):
+ (WebInspector.NetworkDataGridNode.prototype.select):
+ (WebInspector.NetworkDataGridNode.prototype._createTimelineCell):
+ * inspector/front-end/networkPanel.css:
+ (#network-container):
+ (#network-views):
+ (.network.panel .data-grid.full-grid-mode .viewer-column):
+ (.network.panel .data-grid.brief-grid-mode .time-column):
+ (.network.panel.viewing-resource .network-timeline-grid):
+ (.network.panel .data-grid.viewing-resource-mode .timeline-column):
+ (.network.panel .network-sidebar):
+ (.network.panel:not(.viewing-resource) .sidebar-resizer-vertical):
+ (.network.panel.viewing-resource .data-grid-resizer):
+ (.network.panel .scope-bar):
+ (.network.panel .resource-view.headers-visible .resource-view-content):
+ (.network.panel:not(.viewing-resource) .data-grid tr.selected):
+
2010-10-08 Andreas Kling <kling at webkit.org>
Reviewed by Nikolas Zimmermann.
diff --git a/WebCore/inspector/front-end/DataGrid.js b/WebCore/inspector/front-end/DataGrid.js
index 8e98e8d..12c7138 100644
--- a/WebCore/inspector/front-end/DataGrid.js
+++ b/WebCore/inspector/front-end/DataGrid.js
@@ -130,6 +130,15 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
this.dataTableBody.appendChild(fillerRow);
this.columns = columns || {};
+ this._columnsArray = [];
+ for (var columnIdentifier in columns) {
+ columns[columnIdentifier].ordinal = this._columnsArray.length;
+ this._columnsArray.push(columns[columnIdentifier]);
+ }
+
+ for (var i = 0; i < this._columnsArray.length; ++i)
+ this._columnsArray[i].bodyElement = this._dataTableColumnGroup.children[i];
+
this.children = [];
this.selectedNode = null;
this.expandNodesWhenArrowing = false;
@@ -141,7 +150,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
this.dataGrid = this;
this.indentWidth = 15;
this.resizers = [];
- this.columnWidthsInitialized = false;
+ this._columnWidthsInitialized = false;
}
WebInspector.DataGrid.prototype = {
@@ -358,7 +367,7 @@ WebInspector.DataGrid.prototype = {
for (var columnIdentifier in columns)
columns[columnIdentifier].element.style.width = widths[columnIdentifier] + "%";
- this.columnWidthsInitialized = false;
+ this._columnWidthsInitialized = false;
this.updateWidths();
},
@@ -376,11 +385,10 @@ WebInspector.DataGrid.prototype = {
{
var headerTableColumns = this._headerTableColumnGroup.children;
- var left = 0;
var tableWidth = this._dataTable.offsetWidth;
var numColumns = headerTableColumns.length;
- if (!this.columnWidthsInitialized) {
+ if (!this._columnWidthsInitialized) {
// Give all the columns initial widths now so that during a resize,
// when the two columns that get resized get a percent value for
// their widths, all the other columns already have percent values
@@ -391,9 +399,86 @@ WebInspector.DataGrid.prototype = {
this._headerTableColumnGroup.children[i].style.width = percentWidth;
this._dataTableColumnGroup.children[i].style.width = percentWidth;
}
- this.columnWidthsInitialized = true;
+ this._columnWidthsInitialized = true;
}
-
+ this._positionResizers();
+ this.dispatchEventToListeners("width changed");
+ },
+
+ columnWidthsMap: function()
+ {
+ var result = {};
+ for (var i = 0; i < this._columnsArray.length; ++i) {
+ var width = this._headerTableColumnGroup.children[i].style.width;
+ result[this._columnsArray[i].columnIdentifier] = parseFloat(width);
+ }
+ return result;
+ },
+
+ applyColumnWidthsMap: function(columnWidthsMap)
+ {
+ for (var columnIdentifier in this.columns) {
+ var column = this.columns[columnIdentifier];
+ var width = (columnWidthsMap[columnIdentifier] || 0) + "%";
+ this._headerTableColumnGroup.children[column.ordinal].style.width = width;
+ this._dataTableColumnGroup.children[column.ordinal].style.width = width;
+ }
+
+ // Normalize widths
+ delete this._columnWidthsInitialized;
+ this.updateWidths();
+ },
+
+ isColumnVisible: function(columnIdentifier)
+ {
+ var column = this.columns[columnIdentifier];
+ var columnElement = column.element;
+ return !columnElement.hidden;
+ },
+
+ showColumn: function(columnIdentifier)
+ {
+ var column = this.columns[columnIdentifier];
+ var columnElement = column.element;
+ if (!columnElement.hidden)
+ return;
+
+ columnElement.hidden = false;
+ columnElement.removeStyleClass("hidden");
+
+ var columnBodyElement = column.bodyElement;
+ columnBodyElement.hidden = false;
+ columnBodyElement.removeStyleClass("hidden");
+ },
+
+ hideColumn: function(columnIdentifier)
+ {
+ var column = this.columns[columnIdentifier];
+ var columnElement = column.element;
+ if (columnElement.hidden)
+ return;
+
+ var oldWidth = parseFloat(columnElement.style.width);
+
+ columnElement.hidden = true;
+ columnElement.addStyleClass("hidden");
+ columnElement.style.width = 0;
+
+ var columnBodyElement = column.bodyElement;
+ columnBodyElement.hidden = true;
+ columnBodyElement.addStyleClass("hidden");
+ columnBodyElement.style.width = 0;
+
+ this._columnWidthsInitialized = false;
+ },
+
+ _positionResizers: function()
+ {
+ var headerTableColumns = this._headerTableColumnGroup.children;
+ var numColumns = headerTableColumns.length;
+ var left = 0;
+ var previousResizer = null;
+
// Make n - 1 resizers for n columns.
for (var i = 0; i < numColumns - 1; i++) {
var resizer = this.resizers[i];
@@ -404,7 +489,6 @@ WebInspector.DataGrid.prototype = {
resizer = document.createElement("div");
resizer.addStyleClass("data-grid-resizer");
// This resizer is associated with the column to its right.
- resizer.rightNeighboringColumnID = i + 1;
resizer.addEventListener("mousedown", this._startResizerDragging.bind(this), false);
this.element.appendChild(resizer);
this.resizers[i] = resizer;
@@ -414,10 +498,23 @@ WebInspector.DataGrid.prototype = {
// header table in order to determine the width of the column, since
// it is not possible to query a column for its width.
left += this.headerTableBody.rows[0].cells[i].offsetWidth;
-
- resizer.style.left = left + "px";
+
+ var columnIsVisible = !this._headerTableColumnGroup.children[i].hidden;
+ if (columnIsVisible) {
+ resizer.style.removeProperty("display");
+ resizer.style.left = left + "px";
+ resizer.leftNeighboringColumnID = i;
+ if (previousResizer)
+ previousResizer.rightNeighboringColumnID = i;
+ previousResizer = resizer;
+ } else {
+ resizer.style.setProperty("display", "none");
+ resizer.leftNeighboringColumnID = 0;
+ resizer.rightNeighboringColumnID = 0;
+ }
}
- this.dispatchEventToListeners("width changed");
+ if (previousResizer)
+ previousResizer.rightNeighboringColumnID = numColumns - 1;
},
addCreationNode: function(hasChildren)
@@ -810,27 +907,28 @@ WebInspector.DataGrid.prototype = {
// column directly to the left and the column directly to the right.
var leftEdgeOfPreviousColumn = 0;
var firstRowCells = this.headerTableBody.rows[0].cells;
- for (var i = 0; i < resizer.rightNeighboringColumnID - 1; i++)
+ for (var i = 0; i < resizer.leftNeighboringColumnID; i++)
leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
- var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[resizer.rightNeighboringColumnID - 1].offsetWidth + firstRowCells[resizer.rightNeighboringColumnID].offsetWidth;
-
- // Give each column some padding so that they don't disappear.
+ var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[resizer.leftNeighboringColumnID].offsetWidth + firstRowCells[resizer.rightNeighboringColumnID].offsetWidth;
+
+ // Give each column some padding so that they don't disappear.
var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
-
+
dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
-
+
resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
-
+
var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTable.offsetWidth) * 100) + "%";
- this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID - 1].style.width = percentLeftColumn;
- this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID - 1].style.width = percentLeftColumn;
-
+ this._headerTableColumnGroup.children[resizer.leftNeighboringColumnID].style.width = percentLeftColumn;
+ this._dataTableColumnGroup.children[resizer.leftNeighboringColumnID].style.width = percentLeftColumn;
+
var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTable.offsetWidth) * 100) + "%";
this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID].style.width = percentRightColumn;
this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID].style.width = percentRightColumn;
-
+
+ this._positionResizers();
event.preventDefault();
this.dispatchEventToListeners("width changed");
},
diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js
index 0e356ae..1b8f515 100644
--- a/WebCore/inspector/front-end/NetworkPanel.js
+++ b/WebCore/inspector/front-end/NetworkPanel.js
@@ -32,16 +32,26 @@ WebInspector.NetworkPanel = function()
{
WebInspector.Panel.call(this, "network");
+ this.createSidebar();
+ this.sidebarElement.className = "network-sidebar";
+
this._resources = [];
this._staleResources = [];
this._resourceGridNodes = {};
this._mainResourceLoadTime = -1;
this._mainResourceDOMContentTime = -1;
+ this._hiddenCategories = {};
this._categories = WebInspector.resourceCategories;
+ this.containerElement = document.createElement("div");
+ this.containerElement.id = "network-container";
+ this.sidebarElement.appendChild(this.containerElement);
+
this._viewsContainerElement = document.createElement("div");
this._viewsContainerElement.id = "network-views";
+ this._viewsContainerElement.className = "hidden";
+
this.element.appendChild(this._viewsContainerElement);
this._createSortingFunctions();
@@ -55,6 +65,8 @@ WebInspector.NetworkPanel = function()
this.calculator = new WebInspector.NetworkTransferTimeCalculator();
this._filter(this._filterAllElement, false);
+
+ this._toggleGridMode();
}
WebInspector.NetworkPanel.prototype = {
@@ -85,6 +97,26 @@ WebInspector.NetworkPanel.prototype = {
this._positionSummaryBar();
},
+ updateSidebarWidth: function()
+ {
+ if (!this._viewingResourceMode)
+ return;
+ WebInspector.Panel.prototype.updateSidebarWidth.apply(this, arguments);
+ },
+
+ updateMainViewWidth: function(width)
+ {
+ this._viewsContainerElement.style.left = width + "px";
+ },
+
+ handleShortcut: function(event)
+ {
+ if (this._viewingResourceMode && event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
+ this._toggleGridMode();
+ event.handled = true;
+ }
+ },
+
_positionSummaryBar: function()
{
// Position the total bar.
@@ -121,16 +153,12 @@ WebInspector.NetworkPanel.prototype = {
_createTable: function()
{
- this.containerElement = document.createElement("div");
- this.containerElement.id = "network-container";
- this.element.appendChild(this.containerElement);
-
var columns = {name: {}, method: {}, status: {}, type: {}, size: {}, time: {}, timeline: {}};
columns.name.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Name"), WebInspector.UIString("Path"));
columns.name.sortable = true;
columns.name.width = "20%";
columns.name.disclosure = true;
-
+
columns.method.title = WebInspector.UIString("Method");
columns.method.sortable = true;
columns.method.width = "7%";
@@ -159,7 +187,7 @@ WebInspector.NetworkPanel.prototype = {
columns.timeline.sort = "ascending";
this._dataGrid = new WebInspector.DataGrid(columns);
- this.element.appendChild(this._dataGrid.element);
+ this.containerElement.appendChild(this._dataGrid.element);
this._dataGrid.addEventListener("sorting changed", this._sortItems, this);
this._dataGrid.addEventListener("width changed", this._updateDividersIfNeeded, this);
@@ -257,15 +285,17 @@ WebInspector.NetworkPanel.prototype = {
var sortingFunction = this._sortingFunctions[columnIdentifier];
if (!sortingFunction)
return;
+
this._dataGrid.sortNodes(sortingFunction, this._dataGrid.sortOrder === "descending");
this._timelineSortSelector.selectedIndex = 0;
},
_sortByTimeline: function()
{
- if (this._timelineSortSelector.selectedIndex === 0)
- return; // Do nothing - this is 'Timeline' caption.
- var selectedOption = this._timelineSortSelector[this._timelineSortSelector.selectedIndex];
+ var selectedIndex = this._timelineSortSelector.selectedIndex;
+ if (!selectedIndex)
+ selectedIndex = 1; // Sort by start time by default.
+ var selectedOption = this._timelineSortSelector[selectedIndex];
var value = selectedOption.value;
var sortingFunction = this._sortingFunctions[value];
@@ -312,7 +342,7 @@ WebInspector.NetworkPanel.prototype = {
{
this._summaryBarElement = document.createElement("div");
this._summaryBarElement.className = "network-summary-bar";
- this.element.appendChild(this._summaryBarElement);
+ this.containerElement.appendChild(this._summaryBarElement);
},
_updateSummaryBar: function()
@@ -344,11 +374,13 @@ WebInspector.NetworkPanel.prototype = {
_showCategory: function(category)
{
this._dataGrid.element.addStyleClass("filter-" + category);
+ delete this._hiddenCategories[category];
},
_hideCategory: function(category)
{
this._dataGrid.element.removeStyleClass("filter-" + category);
+ this._hiddenCategories[category] = true;
},
_updateFilter: function(e)
@@ -432,8 +464,14 @@ WebInspector.NetworkPanel.prototype = {
_updateDividersIfNeeded: function(force)
{
- this._timelineGrid.element.style.left = this._dataGrid.resizers[this._dataGrid.resizers.length - 1].style.left;
- this._timelineGrid.element.style.right = "18px";
+ var timelineColumn = this._dataGrid.columns.timeline;
+ for (var i = 0; i < this._dataGrid.resizers.length; ++i) {
+ if (timelineColumn.ordinal === this._dataGrid.resizers[i].rightNeighboringColumnID) {
+ // Position timline grid location.
+ this._timelineGrid.element.style.left = this._dataGrid.resizers[i].style.left;
+ this._timelineGrid.element.style.right = "18px";
+ }
+ }
var proceed = true;
if (!this.visible) {
@@ -601,25 +639,15 @@ WebInspector.NetworkPanel.prototype = {
this._positionSummaryBar();
},
+ hide: function()
+ {
+ WebInspector.Panel.prototype.hide.call(this);
+ this._popoverHelper.hidePopup();
+ },
+
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;
},
@@ -665,7 +693,7 @@ WebInspector.NetworkPanel.prototype = {
var node = this._resourceGridNode(resource);
if (!node) {
// Create the timeline tree element and graph.
- node = new WebInspector.NetworkDataGridNode(resource);
+ node = new WebInspector.NetworkDataGridNode(this, resource);
this._resourceGridNodes[resource.identifier] = node;
this._dataGrid.appendChild(node);
}
@@ -693,7 +721,9 @@ WebInspector.NetworkPanel.prototype = {
reset: function()
{
this._popoverHelper.hidePopup();
- this.closeVisibleResource();
+ this._closeVisibleResource();
+
+ this._toggleGridMode();
delete this.currentQuery;
this.searchCanceled();
@@ -711,8 +741,6 @@ WebInspector.NetworkPanel.prototype = {
}
// Begin reset timeline
- this.containerElement.scrollTop = 0;
-
if (this._calculator)
this._calculator.reset();
@@ -748,13 +776,13 @@ WebInspector.NetworkPanel.prototype = {
{
this._staleResources.push(resource);
this._scheduleRefresh();
- },
- recreateViewForResourceIfNeeded: function(resource)
- {
if (!resource || !resource._resourcesView)
return;
+ if (this._resourceViewTypeMatchesResource(resource, resource._resourcesView))
+ return;
+
var newView = this._createResourceView(resource);
if (newView.__proto__ === resource._resourcesView.__proto__)
return;
@@ -780,27 +808,26 @@ WebInspector.NetworkPanel.prototype = {
canShowSourceLine: function(url, line)
{
- return this._resourceTrackingEnabled && !!WebInspector.resourceForURL(url);
+ return false;
},
showSourceLine: function(url, line)
{
- this.showResource(WebInspector.resourceForURL(url), line);
},
- showResource: function(resource, line)
+ _showResource: function(resource, line)
{
if (!resource)
return;
this._popoverHelper.hidePopup();
- this.containerElement.addStyleClass("viewing-resource");
+ this._toggleViewingResourceMode();
if (this.visibleResource && this.visibleResource._resourcesView)
this.visibleResource._resourcesView.hide();
- var view = this.resourceViewForResource(resource);
+ var view = this._resourceViewForResource(resource);
view.headersVisible = true;
view.show(this._viewsContainerElement);
@@ -812,23 +839,13 @@ WebInspector.NetworkPanel.prototype = {
view.highlightLine(line);
}
- this.revealAndSelectItem(resource);
-
this.visibleResource = resource;
-
this.updateSidebarWidth();
},
- showView: function(view)
+ _closeVisibleResource: function()
{
- if (!view)
- return;
- this.showResource(view.resource);
- },
-
- closeVisibleResource: function()
- {
- this.containerElement.removeStyleClass("viewing-resource");
+ this.element.removeStyleClass("viewing-resource");
if (this.visibleResource && this.visibleResource._resourcesView)
this.visibleResource._resourcesView.hide();
@@ -840,7 +857,7 @@ WebInspector.NetworkPanel.prototype = {
this.updateSidebarWidth();
},
- resourceViewForResource: function(resource)
+ _resourceViewForResource: function(resource)
{
if (!resource)
return null;
@@ -849,23 +866,6 @@ WebInspector.NetworkPanel.prototype = {
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;
@@ -903,6 +903,24 @@ WebInspector.NetworkPanel.prototype = {
}
},
+ _resourceViewTypeMatchesResource: function(resource, resourceView)
+ {
+ switch (resource.category) {
+ case WebInspector.resourceCategories.documents:
+ case WebInspector.resourceCategories.stylesheets:
+ case WebInspector.resourceCategories.scripts:
+ case WebInspector.resourceCategories.xhr:
+ return resourceView instanceof WebInspector.SourceView;
+ case WebInspector.resourceCategories.images:
+ return resourceView instanceof WebInspector.ImageView;
+ case WebInspector.resourceCategories.fonts:
+ return resourceView instanceof WebInspector.FontView;
+ default:
+ return resourceView instanceof WebInspector.ResourceView;
+ }
+ return false;
+ },
+
_getPopoverAnchor: function(element)
{
var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
@@ -1000,10 +1018,80 @@ WebInspector.NetworkPanel.prototype = {
return popover;
},
- hide: function()
+ _toggleGridMode: function()
{
- WebInspector.Panel.prototype.hide.call(this);
- this._popoverHelper.hidePopup();
+ if (this._viewingResourceMode) {
+ this._viewingResourceMode = false;
+ this.element.removeStyleClass("viewing-resource");
+ this._dataGrid.element.removeStyleClass("viewing-resource-mode");
+ this._viewsContainerElement.addStyleClass("hidden");
+ this.sidebarElement.style.right = 0;
+ this.sidebarElement.style.removeProperty("width");
+ }
+
+ if (this._briefGrid) {
+ this._dataGrid.element.removeStyleClass("full-grid-mode");
+ this._dataGrid.element.addStyleClass("brief-grid-mode");
+
+ this._dataGrid.hideColumn("method");
+ this._dataGrid.hideColumn("status");
+ this._dataGrid.hideColumn("type");
+ this._dataGrid.hideColumn("size");
+ this._dataGrid.hideColumn("time");
+
+ var widths = {};
+ widths.name = 20;
+ widths.timeline = 80;
+ } else {
+ this._dataGrid.element.addStyleClass("full-grid-mode");
+ this._dataGrid.element.removeStyleClass("brief-grid-mode");
+
+ this._dataGrid.showColumn("method");
+ this._dataGrid.showColumn("status");
+ this._dataGrid.showColumn("type");
+ this._dataGrid.showColumn("size");
+ this._dataGrid.showColumn("time");
+
+ var widths = {};
+ widths.name = 20;
+ widths.method = 7;
+ widths.status = 8;
+ widths.type = 7;
+ widths.size = 10;
+ widths.time = 10;
+ widths.timeline = 40;
+ }
+
+ this._dataGrid.showColumn("timeline");
+ this._dataGrid.applyColumnWidthsMap(widths);
+
+ },
+
+ _toggleViewingResourceMode: function()
+ {
+ if (this._viewingResourceMode)
+ return;
+ this._viewingResourceMode = true;
+ this._preservedColumnWidths = this._dataGrid.columnWidthsMap();
+
+ this.element.addStyleClass("viewing-resource");
+ this._dataGrid.element.addStyleClass("viewing-resource-mode");
+ this._dataGrid.element.removeStyleClass("full-grid-mode");
+ this._dataGrid.element.removeStyleClass("brief-grid-mode");
+
+ this._dataGrid.hideColumn("method");
+ this._dataGrid.hideColumn("status");
+ this._dataGrid.hideColumn("type");
+ this._dataGrid.hideColumn("size");
+ this._dataGrid.hideColumn("time");
+ this._dataGrid.hideColumn("timeline");
+
+ this._viewsContainerElement.removeStyleClass("hidden");
+ this.updateSidebarWidth(200);
+
+ var widths = {};
+ widths.name = 100;
+ this._dataGrid.applyColumnWidthsMap(widths);
}
}
@@ -1296,9 +1384,10 @@ WebInspector.NetworkTransferDurationCalculator.prototype = {
WebInspector.NetworkTransferDurationCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
-WebInspector.NetworkDataGridNode = function(resource)
+WebInspector.NetworkDataGridNode = function(panel, resource)
{
WebInspector.DataGridNode.call(this, {});
+ this._panel = panel;
this._resource = resource;
}
@@ -1314,7 +1403,23 @@ WebInspector.NetworkDataGridNode.prototype = {
this._createTimelineCell();
},
- _createDivInTD: function(columnIdentifier) {
+ select: function()
+ {
+ WebInspector.DataGridNode.prototype.select.apply(this, arguments);
+ this._panel._showResource(this._resource);
+ },
+
+ get selectable()
+ {
+ if (!this._panel._hiddenCategories.all)
+ return true;
+ if (this._panel._hiddenCategories[this._resource.category.name])
+ return false;
+ return true;
+ },
+
+ _createDivInTD: function(columnIdentifier)
+ {
var td = document.createElement("td");
td.className = columnIdentifier + "-column";
var div = document.createElement("div");
@@ -1323,7 +1428,6 @@ WebInspector.NetworkDataGridNode.prototype = {
return div;
},
-
_createTimelineCell: function()
{
this._graphElement = document.createElement("div");
@@ -1353,6 +1457,7 @@ WebInspector.NetworkDataGridNode.prototype = {
this._barAreaElement.appendChild(this._labelRightElement);
this._timelineCell = document.createElement("td");
+ this._timelineCell.className = "timeline-column";
this._element.appendChild(this._timelineCell);
this._timelineCell.appendChild(this._graphElement);
},
diff --git a/WebCore/inspector/front-end/TabbedPane.js b/WebCore/inspector/front-end/TabbedPane.js
index 6acd163..dec3a0b 100644
--- a/WebCore/inspector/front-end/TabbedPane.js
+++ b/WebCore/inspector/front-end/TabbedPane.js
@@ -33,7 +33,7 @@ WebInspector.TabbedPane = function(element)
this.element = element || document.createElement("div");
this.tabsElement = document.createElement("div");
- this.tabsElement.className = "scope-bar";
+ this.tabsElement.className = "tabbed-pane-header";
this.element.appendChild(this.tabsElement);
this._tabObjects = {};
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 8309f52..fc3f231 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -810,6 +810,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
.resource-view {
display: none;
position: absolute;
+ background: white;
top: 0;
left: 0;
right: 0;
@@ -820,7 +821,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
display: block;
}
-.resource-view .scope-bar {
+.resource-view .tabbed-pane-header {
display: none;
position: absolute;
height: 20px;
@@ -831,7 +832,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
border-bottom: 1px solid rgb(163, 163, 163);
}
-.resource-view.headers-visible .scope-bar {
+.resource-view.headers-visible .tabbed-pane-header {
display: block;
}
@@ -1373,10 +1374,10 @@ body.inactive .placard.selected {
.section .properties, .event-bar .event-properties {
display: none;
-}
-
-.section.expanded .properties, .event-bar.expanded .event-properties {
- display: block;
+ margin: 0;
+ padding: 2px 6px 3px;
+ list-style: none;
+ min-height: 18px;
}
.section.no-affect .properties li {
@@ -1387,14 +1388,11 @@ body.inactive .placard.selected {
opacity: 1.0;
}
-ol.properties-tree {
- margin: 0;
- padding: 2px 6px 3px;
- list-style: none;
- min-height: 18px;
+.section.expanded .properties, .event-bar.expanded .event-properties {
+ display: block;
}
-ol.properties-tree li {
+.section .properties li, .event-properties li {
margin-left: 12px;
white-space: nowrap;
text-overflow: ellipsis;
@@ -1403,11 +1401,26 @@ ol.properties-tree li {
cursor: auto;
}
-ol.properties-tree li.parent {
+.section .properties li.parent, .event-properties li.parent {
margin-left: 1px;
}
-ol.properties-tree li.parent::before {
+.section .properties ol, .event-properties ol, .stack-trace ol, ol.stack-trace {
+ display: none;
+ margin: 0;
+ -webkit-padding-start: 12px;
+ list-style: none;
+}
+
+ol.stack-trace {
+ -webkit-padding-start: 0px;
+}
+
+.section .properties ol.expanded, .event-properties ol.expanded, .stack-trace ol, ol.stack-trace {
+ display: block;
+}
+
+.section .properties li.parent::before, .event-properties li.parent::before {
content: url(Images/treeRightTriangleBlack.png);
opacity: 0.75;
float: left;
@@ -1419,47 +1432,16 @@ ol.properties-tree li.parent::before {
cursor: default;
}
-ol.properties-tree li.parent.expanded::before {
+.section .properties li.parent.expanded::before, .event-properties li.parent.expanded::before {
content: url(Images/treeDownTriangleBlack.png);
margin-top: 1px;
}
-ol.properties-tree li .info {
+.section .properties li .info, .event-properties li .info {
padding-top: 4px;
padding-bottom: 3px;
}
-ol.properties-tree ol, .stack-trace ol, ol.stack-trace {
- display: none;
- margin: 0;
- -webkit-padding-start: 12px;
- list-style: none;
-}
-
-ol.properties-tree ol.expanded, .stack-trace ol, ol.stack-trace {
- display: block;
-}
-
-ol.stack-trace {
- -webkit-padding-start: 0px;
-}
-
-.event-listener-breakpoints .event-category {
- font-size: 12px;
- font-weight: bold;
- color: rgb(110, 110, 110);
-}
-
-ol.event-listener-breakpoints.properties-tree .children li {
- margin-left: 17px;
-}
-
-.event-listener-breakpoints .checkbox-elem {
- float: left;
- margin-top: 1px;
- margin-left: 0px;
-}
-
.section .event-bars {
display: none;
}
@@ -2584,6 +2566,32 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
margin-top: 1px;
}
+.tabbed-pane-header {
+ height: 23px;
+ padding: 0 10px;
+ border-bottom: 1px solid rgb(163, 163, 163);
+}
+
+.tabbed-pane-header li {
+ display: inline-block;
+ margin-top: 2px;
+ font-size: 11px;
+ font-weight: bold;
+ color: rgb(46, 46, 46);
+ background: transparent;
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ vertical-align: middle;
+ padding: 1px 7px 2px;
+ border: 1px solid transparent;
+ border-bottom: none;
+}
+
+.tabbed-pane-header li.selected {
+ background-color: white;
+ border: 1px solid rgb(163, 163, 163);
+ border-bottom: none;
+}
+
.scope-bar {
height: 23px;
padding: 2px 10px 0;
@@ -4023,10 +4031,6 @@ ol.breakpoint-list {
margin: 2px 0 0px 20px;
}
-.breakpoint-list .breakpoint-hit {
- background-color: yellow;
-}
-
.webkit-html-js-node, .webkit-html-css-node {
white-space: pre;
}
diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css
index 6972df7..098ca52 100644
--- a/WebCore/inspector/front-end/networkPanel.css
+++ b/WebCore/inspector/front-end/networkPanel.css
@@ -1,496 +1,596 @@
-.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;
- vertical-align: middle;
-}
-
-.network.panel .data-grid th {
- border-bottom: 1px solid rgb(64%, 64%, 64%);
- height: 30px;
- font-size: 11px;
- font-weight: bold;
-}
-
-.network.panel .data-grid.small th {
- 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: 31px;
-}
-
-.network.panel .data-grid.small .data-container {
- top: 23px;
-}
-
-.network.panel .data-grid select {
- -webkit-appearance: none;
- background-color: transparent;
- border: none;
- width: 100%;
- font-size: 11px;
- font-weight: bold;
-}
-.network.panel .data-grid td.name-column {
- font-weight: bold;
-}
-
-.network.panel .data-grid td.method-column,
-.network.panel .data-grid td.status-column,
-.network.panel .data-grid td.type-column,
-.network.panel .data-grid td.size-column,
-.network.panel .data-grid td.time-column {
- background-color: rgba(0, 0, 0, 0.07);
-}
-
-.network.panel .data-grid td.size-column,
-.network.panel .data-grid td.time-column {
- text-align: right;
-}
-
-.network.panel .small .network-graph-side {
- height: 14px;
-}
-
-.network.panel .data-grid th.sortable:active {
- background-image: none;
-}
-
-.network-cell-subtitle {
- font-weight: normal;
- color: grey;
-}
-
-.network-header-subtitle {
- color: grey;
-}
-
-.network.panel .data-grid.small .network-cell-subtitle,
-.network.panel .data-grid.small .network-header-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;
- pointer-events: none;
-}
-
-.network-event-divider-padding {
- position: absolute;
- width: 8px;
- top: 0;
- bottom: 0;
- pointer-events: auto;
-}
-
-.network-event-divider {
- position: absolute;
- width: 2px;
- top: 31px;
- bottom: 0;
- z-index: 300;
-}
-
-.network.panel .network-timeline-grid.small .network-event-divider {
- top: 23px;
-}
-
-.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: 30px;
- pointer-events: none;
-}
-
-.network.panel .network-timeline-grid.small .resources-dividers-label-bar {
- height: 23px;
-}
-
-.network.panel .resources-divider-label {
- top: 0px;
- margin-top: -4px;
- color: black;
-}
-
-.network.panel .resources-dividers-label-bar .resources-divider {
- top: 23px;
-}
-
-.network.panel .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
- top: 15px;
-}
-
-.network.panel .resources-divider.first .resources-divider-label {
- display: none;
-}
-
-.network.panel .resources-dividers-label-bar .resources-divider.first {
- background-color: transparent;
-}
-
-/* Filters */
-#network-filter {
- margin-top: 1px;
-}
-
-.data-grid table.data tr.revealed.network-category-documents, .data-grid table.data tr.revealed.network-category-stylesheets,
-.data-grid table.data tr.revealed.network-category-images, .data-grid table.data tr.revealed.network-category-scripts,
-.data-grid table.data tr.revealed.network-category-xhr, .data-grid table.data tr.revealed.network-category-fonts,
-.data-grid table.data tr.revealed.network-category-websockets, .data-grid table.data tr.revealed.network-category-other {
- display: none;
-}
-
-.data-grid.filter-all table.data tr.revealed.network-category-documents, .data-grid.filter-documents table.data tr.revealed.network-category-documents,
-.data-grid.filter-all table.data tr.revealed.network-category-stylesheets, .data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
-.data-grid.filter-all table.data tr.revealed.network-category-images, .data-grid.filter-images table.data tr.revealed.network-category-images,
-.data-grid.filter-all table.data tr.revealed.network-category-scripts, .data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
-.data-grid.filter-all table.data tr.revealed.network-category-xhr, .data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
-.data-grid.filter-all table.data tr.revealed.network-category-fonts, .data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
-.data-grid.filter-all table.data tr.revealed.network-category-websockets, .data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
-.data-grid.filter-all table.data tr.revealed.network-category-other, .data-grid.filter-other table.data tr.revealed.network-category-other {
- display: table-row;
-}
-
-/* Summary */
-
-.network-summary-bar {
- background-color: rgb(101, 111, 130);
- color: white;
- height: 20px;
- font-size: 11px;
- font-weight: bold;
- padding-top: 1px;
- padding-left: 10px;
- z-index: 2000;
- white-space: pre;
-}
-
-.network-summary-bar-bottom {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- padding-top: 3px;
-}
-
-.data-grid td .network-summary-bar {
- white-space: pre;
-}
-
-.network.panel .data-grid td.network-summary {
- padding: 0;
-}
+.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;
+ vertical-align: middle;
+}
+
+.network.panel .data-grid th {
+ border-bottom: 1px solid rgb(64%, 64%, 64%);
+ height: 30px;
+ font-size: 11px;
+ font-weight: bold;
+}
+
+.network.panel .data-grid.small th {
+ 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: 31px;
+}
+
+.network.panel .data-grid.small .data-container {
+ top: 23px;
+}
+
+.network.panel .data-grid select {
+ -webkit-appearance: none;
+ background-color: transparent;
+ border: none;
+ width: 100%;
+ font-size: 11px;
+ font-weight: bold;
+}
+.network.panel .data-grid td.name-column {
+ font-weight: bold;
+}
+
+.network.panel .data-grid td.method-column,
+.network.panel .data-grid td.status-column,
+.network.panel .data-grid td.type-column,
+.network.panel .data-grid td.size-column,
+.network.panel .data-grid td.time-column {
+ background-color: rgba(0, 0, 0, 0.07);
+}
+
+.network.panel .data-grid td.size-column,
+.network.panel .data-grid td.time-column {
+ text-align: right;
+}
+
+.network.panel .small .network-graph-side {
+ height: 14px;
+}
+
+.network.panel .data-grid th.sortable:active {
+ background-image: none;
+}
+
+.network-cell-subtitle {
+ font-weight: normal;
+ color: grey;
+}
+
+.network-header-subtitle {
+ color: grey;
+}
+
+.network.panel .data-grid.small .network-cell-subtitle,
+.network.panel .data-grid.small .network-header-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;
+ pointer-events: none;
+}
+
+.network-event-divider-padding {
+ position: absolute;
+ width: 8px;
+ top: 0;
+ bottom: 0;
+ pointer-events: auto;
+}
+
+.network-event-divider {
+ position: absolute;
+ width: 2px;
+ top: 31px;
+ bottom: 0;
+ z-index: 300;
+}
+
+.network.panel .network-timeline-grid.small .network-event-divider {
+ top: 23px;
+}
+
+.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: 30px;
+ pointer-events: none;
+}
+
+.network.panel .network-timeline-grid.small .resources-dividers-label-bar {
+ height: 23px;
+}
+
+.network.panel .resources-divider-label {
+ top: 0px;
+ margin-top: -4px;
+ color: black;
+}
+
+.network.panel .resources-dividers-label-bar .resources-divider {
+ top: 23px;
+}
+
+.network.panel .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
+ top: 15px;
+}
+
+.network.panel .resources-divider.first .resources-divider-label {
+ display: none;
+}
+
+.network.panel .resources-dividers-label-bar .resources-divider.first {
+ background-color: transparent;
+}
+
+/* Filters */
+#network-filter {
+ margin-top: 1px;
+}
+
+.data-grid table.data tr.revealed.network-category-documents, .data-grid table.data tr.revealed.network-category-stylesheets,
+.data-grid table.data tr.revealed.network-category-images, .data-grid table.data tr.revealed.network-category-scripts,
+.data-grid table.data tr.revealed.network-category-xhr, .data-grid table.data tr.revealed.network-category-fonts,
+.data-grid table.data tr.revealed.network-category-websockets, .data-grid table.data tr.revealed.network-category-other {
+ display: none;
+}
+
+.data-grid.filter-all table.data tr.revealed.network-category-documents, .data-grid.filter-documents table.data tr.revealed.network-category-documents,
+.data-grid.filter-all table.data tr.revealed.network-category-stylesheets, .data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
+.data-grid.filter-all table.data tr.revealed.network-category-images, .data-grid.filter-images table.data tr.revealed.network-category-images,
+.data-grid.filter-all table.data tr.revealed.network-category-scripts, .data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
+.data-grid.filter-all table.data tr.revealed.network-category-xhr, .data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
+.data-grid.filter-all table.data tr.revealed.network-category-fonts, .data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
+.data-grid.filter-all table.data tr.revealed.network-category-websockets, .data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
+.data-grid.filter-all table.data tr.revealed.network-category-other, .data-grid.filter-other table.data tr.revealed.network-category-other {
+ display: table-row;
+}
+
+/* Summary */
+
+.network-summary-bar {
+ background-color: rgb(101, 111, 130);
+ color: white;
+ height: 20px;
+ font-size: 11px;
+ font-weight: bold;
+ padding-top: 1px;
+ padding-left: 10px;
+ z-index: 2000;
+ white-space: pre;
+}
+
+.network-summary-bar-bottom {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding-top: 3px;
+}
+
+.data-grid td .network-summary-bar {
+ white-space: pre;
+}
+
+.network.panel .data-grid td.network-summary {
+ padding: 0;
+}
+
+/* Viewer */
+
+.network.panel.viewing-resource .data-grid td,
+.network.panel.viewing-resource .data-grid th {
+ border-right: none;
+}
+
+.network.panel.viewing-resource .data-grid th.corner {
+ display: none;
+}
+
+#network-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ border-right: 0 none transparent;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.network.panel.viewing-resource #network-container {
+ border-right: 1px solid rgb(163, 163, 163);
+}
+
+#network-views {
+ position: absolute;
+ background: rgb(203, 203, 203);
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.network.panel .data-grid.full-grid-mode .viewer-column {
+ display: none;
+}
+
+.network.panel .data-grid.brief-grid-mode .viewer-column,
+.network.panel .data-grid.brief-grid-mode .method-column,
+.network.panel .data-grid.brief-grid-mode .status-column,
+.network.panel .data-grid.brief-grid-mode .type-column,
+.network.panel .data-grid.brief-grid-mode .size-column,
+.network.panel .data-grid.brief-grid-mode .time-column {
+ display: none;
+}
+
+.network.panel.viewing-resource .network-timeline-grid {
+ display: none;
+}
+
+.network.panel .data-grid.viewing-resource-mode .method-column,
+.network.panel .data-grid.viewing-resource-mode .status-column,
+.network.panel .data-grid.viewing-resource-mode .type-column,
+.network.panel .data-grid.viewing-resource-mode .size-column,
+.network.panel .data-grid.viewing-resource-mode .time-column,
+.network.panel .data-grid.viewing-resource-mode .timeline-column {
+ display: none;
+}
+
+.network.panel .network-sidebar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.network.panel:not(.viewing-resource) .sidebar-resizer-vertical {
+ display: none;
+}
+
+.network.panel.viewing-resource .data-grid-resizer {
+ display: none;
+}
+
+.network.panel .scope-bar {
+ height: 23px;
+ padding-top: 5px;
+}
+
+.network.panel .resource-view.headers-visible .resource-view-content {
+ top: 23px;
+}
+
+.network.panel:not(.viewing-resource) .data-grid tr.selected {
+ background-color: transparent;
+ color: black;
+}
+
+.network.panel .resource-view .tabbed-pane-header {
+ height: 23px;
+ padding-top: 3px;
+}
+
+.network.panel.viewing-resource .data-grid .data-container {
+ padding-right: 0;
+}
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list