Title: [109372] trunk
Revision
109372
Author
[email protected]
Date
2012-03-01 11:12:29 -0800 (Thu, 01 Mar 2012)

Log Message

2012-03-01  Pavel Feldman  <[email protected]>

        Web Inspector: arrays in object properties sections do not scale.
        https://bugs.webkit.org/show_bug.cgi?id=64596

        Reviewed by Vsevolod Vlasov.

        Test: inspector/console/console-big-array.html

        * inspector/front-end/ConsoleMessage.js:
        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsArray):
        (WebInspector.ConsoleMessageImpl.prototype._printArray):
        * inspector/front-end/ObjectPropertiesSection.js:
        (WebInspector.ObjectPropertiesSection.prototype.updateProperties):
        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate.callback):
        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate):
        (WebInspector.ObjectPropertyTreeElement.prototype.startEditing):
        (WebInspector.ArrayGroupingTreeElement):
        (WebInspector.ArrayGroupingTreeElement.populateAsArray):
        (WebInspector.ArrayGroupingTreeElement._populate.appendElement):
        (WebInspector.ArrayGroupingTreeElement._populate):
        (WebInspector.ArrayGroupingTreeElement.prototype.onpopulate):
        * inspector/front-end/RemoteObject.js:
        (WebInspector.RemoteObject.prototype.release):
        (WebInspector.RemoteObject.prototype.arrayLength):
        (WebInspector.LocalJSONObject.prototype.isError):
        (WebInspector.LocalJSONObject.prototype.arrayLength):
        * inspector/front-end/ScopeChainSidebarPane.js:
        (WebInspector.ScopeVariableTreeElement.prototype.get propertyPath):
        * inspector/front-end/StylesSidebarPane.js:
        (WebInspector.StylePropertyTreeElement.prototype._mouseDown):
        * inspector/front-end/inspector.css:
        (.console-formatted-object, .console-formatted-node, .console-formatted-array):
        (.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section):

2012-03-01  Pavel Feldman  <[email protected]>

        Web Inspector: arrays in object properties sections do not scale.
        https://bugs.webkit.org/show_bug.cgi?id=64596

        Reviewed by Vsevolod Vlasov.

        * inspector/console/console-big-array-expected.txt: Added.
        * inspector/console/console-big-array.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (109371 => 109372)


--- trunk/LayoutTests/ChangeLog	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/LayoutTests/ChangeLog	2012-03-01 19:12:29 UTC (rev 109372)
@@ -1,3 +1,13 @@
+2012-03-01  Pavel Feldman  <[email protected]>
+
+        Web Inspector: arrays in object properties sections do not scale.
+        https://bugs.webkit.org/show_bug.cgi?id=64596
+
+        Reviewed by Vsevolod Vlasov.
+
+        * inspector/console/console-big-array-expected.txt: Added.
+        * inspector/console/console-big-array.html: Added.
+
 2012-03-01  Tom Sepez  <[email protected]>
 
         Move m_frame protector from FrameLoader::changeLocation to FrameLoader::urlSelected

Added: trunk/LayoutTests/inspector/console/console-big-array-expected.txt (0 => 109372)


--- trunk/LayoutTests/inspector/console/console-big-array-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/inspector/console/console-big-array-expected.txt	2012-03-01 19:12:29 UTC (rev 109372)
@@ -0,0 +1,56 @@
+CONSOLE MESSAGE: line 13: 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,100
+CONSOLE MESSAGE: line 19: 0,1,2,3,4,5,6,7,8,9,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,100
+Tests that console logging dumps large arrays properly.
+
+
+
+console-big-array.html:13Array[101]
+    [0 … 4]
+    0: 0
+    1: 1
+    2: 2
+    3: 3
+    4: 4
+    [5 … 9]
+    5: 5
+    6: 6
+    7: 7
+    8: 8
+    9: 9
+    [10 … 14]
+    10: 10
+    11: 11
+    12: 12
+    13: 13
+    14: 14
+    [15 … 19]
+    15: 15
+    16: 16
+    17: 17
+    18: 18
+    19: 19
+    [20 … 24]
+    20: 20
+    21: 21
+    22: 22
+    23: 23
+    24: 24
+    100: 100
+    length: 101
+    __proto__: Array[0]
+
+console-big-array.html:19Array[101]
+    0: 0
+    1: 1
+    2: 2
+    3: 3
+    4: 4
+    5: 5
+    6: 6
+    7: 7
+    8: 8
+    9: 9
+    100: 100
+    length: 101
+    __proto__: Array[0]
+
Property changes on: trunk/LayoutTests/inspector/console/console-big-array-expected.txt
___________________________________________________________________

