Commit 17d70e6e authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

DevTools: speed up network scrolling and layout.

(still needs a lot of work)

Review URL: https://codereview.chromium.org/207553010

git-svn-id: svn://svn.chromium.org/blink/trunk@170024 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 72f488e0
...@@ -714,9 +714,16 @@ WebInspector.DataGrid.prototype = { ...@@ -714,9 +714,16 @@ WebInspector.DataGrid.prototype = {
{ {
var headerTableColumns = this._headerTableColumnGroup.children; var headerTableColumns = this._headerTableColumnGroup.children;
var numColumns = headerTableColumns.length - 1; // Do not process corner column. var numColumns = headerTableColumns.length - 1; // Do not process corner column.
var left = 0; var left = [];
var previousResizer = null; var previousResizer = null;
for (var i = 0; i < numColumns - 1; i++) {
// Get the width of the cell in the first (and only) row of the
// header table in order to determine the width of the column, since
// it is not possible to query a column for its width.
left[i] = (left[i-1] || 0) + this.headerTableBody.rows[0].cells[i].offsetWidth;
}
// Make n - 1 resizers for n columns. // Make n - 1 resizers for n columns.
for (var i = 0; i < numColumns - 1; i++) { for (var i = 0; i < numColumns - 1; i++) {
var resizer = this.resizers[i]; var resizer = this.resizers[i];
...@@ -732,27 +739,24 @@ WebInspector.DataGrid.prototype = { ...@@ -732,27 +739,24 @@ WebInspector.DataGrid.prototype = {
this.resizers[i] = resizer; this.resizers[i] = resizer;
} }
// Get the width of the cell in the first (and only) row of the
// 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;
if (!this._columnsArray[i].hidden) { if (!this._columnsArray[i].hidden) {
resizer.style.removeProperty("display"); resizer.style.removeProperty("display");
if (resizer._position !== left) { if (resizer._position !== left[i]) {
resizer._position = left; resizer._position = left[i];
resizer.style.left = left + "px"; resizer.style.left = left[i] + "px";
} }
resizer.leftNeighboringColumnIndex = i; resizer.leftNeighboringColumnIndex = i;
if (previousResizer) if (previousResizer)
previousResizer.rightNeighboringColumnIndex = i; previousResizer.rightNeighboringColumnIndex = i;
previousResizer = resizer; previousResizer = resizer;
} else { } else {
if (previousResizer && previousResizer._position !== left) { if (previousResizer && previousResizer._position !== left[i]) {
previousResizer._position = left; previousResizer._position = left[i];
previousResizer.style.left = left + "px"; previousResizer.style.left = left[i] + "px";
} }
resizer.style.setProperty("display", "none"); if (resizer.style.getPropertyValue("display") !== "none")
resizer.style.setProperty("display", "none");
resizer.leftNeighboringColumnIndex = 0; resizer.leftNeighboringColumnIndex = 0;
resizer.rightNeighboringColumnIndex = 0; resizer.rightNeighboringColumnIndex = 0;
} }
......
...@@ -184,11 +184,6 @@ WebInspector.NetworkLogView.prototype = { ...@@ -184,11 +184,6 @@ WebInspector.NetworkLogView.prototype = {
return [this._dataGrid.scrollContainer]; return [this._dataGrid.scrollContainer];
}, },
onResize: function()
{
this._updateOffscreenRows();
},
_createTimelineGrid: function() _createTimelineGrid: function()
{ {
this._timelineGrid = new WebInspector.TimelineGrid(); this._timelineGrid = new WebInspector.TimelineGrid();
...@@ -325,7 +320,6 @@ WebInspector.NetworkLogView.prototype = { ...@@ -325,7 +320,6 @@ WebInspector.NetworkLogView.prototype = {
// Event listeners need to be added _after_ we attach to the document, so that owner document is properly update. // Event listeners need to be added _after_ we attach to the document, so that owner document is properly update.
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this); this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this); this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this);
this._dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
this._patchTimelineHeader(); this._patchTimelineHeader();
}, },
...@@ -429,7 +423,7 @@ WebInspector.NetworkLogView.prototype = { ...@@ -429,7 +423,7 @@ WebInspector.NetworkLogView.prototype = {
this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending()); this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
this._timelineSortSelector.selectedIndex = 0; this._timelineSortSelector.selectedIndex = 0;
this._updateOffscreenRows(); this._updateRows();
this.searchCanceled(); this.searchCanceled();
...@@ -457,7 +451,7 @@ WebInspector.NetworkLogView.prototype = { ...@@ -457,7 +451,7 @@ WebInspector.NetworkLogView.prototype = {
else else
this._timelineGrid.showEventDividers(); this._timelineGrid.showEventDividers();
this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending); this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
this._updateOffscreenRows(); this._updateRows();
}, },
_createStatusBarItems: function() _createStatusBarItems: function()
...@@ -912,7 +906,6 @@ WebInspector.NetworkLogView.prototype = { ...@@ -912,7 +906,6 @@ WebInspector.NetworkLogView.prototype = {
this._timelineGrid.element.classList.remove("small"); this._timelineGrid.element.classList.remove("small");
} }
this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: enabled }); this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: enabled });
this._updateOffscreenRows();
}, },
_getPopoverAnchor: function(element) _getPopoverAnchor: function(element)
...@@ -1154,7 +1147,7 @@ WebInspector.NetworkLogView.prototype = { ...@@ -1154,7 +1147,7 @@ WebInspector.NetworkLogView.prototype = {
NetworkAgent.clearBrowserCookies(); NetworkAgent.clearBrowserCookies();
}, },
_updateOffscreenRows: function() _updateRows: function()
{ {
var dataTableBody = this._dataGrid.dataTableBody; var dataTableBody = this._dataGrid.dataTableBody;
var rows = dataTableBody.children; var rows = dataTableBody.children;
...@@ -1162,11 +1155,6 @@ WebInspector.NetworkLogView.prototype = { ...@@ -1162,11 +1155,6 @@ WebInspector.NetworkLogView.prototype = {
if (recordsCount < 2) if (recordsCount < 2)
return; // Filler row only. return; // Filler row only.
var visibleTop = this._dataGrid.scrollContainer.scrollTop;
var visibleBottom = visibleTop + this._dataGrid.scrollContainer.offsetHeight;
var rowHeight = 0;
// Filler is at recordsCount - 1. // Filler is at recordsCount - 1.
var unfilteredRowIndex = 0; var unfilteredRowIndex = 0;
for (var i = 0; i < recordsCount - 1; ++i) { for (var i = 0; i < recordsCount - 1; ++i) {
...@@ -1178,14 +1166,6 @@ WebInspector.NetworkLogView.prototype = { ...@@ -1178,14 +1166,6 @@ WebInspector.NetworkLogView.prototype = {
continue; continue;
} }
if (!rowHeight)
rowHeight = row.offsetHeight;
var rowIsVisible = unfilteredRowIndex * rowHeight < visibleBottom && (unfilteredRowIndex + 1) * rowHeight > visibleTop;
if (rowIsVisible !== row.rowIsVisible) {
row.classList.toggle("offscreen", !rowIsVisible);
row.rowIsVisible = rowIsVisible;
}
var rowIsOdd = !!(unfilteredRowIndex & 1); var rowIsOdd = !!(unfilteredRowIndex & 1);
if (rowIsOdd !== row.rowIsOdd) { if (rowIsOdd !== row.rowIsOdd) {
row.classList.toggle("odd", rowIsOdd); row.classList.toggle("odd", rowIsOdd);
...@@ -1403,7 +1383,7 @@ WebInspector.NetworkLogView.prototype = { ...@@ -1403,7 +1383,7 @@ WebInspector.NetworkLogView.prototype = {
for (var i = 0; i < nodes.length; ++i) for (var i = 0; i < nodes.length; ++i)
this._applyFilter(nodes[i]); this._applyFilter(nodes[i]);
this._updateSummaryBar(); this._updateSummaryBar();
this._updateOffscreenRows(); this._updateRows();
}, },
jumpToPreviousSearchResult: function() jumpToPreviousSearchResult: function()
...@@ -2383,8 +2363,6 @@ WebInspector.NetworkDataGridNode.prototype = { ...@@ -2383,8 +2363,6 @@ WebInspector.NetworkDataGridNode.prototype = {
/** override */ /** override */
createCells: function() createCells: function()
{ {
// Out of sight, out of mind: create nodes offscreen to save on render tree update times when running updateOffscreenRows()
this._element.classList.add("offscreen");
this._nameCell = this._createDivInTD("name"); this._nameCell = this._createDivInTD("name");
this._methodCell = this._createDivInTD("method"); this._methodCell = this._createDivInTD("method");
this._statusCell = this._createDivInTD("status"); this._statusCell = this._createDivInTD("status");
......
...@@ -790,13 +790,17 @@ WebInspector.endBatchUpdate = function() ...@@ -790,13 +790,17 @@ WebInspector.endBatchUpdate = function()
var handlers = WebInspector._postUpdateHandlers; var handlers = WebInspector._postUpdateHandlers;
delete WebInspector._postUpdateHandlers; delete WebInspector._postUpdateHandlers;
var keys = handlers.keys(); window.requestAnimationFrame(function() {
for (var i = 0; i < keys.length; ++i) { if (WebInspector._coalescingLevel)
var object = keys[i]; return;
var methods = handlers.get(object).keys(); var keys = handlers.keys();
for (var j = 0; j < methods.length; ++j) for (var i = 0; i < keys.length; ++i) {
methods[j].call(object); var object = keys[i];
} var methods = handlers.get(object).keys();
for (var j = 0; j < methods.length; ++j)
methods[j].call(object);
}
});
} }
/** /**
...@@ -806,10 +810,13 @@ WebInspector.endBatchUpdate = function() ...@@ -806,10 +810,13 @@ WebInspector.endBatchUpdate = function()
WebInspector.invokeOnceAfterBatchUpdate = function(object, method) WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
{ {
if (!WebInspector._coalescingLevel) { if (!WebInspector._coalescingLevel) {
method.call(object); window.requestAnimationFrame(function() {
if (!WebInspector._coalescingLevel)
method.call(object);
});
return; return;
} }
var methods = WebInspector._postUpdateHandlers.get(object); var methods = WebInspector._postUpdateHandlers.get(object);
if (!methods) { if (!methods) {
methods = new Map(); methods = new Map();
......
...@@ -827,6 +827,7 @@ body.platform-linux .source-code { ...@@ -827,6 +827,7 @@ body.platform-linux .source-code {
word-wrap: break-word; word-wrap: break-word;
-webkit-user-select: text; -webkit-user-select: text;
border-top: 1px solid rgb(230, 230, 230); border-top: 1px solid rgb(230, 230, 230);
-webkit-transform: translateZ(0);
} }
#console-prompt { #console-prompt {
......
...@@ -291,12 +291,11 @@ ...@@ -291,12 +291,11 @@
z-index: 150; z-index: 150;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
opacity: 0; visibility: hidden;
-webkit-transition: opacity 250ms ease-in-out;
} }
.network-graph-side:hover .network-graph-label { .network-graph-side:hover .network-graph-label {
opacity: 1; visibility: visible;
} }
.network-graph-label:empty { .network-graph-label:empty {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment