Changeset 109372 in webkit


Ignore:
Timestamp:
Mar 1, 2012 11:12:29 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

2012-03-01 Pavel Feldman <​pfeldman@chromium.org>

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 <​pfeldman@chromium.org>

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.
Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r109369 r109372  
     12012-03-01  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: arrays in object properties sections do not scale.
     4        https://bugs.webkit.org/show_bug.cgi?id=64596
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        * inspector/console/console-big-array-expected.txt: Added.
     9        * inspector/console/console-big-array.html: Added.
     10
    1112012-03-01  Tom Sepez  <tsepez@chromium.org>
    212

  • trunk/Source/WebCore/ChangeLog

    r109370 r109372  
     12012-03-01  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: arrays in object properties sections do not scale.
     4        https://bugs.webkit.org/show_bug.cgi?id=64596
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        Test: inspector/console/console-big-array.html
     9
     10        * inspector/front-end/ConsoleMessage.js:
     11        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsArray):
     12        (WebInspector.ConsoleMessageImpl.prototype._printArray):
     13        * inspector/front-end/ObjectPropertiesSection.js:
     14        (WebInspector.ObjectPropertiesSection.prototype.updateProperties):
     15        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate.callback):
     16        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate):
     17        (WebInspector.ObjectPropertyTreeElement.prototype.startEditing):
     18        (WebInspector.ArrayGroupingTreeElement):
     19        (WebInspector.ArrayGroupingTreeElement.populateAsArray):
     20        (WebInspector.ArrayGroupingTreeElement._populate.appendElement):
     21        (WebInspector.ArrayGroupingTreeElement._populate):
     22        (WebInspector.ArrayGroupingTreeElement.prototype.onpopulate):
     23        * inspector/front-end/RemoteObject.js:
     24        (WebInspector.RemoteObject.prototype.release):
     25        (WebInspector.RemoteObject.prototype.arrayLength):
     26        (WebInspector.LocalJSONObject.prototype.isError):
     27        (WebInspector.LocalJSONObject.prototype.arrayLength):
     28        * inspector/front-end/ScopeChainSidebarPane.js:
     29        (WebInspector.ScopeVariableTreeElement.prototype.get propertyPath):
     30        * inspector/front-end/StylesSidebarPane.js:
     31        (WebInspector.StylePropertyTreeElement.prototype._mouseDown):
     32        * inspector/front-end/inspector.css:
     33        (.console-formatted-object, .console-formatted-node, .console-formatted-array):
     34        (.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section):
     35
    1362012-03-01  Adam Barth  <abarth@webkit.org>
    237

  • trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js

    r108971 r109372  
    287287    },
    288288
    289     _formatParameterAsArray: function(arr, elem)
    290     {
    291         arr.getOwnProperties(this._printArray.bind(this, elem));
     289    _formatParameterAsArray: function(array, elem)
     290    {
     291        const maxFlatArrayLength = 100;
     292        if (array.arrayLength() > maxFlatArrayLength)
     293            this._formatParameterAsObject(array, elem);
     294        else
     295            array.getOwnProperties(this._printArray.bind(this, array, elem));
    292296    },
    293297
    … …  
    305309    },
    306310
    307     _printArray: function(elem, properties)
     311    _printArray: function(array, elem, properties)
    308312    {
    309313        if (!properties)
    … …  
    311315
    312316        var elements = [];
    313         var length = 0;
    314317        for (var i = 0; i < properties.length; ++i) {
    315318            var property = properties[i];
    316319            var name = property.name;
    317             if (name === "length")
    318                 length = parseInt(property.value.description, 10);
    319             if (name == parseInt(name, 10))
     320            if (!isNaN(name))
    320321                elements[name] = this._formatAsArrayEntry(property.value);
    321322        }
    … …  
    332333        }
    333334
     335        var length = array.arrayLength();
    334336        for (var i = 0; i < length; ++i) {
    335337            var element = elements[i];

  • trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js

    r108495 r109372  
    8989            if (this.skipProto && properties[i].name === "__proto__")
    9090                continue;
    91 
    9291            properties[i].parentObject = this.object;
     92        }
     93
     94        this.propertiesForTest = properties;
     95
     96        if (this.object && this.object.arrayLength() > WebInspector.ArrayGroupingTreeElement._bucketThreshold) {
     97            WebInspector.ArrayGroupingTreeElement.populateAsArray(this.propertiesTreeOutline, rootTreeElementConstructor, properties);
     98            return;
     99        }
     100
     101        for (var i = 0; i < properties.length; ++i)
    93102            this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
    94         }
    95103
    96104        if (!this.propertiesTreeOutline.children.length) {
    … …  
    101109            this.propertiesTreeOutline.appendChild(infoElement);
    102110        }
    103         this.propertiesForTest = properties;
    104111    }
    105112}
    … …  
    177184                return;
    178185
     186            if (this.property.value.type === "array") {
     187                WebInspector.ArrayGroupingTreeElement.populateAsArray(this, this.treeOutline.section.treeElementConstructor, properties);
     188                return;
     189            }
     190
    179191            properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
    180192            for (var i = 0; i < properties.length; ++i) {
    … …  
    293305    startEditing: function()
    294306    {
    295         if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
     307        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable || this._readOnly)
    296308            return;
    297309
    … …  
    360372
    361373WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
     374
     375WebInspector.ArrayGroupingTreeElement = function(treeElementConstructor, properties, fromIndex, toIndex)
     376{
     377    this._properties = properties;
     378    this._fromIndex = fromIndex;
     379    this._toIndex = toIndex;
     380    this._treeElementConstructor = treeElementConstructor;
     381
     382    TreeElement.call(this, "[" + this._properties[fromIndex].name + " \u2026 " + this._properties[toIndex - 1].name + "]", null, true);
     383}
     384
     385WebInspector.ArrayGroupingTreeElement._bucketThreshold = 20;
     386
     387WebInspector.ArrayGroupingTreeElement.populateAsArray = function(parentTreeElement, treeElementConstructor, properties)
     388{
     389    var nonIndexProperties = [];
     390
     391    for (var i = properties.length - 1; i >= 0; --i) {
     392        if (!isNaN(properties[i].name)) {
     393            // We've reached index properties, trim properties and break.
     394            properties.length = i + 1;
     395            break;
     396        }
     397
     398        nonIndexProperties.push(properties[i]);
     399    }
     400
     401    WebInspector.ArrayGroupingTreeElement._populate(parentTreeElement, treeElementConstructor, properties, 0, properties.length);
     402
     403    nonIndexProperties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
     404    for (var i = 0; i < nonIndexProperties.length; ++i) {
     405        var treeElement = new treeElementConstructor(nonIndexProperties[i]);
     406        treeElement._readOnly = true;
     407        parentTreeElement.appendChild(treeElement);
     408    }
     409}
     410
     411WebInspector.ArrayGroupingTreeElement._populate = function(parentTreeElement, treeElementConstructor, properties, fromIndex, toIndex)
     412{
     413    parentTreeElement.removeChildren();
     414    const bucketThreshold = WebInspector.ArrayGroupingTreeElement._bucketThreshold;
     415    var range = toIndex - fromIndex;
     416
     417    function appendElement(i)
     418    {
     419        var treeElement = new treeElementConstructor(properties[i]);
     420        treeElement._readOnly = true;
     421        parentTreeElement.appendChild(treeElement);
     422    }
     423
     424    if (range <= bucketThreshold) {
     425        for (var i = fromIndex; i < toIndex; ++i)
     426            appendElement(i);
     427        return;
     428    }
     429
     430    var bucketSize = Math.ceil(range / bucketThreshold);
     431    if (bucketSize < bucketThreshold)
     432        bucketSize = Math.floor(Math.sqrt(range));
     433
     434    for (var i = fromIndex; i < toIndex; i += bucketSize) {
     435        var to = Math.min(i + bucketSize, toIndex);
     436        if (to - i > 1) {
     437            var group = new WebInspector.ArrayGroupingTreeElement(treeElementConstructor, properties, i, to);
     438            parentTreeElement.appendChild(group);
     439        } else
     440            appendElement(i);
     441    }
     442}
     443
     444WebInspector.ArrayGroupingTreeElement.prototype = {
     445    onpopulate: function()
     446    {
     447        WebInspector.ArrayGroupingTreeElement._populate(this, this._treeElementConstructor, this._properties, this._fromIndex, this._toIndex);
     448    }
     449}
     450
     451WebInspector.ArrayGroupingTreeElement.prototype.__proto__ = TreeElement.prototype;

  • trunk/Source/WebCore/inspector/front-end/RemoteObject.js

    r106244 r109372  
    302302    {
    303303        RuntimeAgent.releaseObject(this._objectId);
     304    },
     305
     306    /**
     307     * @return {number}
     308     */
     309    arrayLength: function()
     310    {
     311        if (this.subtype !== "array")
     312            return 0;
     313
     314        var matches = this._description.match(/\[([0-9]+)\]/);
     315        if (!matches)
     316            return 0;
     317        return parseInt(matches[1], 10);
    304318    }
    305319}
    … …  
    475489    {
    476490        return false;
     491    },
     492
     493    /**
     494     * @return {number}
     495     */
     496    arrayLength: function()
     497    {
     498        return this._value instanceof Array ? this._value.length : 0;
    477499    }
    478500}

  • trunk/Source/WebCore/inspector/front-end/ScopeChainSidebarPane.js

    r103711 r109372  
    168168
    169169        do {
    170             if (result)
    171                 result = current.property.name + "." + result;
    172             else
    173                 result = current.property.name;
     170            if (current.property) {
     171                if (result)
     172                    result = current.property.name + "." + result;
     173                else
     174                    result = current.property.name;
     175            }
    174176            current = current.parent;
    175177        } while (current && !current.root);

  • trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

    r108995 r109372  
    16241624    _mouseDown: function(event)
    16251625    {
    1626         this._parentPane._mouseDownTreeElement = this;
    1627         this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
    1628         this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
     1626        if (this._parentPane) {
     1627            this._parentPane._mouseDownTreeElement = this;
     1628            this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
     1629            this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
     1630        }
    16291631    },
    16301632

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r108993 r109372  
    896896}
    897897
    898 .console-formatted-object, .console-formatted-node {
     898.console-formatted-object, .console-formatted-node, .console-formatted-array {
    899899    position: relative;
    900900    display: inline-block;
    … …  
    903903}
    904904
    905 .console-formatted-object .section, .console-formatted-node .section {
     905.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
    906906    position: static;
    907907}
Note: See TracChangeset for help on using the changeset viewer.