Devtools: DataGrid: do not render hidden columns.

Source/devtools/front_end/network/NetworkPanel.js

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 c308e3c034537538294459097119df671724336c..c695eb1a9b5937040c2027d5971469f5a50aae39 100644
--- a/Source/devtools/front_end/network/NetworkPanel.js
+++ b/Source/devtools/front_end/network/NetworkPanel.js
@@ -345,6 +345,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");
@@ -736,7 +737,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))
@@ -1000,14 +1001,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);
     },
 
     /**
@@ -2414,29 +2417,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;

[yurys, 2014/05/30 11:31:46]

this._nameCell = null;

[eustas, 2014/06/02 08:51:47]

Done.

+        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()
@@ -2488,18 +2519,14 @@ WebInspector.NetworkDataGridNode.prototype = {
         return this._parentView._allowRequestSelection && !this.isFilteredOut();
     },
 
-    _createCell: function(columnIdentifier)
-    {
-        var td = this.createTD(columnIdentifier);
-        this._element.appendChild(td);
-        return td;
-    },
-
     /**
      * @param {!Element} cell
      */
     _createTimelineBar: function(cell)
     {
+        cell = cell.createChild("div");
+        this._timelineCell = cell;
+
         cell.className = "network-graph-side";
 
         this._barAreaElement = document.createElement("div");
@@ -2528,28 +2555,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}
      */
@@ -2558,28 +2563,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 {!Element} cell
+     */
+    _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");
@@ -2593,149 +2584,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 {!Element} cell
+     */
+    _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 {!Element} cell
+     */
+    _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 {!Element} cell
+     */
+    _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 {!Element} cell
+     */
+    _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 {!Element} cell
+     */
+    _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"));
         }
     },
 
@@ -2749,6 +2714,9 @@ WebInspector.NetworkDataGridNode.prototype = {
 
     refreshGraph: function(calculator)
     {
+        if (!this._timelineCell)
+            return;
+
         var percentages = calculator.computeBarGraphPercentages(this._request);
         this._percentages = percentages;