Commit 8cb9c735 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

2010-02-05 Pavel Feldman <pfeldman@chromium.org>

        Reviewed by Timothy Hatcher.

        Web Inspector: simplify cookies view, introduce DataGrid::autoSizeColumns.

        https://bugs.webkit.org/show_bug.cgi?id=34646

        * inspector/front-end/CookieItemsView.js:
        (WebInspector.CookieItemsView):
        (WebInspector.CookieItemsView.prototype.show):
        (WebInspector.CookieItemsView.prototype._update):
        (WebInspector.CookieItemsView.prototype._updateWithCookies):
        (WebInspector.CookieItemsView.prototype._filterCookiesForDomain):
        (WebInspector.CookieItemsView.prototype._createDataGrid):
        (WebInspector.CookieItemsView.prototype._populateDataGrid.expiresCompare):
        (WebInspector.CookieItemsView.prototype._populateDataGrid):
        (WebInspector.CookieItemsView.prototype._createSimpleDataGrid):
        (WebInspector.CookieItemsView.prototype._populateSimpleDataGrid):
        (WebInspector.CookieItemsView.prototype._deleteCookieCallback):
        (WebInspector.CookieItemsView.prototype._refreshButtonClicked):
        * inspector/front-end/DOMStorageItemsView.js:
        (WebInspector.DOMStorageItemsView.prototype._showDOMStorageEntries):
        (WebInspector.DOMStorageItemsView.prototype._dataGridForDOMStorageEntries):
        * inspector/front-end/DataGrid.js:
        (WebInspector.DataGrid):
        (WebInspector.DataGrid.prototype.autoSizeColumns):
        * inspector/front-end/DatabaseQueryView.js:
        (WebInspector.DatabaseQueryView.prototype._queryFinished):
        * inspector/front-end/DatabaseTableView.js:
        (WebInspector.DatabaseTableView.prototype._queryFinished):
        * inspector/front-end/StoragePanel.js:
        (WebInspector.StoragePanel.prototype.dataGridForResult):