Added: svn:eol-style

Added: trunk/LayoutTests/inspector/console/console-big-array.html (0 => 109372)


--- trunk/LayoutTests/inspector/console/console-big-array.html	                        (rev 0)
+++ trunk/LayoutTests/inspector/console/console-big-array.html	2012-03-01 19:12:29 UTC (rev 109372)
@@ -0,0 +1,62 @@
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+
+function onload()
+{
+    var a = [];
+    for (var i = 0; i < 25; ++i)
+        a[i] = i;
+    a[100] = 100;
+    console.dir(a);
+
+    var b = [];
+    for (var i = 0; i < 10; ++i)
+        b[i] = i;
+    b[100] = 100;
+    console.dir(b);
+
+    runTest();
+}
+
+function test()
+{
+    var messages = WebInspector.console.messages;
+    var sections = [];
+    for (var i = 0; i < messages.length; ++i) {
+        var element = messages[i].toMessageElement();
+        var node = element.traverseNextNode(element);
+        while (node) {
+            if (node._section) {
+                sections.push(node._section);
+                messages[i].section = node._section;
+                node._section.expanded = true;
+            }
+            node = node.traverseNextNode(element);
+        }
+    }
+
+    InspectorTest.runAfterPendingDispatches(dumpConsoleMessages);
+
+    function dumpConsoleMessages()
+    {
+        for (var i = 0; i < sections.length; ++i)
+            for (var j = 0; j < sections[i].propertiesTreeOutline.children.length; ++j)
+                sections[i].propertiesTreeOutline.children[j].expandRecursively();
+        InspectorTest.addResult(InspectorTest.textContentWithLineBreaks(WebInspector.consoleView.messagesElement));
+        InspectorTest.completeTest();
+    }
+}
+
+</script>
+</head>
+
+<body _onload_="onload()">
+<p>
+Tests that console logging dumps large arrays properly.
+</p>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/inspector/console/console-big-array.html
___________________________________________________________________

Added: svn:eol-style

Modified: trunk/Source/WebCore/ChangeLog (109371 => 109372)


--- trunk/Source/WebCore/ChangeLog	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/ChangeLog	2012-03-01 19:12:29 UTC (rev 109372)
@@ -1,3 +1,38 @@
+2012-03-01  Pavel Feldman  <[email protected]>
+
+        Web Inspector: arrays in object properties sections do not scale.
+        https://bugs.webkit.org/show_bug.cgi?id=64596
+
+        Reviewed by Vsevolod Vlasov.
+
+        Test: inspector/console/console-big-array.html
+
+        * inspector/front-end/ConsoleMessage.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsArray):
+        (WebInspector.ConsoleMessageImpl.prototype._printArray):
+        * inspector/front-end/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertiesSection.prototype.updateProperties):
+        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate.callback):
+        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate):
+        (WebInspector.ObjectPropertyTreeElement.prototype.startEditing):
+        (WebInspector.ArrayGroupingTreeElement):
+        (WebInspector.ArrayGroupingTreeElement.populateAsArray):
+        (WebInspector.ArrayGroupingTreeElement._populate.appendElement):
+        (WebInspector.ArrayGroupingTreeElement._populate):
+        (WebInspector.ArrayGroupingTreeElement.prototype.onpopulate):
+        * inspector/front-end/RemoteObject.js:
+        (WebInspector.RemoteObject.prototype.release):
+        (WebInspector.RemoteObject.prototype.arrayLength):
+        (WebInspector.LocalJSONObject.prototype.isError):
+        (WebInspector.LocalJSONObject.prototype.arrayLength):
+        * inspector/front-end/ScopeChainSidebarPane.js:
+        (WebInspector.ScopeVariableTreeElement.prototype.get propertyPath):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.prototype._mouseDown):
+        * inspector/front-end/inspector.css:
+        (.console-formatted-object, .console-formatted-node, .console-formatted-array):
+        (.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section):
+
 2012-03-01  Adam Barth  <[email protected]>
 
         Unreviewed, rolling out r109336.

