Devtools: DataGrid: do not render hidden columns.

Source/devtools/front_end/network/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 326 matching lines @@
         columns.push({
             id: "timeline",
             titleDOMFragment: document.createDocumentFragment(),
             title: WebInspector.UIString("Timeline"),
             sortable: false,
             weight: 40,
             sort: WebInspector.DataGrid.Order.Ascending
         });
 
         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");
         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
         this._dataGrid.show(this.element);
 
         // 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);
 
@@ skipping 371 matching lines @@
         }
 
         for (var requestId in this._staleRequests) {
             var request = this._staleRequests[requestId];
             var node = this._requestGridNode(request);
             if (!node) {
                 // Create the timeline tree element and graph.
                 node = this._createRequestGridNode(request);
                 this._dataGrid.rootNode().appendChild(node);
             }
-            node.refreshRequest();
+            node.refresh();
             this._applyFilter(node);
 
             if (this.calculator.updateBoundaries(request))
                 boundariesChanged = true;
 
             if (!node.isFilteredOut())
                 this._updateHighlightIfMatched(request);
         }
 
         if (boundariesChanged) {
@@ skipping 243 matching lines @@
             row.createChild("td").textContent = stackFrame.functionName || WebInspector.UIString("(anonymous function)");
             row.createChild("td").textContent = " @ ";
             row.createChild("td").appendChild(this._linkifier.linkifyLocation(request.target(), stackFrame.url, stackFrame.lineNumber - 1, stackFrame.columnNumber - 1));
             framesTable.appendChild(row);
         }
         return framesTable;
     },
 
     _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);
     },
 
     /**
      * @param {string} columnIdentifier
      */
     _toggleColumnVisibility: function(columnIdentifier)
     {
         var columnsVisibility = this._coulmnsVisibilitySetting.get();
         columnsVisibility[columnIdentifier] = !columnsVisibility[columnIdentifier];
         this._coulmnsVisibilitySetting.set(columnsVisibility);
@@ skipping 1386 matching lines @@
     WebInspector.DataGridNode.call(this, {});
     this._parentView = parentView;
     this._request = request;
     this._linkifier = new WebInspector.Linkifier();
 }
 
 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");
+        delete this._nameCell;
+        delete this._timelineCell;
 
-        this._responseHeaderCells = {};
-        var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderColumns;
-        for (var i = 0; i < responseHeaderColumns.length; ++i)
-            this._responseHeaderCells[responseHeaderColumns[i]] = this._createCell(responseHeaderColumns[i]);
+        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);
+        }
 
-        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);
+        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;
+        }
+
+        return cell;
+    },
+
+    /**
+     * @param array {?Array}
+     * @return {string}
+     */
+    _arrayLength: function(array)
+    {
+        return array ? "" + array.length : "";
     },
 
     wasDetached: function()
     {
         this._linkifier.reset();
     },
 
     /**
      * @return {boolean}
      */
@@ skipping 31 matching lines @@
     _openInNewTab: function()
     {
         InspectorFrontendHost.openInNewTab(this._request.url);
     },
 
     get selectable()
     {
         return this._parentView._allowRequestSelection && !this.isFilteredOut();
     },
 
     _createCell: function(columnIdentifier)

[alph, 2014/05/28 15:25:58]

nuke this

[eustas, 2014/05/29 13:09:46]

Done.

     {
         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");
         //    this._barAreaElement.className = "network-graph-bar-area hidden";
         this._barAreaElement.className = "network-graph-bar-area";
         this._barAreaElement.request = this._request;
         cell.appendChild(this._barAreaElement);
 
         this._barLeftElement = document.createElement("div");
         this._barLeftElement.className = "network-graph-bar waiting";
         this._barAreaElement.appendChild(this._barLeftElement);
 
         this._barRightElement = document.createElement("div");
         this._barRightElement.className = "network-graph-bar";
         this._barAreaElement.appendChild(this._barRightElement);
 
 
         this._labelLeftElement = document.createElement("div");
         this._labelLeftElement.className = "network-graph-label waiting";
         this._barAreaElement.appendChild(this._labelLeftElement);
 
         this._labelRightElement = document.createElement("div");
         this._labelRightElement.className = "network-graph-label";
         this._barAreaElement.appendChild(this._labelRightElement);
 
         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}
      */
     _isFailed: function()
     {
         return !!this._request.failed || (this._request.statusCode >= 400);
     },
 
-    _updateElementStyleClasses: function()
+    /**
+     * @param cell {!Element}
+     */
+    _renderNameCell: function(cell)
     {
-        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()
-    {
-        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");
             previewImage.className = "image-network-icon-preview";
             this._request.populateImageSource(previewImage);
 
             var iconElement = document.createElement("div");
             iconElement.className = "icon";
             iconElement.appendChild(previewImage);
         } else {
             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()
+    /**
+     * @param cell {!Element}
+     */
+    _renderStatusCell: function(cell)
     {
-        this._methodCell.setTextAndTitle(this._request.requestMethod);
-    },
-
-    _refreshStatusCell: function()
-    {
-        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"));
         }
     },
 
     _appendSubtitle: function(cellElement, subtitleText)
     {
         var subtitleElement = document.createElement("div");
         subtitleElement.className = "network-cell-subtitle";
         subtitleElement.textContent = subtitleText;
         cellElement.appendChild(subtitleElement);
     },
 
     refreshGraph: function(calculator)
     {
+        if (!this._timelineCell)
+            return;
+
         var percentages = calculator.computeBarGraphPercentages(this._request);
         this._percentages = percentages;
 
         this._barAreaElement.classList.remove("hidden");
 
         this._barLeftElement.style.setProperty("left", percentages.start + "%");
         this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
 
         this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
         this._barRightElement.style.setProperty("left", percentages.middle + "%");
@@ skipping 157 matching lines @@
 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyName, revert, a, b)
 {
     var aValue = a._request[propertyName];
     var bValue = b._request[propertyName];
     if (aValue > bValue)
         return revert ? -1 : 1;
     if (bValue > aValue)
         return revert ? 1 : -1;
     return 0;
 }