git-svn-id: svn://svn.chromium.org/blink/trunk@54436 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent de3b60df
2010-02-05 Pavel Feldman <pfeldman@chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: simplify cookies view, introduce DataGrid::autoSizeColumns.
https://bugs.webkit.org/show_bug.cgi?id=34646
* inspector/front-end/CookieItemsView.js:
(WebInspector.CookieItemsView):
(WebInspector.CookieItemsView.prototype.show):
(WebInspector.CookieItemsView.prototype._update):
(WebInspector.CookieItemsView.prototype._updateWithCookies):
(WebInspector.CookieItemsView.prototype._filterCookiesForDomain):
(WebInspector.CookieItemsView.prototype._createDataGrid):
(WebInspector.CookieItemsView.prototype._populateDataGrid.expiresCompare):
(WebInspector.CookieItemsView.prototype._populateDataGrid):
(WebInspector.CookieItemsView.prototype._createSimpleDataGrid):
(WebInspector.CookieItemsView.prototype._populateSimpleDataGrid):
(WebInspector.CookieItemsView.prototype._deleteCookieCallback):
(WebInspector.CookieItemsView.prototype._refreshButtonClicked):
* inspector/front-end/DOMStorageItemsView.js:
(WebInspector.DOMStorageItemsView.prototype._showDOMStorageEntries):
(WebInspector.DOMStorageItemsView.prototype._dataGridForDOMStorageEntries):
* inspector/front-end/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.autoSizeColumns):
* inspector/front-end/DatabaseQueryView.js:
(WebInspector.DatabaseQueryView.prototype._queryFinished):
* inspector/front-end/DatabaseTableView.js:
(WebInspector.DatabaseTableView.prototype._queryFinished):
* inspector/front-end/StoragePanel.js:
(WebInspector.StoragePanel.prototype.dataGridForResult):
2010-02-04 Pavel Feldman <pfeldman@chromium.org> 2010-02-04 Pavel Feldman <pfeldman@chromium.org>
Reviewed by Timothy Hatcher. Reviewed by Timothy Hatcher.
......
...@@ -43,6 +43,11 @@ WebInspector.CookieItemsView = function(treeElement, cookieDomain) ...@@ -43,6 +43,11 @@ WebInspector.CookieItemsView = function(treeElement, cookieDomain)
this._treeElement = treeElement; this._treeElement = treeElement;
this._cookieDomain = cookieDomain; this._cookieDomain = cookieDomain;
this._emptyMsgElement = document.createElement("div");
this._emptyMsgElement.className = "storage-table-empty";
this._emptyMsgElement.textContent = WebInspector.UIString("This site has no cookies.");
this.element.appendChild(this._emptyMsgElement);
} }
WebInspector.CookieItemsView.prototype = { WebInspector.CookieItemsView.prototype = {
...@@ -54,7 +59,7 @@ WebInspector.CookieItemsView.prototype = { ...@@ -54,7 +59,7 @@ WebInspector.CookieItemsView.prototype = {
show: function(parentElement) show: function(parentElement)
{ {
WebInspector.View.prototype.show.call(this, parentElement); WebInspector.View.prototype.show.call(this, parentElement);
this.update(); this._update();
}, },
hide: function() hide: function()
...@@ -63,37 +68,57 @@ WebInspector.CookieItemsView.prototype = { ...@@ -63,37 +68,57 @@ WebInspector.CookieItemsView.prototype = {
this.deleteButton.visible = false; this.deleteButton.visible = false;
}, },
update: function() _update: function()
{ {
this.element.removeChildren();
WebInspector.Cookies.getCookiesAsync(this._updateWithCookies.bind(this)); WebInspector.Cookies.getCookiesAsync(this._updateWithCookies.bind(this));
}, },
_updateWithCookies: function(allCookies, isAdvanced) _updateWithCookies: function(allCookies, isAdvanced)
{ {
var cookies = this._cookiesForDomain(allCookies, isAdvanced); if (isAdvanced)
var dataGrid = (isAdvanced ? this.dataGridForCookies(cookies) : this.simpleDataGridForCookies(cookies)); this._filterCookiesForDomain(allCookies);
if (dataGrid) { else
this._dataGrid = dataGrid; this._cookies = allCookies;
this.element.appendChild(dataGrid.element);
this._dataGrid.updateWidths(); if (!this._cookies.length) {
if (isAdvanced) // Nothing to show.
this.deleteButton.visible = true; this._emptyMsgElement.removeStyleClass("hidden");
} else {
var emptyMsgElement = document.createElement("div");
emptyMsgElement.className = "storage-table-empty";
emptyMsgElement.textContent = WebInspector.UIString("This site has no cookies.");
this.element.appendChild(emptyMsgElement);
this._dataGrid = null;
this.deleteButton.visible = false; this.deleteButton.visible = false;
if (this._dataGrid)
this._dataGrid.element.addStyleClass("hidden");
return;
}
if (!this._dataGrid) {
if (isAdvanced) {
this._createDataGrid();
this._populateDataGrid();
this._dataGrid.autoSizeColumns(6, 33);
this._treeElement.subtitle = String.sprintf(WebInspector.UIString("%d cookies (%s)"), this._cookies.length,
Number.bytesToString(this._totalSize, WebInspector.UIString));
} else {
this._createSimpleDataGrid();
this._populateSimpleDataGrid();
this._dataGrid.autoSizeColumns(20, 80);
}
} else {
if (isAdvanced)
this._populateDataGrid();
else
this._populateSimpleDataGrid();
} }
this._dataGrid.element.removeStyleClass("hidden");
this._emptyMsgElement.addStyleClass("hidden");
if (isAdvanced)
this.deleteButton.visible = true;
}, },
_cookiesForDomain: function(allCookies, isAdvanced) _filterCookiesForDomain: function(allCookies)
{ {
var cookiesForDomain = []; this._cookies = [];
var resourceURLsForDocumentURL = []; var resourceURLsForDocumentURL = [];
var totalSize = 0; this._totalSize = 0;
for (var id in WebInspector.resources) { for (var id in WebInspector.resources) {
var resource = WebInspector.resources[id]; var resource = WebInspector.resources[id];
...@@ -108,144 +133,49 @@ WebInspector.CookieItemsView.prototype = { ...@@ -108,144 +133,49 @@ WebInspector.CookieItemsView.prototype = {
for (var j = 0; j < resourceURLsForDocumentURL.length; ++j) { for (var j = 0; j < resourceURLsForDocumentURL.length; ++j) {
var resourceURL = resourceURLsForDocumentURL[j]; var resourceURL = resourceURLsForDocumentURL[j];
if (WebInspector.Cookies.cookieMatchesResourceURL(allCookies[i], resourceURL)) { if (WebInspector.Cookies.cookieMatchesResourceURL(allCookies[i], resourceURL)) {
totalSize += size; this._totalSize += size;
if (!pushed) { if (!pushed) {
pushed = true; pushed = true;
cookiesForDomain.push(allCookies[i]); this._cookies.push(allCookies[i]);
} }
} }
} }
} }
if (isAdvanced) {
this._treeElement.subtitle = String.sprintf(WebInspector.UIString("%d cookies (%s)"), cookiesForDomain.length,
Number.bytesToString(totalSize, WebInspector.UIString));
}
return cookiesForDomain;
}, },
dataGridForCookies: function(cookies) _createDataGrid: function()
{ {
if (!cookies.length)
return null;
for (var i = 0; i < cookies.length; ++i)
cookies[i].expires = new Date(cookies[i].expires);
var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} }; var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
columns[0].title = WebInspector.UIString("Name"); columns[0].title = WebInspector.UIString("Name");
columns[0].width = columns[0].title.length;
columns[0].sortable = true; columns[0].sortable = true;
columns[1].title = WebInspector.UIString("Value"); columns[1].title = WebInspector.UIString("Value");
columns[1].width = columns[1].title.length;
columns[1].sortable = true; columns[1].sortable = true;
columns[2].title = WebInspector.UIString("Domain"); columns[2].title = WebInspector.UIString("Domain");
columns[2].width = columns[2].title.length;
columns[2].sortable = true; columns[2].sortable = true;
columns[3].title = WebInspector.UIString("Path"); columns[3].title = WebInspector.UIString("Path");
columns[3].width = columns[3].title.length;
columns[3].sortable = true; columns[3].sortable = true;
columns[4].title = WebInspector.UIString("Expires"); columns[4].title = WebInspector.UIString("Expires");
columns[4].width = columns[4].title.length;
columns[4].sortable = true; columns[4].sortable = true;
columns[5].title = WebInspector.UIString("Size"); columns[5].title = WebInspector.UIString("Size");
columns[5].width = columns[5].title.length;
columns[5].aligned = "right"; columns[5].aligned = "right";
columns[5].sortable = true; columns[5].sortable = true;
columns[6].title = WebInspector.UIString("HTTP"); columns[6].title = WebInspector.UIString("HTTP");
columns[6].width = columns[6].title.length;
columns[6].aligned = "centered"; columns[6].aligned = "centered";
columns[6].sortable = true; columns[6].sortable = true;
columns[7].title = WebInspector.UIString("Secure"); columns[7].title = WebInspector.UIString("Secure");
columns[7].width = columns[7].title.length;
columns[7].aligned = "centered"; columns[7].aligned = "centered";
columns[7].sortable = true; columns[7].sortable = true;
var totalColumnWidths = 0; this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCookieCallback.bind(this));
for (var columnIdentifier in columns) this._dataGrid.addEventListener("sorting changed", this._populateDataGrid, this);
totalColumnWidths += columns[columnIdentifier].width; this.element.appendChild(this._dataGrid.element);
this._dataGrid.updateWidths();
// Enforce the Value column (the 2nd column) to be a max of 33%
// tweaking the raw total width because may massively outshadow the others
var valueColumnWidth = columns[1].width;
if (valueColumnWidth / totalColumnWidths > 0.33) {
totalColumnWidths -= valueColumnWidth;
totalColumnWidths *= 1.33;
columns[1].width = totalColumnWidths * 0.33;
}
// Calculate the percentage width for the columns.
const minimumPrecent = 6;
var recoupPercent = 0;
for (var columnIdentifier in columns) {
var width = columns[columnIdentifier].width;
width = Math.round((width / totalColumnWidths) * 100);
if (width < minimumPrecent) {
recoupPercent += (minimumPrecent - width);
width = minimumPrecent;
}
columns[columnIdentifier].width = width;
}
// Enforce the minimum percentage width. (need to narrow total percentage due to earlier additions)
while (recoupPercent > 0) {
for (var columnIdentifier in columns) {
if (columns[columnIdentifier].width > minimumPrecent) {
--columns[columnIdentifier].width;
--recoupPercent;
if (!recoupPercent)
break;
}
}
}
for (var columnIdentifier in columns)
columns[columnIdentifier].width += "%";
var dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCookieCallback.bind(this));
var nodes = this._createNodes(dataGrid, cookies);
for (var i = 0; i < nodes.length; ++i)
dataGrid.appendChild(nodes[i]);
if (nodes.length)
nodes[0].selected = true;
dataGrid.addEventListener("sorting changed", this._sortData.bind(this, dataGrid, cookies));
return dataGrid;
}, },
_createNodes: function(dataGrid, cookies) _populateDataGrid: function()
{ {
function updateDataAndColumn(data, index, value) { var selectedCookie = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.cookie : null;
data[index] = value; var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
if (value.length > dataGrid.columns[index].width)
dataGrid.columns[index].width = value.length;
}
var nodes = [];
for (var i = 0; i < cookies.length; ++i) {
var data = {};
var cookie = cookies[i];
updateDataAndColumn(data, 0, cookie.name);
updateDataAndColumn(data, 1, cookie.value);
updateDataAndColumn(data, 2, cookie.domain);
updateDataAndColumn(data, 3, cookie.path);
updateDataAndColumn(data, 4, (cookie.session ? WebInspector.UIString("Session") : cookie.expires.toGMTString()));
updateDataAndColumn(data, 5, Number.bytesToString(cookie.size, WebInspector.UIString));
updateDataAndColumn(data, 6, (cookie.httpOnly ? "\u2713" : "")); // Checkmark
updateDataAndColumn(data, 7, (cookie.secure ? "\u2713" : "")); // Checkmark
var node = new WebInspector.DataGridNode(data);
node.cookie = cookie;
node.selectable = true;
nodes.push(node);
}
return nodes;
},
_sortData: function(dataGrid, cookies)
{
var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
function localeCompare(field, cookie1, cookie2) function localeCompare(field, cookie1, cookie2)
{ {
...@@ -265,11 +195,11 @@ WebInspector.CookieItemsView.prototype = { ...@@ -265,11 +195,11 @@ WebInspector.CookieItemsView.prototype = {
if (cookie1.session) if (cookie1.session)
return 0; return 0;
return sortDirection * (cookie1.expires.getTime() - cookie2.expires.getTime()); return sortDirection * (cookie1.expires - cookie2.expires);
} }
var comparator; var comparator;
switch (parseInt(dataGrid.sortColumnIdentifier)) { switch (parseInt(this._dataGrid.sortColumnIdentifier)) {
case 0: comparator = localeCompare.bind(this, "name"); break; case 0: comparator = localeCompare.bind(this, "name"); break;
case 1: comparator = localeCompare.bind(this, "value"); break; case 1: comparator = localeCompare.bind(this, "value"); break;
case 2: comparator = localeCompare.bind(this, "domain"); break; case 2: comparator = localeCompare.bind(this, "domain"); break;
...@@ -281,72 +211,68 @@ WebInspector.CookieItemsView.prototype = { ...@@ -281,72 +211,68 @@ WebInspector.CookieItemsView.prototype = {
default: localeCompare.bind(this, "name"); default: localeCompare.bind(this, "name");
} }
cookies.sort(comparator); this._cookies.sort(comparator);
var nodes = this._createNodes(dataGrid, cookies);
dataGrid.removeChildren(); this._dataGrid.removeChildren();
for (var i = 0; i < nodes.length; ++i) var nodeToSelect;
dataGrid.appendChild(nodes[i]); for (var i = 0; i < this._cookies.length; ++i) {
var data = {};
var cookie = this._cookies[i];
data[0] = cookie.name;
data[1] = cookie.value;
data[2] = cookie.domain;
data[3] = cookie.path;
data[4] = (cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toGMTString());
data[5] = Number.bytesToString(cookie.size, WebInspector.UIString);
data[6] = (cookie.httpOnly ? "\u2713" : ""); // Checkmark
data[7] = (cookie.secure ? "\u2713" : ""); // Checkmark
if (nodes.length) var node = new WebInspector.DataGridNode(data);
nodes[0].selected = true; node.cookie = cookie;
node.selectable = true;
this._dataGrid.appendChild(node);
if (cookie === selectedCookie)
nodeToSelect = node;
}
if (nodeToSelect)
nodeToSelect.selected = true;
else
this._dataGrid.children[0].selected = true;
}, },
simpleDataGridForCookies: function(cookies) _createSimpleDataGrid: function()
{ {
if (!cookies.length)
return null;
var columns = {}; var columns = {};
columns[0] = {}; columns[0] = {};
columns[1] = {}; columns[1] = {};
columns[0].title = WebInspector.UIString("Name"); columns[0].title = WebInspector.UIString("Name");
columns[0].width = columns[0].title.length;
columns[1].title = WebInspector.UIString("Value"); columns[1].title = WebInspector.UIString("Value");
columns[1].width = columns[1].title.length;
var nodes = []; this._dataGrid = new WebInspector.DataGrid(columns);
this.element.appendChild(this._dataGrid.element);
this._dataGrid.updateWidths();
},
_populateSimpleDataGrid: function()
{
var cookies = this._cookies;
this._dataGrid.removeChildren();
var addedCookies = {};
for (var i = 0; i < cookies.length; ++i) { for (var i = 0; i < cookies.length; ++i) {
var cookie = cookies[i]; if (addedCookies[cookies[i].name])
continue;
addedCookies[cookies[i].name] = true;
var data = {}; var data = {};
data[0] = cookies[i].name;
var name = cookie.name; data[1] = cookies[i].value;
data[0] = name;
if (name.length > columns[0].width)
columns[0].width = name.length;
var value = cookie.value;
data[1] = value;
if (value.length > columns[1].width)
columns[1].width = value.length;
var node = new WebInspector.DataGridNode(data, false); var node = new WebInspector.DataGridNode(data, false);
node.selectable = true; node.selectable = true;
nodes.push(node); this._dataGrid.appendChild(node);
} }
this._dataGrid.children[0].selected = true;
var totalColumnWidths = columns[0].width + columns[1].width;
var width = Math.round((columns[0].width * 100) / totalColumnWidths);
const minimumPrecent = 20;
if (width < minimumPrecent)
width = minimumPrecent;
if (width > 100 - minimumPrecent)
width = 100 - minimumPrecent;
columns[0].width = width;
columns[1].width = 100 - width;
columns[0].width += "%";
columns[1].width += "%";
var dataGrid = new WebInspector.DataGrid(columns);
var length = nodes.length;
for (var i = 0; i < length; ++i)
dataGrid.appendChild(nodes[i]);
if (length > 0)
nodes[0].selected = true;
return dataGrid;
}, },
resize: function() resize: function()
{ {
if (this._dataGrid) if (this._dataGrid)
...@@ -360,17 +286,17 @@ WebInspector.CookieItemsView.prototype = { ...@@ -360,17 +286,17 @@ WebInspector.CookieItemsView.prototype = {
this._deleteCookieCallback(this._dataGrid.selectedNode); this._deleteCookieCallback(this._dataGrid.selectedNode);
}, },
_deleteCookieCallback: function(node) _deleteCookieCallback: function(node)
{ {
var cookie = node.cookie; var cookie = node.cookie;
InspectorBackend.deleteCookie(cookie.name, this._cookieDomain); InspectorBackend.deleteCookie(cookie.name, this._cookieDomain);
this.update(); this._update();
}, },
_refreshButtonClicked: function(event) _refreshButtonClicked: function(event)
{ {
this.update(); this._update();
} }
} }
......
...@@ -69,7 +69,7 @@ WebInspector.DOMStorageItemsView.prototype = { ...@@ -69,7 +69,7 @@ WebInspector.DOMStorageItemsView.prototype = {
{ {
this._dataGrid = this._dataGridForDOMStorageEntries(entries); this._dataGrid = this._dataGridForDOMStorageEntries(entries);
this.element.appendChild(this._dataGrid.element); this.element.appendChild(this._dataGrid.element);
this._dataGrid.updateWidths(); this._dataGrid.autoSizeColumns(10);
this.deleteButton.visible = true; this.deleteButton.visible = true;
}, },
...@@ -85,9 +85,7 @@ WebInspector.DOMStorageItemsView.prototype = { ...@@ -85,9 +85,7 @@ WebInspector.DOMStorageItemsView.prototype = {
columns[0] = {}; columns[0] = {};
columns[1] = {}; columns[1] = {};
columns[0].title = WebInspector.UIString("Key"); columns[0].title = WebInspector.UIString("Key");
columns[0].width = columns[0].title.length;
columns[1].title = WebInspector.UIString("Value"); columns[1].title = WebInspector.UIString("Value");
columns[1].width = columns[1].title.length;
var nodes = []; var nodes = [];
...@@ -98,31 +96,14 @@ WebInspector.DOMStorageItemsView.prototype = { ...@@ -98,31 +96,14 @@ WebInspector.DOMStorageItemsView.prototype = {
var key = entries[i][0]; var key = entries[i][0];
data[0] = key; data[0] = key;
if (key.length > columns[0].width)
columns[0].width = key.length;
var value = entries[i][1]; var value = entries[i][1];
data[1] = value; data[1] = value;
if (value.length > columns[1].width)
columns[1].width = value.length;
var node = new WebInspector.DataGridNode(data, false); var node = new WebInspector.DataGridNode(data, false);
node.selectable = true; node.selectable = true;
nodes.push(node); nodes.push(node);
keys.push(key); keys.push(key);
} }
var totalColumnWidths = columns[0].width + columns[1].width;
var width = Math.round((columns[0].width * 100) / totalColumnWidths);
const minimumPrecent = 10;
if (width < minimumPrecent)
width = minimumPrecent;
if (width > 100 - minimumPrecent)
width = 100 - minimumPrecent;
columns[0].width = width;
columns[1].width = 100 - width;
columns[0].width += "%";
columns[1].width += "%";
var dataGrid = new WebInspector.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this)); var dataGrid = new WebInspector.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
var length = nodes.length; var length = nodes.length;
for (var i = 0; i < length; ++i) for (var i = 0; i < length; ++i)
......
...@@ -61,7 +61,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback) ...@@ -61,7 +61,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
var headerRow = document.createElement("tr"); var headerRow = document.createElement("tr");
var columnGroup = document.createElement("colgroup"); var columnGroup = document.createElement("colgroup");
var columnCount = 0; this._columnCount = 0;
for (var columnIdentifier in columns) { for (var columnIdentifier in columns) {
var column = columns[columnIdentifier]; var column = columns[columnIdentifier];
...@@ -71,6 +71,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback) ...@@ -71,6 +71,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
var col = document.createElement("col"); var col = document.createElement("col");
if (column.width) if (column.width)
col.style.width = column.width; col.style.width = column.width;
column.element = col;
columnGroup.appendChild(col); columnGroup.appendChild(col);
var cell = document.createElement("th"); var cell = document.createElement("th");
...@@ -98,10 +99,10 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback) ...@@ -98,10 +99,10 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
headerRow.appendChild(cell); headerRow.appendChild(cell);
++columnCount; ++this._columnCount;
} }
columnGroup.span = columnCount; columnGroup.span = this._columnCount;
var cell = document.createElement("th"); var cell = document.createElement("th");
cell.className = "corner"; cell.className = "corner";
...@@ -114,7 +115,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback) ...@@ -114,7 +115,7 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
var fillerRow = document.createElement("tr"); var fillerRow = document.createElement("tr");
fillerRow.className = "filler"; fillerRow.className = "filler";
for (var i = 0; i < columnCount; ++i) { for (var i = 0; i < this._columnCount; ++i) {
var cell = document.createElement("td"); var cell = document.createElement("td");
fillerRow.appendChild(cell); fillerRow.appendChild(cell);
} }
...@@ -292,7 +293,70 @@ WebInspector.DataGrid.prototype = { ...@@ -292,7 +293,70 @@ WebInspector.DataGrid.prototype = {
return this._dataTableBody; return this._dataTableBody;
}, },
autoSizeColumns: function(minPercent, maxPercent)
{
if (minPercent)
minPercent = Math.min(minPercent, Math.floor(100 / this._columnCount));
var widths = {};
var columns = this.columns;
for (var columnIdentifier in columns)
widths[columnIdentifier] = (columns[columnIdentifier].title || "").length;
for (var i = 0; i < this.children.length; ++i) {
var node = this.children[i];
for (var columnIdentifier in columns) {
var text = node.data[columnIdentifier] || "";
if (text.length > widths[columnIdentifier])
widths[columnIdentifier] = text.length;
}
}
var totalColumnWidths = 0;
for (var columnIdentifier in columns)
totalColumnWidths += widths[columnIdentifier];
var recoupPercent = 0;
for (var columnIdentifier in columns) {
var width = Math.round(100 * widths[columnIdentifier] / totalColumnWidths);
if (minPercent && width < minPercent) {
recoupPercent += (minPercent - width);
width = minPercent;
} else if (maxPercent && width > maxPercent) {
recoupPercent -= (width - maxPercent);
width = maxPercent;
}
widths[columnIdentifier] = width;
}
while (minPercent && recoupPercent > 0) {
for (var columnIdentifier in columns) {
if (widths[columnIdentifier] > minPercent) {
--widths[columnIdentifier];
--recoupPercent;
if (!recoupPercent)
break;
}
}
}
while (maxPercent && recoupPercent < 0) {
for (var columnIdentifier in columns) {
if (widths[columnIdentifier] < maxPercent) {
++widths[columnIdentifier];
++recoupPercent;
if (!recoupPercent)
break;
}
}
}
for (var columnIdentifier in columns)
columns[columnIdentifier].element.style.width = widths[columnIdentifier] + "%";
this.columnWidthsInitialized = false;
this.updateWidths();
},
// Updates the widths of the table, including the positions of the column // Updates the widths of the table, including the positions of the column
// resizers. // resizers.
// //
......
...@@ -144,6 +144,7 @@ WebInspector.DatabaseQueryView.prototype = { ...@@ -144,6 +144,7 @@ WebInspector.DatabaseQueryView.prototype = {
return; return;
dataGrid.element.addStyleClass("inline"); dataGrid.element.addStyleClass("inline");
this._appendQueryResult(query, dataGrid.element); this._appendQueryResult(query, dataGrid.element);
dataGrid.autoSizeColumns(5);
if (query.match(/^create /i) || query.match(/^drop table /i)) if (query.match(/^create /i) || query.match(/^drop table /i))
WebInspector.panels.storage.updateDatabaseTables(this.database); WebInspector.panels.storage.updateDatabaseTables(this.database);
......
...@@ -68,6 +68,7 @@ WebInspector.DatabaseTableView.prototype = { ...@@ -68,6 +68,7 @@ WebInspector.DatabaseTableView.prototype = {
} }
this.element.appendChild(dataGrid.element); this.element.appendChild(dataGrid.element);
dataGrid.autoSizeColumns(5);
}, },
_queryError: function(error) _queryError: function(error)
......
...@@ -300,52 +300,14 @@ WebInspector.StoragePanel.prototype = { ...@@ -300,52 +300,14 @@ WebInspector.StoragePanel.prototype = {
var data = {}; var data = {};
var row = rows[i]; var row = rows[i];
for (var columnIdentifier in row) { for (var columnIdentifier in row)
var text = row[columnIdentifier]; data[columnIdentifier] = row[columnIdentifier];
data[columnIdentifier] = text;
if (text.length > columns[columnIdentifier].width)
columns[columnIdentifier].width = text.length;
}
var node = new WebInspector.DataGridNode(data, false); var node = new WebInspector.DataGridNode(data, false);
node.selectable = false; node.selectable = false;
nodes.push(node); nodes.push(node);
} }
var totalColumnWidths = 0;
for (var columnIdentifier in columns)
totalColumnWidths += columns[columnIdentifier].width;
// Calculate the percentage width for the columns.
const minimumPrecent = Math.min(5, Math.floor(100/numColumns));
var recoupPercent = 0;
for (var columnIdentifier in columns) {
var width = columns[columnIdentifier].width;
width = Math.round((width / totalColumnWidths) * 100);
if (width < minimumPrecent) {
recoupPercent += (minimumPrecent - width);
width = minimumPrecent;
}
columns[columnIdentifier].width = width;
}
// Enforce the minimum percentage width.
while (recoupPercent > 0) {
for (var columnIdentifier in columns) {
if (columns[columnIdentifier].width > minimumPrecent) {
--columns[columnIdentifier].width;
--recoupPercent;
if (!recoupPercent)
break;
}
}
}
// Change the width property to a string suitable for a style width.
for (var columnIdentifier in columns)
columns[columnIdentifier].width += "%";
var dataGrid = new WebInspector.DataGrid(columns); var dataGrid = new WebInspector.DataGrid(columns);
var length = nodes.length; var length = nodes.length;
for (var i = 0; i < length; ++i) for (var i = 0; i < length; ++i)
......
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