Modified: trunk/Source/WebCore/ChangeLog (139451 => 139452)
--- trunk/Source/WebCore/ChangeLog 2013-01-11 17:08:45 UTC (rev 139451)
+++ trunk/Source/WebCore/ChangeLog 2013-01-11 17:09:21 UTC (rev 139452)
@@ -1,3 +1,19 @@
+2013-01-11 Eugene Klyuchnikov <[email protected]>
+
+ Web Inspector: [Resources] Make grid columns set configurable.
+ https://bugs.webkit.org/show_bug.cgi?id=105739
+
+ Reviewed by Pavel Feldman.
+
+ Added context menu on grid header to hide/show grid columns.
+ Hidden columns set is persisted.
+
+ * inspector/front-end/DataGrid.js:
+ Fixed show/hide behavior, introduced weight control.
+ * inspector/front-end/NetworkPanel.js:
+ Added member to track visibility of columns in detailerd mode. Added
+ context menu for grid header.
+
2013-01-11 Andras Becsi <[email protected]>
[Qt] Fix the build if libxslt is not available but libxml2 is
Modified: trunk/Source/WebCore/inspector/front-end/DataGrid.js (139451 => 139452)
--- trunk/Source/WebCore/inspector/front-end/DataGrid.js 2013-01-11 17:08:45 UTC (rev 139451)
+++ trunk/Source/WebCore/inspector/front-end/DataGrid.js 2013-01-11 17:09:21 UTC (rev 139452)
@@ -588,73 +588,50 @@
this.dispatchEventToListeners("width changed");
},
- columnWidthsMap: function()
+ applyColumnWeights: function()
{
- var result = {};
- for (var i = 0; i < this._columnsArray.length; ++i) {
- var width = this._headerTableColumnGroup.children[i].style.width;
- result[this._columnsArray[i].columnIdentifier] = parseFloat(width);
+ var sumOfWeights = 0.0;
+ for (var columnIdentifier in this.columns) {
+ if (this.isColumnVisible(columnIdentifier))
+ sumOfWeights += this.columns[columnIdentifier].weight;
}
- return result;
- },
+ var factor = 100 / sumOfWeights;
- applyColumnWidthsMap: function(columnWidthsMap)
- {
for (var columnIdentifier in this.columns) {
var column = this.columns[columnIdentifier];
- var width = (columnWidthsMap[columnIdentifier] || 0) + "%";
+ var width = this.isColumnVisible(columnIdentifier) ? ((factor * column.weight) + "%"): "0%";
this._headerTableColumnGroup.children[column.ordinal].style.width = width;
this._dataTableColumnGroup.children[column.ordinal].style.width = width;
}
- // Normalize widths
- delete this._columnWidthsInitialized;
- this.updateWidths();
+ this._positionResizers();
+ this.dispatchEventToListeners("width changed");
},
+ /**
+ * @param {string} columnIdentifier
+ */
isColumnVisible: function(columnIdentifier)
{
- var column = this.columns[columnIdentifier];
- var columnElement = column.element;
- return !columnElement.hidden;
+ return !this.columns[columnIdentifier].hidden;
},
- showColumn: function(columnIdentifier)
+ /**
+ * @param {string} columnIdentifier
+ * @param {boolean} visible
+ */
+ setColumnVisible: function(columnIdentifier, visible)
{
- var column = this.columns[columnIdentifier];
- var columnElement = column.element;
- if (!columnElement.hidden)
+ if (visible === !this.columns[columnIdentifier].hidden)
return;
- columnElement.hidden = false;
- columnElement.removeStyleClass("hidden");
-
- var columnBodyElement = column.bodyElement;
- columnBodyElement.hidden = false;
- columnBodyElement.removeStyleClass("hidden");
+ this.columns[columnIdentifier].hidden = !visible;
+ if (visible)
+ this.element.removeStyleClass("hide-" + columnIdentifier + "-column");
+ else
+ this.element.addStyleClass("hide-" + columnIdentifier + "-column");
},
- hideColumn: function(columnIdentifier)
- {
- var column = this.columns[columnIdentifier];
- var columnElement = column.element;
- if (columnElement.hidden)
- return;
-
- var oldWidth = parseFloat(columnElement.style.width);
-
- columnElement.hidden = true;
- columnElement.addStyleClass("hidden");
- columnElement.style.width = 0;
-
- var columnBodyElement = column.bodyElement;
- columnBodyElement.hidden = true;
- columnBodyElement.addStyleClass("hidden");
- columnBodyElement.style.width = 0;
-
- this._columnWidthsInitialized = false;
- },
-
get scrollContainer()
{
return this._scrollContainer;
@@ -697,8 +674,7 @@
// it is not possible to query a column for its width.
left += this.headerTableBody.rows[0].cells[i].offsetWidth;
- var columnIsVisible = !this._headerTableColumnGroup.children[i].hidden;
- if (columnIsVisible) {
+ if (!this._columnsArray[i].hidden) {
resizer.style.removeProperty("display");
resizer.style.left = left + "px";
resizer.leftNeighboringColumnIndex = i;
@@ -1028,6 +1004,15 @@
this._headerTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;
this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;
+ var leftColumn = this._columnsArray[leftCellIndex];
+ var rightColumn = this._columnsArray[rightCellIndex];
+ if (leftColumn.weight || rightColumn.weight) {
+ var sumOfWeights = leftColumn.weight + rightColumn.weight;
+ var delta = rightEdgeOfNextColumn - leftEdgeOfPreviousColumn;
+ leftColumn.weight = (dragPoint - leftEdgeOfPreviousColumn) * sumOfWeights / delta;
+ rightColumn.weight = (rightEdgeOfNextColumn - dragPoint) * sumOfWeights / delta;
+ }
+
this._positionResizers();
event.preventDefault();
this.dispatchEventToListeners("width changed");
Modified: trunk/Source/WebCore/inspector/front-end/NetworkPanel.js (139451 => 139452)
--- trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2013-01-11 17:08:45 UTC (rev 139451)
+++ trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2013-01-11 17:09:21 UTC (rev 139452)
@@ -42,12 +42,14 @@
/**
* @constructor
* @extends {WebInspector.View}
+ * @param {WebInspector.Setting} coulmnsVisibilitySetting
*/
-WebInspector.NetworkLogView = function()
+WebInspector.NetworkLogView = function(coulmnsVisibilitySetting)
{
WebInspector.View.call(this);
this.registerRequiredCSS("networkLogView.css");
+ this._coulmnsVisibilitySetting = coulmnsVisibilitySetting;
this._allowRequestSelection = false;
this._requests = [];
this._requestsById = {};
@@ -93,6 +95,8 @@
WebInspector.networkLog.requests.forEach(this._appendRequest.bind(this));
}
+WebInspector.NetworkLogView._defaultColumnsVisivility = {method: true, status: true, type: true, initiator: true, size: true, time: true};
+
WebInspector.NetworkLogView.prototype = {
_initializeView: function()
{
@@ -156,39 +160,44 @@
var columns = {name: {}, method: {}, status: {}, type: {}, initiator: {}, size: {}, time: {}, timeline: {}};
columns.name.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Name"), WebInspector.UIString("Path"));
+ columns.name.name = WebInspector.UIString("Name");
columns.name.sortable = true;
- columns.name.width = "20%";
+ columns.name.weight = 20;
columns.name.disclosure = true;
columns.method.title = WebInspector.UIString("Method");
columns.method.sortable = true;
- columns.method.width = "6%";
+ columns.method.weight = 6;
columns.status.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Status"), WebInspector.UIString("Text"));
+ columns.status.name = WebInspector.UIString("Status");
columns.status.sortable = true;
- columns.status.width = "6%";
+ columns.status.weight = 6;
columns.type.title = WebInspector.UIString("Type");
columns.type.sortable = true;
- columns.type.width = "6%";
+ columns.type.weight = 6;
columns.initiator.title = WebInspector.UIString("Initiator");
columns.initiator.sortable = true;
- columns.initiator.width = "10%";
+ columns.initiator.weight = 10;
columns.size.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Size"), WebInspector.UIString("Content"));
+ columns.size.name = WebInspector.UIString("Size");
columns.size.sortable = true;
- columns.size.width = "6%";
+ columns.size.weight = 6;
columns.size.aligned = "right";
columns.time.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Time"), WebInspector.UIString("Latency"));
+ columns.time.name = WebInspector.UIString("Time");
columns.time.sortable = true;
- columns.time.width = "6%";
+ columns.time.weight = 6;
columns.time.aligned = "right";
columns.timeline.title = "";
+ columns.timeline.name = WebInspector.UIString("Timeline");
columns.timeline.sortable = false;
- columns.timeline.width = "40%";
+ columns.timeline.weight = 40;
columns.timeline.sort = "ascending";
this._dataGrid = new WebInspector.DataGrid(columns);
@@ -856,45 +865,16 @@
this._dataGrid.selectedNode.selected = false;
this.element.removeStyleClass("brief-mode");
-
- this._dataGrid.showColumn("method");
- this._dataGrid.showColumn("status");
- this._dataGrid.showColumn("type");
- this._dataGrid.showColumn("initiator");
- this._dataGrid.showColumn("size");
- this._dataGrid.showColumn("time");
- this._dataGrid.showColumn("timeline");
-
- var widths = {};
- widths.name = 20;
- widths.method = 6;
- widths.status = 6;
- widths.type = 6;
- widths.initiator = 10;
- widths.size = 6;
- widths.time = 6;
- widths.timeline = 40;
-
- this._dataGrid.applyColumnWidthsMap(widths);
+ this._detailedMode = true;
+ this._updateColumns();
},
switchToBriefView: function()
{
this.element.addStyleClass("brief-mode");
this._removeAllNodeHighlights();
-
- this._dataGrid.hideColumn("method");
- this._dataGrid.hideColumn("status");
- this._dataGrid.hideColumn("type");
- this._dataGrid.hideColumn("initiator");
- this._dataGrid.hideColumn("size");
- this._dataGrid.hideColumn("time");
- this._dataGrid.hideColumn("timeline");
-
- var widths = {};
- widths.name = 100;
- this._dataGrid.applyColumnWidthsMap(widths);
-
+ this._detailedMode = false;
+ this._updateColumns();
this._popoverHelper.hidePopover();
},
@@ -967,9 +947,44 @@
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);
+ }
+ this._dataGrid.setColumnVisible("timeline", detailedMode);
+ this._dataGrid.applyColumnWeights();
+ },
+
+ /**
+ * @param {string} columnIdentifier
+ */
+ _toggleColumnVisibility: function(columnIdentifier)
+ {
+ var columnsVisibility = this._coulmnsVisibilitySetting.get();
+ columnsVisibility[columnIdentifier] = !columnsVisibility[columnIdentifier];
+ this._coulmnsVisibilitySetting.set(columnsVisibility);
+
+ this._updateColumns();
+ },
+
_contextMenu: function(event)
{
var contextMenu = new WebInspector.ContextMenu(event);
+
+ if (this._detailedMode && event.target.isSelfOrDescendant(this._dataGrid.headerTableBody)) {
+ var columnsVisibility = this._coulmnsVisibilitySetting.get();
+ for (var columnIdentifier in columnsVisibility) {
+ var column = this._dataGrid.columns[columnIdentifier];
+ contextMenu.appendCheckboxItem(column.name || column.title, this._toggleColumnVisibility.bind(this, columnIdentifier), !!columnsVisibility[columnIdentifier]);
+ }
+ contextMenu.show();
+ return;
+ }
+
var gridNode = this._dataGrid.dataGridNodeFromNode(event.target);
var request = gridNode && gridNode._request;
@@ -1323,11 +1338,20 @@
{
WebInspector.Panel.call(this, "network");
this.registerRequiredCSS("networkPanel.css");
+ this._injectStyles();
this.createSidebarView();
this.splitView.hideMainElement();
- this._networkLogView = new WebInspector.NetworkLogView();
+ var defaultColumnsVisibility = WebInspector.NetworkLogView._defaultColumnsVisivility;
+ var networkLogColumnsVisibilitySetting = WebInspector.settings.createSetting("networkLogColumnsVisibility", defaultColumnsVisibility);
+ var savedColumnsVisibility = networkLogColumnsVisibilitySetting.get();
+ var columnsVisibility = {};
+ for (var columnId in defaultColumnsVisibility)
+ columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(columnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId];
+ networkLogColumnsVisibilitySetting.set(columnsVisibility);
+
+ this._networkLogView = new WebInspector.NetworkLogView(networkLogColumnsVisibilitySetting);
this._networkLogView.show(this.sidebarElement);
this._viewsContainerElement = this.splitView.mainElement;
@@ -1562,6 +1586,21 @@
contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Reveal in network panel" : "Reveal in Network Panel"), reveal.bind(this));
},
+ _injectStyles: function()
+ {
+ var style = document.createElement("style");
+ var rules = [];
+
+ var columns = WebInspector.NetworkLogView._defaultColumnsVisivility;
+ var columnSelectors = [];
+ for (var columnId in columns)
+ columnSelectors.push("#network-container .hide-" + columnId + "-column ." + columnId + "-column");
+ rules.push(columnSelectors.join(", ") + "{border-right: 0 none transparent;}");
+
+ style.textContent = rules.join("\n");
+ document.head.appendChild(style);
+ },
+
__proto__: WebInspector.Panel.prototype
}
