[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:57:33 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit bbfca1f82579fbb8ca65bc25f25a887d6c76f075
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Thu Sep 30 12:42:55 2010 +0000
2010-09-29 Pavel Feldman <pfeldman at chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: implement sorting by timeline in network panel + filtering.
https://bugs.webkit.org/show_bug.cgi?id=45657
A number of drive-by fixes, sorting by timeline added,
0-based timeline for duration added, filters added,
more love for detailed view + nice headers.
* English.lproj/localizedStrings.js:
* inspector/front-end/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.markColumnAsSortedBy):
(WebInspector.DataGrid.prototype.headerTableHeader):
* inspector/front-end/NetworkPanel.js:
(WebInspector.NetworkPanel):
(WebInspector.NetworkPanel.prototype.get statusBarItems):
(WebInspector.NetworkPanel.prototype._createTable):
(WebInspector.NetworkPanel.prototype._makeHeaderInnerHTML):
(WebInspector.NetworkPanel.prototype._createSortingFunctions):
(WebInspector.NetworkPanel.prototype._sortByTimeline):
(WebInspector.NetworkPanel.prototype._sortItems):
(WebInspector.NetworkPanel.prototype._createFilterPanel):
(WebInspector.NetworkPanel.prototype._showCategory):
(WebInspector.NetworkPanel.prototype._hideCategory):
(WebInspector.NetworkPanel.prototype._updateFilter):
(WebInspector.NetworkPanel.prototype._filter):
(WebInspector.NetworkPanel.prototype._updateDividersIfNeeded):
(WebInspector.NetworkPanel.prototype.reset):
(WebInspector.NetworkPanel.prototype._setLargerResources):
(WebInspector.NetworkDataGridNode.prototype.createCells):
(WebInspector.NetworkDataGridNode.prototype._createDivInTD):
(WebInspector.NetworkDataGridNode.prototype._refreshURLCell):
(WebInspector.NetworkDataGridNode.prototype._refreshStatusCell):
(WebInspector.NetworkDataGridNode.prototype._appendSubtitle):
(WebInspector.NetworkDataGridNode.SizeComparator):
(WebInspector.NetworkDataGridNode.ResourcePropertyComparator):
* inspector/front-end/ProfilesPanel.js:
(WebInspector.ProfilesPanel):
(WebInspector.ProfilesPanel.prototype.updateMainViewWidth):
* inspector/front-end/StoragePanel.js:
(WebInspector.StoragePanel):
* inspector/front-end/TimelineGrid.js:
(WebInspector.TimelineGrid.prototype.updateDividers):
* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewPane):
(WebInspector.TimelineOverviewPane.prototype.updateMainViewWidth):
* inspector/front-end/inspector.css:
(.data-grid th.sort-ascending > div::after):
(.data-grid th.sort-descending > div::after):
(.status-bar-items):
* inspector/front-end/networkPanel.css:
(.network.panel .data-grid td):
(.network.panel .data-grid th):
(.network.panel .data-grid.small th):
(.network.panel .data-grid .data-container):
(.network.panel .data-grid.small .data-container):
(.network.panel .data-grid select):
(.network.panel .data-grid td.time-column):
(.network-cell-subtitle):
(.network-header-subtitle):
(.network-event-divider):
(.network.panel .network-timeline-grid.small .network-event-divider):
(.network.panel .resources-dividers-label-bar):
(.network.panel .network-timeline-grid.small .resources-dividers-label-bar):
(.network.panel .resources-divider-label):
(.network.panel .resources-dividers-label-bar .resources-divider):
(.network.panel .network-timeline-grid.small .resources-dividers-label-bar .resources-divider):
(.network.panel .resources-divider.first .resources-divider-label):
(.network.panel .resources-dividers-label-bar .resources-divider.first):
(#network-filter):
(.data-grid table.data tr.revealed.network-category-websockets, .data-grid table.data tr.revealed.network-category-other):
(.data-grid.filter-all table.data tr.revealed.network-category-other, .data-grid.filter-other table.data tr.revealed.network-category-other):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@68778 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 6b2a951..5072d34 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,79 @@
+2010-09-29 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Timothy Hatcher.
+
+ Web Inspector: implement sorting by timeline in network panel + filtering.
+ https://bugs.webkit.org/show_bug.cgi?id=45657
+
+ A number of drive-by fixes, sorting by timeline added,
+ 0-based timeline for duration added, filters added,
+ more love for detailed view + nice headers.
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/DataGrid.js:
+ (WebInspector.DataGrid):
+ (WebInspector.DataGrid.prototype.markColumnAsSortedBy):
+ (WebInspector.DataGrid.prototype.headerTableHeader):
+ * inspector/front-end/NetworkPanel.js:
+ (WebInspector.NetworkPanel):
+ (WebInspector.NetworkPanel.prototype.get statusBarItems):
+ (WebInspector.NetworkPanel.prototype._createTable):
+ (WebInspector.NetworkPanel.prototype._makeHeaderInnerHTML):
+ (WebInspector.NetworkPanel.prototype._createSortingFunctions):
+ (WebInspector.NetworkPanel.prototype._sortByTimeline):
+ (WebInspector.NetworkPanel.prototype._sortItems):
+ (WebInspector.NetworkPanel.prototype._createFilterPanel):
+ (WebInspector.NetworkPanel.prototype._showCategory):
+ (WebInspector.NetworkPanel.prototype._hideCategory):
+ (WebInspector.NetworkPanel.prototype._updateFilter):
+ (WebInspector.NetworkPanel.prototype._filter):
+ (WebInspector.NetworkPanel.prototype._updateDividersIfNeeded):
+ (WebInspector.NetworkPanel.prototype.reset):
+ (WebInspector.NetworkPanel.prototype._setLargerResources):
+ (WebInspector.NetworkDataGridNode.prototype.createCells):
+ (WebInspector.NetworkDataGridNode.prototype._createDivInTD):
+ (WebInspector.NetworkDataGridNode.prototype._refreshURLCell):
+ (WebInspector.NetworkDataGridNode.prototype._refreshStatusCell):
+ (WebInspector.NetworkDataGridNode.prototype._appendSubtitle):
+ (WebInspector.NetworkDataGridNode.SizeComparator):
+ (WebInspector.NetworkDataGridNode.ResourcePropertyComparator):
+ * inspector/front-end/ProfilesPanel.js:
+ (WebInspector.ProfilesPanel):
+ (WebInspector.ProfilesPanel.prototype.updateMainViewWidth):
+ * inspector/front-end/StoragePanel.js:
+ (WebInspector.StoragePanel):
+ * inspector/front-end/TimelineGrid.js:
+ (WebInspector.TimelineGrid.prototype.updateDividers):
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane):
+ (WebInspector.TimelineOverviewPane.prototype.updateMainViewWidth):
+ * inspector/front-end/inspector.css:
+ (.data-grid th.sort-ascending > div::after):
+ (.data-grid th.sort-descending > div::after):
+ (.status-bar-items):
+ * inspector/front-end/networkPanel.css:
+ (.network.panel .data-grid td):
+ (.network.panel .data-grid th):
+ (.network.panel .data-grid.small th):
+ (.network.panel .data-grid .data-container):
+ (.network.panel .data-grid.small .data-container):
+ (.network.panel .data-grid select):
+ (.network.panel .data-grid td.time-column):
+ (.network-cell-subtitle):
+ (.network-header-subtitle):
+ (.network-event-divider):
+ (.network.panel .network-timeline-grid.small .network-event-divider):
+ (.network.panel .resources-dividers-label-bar):
+ (.network.panel .network-timeline-grid.small .resources-dividers-label-bar):
+ (.network.panel .resources-divider-label):
+ (.network.panel .resources-dividers-label-bar .resources-divider):
+ (.network.panel .network-timeline-grid.small .resources-dividers-label-bar .resources-divider):
+ (.network.panel .resources-divider.first .resources-divider-label):
+ (.network.panel .resources-dividers-label-bar .resources-divider.first):
+ (#network-filter):
+ (.data-grid table.data tr.revealed.network-category-websockets, .data-grid table.data tr.revealed.network-category-other):
+ (.data-grid.filter-all table.data tr.revealed.network-category-other, .data-grid.filter-other table.data tr.revealed.network-category-other):
+
2010-09-30 Tor Arne Vestbø <tor.arne.vestbo at nokia.com>
Reviewed by Simon Hausmann.
diff --git a/WebCore/English.lproj/localizedStrings.js b/WebCore/English.lproj/localizedStrings.js
index 62103d7..3f0af9c 100644
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
diff --git a/WebCore/inspector/front-end/DataGrid.js b/WebCore/inspector/front-end/DataGrid.js
index f68fe48..dbcc2cb 100644
--- a/WebCore/inspector/front-end/DataGrid.js
+++ b/WebCore/inspector/front-end/DataGrid.js
@@ -32,6 +32,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
this._headerTable = document.createElement("table");
this._headerTable.className = "header";
+ this._headerTableHeaders = {};
this._dataTable = document.createElement("table");
this._dataTable.className = "data";
@@ -77,9 +78,13 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
var cell = document.createElement("th");
cell.className = columnIdentifier + "-column";
cell.columnIdentifier = columnIdentifier;
+ this._headerTableHeaders[columnIdentifier] = cell;
var div = document.createElement("div");
- div.textContent = column.title;
+ if (column.titleDOMFragment)
+ div.appendChild(column.titleDOMFragment);
+ else
+ div.textContent = column.title;
cell.appendChild(div);
if (column.sort) {
@@ -113,11 +118,13 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
var fillerRow = document.createElement("tr");
fillerRow.className = "filler";
- for (var i = 0; i < this._columnCount; ++i) {
+ for (var columnIdentifier in columns) {
+ var column = columns[columnIdentifier];
var cell = document.createElement("td");
+ cell.className = columnIdentifier + "-column";
fillerRow.appendChild(cell);
}
-
+
this._dataTableColumnGroup = columnGroup.cloneNode(true);
this._dataTable.appendChild(this._dataTableColumnGroup);
this.dataTableBody.appendChild(fillerRow);
@@ -679,7 +686,7 @@ WebInspector.DataGrid.prototype = {
}
if (cell == this._sortColumnCell) {
- if (sortOrder == "ascending")
+ if (sortOrder === "ascending")
sortOrder = "descending";
else
sortOrder = "ascending";
@@ -692,6 +699,21 @@ WebInspector.DataGrid.prototype = {
this.dispatchEventToListeners("sorting changed");
},
+ markColumnAsSortedBy: function(columnIdentifier, sortOrder)
+ {
+ if (this._sortColumnCell) {
+ this._sortColumnCell.removeStyleClass("sort-ascending");
+ this._sortColumnCell.removeStyleClass("sort-descending");
+ }
+ this._sortColumnCell = this._headerTableHeaders[columnIdentifier];
+ this._sortColumnCell.addStyleClass("sort-" + sortOrder);
+ },
+
+ headerTableHeader: function(columnIdentifier)
+ {
+ return this._headerTableHeaders[columnIdentifier];
+ },
+
_mouseDownInDataTable: function(event)
{
var gridNode = this.dataGridNodeFromNode(event.target);
diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js
index f07b3b0..7874beb 100644
--- a/WebCore/inspector/front-end/NetworkPanel.js
+++ b/WebCore/inspector/front-end/NetworkPanel.js
@@ -46,11 +46,12 @@ WebInspector.NetworkPanel = function()
this._createTimelineGrid();
this._createTable();
this._createStatusbarButtons();
+ this._createFilterPanel();
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);
+ this._filter(this._filterAllElement, false);
}
WebInspector.NetworkPanel.prototype = {
@@ -61,7 +62,7 @@ WebInspector.NetworkPanel.prototype = {
get statusBarItems()
{
- return [this._largerResourcesButton.element, this._clearButton.element];
+ return [this._largerResourcesButton.element, this._clearButton.element, this._filterBarElement];
},
isCategoryVisible: function(categoryName)
@@ -93,17 +94,17 @@ WebInspector.NetworkPanel.prototype = {
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;
+ 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%";
- columns.status.title = WebInspector.UIString("Status");
+ columns.status.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Status"), WebInspector.UIString("Text"));
columns.status.sortable = true;
columns.status.width = "8%";
@@ -111,41 +112,170 @@ WebInspector.NetworkPanel.prototype = {
columns.type.sortable = true;
columns.type.width = "7%";
- columns.size.title = WebInspector.UIString("Size");
+ columns.size.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Size"), WebInspector.UIString("Transfer"));
columns.size.sortable = true;
columns.size.width = "10%";
columns.size.aligned = "right";
- columns.time.title = WebInspector.UIString("Time");
+ columns.time.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Time"), WebInspector.UIString("Duration"));
columns.time.sortable = true;
columns.time.width = "10%";
columns.time.aligned = "right";
columns.timeline.title = "";
- columns.timeline.sortable = true;
+ columns.timeline.sortable = false;
columns.timeline.width = "40%";
- columns.timeline.sort = true;
+ columns.timeline.sort = "ascending";
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);
+
+ this._patchTimelineHeader();
+ },
+
+ _makeHeaderFragment: function(title, subtitle)
+ {
+ var fragment = document.createDocumentFragment();
+ fragment.appendChild(document.createTextNode(title));
+ var subtitleDiv = document.createElement("div");
+ subtitleDiv.className = "network-header-subtitle";
+ subtitleDiv.textContent = subtitle;
+ fragment.appendChild(subtitleDiv);
+ return fragment;
+ },
+
+ _patchTimelineHeader: function()
+ {
+ var timelineSorting = document.createElement("select");
+
+ var option = document.createElement("option");
+ option.value = "startTime";
+ option.label = WebInspector.UIString("Start Time");
+ timelineSorting.appendChild(option);
+
+ var option = document.createElement("option");
+ option.value = "responseTime";
+ option.label = WebInspector.UIString("Response Time");
+ timelineSorting.appendChild(option);
+
+ var option = document.createElement("option");
+ option.value = "endTime";
+ option.label = WebInspector.UIString("End Time");
+ timelineSorting.appendChild(option);
+
+ var option = document.createElement("option");
+ option.value = "duration";
+ option.label = WebInspector.UIString("Duration");
+ timelineSorting.appendChild(option);
+
+ var option = document.createElement("option");
+ option.value = "latency";
+ option.label = WebInspector.UIString("Latency");
+ timelineSorting.appendChild(option);
+
+ var header = this._dataGrid.headerTableHeader("timeline");
+ header.firstChild.appendChild(timelineSorting);
+
+ timelineSorting.addEventListener("click", function(event) { event.stopPropagation() }, false);
+ timelineSorting.addEventListener("change", this._sortByTimeline.bind(this), false);
},
_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");
+ this._sortingFunctions.name = WebInspector.NetworkDataGridNode.NameComparator;
+ this._sortingFunctions.method = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "method", true);
+ this._sortingFunctions.status = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "statusCode", true);
+ this._sortingFunctions.type = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "mimeType", true);
+ this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeComparator;
+ this._sortingFunctions.time = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "duration", true);
+ this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "startTime", true);
+ this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "startTime", true);
+ this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "endTime", true);
+ this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "responseReceivedTime", true);
+ this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "duration", false);
+ this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.ResourcePropertyComparator.bind(null, "latency", false);
+
+ var timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
+ var durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
+ this._calculators = {};
+ this._calculators.startTime = timeCalculator;
+ this._calculators.endTime = timeCalculator;
+ this._calculators.responseTime = timeCalculator;
+ this._calculators.duration = durationCalculator;
+ this._calculators.latency = durationCalculator;
+ },
+
+ _sortByTimeline: function(e)
+ {
+ var options = e.target.options;
+ var selectedOption = options[e.target.selectedIndex];
+ var value = selectedOption.value;
+
+ var sortingFunction = this._sortingFunctions[value];
+ this._dataGrid.sortNodes(sortingFunction);
+ this.calculator = this._calculators[value];
+ this._dataGrid.markColumnAsSortedBy("timeline", "ascending");
+ },
+
+ _sortItems: function()
+ {
+ var columnIdentifier = this._dataGrid.sortColumnIdentifier;
+ var sortingFunction = this._sortingFunctions[columnIdentifier];
+ if (!sortingFunction)
+ return;
+ this._dataGrid.sortNodes(sortingFunction, this._dataGrid.sortOrder === "descending");
+ },
+
+ _createFilterPanel: function()
+ {
+ var filterBarElement = document.createElement("div");
+ filterBarElement.className = "scope-bar status-bar-item";
+ filterBarElement.id = "network-filter";
+
+ function createFilterElement(category, label)
+ {
+ var categoryElement = document.createElement("li");
+ categoryElement.category = category;
+ categoryElement.className = category;
+ categoryElement.appendChild(document.createTextNode(label));
+ categoryElement.addEventListener("click", this._updateFilter.bind(this), false);
+ filterBarElement.appendChild(categoryElement);
+
+ return categoryElement;
+ }
+
+ this._filterAllElement = createFilterElement.call(this, "all", WebInspector.UIString("All"));
+
+ // Add a divider
+ var dividerElement = document.createElement("div");
+ dividerElement.addStyleClass("divider");
+ filterBarElement.appendChild(dividerElement);
+
+ var categories = {
+ documents: WebInspector.UIString("Documents"),
+ stylesheets: WebInspector.UIString("Stylesheets"),
+ images: WebInspector.UIString("Images"),
+ scripts: WebInspector.UIString("Scripts"),
+ xhr: WebInspector.UIString("XHR"),
+ fonts: WebInspector.UIString("Fonts"),
+ other: WebInspector.UIString("Other")
+ };
+ for (var category in categories)
+ createFilterElement.call(this, category, categories[category]);
+ this._filterBarElement = filterBarElement;
+ },
+
+ _showCategory: function(category)
+ {
+ this._dataGrid.element.addStyleClass("filter-" + category);
},
- filter: function(target, selectMultiple)
+ _hideCategory: function(category)
{
+ this._dataGrid.element.removeStyleClass("filter-" + category);
},
_updateFilter: function(e)
@@ -157,7 +287,7 @@ WebInspector.NetworkPanel.prototype = {
if (!isMac && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey)
selectMultiple = true;
- this.filter(e.target, selectMultiple);
+ 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.
@@ -167,6 +297,59 @@ WebInspector.NetworkPanel.prototype = {
WebInspector.doPerformSearch(searchField.value, WebInspector.shortSearchWasForcedByKeyEvent, false, true);
},
+ _filter: function(target, selectMultiple)
+ {
+ function unselectAll()
+ {
+ for (var i = 0; i < this._filterBarElement.childNodes.length; ++i) {
+ var child = this._filterBarElement.childNodes[i];
+ if (!child.category)
+ continue;
+
+ child.removeStyleClass("selected");
+ this._hideCategory(child.category);
+ }
+ }
+
+ if (target.category === this._filterAllElement) {
+ if (target.hasStyleClass("selected")) {
+ // We can't unselect All, so we break early here
+ return;
+ }
+
+ // If All wasn't selected, and now is, unselect everything else.
+ unselectAll.call(this);
+ } else {
+ // Something other than All is being selected, so we want to unselect All.
+ if (this._filterAllElement.hasStyleClass("selected")) {
+ this._filterAllElement.removeStyleClass("selected");
+ this._hideCategory("all");
+ }
+ }
+
+ if (!selectMultiple) {
+ // If multiple selection is off, we want to unselect everything else
+ // and just select ourselves.
+ unselectAll.call(this);
+
+ target.addStyleClass("selected");
+ this._showCategory(target.category);
+ return;
+ }
+
+ if (target.hasStyleClass("selected")) {
+ // If selectMultiple is turned on, and we were selected, we just
+ // want to unselect ourselves.
+ target.removeStyleClass("selected");
+ this._hideCategory(target.category);
+ } else {
+ // If selectMultiple is turned on, and we weren't selected, we just
+ // want to select ourselves.
+ target.addStyleClass("selected");
+ this._showCategory(target.category);
+ }
+ },
+
_scheduleRefresh: function()
{
if (this._needsRefresh)
@@ -178,18 +361,10 @@ WebInspector.NetworkPanel.prototype = {
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;
+ this._timelineGrid.element.style.right = "18px";
var proceed = true;
if (!this.visible) {
@@ -484,7 +659,7 @@ WebInspector.NetworkPanel.prototype = {
this._dataGrid.removeChildren();
this._updateDividersIfNeeded(true);
// End reset timeline.
-
+
this._mainResourceLoadTime = -1;
this._mainResourceDOMContentTime = -1;
@@ -631,9 +806,11 @@ WebInspector.NetworkPanel.prototype = {
if (!enabled) {
this._largerResourcesButton.title = WebInspector.UIString("Use large resource rows.");
this._dataGrid.element.addStyleClass("small");
+ this._timelineGrid.element.addStyleClass("small");
} else {
this._largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
this._dataGrid.element.removeStyleClass("small");
+ this._timelineGrid.element.removeStyleClass("small");
}
},
@@ -1047,56 +1224,6 @@ WebInspector.NetworkTransferDurationCalculator.prototype = {
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)
{
@@ -1107,19 +1234,18 @@ WebInspector.NetworkDataGridNode = function(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._nameCell = this._createDivInTD("name");
+ this._methodCell = this._createDivInTD("method");
+ this._statusCell = this._createDivInTD("status");
+ this._typeCell = this._createDivInTD("type");
+ this._sizeCell = this._createDivInTD("size");
+ this._timeCell = this._createDivInTD("time");
this._createTimelineCell();
},
- _createDivInTD: function(className) {
+ _createDivInTD: function(columnIdentifier) {
var td = document.createElement("td");
- if (className)
- td.className = className;
+ td.className = columnIdentifier + "-column";
var div = document.createElement("div");
td.appendChild(div);
this._element.appendChild(td);
@@ -1162,7 +1288,7 @@ WebInspector.NetworkDataGridNode.prototype = {
refreshResource: function()
{
- this._refreshURLCell();
+ this._refreshNameCell();
this._methodCell.textContent = this._resource.requestMethod;
@@ -1188,9 +1314,9 @@ WebInspector.NetworkDataGridNode.prototype = {
}
},
- _refreshURLCell: function()
+ _refreshNameCell: function()
{
- this._urlCell.removeChildren();
+ this._nameCell.removeChildren();
if (this._resource.category === WebInspector.resourceCategories.images) {
var previewImage = document.createElement("img");
@@ -1204,8 +1330,8 @@ WebInspector.NetworkDataGridNode.prototype = {
var iconElement = document.createElement("img");
iconElement.className = "icon";
}
- this._urlCell.appendChild(iconElement);
- this._urlCell.appendChild(document.createTextNode(this._fileName()));
+ this._nameCell.appendChild(iconElement);
+ this._nameCell.appendChild(document.createTextNode(this._fileName()));
var subtitle = this._resource.displayDomain;
@@ -1216,13 +1342,8 @@ WebInspector.NetworkDataGridNode.prototype = {
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;
+ this._appendSubtitle(this._nameCell, subtitle);
+ this._nameCell.title = this._resource.url;
},
_fileName: function()
@@ -1238,16 +1359,6 @@ WebInspector.NetworkDataGridNode.prototype = {
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);
@@ -1287,7 +1398,7 @@ WebInspector.NetworkDataGridNode.prototype = {
_appendSubtitle: function(cellElement, subtitleText)
{
var subtitleElement = document.createElement("div");
- subtitleElement.className = "network-grid-subtitle";
+ subtitleElement.className = "network-cell-subtitle";
subtitleElement.textContent = subtitleText;
cellElement.appendChild(subtitleElement);
},
@@ -1389,7 +1500,7 @@ WebInspector.NetworkDataGridNode.prototype = {
}
}
-WebInspector.NetworkDataGridNode.URLComparator = function(a, b)
+WebInspector.NetworkDataGridNode.NameComparator = 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 : "");
@@ -1400,14 +1511,30 @@ WebInspector.NetworkDataGridNode.URLComparator = function(a, b)
return 0;
}
-WebInspector.NetworkDataGridNode.ResourcePropertyComparator = function(propertyName, a, b)
+WebInspector.NetworkDataGridNode.SizeComparator = function(a, b)
+{
+ if (a._resource.cached === b._resource.cached)
+ return 0;
+ if (b._resource.cached)
+ return 1;
+ if (a._resource.cached)
+ return -1;
+
+ if (a._resource.resourceSize === b._resource.resourceSize)
+ return 0;
+
+ return a._resource.resourceSize > b._resource.resourceSize ? 1 : -1;
+}
+
+WebInspector.NetworkDataGridNode.ResourcePropertyComparator = function(propertyName, ascending, a, b)
{
var aValue = a._resource[propertyName];
var bValue = b._resource[propertyName];
+
if (aValue > bValue)
- return 1;
+ return ascending ? 1 : -1;
if (bValue > aValue)
- return -1;
+ return ascending ? -1 : 1;
return 0;
}
diff --git a/WebCore/inspector/front-end/ProfilesPanel.js b/WebCore/inspector/front-end/ProfilesPanel.js
index 2bd76f9..ca02f9e 100644
--- a/WebCore/inspector/front-end/ProfilesPanel.js
+++ b/WebCore/inspector/front-end/ProfilesPanel.js
@@ -116,7 +116,7 @@ WebInspector.ProfilesPanel = function()
this.clearResultsButton.addEventListener("click", this._clearProfiles.bind(this), false);
this.profileViewStatusBarItemsContainer = document.createElement("div");
- this.profileViewStatusBarItemsContainer.id = "profile-view-status-bar-items";
+ this.profileViewStatusBarItemsContainer.className = "status-bar-items";
this.welcomeView = new WebInspector.WelcomeView("profiles", WebInspector.UIString("Welcome to the Profiles panel"));
this.element.appendChild(this.welcomeView.element);
@@ -550,7 +550,7 @@ WebInspector.ProfilesPanel.prototype = {
{
this.welcomeView.element.style.left = width + "px";
this.profileViews.style.left = width + "px";
- this.profileViewStatusBarItemsContainer.style.left = width + "px";
+ this.profileViewStatusBarItemsContainer.style.left = Math.max(155, width) + "px";
this.resize();
}
}
diff --git a/WebCore/inspector/front-end/StoragePanel.js b/WebCore/inspector/front-end/StoragePanel.js
index 2d17989..e033b57 100644
--- a/WebCore/inspector/front-end/StoragePanel.js
+++ b/WebCore/inspector/front-end/StoragePanel.js
@@ -59,7 +59,7 @@ WebInspector.StoragePanel = function(database)
this.element.appendChild(this.storageViews);
this.storageViewStatusBarItemsContainer = document.createElement("div");
- this.storageViewStatusBarItemsContainer.id = "storage-view-status-bar-items";
+ this.storageViewStatusBarItemsContainer.className = "status-bar-items";
this.reset();
}
diff --git a/WebCore/inspector/front-end/TimelineGrid.js b/WebCore/inspector/front-end/TimelineGrid.js
index ad7e769..adc8e47 100644
--- a/WebCore/inspector/front-end/TimelineGrid.js
+++ b/WebCore/inspector/front-end/TimelineGrid.js
@@ -55,6 +55,7 @@ WebInspector.TimelineGrid.prototype = {
return this._itemsGraphsElement;
},
+
updateDividers: function(force, calculator, paddingLeft)
{
var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
@@ -88,10 +89,21 @@ WebInspector.TimelineGrid.prototype = {
dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
}
- if (i === dividerCount)
+ if (i === (paddingLeft ? 0 : 1)) {
+ divider.addStyleClass("first");
+ dividerLabelBar.addStyleClass("first");
+ } else {
+ divider.removeStyleClass("first");
+ dividerLabelBar.removeStyleClass("first");
+ }
+
+ if (i === dividerCount) {
divider.addStyleClass("last");
- else
+ dividerLabelBar.addStyleClass("last");
+ } else {
divider.removeStyleClass("last");
+ dividerLabelBar.removeStyleClass("last");
+ }
var left = paddingLeft + clientWidth * (i / dividerCount);
var percentLeft = 100 * left / dividersLabelBarElementClientWidth;
diff --git a/WebCore/inspector/front-end/TimelineOverviewPane.js b/WebCore/inspector/front-end/TimelineOverviewPane.js
index 3e83f62..55e24c5 100644
--- a/WebCore/inspector/front-end/TimelineOverviewPane.js
+++ b/WebCore/inspector/front-end/TimelineOverviewPane.js
@@ -33,8 +33,7 @@ WebInspector.TimelineOverviewPane = function(categories)
this._categories = categories;
this.statusBarFilters = document.createElement("div");
- this.statusBarFilters.id = "timeline-view-status-bar-items";
- this.statusBarFilters.addStyleClass("status-bar-item");
+ this.statusBarFilters.className = "status-bar-items";
for (var categoryName in this._categories) {
var category = this._categories[categoryName];
this.statusBarFilters.appendChild(this._createTimelineCategoryStatusBarCheckbox(category, this._onCheckboxClicked.bind(this, category)));
@@ -197,6 +196,7 @@ WebInspector.TimelineOverviewPane.prototype = {
updateMainViewWidth: function(width, records)
{
this._overviewGrid.element.style.left = width + "px";
+ this.statusBarFilters.style.left = Math.max(155, width) + "px";
},
reset: function()
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 848afdc..8cc6ac6 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -2086,22 +2086,27 @@ body.inactive .sidebar {
background-image: url(Images/glossyHeaderSelectedPressed.png);
}
-.data-grid th.sort-ascending div::after {
+.data-grid th.sort-ascending > div::after {
position: absolute;
top: 0;
+ bottom: 0;
right: 0;
+ height: 12px;
+ margin-bottom: auto;
+ margin-top: auto;
width: 8px;
- height: 8px;
content: url(Images/treeUpTriangleBlack.png);
}
-.data-grid th.sort-descending div::after {
+.data-grid th.sort-descending > div::after {
position: absolute;
top: 0;
+ bottom: 0;
right: 0;
- margin-top: 1px;
- width: 8px;
height: 8px;
+ margin-bottom: auto;
+ margin-top: auto;
+ width: 8px;
content: url(Images/treeDownTriangleBlack.png);
}
@@ -3837,8 +3842,7 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
bottom: 0;
}
-#timeline-view-status-bar-items,
-#profile-view-status-bar-items {
+.status-bar-items {
position: absolute;
top: 0;
bottom: 0;
@@ -3962,30 +3966,10 @@ button.enable-toggle-status-bar-item .glyph {
-webkit-mask-image: url(Images/excludeButtonGlyph.png);
}
-#storage-view-status-bar-items {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 200px;
- overflow: hidden;
- border-left: 1px solid rgb(184, 184, 184);
- margin-left: -1px;
-}
-
.refresh-storage-status-bar-item .glyph {
-webkit-mask-image: url(Images/reloadButtonGlyph.png);
}
-#storage-view-status-bar-items {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 200px;
- overflow: hidden;
- border-left: 1px solid rgb(184, 184, 184);
- margin-left: -1px;
-}
-
ol.breakpoint-list {
-webkit-padding-start: 2px;
list-style: none;
diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css
index cdea7fe..901fe1f 100644
--- a/WebCore/inspector/front-end/networkPanel.css
+++ b/WebCore/inspector/front-end/networkPanel.css
@@ -26,10 +26,17 @@
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;
}
@@ -38,17 +45,38 @@
}
.network.panel .data-grid .data-container {
+ top: 31px;
+}
+
+.network.panel .data-grid.small .data-container {
top: 23px;
}
-.network.panel .data-grid td.url-column {
+.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.optional-column {
+.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;
}
@@ -57,12 +85,18 @@
background-image: none;
}
-.network-grid-subtitle {
+.network-cell-subtitle {
font-weight: normal;
color: grey;
}
-.network.panel .data-grid.small .network-grid-subtitle {
+.network-header-subtitle {
+ color: grey;
+}
+
+.network.panel .data-grid.small .network-cell-subtitle,
+.network.panel .data-grid.small .network-header-subtitle
+{
display: none;
}
@@ -357,11 +391,15 @@
.network-event-divider {
position: absolute;
width: 2px;
- top: 0;
+ 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);
}
@@ -373,11 +411,55 @@
.network.panel .resources-dividers-label-bar {
background-color: transparent;
border: none;
- height: 23px;
+ height: 30px;
pointer-events: none;
}
+.network.panel .network-timeline-grid.small .resources-dividers-label-bar {
+ height: 23px;
+}
+
.network.panel .resources-divider-label {
- top: 6px;
+ 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;
+}
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list