<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[165487] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/165487">165487</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2014-03-12 11:18:29 -0700 (Wed, 12 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: DataGrid should have an API to set sort column and direction
https://bugs.webkit.org/show_bug.cgi?id=128783
Reviewed by Timothy Hatcher.
Previously there was no way for DataGrid clients to programmatically change
the sort order or sort column identifier after the data grid was constructed.
This patch modernizes DataGrid sorting by exposing getters and setters for
sortOrder and sortColumnIdentifier, which trigger the SortChanged event if
the sort settings have changed.
This patch also modernizes sorting functionality in DataGrid clients, and in
a few clients it moves column identifiers from numbers to string identifiers.
* UserInterface/Main.html:
* UserInterface/Views/ApplicationCacheFrameContentView.js: Use string column identifiers
instead of numbers. Don't repopulate the entire table when the sort changes, instead
call DataGrid.sortNodes from the sorting callback. Explicitly set the sort order.
(WebInspector.ApplicationCacheFrameContentView.prototype._createDataGrid):
(WebInspector.ApplicationCacheFrameContentView.prototype._sortDataGrid):
(WebInspector.ApplicationCacheFrameContentView.prototype._sortDataGrid.localeCompare):
(WebInspector.ApplicationCacheFrameContentView.prototype._populateDataGrid):
* UserInterface/Views/CookieStorageContentView.js: Use string column identifiers instead
of numbers. Don't sort the cookies themselves, just the data grid nodes representing
each cookie. Use DataGrid.sortNodes as the sorting implementation, and provide a
comparator. Don't rebuild the entire table when the sort changes.
(WebInspector.CookieStorageContentView.prototype._rebuildTable):
(WebInspector.CookieStorageContentView.prototype._sortDataGrid):
(WebInspector.CookieStorageContentView.prototype._sortDataGrid.numberCompare):
(WebInspector.CookieStorageContentView.prototype._sortDataGrid.expiresCompare):
* UserInterface/Views/DataGrid.js: Add the DataGrid.SortOrder enum. Put sortOrder
and sortColumnIdentifier behind getters and setters. Pull some hardcoded style
class names into constants. Remove the "sort" field on column config objects; instead
should use the DataGrid.sortColumnIdentifier setter after construction.
(WebInspector.DataGrid): Keep sort settings in private variables.
(WebInspector.DataGrid.prototype.get sortOrder): Reimplemented.
(WebInspector.DataGrid.prototype.get sortColumnIdentifier): Reimplemented.
(WebInspector.DataGrid.prototype.moveToNextCell):
(WebInspector.DataGrid.prototype._editingCommitted):
(WebInspector.DataGrid.prototype.sortNodes): Use requestAnimationFrame to
coalesce multiple sort requests within the same draw frame.
(WebInspector.DataGrid.prototype._sortNodesCallback):
(WebInspector.DataGrid.prototype._headerCellClicked): Use the new sort API.
* UserInterface/Views/LayerTreeDataGrid.js: Removed. Unnecessary for performance
now that sort requests are coalesced by requestAnimationFrame.
* UserInterface/Views/LayerTreeSidebarPanel.js: Use DataGrid instead of LayerTreeDataGrid.
Hook up the _sortDataGrid method to the built-in DataGrid.sortNodes API.
(WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
(WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid.comparator):
(WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid):
* UserInterface/Views/LayoutTimelineView.js:
* UserInterface/Views/LegacyJavaScriptProfileView.js:
(WebInspector.LegacyJavaScriptProfileView.prototype._sortProfile):
* UserInterface/Views/NetworkTimelineView.js:
* UserInterface/Views/ResourceDetailsSidebarPanel.js: Use the DataGrid.sortNodes API.
(WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid.comparator):
(WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid):
(WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid):
* UserInterface/Views/ScriptTimelineView.js:
* UserInterface/Views/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype._sortComparator):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCookieStorageContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLegacyJavaScriptProfileViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LegacyJavaScriptProfileView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGrid.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -1,3 +1,74 @@
</span><ins>+2014-03-11 Brian Burg <bburg@apple.com>
+
+ Web Inspector: DataGrid should have an API to set sort column and direction
+ https://bugs.webkit.org/show_bug.cgi?id=128783
+
+ Reviewed by Timothy Hatcher.
+
+ Previously there was no way for DataGrid clients to programmatically change
+ the sort order or sort column identifier after the data grid was constructed.
+ This patch modernizes DataGrid sorting by exposing getters and setters for
+ sortOrder and sortColumnIdentifier, which trigger the SortChanged event if
+ the sort settings have changed.
+
+ This patch also modernizes sorting functionality in DataGrid clients, and in
+ a few clients it moves column identifiers from numbers to string identifiers.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/ApplicationCacheFrameContentView.js: Use string column identifiers
+ instead of numbers. Don't repopulate the entire table when the sort changes, instead
+ call DataGrid.sortNodes from the sorting callback. Explicitly set the sort order.
+
+ (WebInspector.ApplicationCacheFrameContentView.prototype._createDataGrid):
+ (WebInspector.ApplicationCacheFrameContentView.prototype._sortDataGrid):
+ (WebInspector.ApplicationCacheFrameContentView.prototype._sortDataGrid.localeCompare):
+ (WebInspector.ApplicationCacheFrameContentView.prototype._populateDataGrid):
+
+ * UserInterface/Views/CookieStorageContentView.js: Use string column identifiers instead
+ of numbers. Don't sort the cookies themselves, just the data grid nodes representing
+ each cookie. Use DataGrid.sortNodes as the sorting implementation, and provide a
+ comparator. Don't rebuild the entire table when the sort changes.
+
+ (WebInspector.CookieStorageContentView.prototype._rebuildTable):
+ (WebInspector.CookieStorageContentView.prototype._sortDataGrid):
+ (WebInspector.CookieStorageContentView.prototype._sortDataGrid.numberCompare):
+ (WebInspector.CookieStorageContentView.prototype._sortDataGrid.expiresCompare):
+
+ * UserInterface/Views/DataGrid.js: Add the DataGrid.SortOrder enum. Put sortOrder
+ and sortColumnIdentifier behind getters and setters. Pull some hardcoded style
+ class names into constants. Remove the "sort" field on column config objects; instead
+ should use the DataGrid.sortColumnIdentifier setter after construction.
+
+ (WebInspector.DataGrid): Keep sort settings in private variables.
+ (WebInspector.DataGrid.prototype.get sortOrder): Reimplemented.
+ (WebInspector.DataGrid.prototype.get sortColumnIdentifier): Reimplemented.
+ (WebInspector.DataGrid.prototype.moveToNextCell):
+ (WebInspector.DataGrid.prototype._editingCommitted):
+ (WebInspector.DataGrid.prototype.sortNodes): Use requestAnimationFrame to
+ coalesce multiple sort requests within the same draw frame.
+ (WebInspector.DataGrid.prototype._sortNodesCallback):
+ (WebInspector.DataGrid.prototype._headerCellClicked): Use the new sort API.
+ * UserInterface/Views/LayerTreeDataGrid.js: Removed. Unnecessary for performance
+ now that sort requests are coalesced by requestAnimationFrame.
+
+ * UserInterface/Views/LayerTreeSidebarPanel.js: Use DataGrid instead of LayerTreeDataGrid.
+ Hook up the _sortDataGrid method to the built-in DataGrid.sortNodes API.
+
+ (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
+ (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid.comparator):
+ (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid):
+ * UserInterface/Views/LayoutTimelineView.js:
+ * UserInterface/Views/LegacyJavaScriptProfileView.js:
+ (WebInspector.LegacyJavaScriptProfileView.prototype._sortProfile):
+ * UserInterface/Views/NetworkTimelineView.js:
+ * UserInterface/Views/ResourceDetailsSidebarPanel.js: Use the DataGrid.sortNodes API.
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid.comparator):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid):
+ * UserInterface/Views/ScriptTimelineView.js:
+ * UserInterface/Views/TimelineDataGrid.js:
+ (WebInspector.TimelineDataGrid.prototype._sortComparator):
+
</ins><span class="cx"> 2014-03-10 James Craig <jcraig@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: AXI: Expose checked/disabled/expanded/pressed/readonly/selected
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -384,7 +384,6 @@
</span><span class="cx"> <script src="Views/IndexedDatabaseObjectStoreIndexTreeElement.js"></script>
</span><span class="cx"> <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
</span><span class="cx"> <script src="Views/IndexedDatabaseTreeElement.js"></script>
</span><del>- <script src="Views/LayerTreeDataGrid.js"></script>
</del><span class="cx"> <script src="Views/LayerTreeDataGridNode.js"></script>
</span><span class="cx"> <script src="Views/LayerTreeSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineDataGrid.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheFrameContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2010, 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2010, 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -23,10 +23,6 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-/**
- * @constructor
- * @extends {WebInspector.View}
- */
</del><span class="cx"> WebInspector.ApplicationCacheFrameContentView = function(representedObject)
</span><span class="cx"> {
</span><span class="cx"> console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
</span><span class="lines">@@ -169,65 +165,65 @@
</span><span class="cx">
</span><span class="cx"> _createDataGrid: function()
</span><span class="cx"> {
</span><del>- var columns = { 0: {}, 1: {}, 2: {} };
- columns[0].title = WebInspector.UIString("Resource");
- columns[0].sort = "ascending";
- columns[0].sortable = true;
- columns[1].title = WebInspector.UIString("Type");
- columns[1].sortable = true;
- columns[2].title = WebInspector.UIString("Size");
- columns[2].aligned = "right";
- columns[2].sortable = true;
</del><ins>+ var columns = {url: {}, type: {}, size: {}};
+
+ columns.url.title = WebInspector.UIString("Resource");
+ columns.url.sortable = true;
+
+ columns.type.title = WebInspector.UIString("Type");
+ columns.type.sortable = true;
+
+ columns.size.title = WebInspector.UIString("Size");
+ columns.size.aligned = "right";
+ columns.size.sortable = true;
+
</ins><span class="cx"> this._dataGrid = new WebInspector.DataGrid(columns);
</span><ins>+ this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+ this._dataGrid.sortColumnIdentifier = "url";
+ this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+
</ins><span class="cx"> this.element.appendChild(this._dataGrid.element);
</span><span class="cx"> this._dataGrid.updateLayout();
</span><del>- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._populateDataGrid, this);
</del><span class="cx"> },
</span><span class="cx">
</span><del>- _populateDataGrid: function()
</del><ins>+ _sortDataGrid: function()
</ins><span class="cx"> {
</span><del>- var selectedResource = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.resource : null;
- var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
-
- function numberCompare(field, resource1, resource2)
</del><ins>+ function numberCompare(columnIdentifier, nodeA, nodeB)
</ins><span class="cx"> {
</span><del>- return sortDirection * (resource1[field] - resource2[field]);
</del><ins>+ console.log(columnIdentifier, nodeA, nodeB);
+ return nodeA.data[columnIdentifier] - nodeB.data[columnIdentifier];
</ins><span class="cx"> }
</span><del>- function localeCompare(field, resource1, resource2)
</del><ins>+ function localeCompare(columnIdentifier, nodeA, nodeB)
</ins><span class="cx"> {
</span><del>- return sortDirection * (resource1[field] + "").localeCompare(resource2[field] + "");
</del><ins>+ return (nodeA.data[columnIdentifier] + "").localeCompare(nodeB.data[columnIdentifier] + "");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var comparator;
</span><del>- switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
- case 0: comparator = localeCompare.bind(this, "url"); break;
- case 1: comparator = localeCompare.bind(this, "type"); break;
- case 2: comparator = numberCompare.bind(this, "size"); break;
- default: localeCompare.bind(this, "resource"); // FIXME: comparator = ?
</del><ins>+ switch (this._dataGrid.sortColumnIdentifier) {
+ case "type": comparator = localeCompare.bind(this, "type"); break;
+ case "size": comparator = numberCompare.bind(this, "size"); break;
+ case "url":
+ default: comparator = localeCompare.bind(this, "url"); break;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this._resources.sort(comparator);
</del><ins>+ this._dataGrid.sortNodes(comparator);
+ },
+
+ _populateDataGrid: function()
+ {
</ins><span class="cx"> this._dataGrid.removeChildren();
</span><span class="cx">
</span><del>- var nodeToSelect;
- for (var i = 0; i < this._resources.length; ++i) {
- var data = {};
- var resource = this._resources[i];
- data[0] = resource.url;
- data[1] = resource.type;
- data[2] = Number.bytesToString(resource.size);
</del><ins>+ for (var resource of this._resources) {
+ var data = {
+ url: resource.url,
+ type: resource.type,
+ size: Number.bytesToString(resource.size)
+ };
</ins><span class="cx"> var node = new WebInspector.DataGridNode(data);
</span><del>- node.resource = resource;
</del><span class="cx"> node.selectable = true;
</span><span class="cx"> this._dataGrid.appendChild(node);
</span><del>- if (resource === selectedResource) {
- nodeToSelect = node;
- nodeToSelect.selected = true;
- }
</del><span class="cx"> }
</span><del>-
- if (!nodeToSelect && this._dataGrid.children.length)
- this._dataGrid.children[0].selected = true;
</del><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _deleteButtonClicked: function(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCookieStorageContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -79,37 +79,45 @@
</span><span class="cx"> // FIXME: If there are no cookies, do we want to show an empty datagrid, or do something like the old
</span><span class="cx"> // inspector and show some text saying there are no cookies?
</span><span class="cx"> if (!this._dataGrid) {
</span><del>- var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
- columns[0].title = WebInspector.UIString("Name");
- columns[0].sortable = true;
- columns[0].width = "24%";
- columns[1].title = WebInspector.UIString("Value");
- columns[1].sortable = true;
- columns[1].width = "34%";
- columns[2].title = WebInspector.UIString("Domain");
- columns[2].sortable = true;
- columns[2].width = "7%";
- columns[3].title = WebInspector.UIString("Path");
- columns[3].sortable = true;
- columns[3].width = "7%";
- columns[4].title = WebInspector.UIString("Expires");
- columns[4].sortable = true;
- columns[4].width = "7%";
- columns[5].title = WebInspector.UIString("Size");
- columns[5].aligned = "right";
- columns[5].sortable = true;
- columns[5].width = "7%";
- columns[6].title = WebInspector.UIString("HTTP");
- columns[6].aligned = "centered";
- columns[6].sortable = true;
- columns[6].width = "7%";
- columns[7].title = WebInspector.UIString("Secure");
- columns[7].aligned = "centered";
- columns[7].sortable = true;
- columns[7].width = "7%";
</del><ins>+ var columns = {name: {}, value: {}, domain: {}, path: {}, expires: {}, size: {}, http: {}, secure: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Name");
+ columns.name.sortable = true;
+ columns.name.width = "24%";
+
+ columns.value.title = WebInspector.UIString("Value");
+ columns.value.sortable = true;
+ columns.value.width = "34%";
+
+ columns.domain.title = WebInspector.UIString("Domain");
+ columns.domain.sortable = true;
+ columns.domain.width = "7%";
+
+ columns.path.title = WebInspector.UIString("Path");
+ columns.path.sortable = true;
+ columns.path.width = "7%";
+
+ columns.expires.title = WebInspector.UIString("Expires");
+ columns.expires.sortable = true;
+ columns.expires.width = "7%";
+
+ columns.size.title = WebInspector.UIString("Size");
+ columns.size.aligned = "right";
+ columns.size.sortable = true;
+ columns.size.width = "7%";
+
+ columns.http.title = WebInspector.UIString("HTTP");
+ columns.http.aligned = "centered";
+ columns.http.sortable = true;
+ columns.http.width = "7%";
+
+ columns.secure.title = WebInspector.UIString("Secure");
+ columns.secure.aligned = "centered";
+ columns.secure.sortable = true;
+ columns.secure.width = "7%";
+
</ins><span class="cx"> this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCallback.bind(this));
</span><del>- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._rebuildTable, this);
</del><ins>+ this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
</ins><span class="cx">
</span><span class="cx"> this.element.appendChild(this._dataGrid.element);
</span><span class="cx"> this._dataGrid.updateLayout();
</span><span class="lines">@@ -118,33 +126,30 @@
</span><span class="cx"> console.assert(this._dataGrid);
</span><span class="cx"> this._dataGrid.removeChildren();
</span><span class="cx">
</span><del>- this._sortCookies(this._cookies);
</del><ins>+ for (var cookie of this._cookies) {
+ const checkmark = "\u2713";
+ var data = {
+ "name": cookie.name,
+ "value": cookie.value,
+ "domain": cookie.domain || "",
+ "path": cookie.path || "",
+ "expires": "",
+ "size": Number.bytesToString(cookie.size),
+ "http": cookie.httpOnly ? checkmark : "",
+ "secure": cookie.secure ? checkmark : "",
+ };
</ins><span class="cx">
</span><del>- for (var i = 0; i < this._cookies.length; ++i) {
- const cookie = this._cookies[i];
</del><ins>+ if (cookie.type !== WebInspector.CookieType.Request)
+ data["expires"] = cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toLocaleString();
</ins><span class="cx">
</span><del>- var data = {};
- data[0] = cookie.name;
- data[1] = cookie.value;
- data[2] = cookie.domain || "";
- data[3] = cookie.path || "";
-
- if (cookie.type === WebInspector.CookieType.Request)
- data[4] = "";
- else
- data[4] = cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toLocaleString();
-
- data[5] = Number.bytesToString(cookie.size);
- const checkmark = "\u2713";
- data[6] = cookie.httpOnly ? checkmark : "";
- data[7] = cookie.secure ? checkmark : "";
-
</del><span class="cx"> var node = new WebInspector.DataGridNode(data);
</span><ins>+ node.selectable = true;
</ins><span class="cx"> node.cookie = cookie;
</span><del>- node.selectable = true;
</del><span class="cx">
</span><span class="cx"> this._dataGrid.appendChild(node);
</span><span class="cx"> }
</span><ins>+
+ this._dataGrid.sortColumnIdentifier = "name";
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _filterCookies: function(cookies)
</span><span class="lines">@@ -180,45 +185,44 @@
</span><span class="cx"> return filteredCookies;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _sortCookies: function(cookies)
</del><ins>+ _sortDataGrid: function()
</ins><span class="cx"> {
</span><del>- var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
-
- function localeCompare(field, cookie1, cookie2)
</del><ins>+ function localeCompare(field, nodeA, nodeB)
</ins><span class="cx"> {
</span><del>- return sortDirection * (cookie1[field] + "").localeCompare(cookie2[field] + "")
</del><ins>+ return (nodeA.data[field] + "").localeCompare(nodeB.data[field] + "");
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- function numberCompare(field, cookie1, cookie2)
</del><ins>+ function numberCompare(field, nodeA, nodeB)
</ins><span class="cx"> {
</span><del>- return sortDirection * (cookie1[field] - cookie2[field]);
</del><ins>+ return nodeA.cookie[field] - nodeB.cookie[field];
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- function expiresCompare(cookie1, cookie2)
</del><ins>+ function expiresCompare(nodeA, nodeB)
</ins><span class="cx"> {
</span><del>- if (cookie1.session !== cookie2.session)
- return sortDirection * (cookie1.session ? 1 : -1);
</del><ins>+ if (nodeA.cookie.session !== nodeB.cookie.session)
+ return nodeA.cookie.session ? 1 : -1;
</ins><span class="cx">
</span><del>- if (cookie1.session)
</del><ins>+ if (nodeA.cookie.session)
</ins><span class="cx"> return 0;
</span><span class="cx">
</span><del>- return sortDirection * (cookie1.expires - cookie2.expires);
</del><ins>+ return nodeA.data["expires"] - nodeB.data["expires"];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var comparator;
</span><del>- switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
- case 0: comparator = localeCompare.bind(this, "name"); break;
- case 1: comparator = localeCompare.bind(this, "value"); break;
- case 2: comparator = localeCompare.bind(this, "domain"); break;
- case 3: comparator = localeCompare.bind(this, "path"); break;
- case 4: comparator = expiresCompare; break;
- case 5: comparator = numberCompare.bind(this, "size"); break;
- case 6: comparator = localeCompare.bind(this, "httpOnly"); break;
- case 7: comparator = localeCompare.bind(this, "secure"); break;
- default: localeCompare.bind(this, "name");
</del><ins>+ switch (this._dataGrid.sortColumnIdentifier) {
+ case "value": comparator = localeCompare.bind(this, "value"); break;
+ case "domain": comparator = localeCompare.bind(this, "domain"); break;
+ case "path": comparator = localeCompare.bind(this, "path"); break;
+ case "expires": comparator = expiresCompare; break;
+ case "size": comparator = numberCompare.bind(this, "size"); break;
+ case "http": comparator = localeCompare.bind(this, "http"); break;
+ case "secure": comparator = localeCompare.bind(this, "secure"); break;
+ case "name":
+ default: comparator = localeCompare.bind(this, "name"); break;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- cookies.sort(comparator);
</del><ins>+ console.assert(comparator);
+ this._dataGrid.sortNodes(comparator);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _deleteCallback: function(node)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -28,6 +28,9 @@
</span><span class="cx"> this.columns = new Map;
</span><span class="cx"> this.orderedColumns = [];
</span><span class="cx">
</span><ins>+ this._sortColumnIdentifier = null;
+ this._sortOrder = WebInspector.DataGrid.SortOrder.Indeterminate;
+
</ins><span class="cx"> this.children = [];
</span><span class="cx"> this.selectedNode = null;
</span><span class="cx"> this.expandNodesWhenArrowing = false;
</span><span class="lines">@@ -98,10 +101,16 @@
</span><span class="cx"> CollapsedNode: "datagrid-collapsed-node"
</span><span class="cx"> };
</span><span class="cx">
</span><del>-/**
- * @param {Array.<string>} columnNames
- * @param {Array.<string>} values
- */
</del><ins>+WebInspector.DataGrid.SortOrder = {
+ Indeterminate: "data-grid-sort-order-indeterminate",
+ Ascending: "data-grid-sort-order-ascending",
+ Descending: "data-grid-sort-order-descending"
+};
+
+WebInspector.DataGrid.SortColumnAscendingStyleClassName = "sort-ascending";
+WebInspector.DataGrid.SortColumnDescendingStyleClassName = "sort-descending";
+WebInspector.DataGrid.SortableColumnStyleClassName = "sortable";
+
</ins><span class="cx"> WebInspector.DataGrid.createSortableDataGrid = function(columnNames, values)
</span><span class="cx"> {
</span><span class="cx"> var numColumns = columnNames.length;
</span><span class="lines">@@ -133,7 +142,7 @@
</span><span class="cx"> function sortDataGrid()
</span><span class="cx"> {
</span><span class="cx"> var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
</span><del>- var sortAscending = dataGrid.sortOrder === "ascending" ? 1 : -1;
</del><ins>+ var sortAscending = dataGrid.sortOrder === WebInspector.DataGrid.SortOrder.Ascending ? 1 : -1;
</ins><span class="cx">
</span><span class="cx"> for (var node of dataGrid.children) {
</span><span class="cx"> if (isNaN(Number(node.data[sortColumnIdentifier] || "")))
</span><span class="lines">@@ -175,6 +184,60 @@
</span><span class="cx"> this._refreshCallback = refreshCallback;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get sortOrder()
+ {
+ return this._sortOrder;
+ },
+
+ set sortOrder(order)
+ {
+ if (order === this._sortOrder)
+ return;
+
+ this._sortOrder = order;
+
+ if (!this._sortColumnIdentifier)
+ return;
+
+ var sortHeaderCellElement = this._headerTableCellElements.get(this._sortColumnIdentifier);
+
+ sortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnAscendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Ascending);
+ sortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnDescendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Descending);
+
+ this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+ },
+
+ get sortColumnIdentifier()
+ {
+ return this._sortColumnIdentifier;
+ },
+
+ set sortColumnIdentifier(columnIdentifier)
+ {
+ console.assert(columnIdentifier && this.columns.has(columnIdentifier));
+ console.assert(this.columns.get(columnIdentifier).has("sortable"));
+
+ if (this._sortColumnIdentifier === columnIdentifier)
+ return;
+
+ var oldSortColumnIdentifier = this._sortColumnIdentifier;
+ this._sortColumnIdentifier = columnIdentifier;
+
+ if (oldSortColumnIdentifier) {
+ var oldSortHeaderCellElement = this._headerTableCellElements.get(oldSortColumnIdentifier);
+ oldSortHeaderCellElement.classList.remove(WebInspector.DataGrid.SortColumnAscendingStyleClassName);
+ oldSortHeaderCellElement.classList.remove(WebInspector.DataGrid.SortColumnDescendingStyleClassName);
+ }
+
+ if (this._sortColumnIdentifier) {
+ var newSortHeaderCellElement = this._headerTableCellElements.get(this._sortColumnIdentifier);
+ newSortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnAscendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Ascending);
+ newSortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnDescendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Descending);
+ }
+
+ this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+ },
+
</ins><span class="cx"> _ondblclick: function(event)
</span><span class="cx"> {
</span><span class="cx"> if (this._editing || this._editingNode)
</span><span class="lines">@@ -283,20 +346,6 @@
</span><span class="cx"> this._editingNode = null;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- get sortColumnIdentifier()
- {
- return this._sortColumnCell ? this._sortColumnCell.columnIdentifier : null;
- },
-
- get sortOrder()
- {
- if (!this._sortColumnCell || this._sortColumnCell.classList.contains("sort-ascending"))
- return "ascending";
- if (this._sortColumnCell.classList.contains("sort-descending"))
- return "descending";
- return null;
- },
-
</del><span class="cx"> autoSizeColumns: function(minPercent, maxPercent, maxDescentLevel)
</span><span class="cx"> {
</span><span class="cx"> if (minPercent)
</span><span class="lines">@@ -413,16 +462,11 @@
</span><span class="cx"> else
</span><span class="cx"> div.textContent = column.get("title", "");
</span><span class="cx">
</span><del>- if (column.has("sort")) {
- headerCellElement.classList.add("sort-" + column.get("sort"));
- this._sortColumnCell = headerCellElement;
</del><ins>+ if (column.get("sortable")) {
+ listeners.register(headerCellElement, "click", this._headerCellClicked);
+ headerCellElement.classList.add(WebInspector.DataGrid.SortableColumnStyleClassName);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (column.has("sortable")) {
- listeners.register(headerCellElement, "click", this._clickInHeaderCell, false);
- headerCellElement.classList.add("sortable");
- }
-
</del><span class="cx"> if (column.has("group"))
</span><span class="cx"> headerCellElement.classList.add("column-group-" + column.get("group"));
</span><span class="cx">
</span><span class="lines">@@ -483,8 +527,8 @@
</span><span class="cx"> if (removedColumn.has("disclosure"))
</span><span class="cx"> delete this.disclosureColumnIdentifier;
</span><span class="cx">
</span><del>- if (removedColumn.has("sort"))
- delete this._sortColumnCell;
</del><ins>+ if (this.sortColumnIdentifier === columnIdentifier)
+ this.sortColumnIdentifier = null;
</ins><span class="cx">
</span><span class="cx"> this._headerTableCellElements.delete(columnIdentifier);
</span><span class="cx"> this._headerTableRowElement.children[removedOrdinal].remove();
</span><span class="lines">@@ -776,9 +820,17 @@
</span><span class="cx">
</span><span class="cx"> sortNodes: function(comparator)
</span><span class="cx"> {
</span><ins>+ if (this._sortNodesRequestId)
+ return;
+
+ this._sortNodesRequestId = window.requestAnimationFrame(this._sortNodesCallback.bind(this, comparator));
+ },
+
+ _sortNodesCallback: function(comparator)
+ {
</ins><span class="cx"> function comparatorWrapper(aRow, bRow)
</span><span class="cx"> {
</span><del>- var reverseFactor = this.sortOrder !== "asceding" ? -1 : 1;
</del><ins>+ var reverseFactor = this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending ? -1 : 1;
</ins><span class="cx"> var aNode = aRow._dataGridNode;
</span><span class="cx"> var bNode = bRow._dataGridNode;
</span><span class="cx"> if (aNode._data.summaryRow || aNode.isPlaceholderNode)
</span><span class="lines">@@ -789,6 +841,8 @@
</span><span class="cx"> return reverseFactor * comparator(aNode, bNode);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ delete this._sortNodesRequestId;
+
</ins><span class="cx"> if (this._editing) {
</span><span class="cx"> this._sortAfterEditingCallback = this.sortNodes.bind(this, comparator);
</span><span class="cx"> return;
</span><span class="lines">@@ -799,7 +853,7 @@
</span><span class="cx"> var fillerRowElement = tbody.lastChild;
</span><span class="cx">
</span><span class="cx"> var sortedRowElements = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1);
</span><del>- sortedRowElements.sort(comparatorWrapper);
</del><ins>+ sortedRowElements.sort(comparatorWrapper.bind(this));
</ins><span class="cx">
</span><span class="cx"> tbody.removeChildren();
</span><span class="cx">
</span><span class="lines">@@ -923,29 +977,20 @@
</span><span class="cx"> return rowElement && rowElement._dataGridNode;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _clickInHeaderCell: function(event)
</del><ins>+ _headerCellClicked: function(event)
</ins><span class="cx"> {
</span><span class="cx"> var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
</span><del>- if (!cell || !cell.columnIdentifier || !cell.classList.contains("sortable"))
</del><ins>+ if (!cell || !cell.columnIdentifier || !cell.classList.contains(WebInspector.DataGrid.SortableColumnStyleClassName))
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- var sortOrder = this.sortOrder;
-
- if (this._sortColumnCell)
- this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
-
- if (cell == this._sortColumnCell) {
- if (sortOrder === "ascending")
- sortOrder = "descending";
</del><ins>+ var clickedColumnIdentifier = cell.columnIdentifier;
+ if (this.sortColumnIdentifier === clickedColumnIdentifier) {
+ if (this.sortOrder !== WebInspector.DataGrid.SortOrder.Descending)
+ this.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
</ins><span class="cx"> else
</span><del>- sortOrder = "ascending";
- }
-
- this._sortColumnCell = cell;
-
- cell.classList.add("sort-" + sortOrder);
-
- this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
</del><ins>+ this.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+ } else
+ this.sortColumnIdentifier = clickedColumnIdentifier;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _mouseoverColumnCollapser: function(event)
</span><span class="lines">@@ -1035,19 +1080,6 @@
</span><span class="cx"> // Implemented by subclasses if needed.
</span><span class="cx"> },
</span><span class="cx">
</span><del>- isColumnSortColumn: function(columnIdentifier)
- {
- return this._sortColumnCell === this._headerTableCellElements.get(columnIdentifier);
- },
-
- markColumnAsSortedBy: function(columnIdentifier, sortOrder)
- {
- if (this._sortColumnCell)
- this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
- this._sortColumnCell = this._headerTableCellElements.get(columnIdentifier);
- this._sortColumnCell.classList.add("sort-" + sortOrder);
- },
-
</del><span class="cx"> headerTableHeader: function(columnIdentifier)
</span><span class="cx"> {
</span><span class="cx"> return this._headerTableCellElements.get(columnIdentifier);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDataGridjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGrid.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGrid.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGrid.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -1,120 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013 Apple 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
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeDataGrid = function() {
- WebInspector.DataGrid.call(this, {
- name: { title: WebInspector.UIString("Node"), sortable: false },
- paintCount: { title: WebInspector.UIString("Paints"), sortable: true, aligned: "right", width: "50px" },
- memory: { title: WebInspector.UIString("Memory"), sortable: true, sort: "descending", aligned: "right", width: "70px" }
- });
-};
-
-WebInspector.LayerTreeDataGrid.prototype = {
- constructor: WebInspector.LayerTreeDataGrid,
-
- insertChild: function(child)
- {
- WebInspector.DataGrid.prototype.insertChild.call(this, child);
-
- this._updateChildren();
- },
-
- removeChild: function(child)
- {
- WebInspector.DataGrid.prototype.removeChild.call(this, child);
-
- this._updateChildren();
- },
-
- setChildren: function(children)
- {
- this._suspendLayout = true;
-
- var removedChildren = this.children.filter(function(child) {
- return !children.contains(child);
- });
-
- while (removedChildren.length)
- this.removeChild(removedChildren.pop());
-
- children.forEach(function(child) {
- if (child.parent !== this)
- this.appendChild(child);
- }.bind(this));
-
- this._suspendLayout = false;
-
- this.children = children;
- this._updateChildren();
- },
-
- _updateChildren: function()
- {
- if (this._suspendLayout)
- return;
-
- // Iterate through nodes by DOM order first so we can establish
- // the DOM index.
- var elements = this.dataTableBodyElement.rows;
- for (var i = 0, count = elements.length - 1; i < count; ++i)
- elements[i]._dataGridNode._domIndex = i;
-
- // Now iterate through children to set up their sibling relationship
- // and update the element style to offset the position of the node
- // to match its position in the children list vs. DOM order.
- var children = this.children;
- for (var i = 0, count = children.length; i < count; ++i) {
- var child = children[i];
- child.previousSibling = i > 0 ? children[i - 1] : null;
- child.nextSibling = i + 1 < count ? children[i + 1] : null;
-
- var ty = (i - child._domIndex) * 100;
- child.element.style.webkitTransform = "translateY(" + ty + "%)";
-
- // Since the DOM order won't necessarily match the visual order of the
- // children in the data grid we manually set "even" and "odd" and CSS
- // class names on the data grid nodes so that they may be styled with
- // a different mechanism than the built-in CSS pseudo-classes.
- var classList = child.element.classList;
- if (i % 2) {
- classList.remove("odd");
- classList.add("even");
- } else {
- classList.remove("even");
- classList.add("odd");
- }
- }
-
- this.hasChildren = this.children.length > 0;
- },
-
- _recalculateSiblings: function(myIndex)
- {
- // Overriding default implementation to do nothing at all
- // since we're setting sibling relationship in _updateChildren.
- }
-};
-
-WebInspector.LayerTreeDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -128,11 +128,28 @@
</span><span class="cx">
</span><span class="cx"> _buildDataGridSection: function()
</span><span class="cx"> {
</span><del>- this._dataGrid = new WebInspector.LayerTreeDataGrid;
</del><ins>+ var columns = {name: {}, paintCount: {}, memory: {}};
</ins><span class="cx">
</span><ins>+ columns.name.title = WebInspector.UIString("Node");
+ columns.name.sortable = false;
+
+ columns.paintCount.title = WebInspector.UIString("Paints");
+ columns.paintCount.sortable = true;
+ columns.paintCount.aligned = "right";
+ columns.paintCount.width = "50px";
+
+ columns.memory.title = WebInspector.UIString("Memory");
+ columns.memory.sortable = true;
+ columns.memory.aligned = "right";
+ columns.memory.width = "70px";
+
+ this._dataGrid = new WebInspector.DataGrid(columns);
</ins><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
</span><span class="cx">
</span><ins>+ this.sortColumnIdentifier = "memory";
+ this.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
+
</ins><span class="cx"> var element = this._dataGrid.element;
</span><span class="cx"> element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
</span><span class="cx"> element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
</span><span class="lines">@@ -159,26 +176,19 @@
</span><span class="cx"> this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
</span><span class="cx"> this._layersMemoryLabel.className = "layers-memory-label";
</span><span class="cx"> },
</span><del>-
</del><ins>+
</ins><span class="cx"> _sortDataGrid: function()
</span><span class="cx"> {
</span><del>- var dataGrid = this._dataGrid;
</del><ins>+ var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
</ins><span class="cx">
</span><del>- var nodes = dataGrid.children.slice();
- var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
- var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-
</del><span class="cx"> function comparator(a, b)
</span><span class="cx"> {
</span><span class="cx"> var item1 = a.layer[sortColumnIdentifier] || 0;
</span><span class="cx"> var item2 = b.layer[sortColumnIdentifier] || 0;
</span><del>- return sortDirection * (item1 - item2);
</del><ins>+ return item1 - item2;
</ins><span class="cx"> };
</span><span class="cx">
</span><del>- nodes.sort(comparator);
-
- dataGrid.setChildren(nodes);
-
</del><ins>+ this._dataGrid.sortNodes(comparator);
</ins><span class="cx"> this._updatePopoverForSelectedNode();
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -50,7 +50,6 @@
</span><span class="cx"> columns.startTime.title = WebInspector.UIString("Start Time");
</span><span class="cx"> columns.startTime.width = "8%";
</span><span class="cx"> columns.startTime.aligned = "right";
</span><del>- columns.startTime.sort = "ascending";
</del><span class="cx">
</span><span class="cx"> columns.duration.title = WebInspector.UIString("Duration");
</span><span class="cx"> columns.duration.width = "8%";
</span><span class="lines">@@ -63,6 +62,9 @@
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</span><span class="cx">
</span><ins>+ this._dataGrid.sortColumnIdentifier = "startTime";
+ this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+
</ins><span class="cx"> this.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName);
</span><span class="cx"> this.element.appendChild(this._dataGrid.element);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLegacyJavaScriptProfileViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LegacyJavaScriptProfileView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LegacyJavaScriptProfileView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LegacyJavaScriptProfileView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -419,7 +419,7 @@
</span><span class="cx">
</span><span class="cx"> _sortProfile: function()
</span><span class="cx"> {
</span><del>- var sortAscending = this.dataGrid.sortOrder === "ascending";
</del><ins>+ var sortAscending = this.dataGrid.sortOrder === WebInspector.DataGrid.SortOrder.Ascending;
</ins><span class="cx"> var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
</span><span class="cx"> var sortProperty = {
</span><span class="cx"> "average": "averageTime",
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -63,7 +63,6 @@
</span><span class="cx"> columns.requestSent.title = WebInspector.UIString("Start Time");
</span><span class="cx"> columns.requestSent.width = "9%";
</span><span class="cx"> columns.requestSent.aligned = "right";
</span><del>- columns.requestSent.sort = "ascending";
</del><span class="cx">
</span><span class="cx"> columns.latency.title = WebInspector.UIString("Latency");
</span><span class="cx"> columns.latency.width = "9%";
</span><span class="lines">@@ -79,6 +78,8 @@
</span><span class="cx"> this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</span><ins>+ this._dataGrid.sortColumnIdentifier = "requestSent";
+ this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
</ins><span class="cx">
</span><span class="cx"> this.element.classList.add(WebInspector.NetworkTimelineView.StyleClassName);
</span><span class="cx"> this.element.appendChild(this._dataGrid.element);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -359,22 +359,16 @@
</span><span class="cx">
</span><span class="cx"> function sortDataGrid()
</span><span class="cx"> {
</span><del>- var nodes = dataGrid.children.slice();
</del><span class="cx"> var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
</span><del>- var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
</del><span class="cx">
</span><span class="cx"> function comparator(a, b)
</span><span class="cx"> {
</span><span class="cx"> var item1 = a.data[sortColumnIdentifier];
</span><span class="cx"> var item2 = b.data[sortColumnIdentifier];
</span><del>- return sortDirection * item1.localeCompare(item2);
</del><ins>+ return item1.localeCompare(item2);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- nodes.sort(comparator);
-
- dataGrid.removeChildren();
- for (var i = 0; i < nodes.length; i++)
- dataGrid.appendChild(nodes[i]);
</del><ins>+ dataGrid.sortNodes(comparator);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return dataGrid;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -42,7 +42,6 @@
</span><span class="cx"> columns.startTime.title = WebInspector.UIString("Start Time");
</span><span class="cx"> columns.startTime.width = "10%";
</span><span class="cx"> columns.startTime.aligned = "right";
</span><del>- columns.startTime.sort = "ascending";
</del><span class="cx">
</span><span class="cx"> columns.totalTime.title = WebInspector.UIString("Total Time");
</span><span class="cx"> columns.totalTime.width = "10%";
</span><span class="lines">@@ -62,6 +61,8 @@
</span><span class="cx"> this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns, this);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
</span><span class="cx"> this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
</span><ins>+ this._dataGrid.sortColumnIdentifier = "startTime";
+ this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
</ins><span class="cx">
</span><span class="cx"> this.element.classList.add(WebInspector.ScriptTimelineView.StyleClassName);
</span><span class="cx"> this.element.appendChild(this._dataGrid.element);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (165486 => 165487)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js 2014-03-12 18:17:43 UTC (rev 165486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js 2014-03-12 18:18:29 UTC (rev 165487)
</span><span class="lines">@@ -320,7 +320,7 @@
</span><span class="cx"> if (!sortColumnIdentifier)
</span><span class="cx"> return 0;
</span><span class="cx">
</span><del>- var sortDirection = this.sortOrder === "ascending" ? 1 : -1;
</del><ins>+ var sortDirection = this.sortOrder === WebInspector.DataGrid.SortOrder.Ascending ? 1 : -1;
</ins><span class="cx">
</span><span class="cx"> var value1 = node1.data[sortColumnIdentifier];
</span><span class="cx"> var value2 = node2.data[sortColumnIdentifier];
</span></span></pre>
</div>
</div>
</body>
</html>