<!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>[196342] 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/196342">196342</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-09 15:42:53 -0800 (Tue, 09 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: localStorage inspector very slow on big values
https://bugs.webkit.org/show_bug.cgi?id=123750
<rdar://problem/15384930>
Patch by Joseph Pecoraro <pecoraro@apple.com> on 2016-02-09
Reviewed by Timothy Hatcher.
It is not useful to show very large strings in the DOM Storage DataGrid.
This change truncates display strings to roughly 200 characters. If the
developer really wants the full value of the string they can just access
it through localStorage.
* UserInterface/Models/DOMStorageObject.js:
(WebInspector.DOMStorageObject.prototype.getEntries.innerCallback):
(WebInspector.DOMStorageObject.prototype.getEntries):
(WebInspector.DOMStorageObject.prototype.itemUpdated):
Modernize.
* UserInterface/Views/DOMStorageContentView.js:
(WebInspector.DOMStorageContentView):
(WebInspector.DOMStorageContentView.prototype.itemRemoved):
Modernize.
(WebInspector.DOMStorageContentView.prototype.itemAdded):
(WebInspector.DOMStorageContentView.prototype.itemUpdated):
(WebInspector.DOMStorageContentView.prototype._truncateValue):
(WebInspector.DOMStorageContentView.prototype._populate):
Whenever we get a value that we will display, truncate it to
just 200 characters.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsDOMStorageObjectjs">trunk/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMStorageContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (196341 => 196342)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-09 23:04:27 UTC (rev 196341)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-09 23:42:53 UTC (rev 196342)
</span><span class="lines">@@ -1,5 +1,36 @@
</span><span class="cx"> 2016-02-09 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: localStorage inspector very slow on big values
+ https://bugs.webkit.org/show_bug.cgi?id=123750
+ <rdar://problem/15384930>
+
+ Reviewed by Timothy Hatcher.
+
+ It is not useful to show very large strings in the DOM Storage DataGrid.
+ This change truncates display strings to roughly 200 characters. If the
+ developer really wants the full value of the string they can just access
+ it through localStorage.
+
+ * UserInterface/Models/DOMStorageObject.js:
+ (WebInspector.DOMStorageObject.prototype.getEntries.innerCallback):
+ (WebInspector.DOMStorageObject.prototype.getEntries):
+ (WebInspector.DOMStorageObject.prototype.itemUpdated):
+ Modernize.
+
+ * UserInterface/Views/DOMStorageContentView.js:
+ (WebInspector.DOMStorageContentView):
+ (WebInspector.DOMStorageContentView.prototype.itemRemoved):
+ Modernize.
+
+ (WebInspector.DOMStorageContentView.prototype.itemAdded):
+ (WebInspector.DOMStorageContentView.prototype.itemUpdated):
+ (WebInspector.DOMStorageContentView.prototype._truncateValue):
+ (WebInspector.DOMStorageContentView.prototype._populate):
+ Whenever we get a value that we will display, truncate it to
+ just 200 characters.
+
+2016-02-09 Joseph Pecoraro <pecoraro@apple.com>
+
</ins><span class="cx"> Web Inspector: Expiration column in Storage tab can't be sorted
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=154043
</span><span class="cx"> <rdar://problem/24572272>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDOMStorageObjectjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js (196341 => 196342)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js 2016-02-09 23:04:27 UTC (rev 196341)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js 2016-02-09 23:42:53 UTC (rev 196342)
</span><span class="lines">@@ -70,10 +70,11 @@
</span><span class="cx"> if (error)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- for (var entry of entries) {
- if (!entry[0] || !entry[1])
</del><ins>+ for (let [key, value] of entries) {
+ if (!key || !value)
</ins><span class="cx"> continue;
</span><del>- this._entries.set(entry[0], entry[1]);
</del><ins>+
+ this._entries.set(key, value);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> callback(error, entries);
</span><span class="lines">@@ -113,8 +114,7 @@
</span><span class="cx"> itemUpdated(key, oldValue, value)
</span><span class="cx"> {
</span><span class="cx"> this._entries.set(key, value);
</span><del>- var data = {key, oldValue, value};
- this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemUpdated, data);
</del><ins>+ this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemUpdated, {key, oldValue, value});
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMStorageContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js (196341 => 196342)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js 2016-02-09 23:04:27 UTC (rev 196341)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js 2016-02-09 23:42:53 UTC (rev 196342)
</span><span class="lines">@@ -37,7 +37,7 @@
</span><span class="cx"> representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemRemoved, this.itemRemoved, this);
</span><span class="cx"> representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemUpdated, this.itemUpdated, this);
</span><span class="cx">
</span><del>- var columns = {};
</del><ins>+ let columns = {};
</ins><span class="cx"> columns.key = {title: WebInspector.UIString("Key"), sortable: true};
</span><span class="cx"> columns.value = {title: WebInspector.UIString("Value"), sortable: true};
</span><span class="cx">
</span><span class="lines">@@ -68,7 +68,7 @@
</span><span class="cx">
</span><span class="cx"> itemRemoved(event)
</span><span class="cx"> {
</span><del>- for (var node of this._dataGrid.children) {
</del><ins>+ for (let node of this._dataGrid.children) {
</ins><span class="cx"> if (node.data.key === event.data.key)
</span><span class="cx"> return this._dataGrid.removeChild(node);
</span><span class="cx"> }
</span><span class="lines">@@ -76,27 +76,26 @@
</span><span class="cx">
</span><span class="cx"> itemAdded(event)
</span><span class="cx"> {
</span><del>- var key = event.data.key;
- var value = event.data.value;
</del><ins>+ let {key, value} = event.data;
+ value = this._truncateValue(value);
</ins><span class="cx">
</span><span class="cx"> // Enforce key uniqueness.
</span><del>- for (var node of this._dataGrid.children) {
</del><ins>+ for (let node of this._dataGrid.children) {
</ins><span class="cx"> if (node.data.key === key)
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var data = {key, value};
- this._dataGrid.appendChild(new WebInspector.DataGridNode(data, false));
</del><ins>+ this._dataGrid.appendChild(new WebInspector.DataGridNode({key, value}, false));
</ins><span class="cx"> this._sortDataGrid();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> itemUpdated(event)
</span><span class="cx"> {
</span><del>- var key = event.data.key;
- var value = event.data.value;
</del><ins>+ let {key, value} = event.data;
+ value = this._truncateValue(value);
</ins><span class="cx">
</span><del>- var keyFound = false;
- for (var childNode of this._dataGrid.children) {
</del><ins>+ let keyFound = false;
+ for (let childNode of this._dataGrid.children) {
</ins><span class="cx"> if (childNode.data.key === key) {
</span><span class="cx"> // Remove any rows that are now duplicates.
</span><span class="cx"> if (keyFound) {
</span><span class="lines">@@ -121,18 +120,23 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _truncateValue(value)
+ {
+ return value.truncate(200);
+ }
+
</ins><span class="cx"> _populate()
</span><span class="cx"> {
</span><span class="cx"> this.representedObject.getEntries(function(error, entries) {
</span><span class="cx"> if (error)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var nodes = [];
- for (var entry of entries) {
- if (!entry[0] || !entry[1])
</del><ins>+ for (let [key, value] of entries) {
+ if (!key || !value)
</ins><span class="cx"> continue;
</span><del>- var data = {key: entry[0], value: entry[1]};
- var node = new WebInspector.DataGridNode(data, false);
</del><ins>+
+ value = this._truncateValue(value);
+ let node = new WebInspector.DataGridNode({key, value}, false);
</ins><span class="cx"> this._dataGrid.appendChild(node);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -144,7 +148,7 @@
</span><span class="cx">
</span><span class="cx"> _sortDataGrid()
</span><span class="cx"> {
</span><del>- var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier || "key";
</del><ins>+ let sortColumnIdentifier = this._dataGrid.sortColumnIdentifier || "key";
</ins><span class="cx">
</span><span class="cx"> function comparator(a, b)
</span><span class="cx"> {
</span></span></pre>
</div>
</div>
</body>
</html>