Source/devtools/front_end/network/NetworkPanel.js - Issue 297893003: Devtools: DataGrid: do not render hidden columns.

Unified Diff: Source/devtools/front_end/network/NetworkPanel.js

Issue 297893003: Devtools: DataGrid: do not render hidden columns. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Addressed TODO Created 6 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: Source/devtools/front_end/network/NetworkPanel.js

diff --git a/Source/devtools/front_end/network/NetworkPanel.js b/Source/devtools/front_end/network/NetworkPanel.js

index 896bafd0d405125fbe0d1714a0d0da754e77925d..40024e0d6e37c6a54fdc58d5537f43793d4bdc8b 100644

--- a/Source/devtools/front_end/network/NetworkPanel.js

+++ b/Source/devtools/front_end/network/NetworkPanel.js

@@ -344,6 +344,7 @@ WebInspector.NetworkLogView.prototype = {

});

this._dataGrid = new WebInspector.DataGrid(columns);

+ this._updateColumns();

this._dataGrid.setName("networkLog");

this._dataGrid.resizeMethod = WebInspector.DataGrid.ResizeMethod.Last;

this._dataGrid.element.classList.add("network-log-grid");

@@ -735,7 +736,7 @@ WebInspector.NetworkLogView.prototype = {

node = this._createRequestGridNode(request);

this._dataGrid.rootNode().appendChild(node);

}

- node.refreshRequest();

+ node.refresh();

this._applyFilter(node);

if (this.calculator.updateBoundaries(request))

@@ -999,14 +1000,16 @@ WebInspector.NetworkLogView.prototype = {

_updateColumns: function()

{

- var columnsVisibility = this._coulmnsVisibilitySetting.get();

var detailedMode = !!this._detailedMode;

- for (var columnIdentifier in columnsVisibility) {

- var visible = detailedMode && columnsVisibility[columnIdentifier];

- this._dataGrid.setColumnVisible(columnIdentifier, visible);

+ var visibleColumns = {"name": true};

+ if (detailedMode) {

+ visibleColumns["timeline"] = true;

+ var columnsVisibility = this._coulmnsVisibilitySetting.get();

+ for (var columnIdentifier in columnsVisibility)

+ visibleColumns[columnIdentifier] = columnsVisibility[columnIdentifier];

}

- this._dataGrid.setColumnVisible("timeline", detailedMode);

- this._dataGrid.applyColumnWeights();

+ this._dataGrid.setColumnsVisiblity(visibleColumns);

/**

@@ -2413,29 +2416,57 @@ WebInspector.NetworkDataGridNode.prototype = {

/** override */

createCells: function()

{

- this._nameCell = this._createCell("name");

- this._methodCell = this._createCell("method");

- this._statusCell = this._createCell("status");

- this._schemeCell = this._createCell("scheme");

- this._domainCell = this._createCell("domain");

- this._remoteAddressCell = this._createCell("remoteAddress");

- this._typeCell = this._createCell("type");

- this._initiatorCell = this._createCell("initiator");

- this._cookiesCell = this._createCell("cookies");

- this._setCookiesCell = this._createCell("setCookies");

- this._sizeCell = this._createCell("size");

- this._timeCell = this._createCell("time");

- this._responseHeaderCells = {};

- var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderColumns;

- for (var i = 0; i < responseHeaderColumns.length; ++i)

- this._responseHeaderCells[responseHeaderColumns[i]] = this._createCell(responseHeaderColumns[i]);

+ delete this._nameCell;

+ delete this._timelineCell;

+ var element = this._element;

+ element.classList.toggle("network-error-row", this._isFailed());

+ element.classList.toggle("resource-cached", this._request.cached);

+ var typeClassName = "network-type-" + this._request.type.name();

+ if (!element.classList.contains(typeClassName)) {

+ element.removeMatchingStyleClasses("network-type-\\w+");

+ element.classList.add(typeClassName);

+ }

+ WebInspector.DataGridNode.prototype.createCells.call(this);

+ this.refreshGraph(this._parentView.calculator);

+ },

+ /**

+ * @override

+ * @param {string} columnIdentifier

+ * @return {!Element}

+ */

+ createCell: function(columnIdentifier)

+ {

+ var cell = this.createTD(columnIdentifier);

+ switch (columnIdentifier) {

+ case "name": this._renderNameCell(cell); break;

+ case "timeline": this._createTimelineBar(cell); break;

+ case "method": cell.setTextAndTitle(this._request.requestMethod); break;

+ case "scheme": cell.setTextAndTitle(this._request.scheme); break;

+ case "domain": cell.setTextAndTitle(this._request.domain); break;

+ case "remoteAddress": cell.setTextAndTitle(this._request.remoteAddress()); break;

+ case "cookies": cell.setTextAndTitle(this._arrayLength(this._request.requestCookies)); break;

+ case "setCookies": cell.setTextAndTitle(this._arrayLength(this._request.responseCookies)); break;

+ case "type": this._renderTypeCell(cell); break;

+ case "initiator": this._renderInitiatorCell(cell); break;

+ case "size": this._renderSizeCell(cell); break;

+ case "time": this._renderTimeCell(cell); break;

+ default: cell.setTextAndTitle(this._request.responseHeaderValue(columnIdentifier) || ""); break;

+ }

- var timelineCell = this._createCell("timeline");

- this._timelineCell = timelineCell.createChild("div");

- this._createTimelineBar(this._timelineCell);

- this._nameCell.addEventListener("click", this._onClick.bind(this), false);

- this._nameCell.addEventListener("dblclick", this._openInNewTab.bind(this), false);

+ return cell;

+ },

+ /**

+ * @param array {?Array}

+ * @return {string}

+ */

+ _arrayLength: function(array)

+ {

+ return array ? "" + array.length : "";

wasDetached: function()

@@ -2499,6 +2530,9 @@ WebInspector.NetworkDataGridNode.prototype = {

_createTimelineBar: function(cell)

{

+ cell = cell.createChild("div");

+ this._timelineCell = cell;

cell.className = "network-graph-side";

this._barAreaElement = document.createElement("div");

@@ -2527,28 +2561,6 @@ WebInspector.NetworkDataGridNode.prototype = {

cell.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);

- refreshRequest: function()

- {

- this._refreshNameCell();

- this._refreshMethodCell();

- this._refreshStatusCell();

- this._refreshSchemeCell();

- this._refreshDomainCell();

- this._refreshRemoteAddressCell();

- this._refreshTypeCell();

- this._refreshInitiatorCell();

- this._refreshCookiesCell();

- this._refreshSetCookiesCell();

- this._refreshSizeCell();

- this._refreshTimeCell();

- var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderColumns;

- for (var i = 0; i < responseHeaderColumns.length; ++i)

- this._refreshResponseHeaderCell(responseHeaderColumns[i]);

- this._updateElementStyleClasses();

- },

/**

* @return {boolean}

@@ -2557,28 +2569,14 @@ WebInspector.NetworkDataGridNode.prototype = {

return !!this._request.failed || (this._request.statusCode >= 400);

- _updateElementStyleClasses: function()

- {

- var element = this._element;

- element.classList.toggle("network-error-row", this._isFailed());

- element.classList.toggle("resource-cached", this._request.cached);

- var typeClassName = "network-type-" + this._request.type.name();

- if (!element.classList.contains(typeClassName)) {

- element.removeMatchingStyleClasses("network-type-\\w+");

- element.classList.add(typeClassName);

- }

- },

- _refreshResponseHeaderCell: function(headerName)

- {

- var cell = this._responseHeaderCells[headerName];

- var value = this._request.responseHeaderValue(headerName);

- cell.setTextAndTitle(value ? value : "");

- },

- _refreshNameCell: function()

+ /**

+ * @param cell {!Element}

+ */

+ _renderNameCell: function(cell)

{

- this._nameCell.removeChildren();

+ this._nameCell = cell;

+ cell.addEventListener("click", this._onClick.bind(this), false);

+ cell.addEventListener("dblclick", this._openInNewTab.bind(this), false);

if (this._request.type === WebInspector.resourceTypes.Image) {

var previewImage = document.createElement("img");

@@ -2592,149 +2590,123 @@ WebInspector.NetworkDataGridNode.prototype = {

var iconElement = document.createElement("img");

iconElement.className = "icon";

}

- this._nameCell.appendChild(iconElement);

- this._nameCell.appendChild(document.createTextNode(this._request.name()));

- this._appendSubtitle(this._nameCell, this._request.path());

- this._nameCell.title = this._request.url;

+ cell.appendChild(iconElement);

+ cell.appendChild(document.createTextNode(this._request.name()));

+ this._appendSubtitle(cell, this._request.path());

+ cell.title = this._request.url;

- _refreshMethodCell: function()

- {

- this._methodCell.setTextAndTitle(this._request.requestMethod);

- },

- _refreshStatusCell: function()

+ /**

+ * @param cell {!Element}

+ */

+ _renderStatusCell: function(cell)

{

- this._statusCell.removeChildren();

- this._statusCell.classList.toggle("network-dim-cell", !this._isFailed() && (this._request.cached || !this._request.statusCode));

+ cell.classList.toggle("network-dim-cell", !this._isFailed() && (this._request.cached || !this._request.statusCode));

if (this._request.failed && !this._request.canceled) {

var failText = WebInspector.UIString("(failed)");

if (this._request.localizedFailDescription) {

- this._statusCell.appendChild(document.createTextNode(failText));

- this._appendSubtitle(this._statusCell, this._request.localizedFailDescription);

- this._statusCell.title = failText + " " + this._request.localizedFailDescription;

+ cell.appendChild(document.createTextNode(failText));

+ this._appendSubtitle(cell, this._request.localizedFailDescription);

+ cell.title = failText + " " + this._request.localizedFailDescription;

} else

- this._statusCell.setTextAndTitle(failText);

+ cell.setTextAndTitle(failText);

} else if (this._request.statusCode) {

- this._statusCell.appendChild(document.createTextNode("" + this._request.statusCode));

- this._appendSubtitle(this._statusCell, this._request.statusText);

- this._statusCell.title = this._request.statusCode + " " + this._request.statusText;

+ cell.appendChild(document.createTextNode("" + this._request.statusCode));

+ this._appendSubtitle(cell, this._request.statusText);

+ cell.title = this._request.statusCode + " " + this._request.statusText;

} else if (this._request.parsedURL.isDataURL()) {

- this._statusCell.setTextAndTitle(WebInspector.UIString("(data)"));

+ cell.setTextAndTitle(WebInspector.UIString("(data)"));

} else if (this._request.isPingRequest()) {

- this._statusCell.setTextAndTitle(WebInspector.UIString("(ping)"));

+ cell.setTextAndTitle(WebInspector.UIString("(ping)"));

} else if (this._request.canceled) {

- this._statusCell.setTextAndTitle(WebInspector.UIString("(canceled)"));

+ cell.setTextAndTitle(WebInspector.UIString("(canceled)"));

} else if (this._request.finished) {

- this._statusCell.setTextAndTitle(WebInspector.UIString("Finished"));

+ cell.setTextAndTitle(WebInspector.UIString("Finished"));

} else {

- this._statusCell.setTextAndTitle(WebInspector.UIString("(pending)"));

+ cell.setTextAndTitle(WebInspector.UIString("(pending)"));

}

- _refreshSchemeCell: function()

- {

- this._schemeCell.setTextAndTitle(this._request.scheme);

- },

- _refreshDomainCell: function()

- {

- this._domainCell.setTextAndTitle(this._request.domain);

- },

- _refreshRemoteAddressCell: function()

- {

- this._remoteAddressCell.setTextAndTitle(this._request.remoteAddress());

- },

- _refreshTypeCell: function()

+ /**

+ * @param cell {!Element}

+ */

+ _renderTypeCell: function(cell)

{

if (this._request.mimeType) {

- this._typeCell.classList.remove("network-dim-cell");

- this._typeCell.setTextAndTitle(this._request.mimeType);

+ cell.setTextAndTitle(this._request.mimeType);

} else {

- this._typeCell.classList.toggle("network-dim-cell", !this._request.isPingRequest());

- this._typeCell.setTextAndTitle(this._request.requestContentType() || "");

+ cell.classList.toggle("network-dim-cell", !this._request.isPingRequest());

+ cell.setTextAndTitle(this._request.requestContentType() || "");

}

- _refreshInitiatorCell: function()

+ /**

+ * @param cell {!Element}

+ */

+ _renderInitiatorCell: function(cell)

{

- this._initiatorCell.removeChildren();

- this._initiatorCell.classList.remove("network-dim-cell");

- this._initiatorCell.classList.remove("network-script-initiated");

- delete this._initiatorCell.request;

var request = this._request;

var initiator = request.initiatorInfo();

switch (initiator.type) {

case WebInspector.NetworkRequest.InitiatorType.Parser:

- this._initiatorCell.title = initiator.url + ":" + initiator.lineNumber;

- this._initiatorCell.appendChild(WebInspector.linkifyResourceAsNode(initiator.url, initiator.lineNumber - 1));

- this._appendSubtitle(this._initiatorCell, WebInspector.UIString("Parser"));

+ cell.title = initiator.url + ":" + initiator.lineNumber;

+ cell.appendChild(WebInspector.linkifyResourceAsNode(initiator.url, initiator.lineNumber - 1));

+ this._appendSubtitle(cell, WebInspector.UIString("Parser"));

break;

case WebInspector.NetworkRequest.InitiatorType.Redirect:

- this._initiatorCell.title = initiator.url;

+ cell.title = initiator.url;

console.assert(request.redirectSource);

var redirectSource = /** @type {!WebInspector.NetworkRequest} */ (request.redirectSource);

- this._initiatorCell.appendChild(WebInspector.linkifyRequestAsNode(redirectSource));

- this._appendSubtitle(this._initiatorCell, WebInspector.UIString("Redirect"));

+ cell.appendChild(WebInspector.linkifyRequestAsNode(redirectSource));

+ this._appendSubtitle(cell, WebInspector.UIString("Redirect"));

break;

case WebInspector.NetworkRequest.InitiatorType.Script:

var urlElement = this._linkifier.linkifyLocation(request.target(), initiator.url, initiator.lineNumber - 1, initiator.columnNumber - 1);

urlElement.title = "";

- this._initiatorCell.appendChild(urlElement);

- this._appendSubtitle(this._initiatorCell, WebInspector.UIString("Script"));

- this._initiatorCell.classList.add("network-script-initiated");

- this._initiatorCell.request = request;

+ cell.appendChild(urlElement);

+ this._appendSubtitle(cell, WebInspector.UIString("Script"));

+ cell.classList.add("network-script-initiated");

+ cell.request = request;

break;

default:

- this._initiatorCell.title = "";

- this._initiatorCell.classList.add("network-dim-cell");

- this._initiatorCell.setTextAndTitle(WebInspector.UIString("Other"));

+ cell.title = "";

+ cell.classList.add("network-dim-cell");

+ cell.setTextAndTitle(WebInspector.UIString("Other"));

}

- _refreshCookiesCell: function()

- {

- var requestCookies = this._request.requestCookies;

- this._cookiesCell.setTextAndTitle(requestCookies ? "" + requestCookies.length : "");

- },

- _refreshSetCookiesCell: function()

- {

- var responseCookies = this._request.responseCookies;

- this._setCookiesCell.setTextAndTitle(responseCookies ? "" + responseCookies.length : "");

- },

- _refreshSizeCell: function()

+ /**

+ * @param cell {!Element}

alph 2014/05/28 15:25:58 Here and elsewhere: @param {!Element} cell

eustas 2014/05/29 13:09:46 Done.

+ */

+ _renderSizeCell: function(cell)

{

if (this._request.cached) {

- this._sizeCell.setTextAndTitle(WebInspector.UIString("(from cache)"));

- this._sizeCell.classList.add("network-dim-cell");

+ cell.setTextAndTitle(WebInspector.UIString("(from cache)"));

+ cell.classList.add("network-dim-cell");

} else {

var resourceSize = Number.bytesToString(this._request.resourceSize);

var transferSize = Number.bytesToString(this._request.transferSize);

- this._sizeCell.setTextAndTitle(transferSize);

- this._sizeCell.classList.remove("network-dim-cell");

- this._appendSubtitle(this._sizeCell, resourceSize);

+ cell.setTextAndTitle(transferSize);

+ this._appendSubtitle(cell, resourceSize);

}

- _refreshTimeCell: function()

+ /**

+ * @param cell {!Element}

+ */

+ _renderTimeCell: function(cell)

{

if (this._request.duration > 0) {

- this._timeCell.classList.remove("network-dim-cell");

- this._timeCell.setTextAndTitle(Number.secondsToString(this._request.duration));

- this._appendSubtitle(this._timeCell, Number.secondsToString(this._request.latency));

+ cell.setTextAndTitle(Number.secondsToString(this._request.duration));

+ this._appendSubtitle(cell, Number.secondsToString(this._request.latency));

} else {

- this._timeCell.classList.add("network-dim-cell");

- this._timeCell.setTextAndTitle(WebInspector.UIString("Pending"));

+ cell.classList.add("network-dim-cell");

+ cell.setTextAndTitle(WebInspector.UIString("Pending"));

}

@@ -2748,6 +2720,9 @@ WebInspector.NetworkDataGridNode.prototype = {

refreshGraph: function(calculator)

{

+ if (!this._timelineCell)

+ return;

var percentages = calculator.computeBarGraphPercentages(this._request);

this._percentages = percentages;

« no previous file with comments | « no previous file | Source/devtools/front_end/ui/DataGrid.js » ('j') | Source/devtools/front_end/ui/DataGrid.js » ('J')