Modified: trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js	2012-03-01 19:12:29 UTC (rev 109372)
@@ -286,9 +286,13 @@
         object.pushNodeToFrontend(printNode.bind(this));
     },
 
-    _formatParameterAsArray: function(arr, elem)
+    _formatParameterAsArray: function(array, elem)
     {
-        arr.getOwnProperties(this._printArray.bind(this, elem));
+        const maxFlatArrayLength = 100;
+        if (array.arrayLength() > maxFlatArrayLength)
+            this._formatParameterAsObject(array, elem);
+        else
+            array.getOwnProperties(this._printArray.bind(this, array, elem));
     },
 
     _formatParameterAsString: function(output, elem)
@@ -304,19 +308,16 @@
         elem.appendChild(document.createTextNode("\""));
     },
 
-    _printArray: function(elem, properties)
+    _printArray: function(array, elem, properties)
     {
         if (!properties)
             return;
 
         var elements = [];
-        var length = 0;
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
             var name = property.name;
-            if (name === "length")
-                length = parseInt(property.value.description, 10);
-            if (name == parseInt(name, 10))
+            if (!isNaN(name))
                 elements[name] = this._formatAsArrayEntry(property.value);
         }
 
@@ -331,6 +332,7 @@
             span.textContent = WebInspector.UIString("undefined × %d", index - lastNonEmptyIndex - 1);
         }
 
+        var length = array.arrayLength();
         for (var i = 0; i < length; ++i) {
             var element = elements[i];
             if (!element)

Modified: trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js	2012-03-01 19:12:29 UTC (rev 109372)
@@ -88,11 +88,19 @@
         for (var i = 0; i < properties.length; ++i) {
             if (this.skipProto && properties[i].name === "__proto__")
                 continue;
-
             properties[i].parentObject = this.object;
-            this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
         }
 
+        this.propertiesForTest = properties;
+
+        if (this.object && this.object.arrayLength() > WebInspector.ArrayGroupingTreeElement._bucketThreshold) {
+            WebInspector.ArrayGroupingTreeElement.populateAsArray(this.propertiesTreeOutline, rootTreeElementConstructor, properties);
+            return;
+        } 
+
+        for (var i = 0; i < properties.length; ++i)
+            this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
+
         if (!this.propertiesTreeOutline.children.length) {
             var title = document.createElement("div");
             title.className = "info";
@@ -100,7 +108,6 @@
             var infoElement = new TreeElement(title, null, false);
             this.propertiesTreeOutline.appendChild(infoElement);
         }
-        this.propertiesForTest = properties;
     }
 }
 
@@ -176,6 +183,11 @@
             if (!properties)
                 return;
 
+            if (this.property.value.type === "array") {
+                WebInspector.ArrayGroupingTreeElement.populateAsArray(this, this.treeOutline.section.treeElementConstructor, properties);
+                return;
+            }
+
             properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
             for (var i = 0; i < properties.length; ++i) {
                 this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
@@ -292,7 +304,7 @@
 
     startEditing: function()
     {
-        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
+        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable || this._readOnly)
             return;
 
         var context = { expanded: this.expanded };
@@ -359,3 +371,81 @@
 }
 
 WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
