Web Inspector: localStorage inspector very slow on big values
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Feb 2016 23:42:53 +0000 (23:42 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Feb 2016 23:42:53 +0000 (23:42 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196342 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js
Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js

index 32168da..782d708 100644 (file)
@@ -1,5 +1,36 @@
 2016-02-09  Joseph Pecoraro  <pecoraro@apple.com>
 
+        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>
+
         Web Inspector: Expiration column in Storage tab can't be sorted
         https://bugs.webkit.org/show_bug.cgi?id=154043
         <rdar://problem/24572272>
index 32127af..9da0a4c 100644 (file)
@@ -70,10 +70,11 @@ WebInspector.DOMStorageObject = class DOMStorageObject extends WebInspector.Obje
             if (error)
                 return;
 
-            for (var entry of entries) {
-                if (!entry[0] || !entry[1])
+            for (let [key, value] of entries) {
+                if (!key || !value)
                     continue;
-                this._entries.set(entry[0], entry[1]);
+
+                this._entries.set(key, value);
             }
 
             callback(error, entries);
@@ -113,8 +114,7 @@ WebInspector.DOMStorageObject = class DOMStorageObject extends WebInspector.Obje
     itemUpdated(key, oldValue, value)
     {
         this._entries.set(key, value);
-        var data = {key, oldValue, value};
-        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemUpdated, data);
+        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemUpdated, {key, oldValue, value});
     }
 };
 
index d809420..f8e2451 100644 (file)
@@ -37,7 +37,7 @@ WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInsp
         representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemRemoved, this.itemRemoved, this);
         representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemUpdated, this.itemUpdated, this);
 
-        var columns = {};
+        let columns = {};
         columns.key = {title: WebInspector.UIString("Key"), sortable: true};
         columns.value = {title: WebInspector.UIString("Value"), sortable: true};
 
@@ -68,7 +68,7 @@ WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInsp
 
     itemRemoved(event)
     {
-        for (var node of this._dataGrid.children) {
+        for (let node of this._dataGrid.children) {
             if (node.data.key === event.data.key)
                 return this._dataGrid.removeChild(node);
         }
@@ -76,27 +76,26 @@ WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInsp
 
     itemAdded(event)
     {
-        var key = event.data.key;
-        var value = event.data.value;
+        let {key, value} = event.data;
+        value = this._truncateValue(value);
 
         // Enforce key uniqueness.
-        for (var node of this._dataGrid.children) {
+        for (let node of this._dataGrid.children) {
             if (node.data.key === key)
                 return;
         }
 
-        var data = {key, value};
-        this._dataGrid.appendChild(new WebInspector.DataGridNode(data, false));
+        this._dataGrid.appendChild(new WebInspector.DataGridNode({key, value}, false));
         this._sortDataGrid();
     }
 
     itemUpdated(event)
     {
-        var key = event.data.key;
-        var value = event.data.value;
+        let {key, value} = event.data;
+        value = this._truncateValue(value);
 
-        var keyFound = false;
-        for (var childNode of this._dataGrid.children) {
+        let keyFound = false;
+        for (let childNode of this._dataGrid.children) {
             if (childNode.data.key === key) {
                 // Remove any rows that are now duplicates.
                 if (keyFound) {
@@ -121,18 +120,23 @@ WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInsp
 
     // Private
 
+    _truncateValue(value)
+    {
+        return value.truncate(200);
+    }
+
     _populate()
     {
         this.representedObject.getEntries(function(error, entries) {
             if (error)
                 return;
 
-            var nodes = [];
-            for (var entry of entries) {
-                if (!entry[0] || !entry[1])
+            for (let [key, value] of entries) {
+                if (!key || !value)
                     continue;
-                var data = {key: entry[0], value: entry[1]};
-                var node = new WebInspector.DataGridNode(data, false);
+
+                value = this._truncateValue(value);
+                let node = new WebInspector.DataGridNode({key, value}, false);
                 this._dataGrid.appendChild(node);
             }
 
@@ -144,7 +148,7 @@ WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInsp
 
     _sortDataGrid()
     {
-        var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier || "key";
+        let sortColumnIdentifier = this._dataGrid.sortColumnIdentifier || "key";
 
         function comparator(a, b)
         {