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 = {
{
var headerTableColumns = this._headerTableColumnGroup.children;
var numColumns = headerTableColumns.length - 1; // Do not process corner column.
var left = 0;
var left = [];
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.
for (var i = 0; i < numColumns - 1; i++) {
var resizer = this.resizers[i];
......@@ -732,27 +739,24 @@ WebInspector.DataGrid.prototype = {
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) {
resizer.style.removeProperty("display");
if (resizer._position !== left) {
resizer._position = left;
resizer.style.left = left + "px";
if (resizer._position !== left[i]) {
resizer._position = left[i];
resizer.style.left = left[i] + "px";
}
resizer.leftNeighboringColumnIndex = i;
if (previousResizer)
previousResizer.rightNeighboringColumnIndex = i;
previousResizer = resizer;
} else {
if (previousResizer && previousResizer._position !== left) {
previousResizer._position = left;
previousResizer.style.left = left + "px";
if (previousResizer && previousResizer._position !== left[i]) {
previousResizer._position = left[i];
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.rightNeighboringColumnIndex = 0;
}
......
......@@ -184,11 +184,6 @@ WebInspector.NetworkLogView.prototype = {
return [this._dataGrid.scrollContainer];
},
onResize: function()
{
this._updateOffscreenRows();
},
_createTimelineGrid: function()
{
this._timelineGrid = new WebInspector.TimelineGrid();
......@@ -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.
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this);
this._dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
this._patchTimelineHeader();
},
......@@ -429,7 +423,7 @@ WebInspector.NetworkLogView.prototype = {
this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
this._timelineSortSelector.selectedIndex = 0;
this._updateOffscreenRows();
this._updateRows();
this.searchCanceled();
......@@ -457,7 +451,7 @@ WebInspector.NetworkLogView.prototype = {
else
this._timelineGrid.showEventDividers();
this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
this._updateOffscreenRows();
this._updateRows();
},
_createStatusBarItems: function()
......@@ -912,7 +906,6 @@ WebInspector.NetworkLogView.prototype = {
this._timelineGrid.element.classList.remove("small");
}
this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: enabled });
this._updateOffscreenRows();
},
_getPopoverAnchor: function(element)
......@@ -1154,7 +1147,7 @@ WebInspector.NetworkLogView.prototype = {
NetworkAgent.clearBrowserCookies();
},
_updateOffscreenRows: function()
_updateRows: function()
{
var dataTableBody = this._dataGrid.dataTableBody;
var rows = dataTableBody.children;
......@@ -1162,11 +1155,6 @@ WebInspector.NetworkLogView.prototype = {
if (recordsCount < 2)
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.
var unfilteredRowIndex = 0;
for (var i = 0; i < recordsCount - 1; ++i) {
......@@ -1178,14 +1166,6 @@ WebInspector.NetworkLogView.prototype = {
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);
if (rowIsOdd !== row.rowIsOdd) {
row.classList.toggle("odd", rowIsOdd);
......@@ -1403,7 +1383,7 @@ WebInspector.NetworkLogView.prototype = {
for (var i = 0; i < nodes.length; ++i)
this._applyFilter(nodes[i]);
this._updateSummaryBar();
this._updateOffscreenRows();
this._updateRows();
},
jumpToPreviousSearchResult: function()
......@@ -2383,8 +2363,6 @@ WebInspector.NetworkDataGridNode.prototype = {
/** override */
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._methodCell = this._createDivInTD("method");
this._statusCell = this._createDivInTD("status");
......
......@@ -790,13 +790,17 @@ WebInspector.endBatchUpdate = function()
var handlers = WebInspector._postUpdateHandlers;
delete WebInspector._postUpdateHandlers;
var keys = handlers.keys();
for (var i = 0; i < keys.length; ++i) {
var object = keys[i];
var methods = handlers.get(object).keys();
for (var j = 0; j < methods.length; ++j)
methods[j].call(object);
}
window.requestAnimationFrame(function() {
if (WebInspector._coalescingLevel)
return;
var keys = handlers.keys();
for (var i = 0; i < keys.length; ++i) {
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()
WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
{
if (!WebInspector._coalescingLevel) {
method.call(object);
window.requestAnimationFrame(function() {
if (!WebInspector._coalescingLevel)
method.call(object);
});
return;
}
var methods = WebInspector._postUpdateHandlers.get(object);
if (!methods) {
methods = new Map();
......
......@@ -827,6 +827,7 @@ body.platform-linux .source-code {
word-wrap: break-word;
-webkit-user-select: text;
border-top: 1px solid rgb(230, 230, 230);
-webkit-transform: translateZ(0);
}
#console-prompt {
......
......@@ -291,12 +291,11 @@
z-index: 150;
overflow: hidden;
text-align: center;
opacity: 0;
-webkit-transition: opacity 250ms ease-in-out;
visibility: hidden;
}
.network-graph-side:hover .network-graph-label {
opacity: 1;
visibility: visible;
}
.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