+
+WebInspector.ArrayGroupingTreeElement = function(treeElementConstructor, properties, fromIndex, toIndex)
+{
+    this._properties = properties;
+    this._fromIndex = fromIndex;
+    this._toIndex = toIndex;
+    this._treeElementConstructor = treeElementConstructor;
+
+    TreeElement.call(this, "[" + this._properties[fromIndex].name + " \u2026 " + this._properties[toIndex - 1].name + "]", null, true);
+}
+
+WebInspector.ArrayGroupingTreeElement._bucketThreshold = 20;
+
+WebInspector.ArrayGroupingTreeElement.populateAsArray = function(parentTreeElement, treeElementConstructor, properties)
+{
+    var nonIndexProperties = [];
+
+    for (var i = properties.length - 1; i >= 0; --i) {
+        if (!isNaN(properties[i].name)) {
+            // We've reached index properties, trim properties and break.
+            properties.length = i + 1;
+            break;
+        }
+
+        nonIndexProperties.push(properties[i]);
+    }
+
+    WebInspector.ArrayGroupingTreeElement._populate(parentTreeElement, treeElementConstructor, properties, 0, properties.length);
+
+    nonIndexProperties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
+    for (var i = 0; i < nonIndexProperties.length; ++i) {
+        var treeElement = new treeElementConstructor(nonIndexProperties[i]);
+        treeElement._readOnly = true; 
+        parentTreeElement.appendChild(treeElement);
+    }
+}
+
+WebInspector.ArrayGroupingTreeElement._populate = function(parentTreeElement, treeElementConstructor, properties, fromIndex, toIndex)
+{
+    parentTreeElement.removeChildren();
+    const bucketThreshold = WebInspector.ArrayGroupingTreeElement._bucketThreshold;
+    var range = toIndex - fromIndex;
+
+    function appendElement(i)
+    {
+        var treeElement = new treeElementConstructor(properties[i]);
+        treeElement._readOnly = true;
+        parentTreeElement.appendChild(treeElement);
+    }
+
+    if (range <= bucketThreshold) {
+        for (var i = fromIndex; i < toIndex; ++i)
+            appendElement(i);
+        return;
+    }
+
+    var bucketSize = Math.ceil(range / bucketThreshold);
+    if (bucketSize < bucketThreshold)
+        bucketSize = Math.floor(Math.sqrt(range));
+
+    for (var i = fromIndex; i < toIndex; i += bucketSize) {
+        var to = Math.min(i + bucketSize, toIndex);
+        if (to - i > 1) {
+            var group = new WebInspector.ArrayGroupingTreeElement(treeElementConstructor, properties, i, to);
+            parentTreeElement.appendChild(group);
+        } else
+            appendElement(i);
+    }
+}
+
+WebInspector.ArrayGroupingTreeElement.prototype = {
+    onpopulate: function()
+    {
+        WebInspector.ArrayGroupingTreeElement._populate(this, this._treeElementConstructor, this._properties, this._fromIndex, this._toIndex);
+    }
+}
+
+WebInspector.ArrayGroupingTreeElement.prototype.__proto__ = TreeElement.prototype;

Modified: trunk/Source/WebCore/inspector/front-end/RemoteObject.js (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/RemoteObject.js	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/RemoteObject.js	2012-03-01 19:12:29 UTC (rev 109372)
@@ -301,6 +301,20 @@
     release: function()
     {
         RuntimeAgent.releaseObject(this._objectId);
+    },
+
+    /**
+     * @return {number}
+     */
+    arrayLength: function()
+    {
+        if (this.subtype !== "array")
+            return 0;
+
+        var matches = this._description.match(/\[([0-9]+)\]/);
+        if (!matches)
+            return 0;
+        return parseInt(matches[1], 10);
     }
 }
 
@@ -474,5 +488,13 @@
     isError: function()
     {
         return false;
+    },
+
+    /**
+     * @return {number}
+     */
+    arrayLength: function()
+    {
+        return this._value instanceof Array ? this._value.length : 0;
     }
 }

Modified: trunk/Source/WebCore/inspector/front-end/ScopeChainSidebarPane.js (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/ScopeChainSidebarPane.js	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/ScopeChainSidebarPane.js	2012-03-01 19:12:29 UTC (rev 109372)
@@ -167,10 +167,12 @@
         var result;
 
         do {
-            if (result)
-                result = current.property.name + "." + result;
-            else
-                result = current.property.name;
+            if (current.property) {
+                if (result)
+                    result = current.property.name + "." + result;
+                else
+                    result = current.property.name;
+            }
             current = current.parent;
         } while (current && !current.root);
 

Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2012-03-01 19:12:29 UTC (rev 109372)
@@ -1623,9 +1623,11 @@
 
     _mouseDown: function(event)
     {
-        this._parentPane._mouseDownTreeElement = this;
-        this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
-        this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
+        if (this._parentPane) {
+            this._parentPane._mouseDownTreeElement = this;
+            this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
+            this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
+        }
     },
 
     _resetMouseDownElement: function()

Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (109371 => 109372)


--- trunk/Source/WebCore/inspector/front-end/inspector.css	2012-03-01 19:05:14 UTC (rev 109371)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css	2012-03-01 19:12:29 UTC (rev 109372)
@@ -895,14 +895,14 @@
     display: none;
 }
 
-.console-formatted-object, .console-formatted-node {
+.console-formatted-object, .console-formatted-node, .console-formatted-array {
     position: relative;
     display: inline-block;
     vertical-align: top;
     color: black;
 }
 
-.console-formatted-object .section, .console-formatted-node .section {
+.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
     position: static;
 }
 
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to