Changeset 88337 in webkit


Ignore:
Timestamp:
Jun 8, 2011 4:31:54 AM (13 years ago)
Author:
apavlov@chromium.org
Message:

2011-06-08 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: node selection is slow in the Elements panel.
​https://bugs.webkit.org/show_bug.cgi?id=60813

  • http/tests/inspector/inspect-iframe-from-different-domain.html:
  • inspector/elements/elements-delete-inline-style.html:
  • inspector/elements/elements-panel-styles.html:
  • inspector/styles/styles-add-invalid-property.html:
  • inspector/styles/styles-cancel-editing.html:
  • inspector/styles/styles-commit-editing.html:
  • inspector/styles/styles-computed-trace.html:
  • inspector/styles/styles-disable-inherited.html:
  • inspector/styles/styles-disable-then-change.html:
  • inspector/styles/styles-disable-then-delete.html:
  • inspector/styles/styles-disable-then-enable.html:
  • inspector/styles/styles-iframe.html:
  • inspector/styles/styles-update-from-js-expected.txt:
  • inspector/styles/styles-update-from-js.html:
  • inspector/styles/styles-url-linkify.html:

2011-06-08 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: node selection is slow in the Elements panel.
​https://bugs.webkit.org/show_bug.cgi?id=60813

Schedule full style updates rather than request all node styles from the backend immediately.

  • inspector/front-end/StylesSidebarPane.js: (WebInspector.StylesSidebarPane.prototype.update.reloadAllStyles): (WebInspector.StylesSidebarPane.prototype.update):
Location:
trunk
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r88332 r88337  
     12011-06-08  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: node selection is slow in the Elements panel.
     6        https://bugs.webkit.org/show_bug.cgi?id=60813
     7
     8        * http/tests/inspector/inspect-iframe-from-different-domain.html:
     9        * inspector/elements/elements-delete-inline-style.html:
     10        * inspector/elements/elements-panel-styles.html:
     11        * inspector/styles/styles-add-invalid-property.html:
     12        * inspector/styles/styles-cancel-editing.html:
     13        * inspector/styles/styles-commit-editing.html:
     14        * inspector/styles/styles-computed-trace.html:
     15        * inspector/styles/styles-disable-inherited.html:
     16        * inspector/styles/styles-disable-then-change.html:
     17        * inspector/styles/styles-disable-then-delete.html:
     18        * inspector/styles/styles-disable-then-enable.html:
     19        * inspector/styles/styles-iframe.html:
     20        * inspector/styles/styles-update-from-js-expected.txt:
     21        * inspector/styles/styles-update-from-js.html:
     22        * inspector/styles/styles-url-linkify.html:
     23
    1242011-06-08  Hironori Bono  <hbono@chromium.org>
    225

  • trunk/LayoutTests/http/tests/inspector/inspect-iframe-from-different-domain.html

    r88243 r88337  
    1717function test()
    1818{
    19     InspectorTest.selectNodeWithId("iframe-body", step1);
     19    InspectorTest.selectNodeWithId("iframe-body");
     20    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1, true);
    2021
    21     function step1()
     22    function step1(node)
    2223    {
    23         var treeItem = InspectorTest.getElementStylePropertyTreeItem("background");
    24         InspectorTest.dumpStyleTreeItem(treeItem, "");
    25         InspectorTest.completeTest();
     24        if (node && node.getAttribute("id") === "iframe-body") {
     25            var treeItem = InspectorTest.getElementStylePropertyTreeItem("background");
     26            InspectorTest.dumpStyleTreeItem(treeItem, "");
     27            InspectorTest.completeTest();
     28        }
    2629    }
    2730}

  • trunk/LayoutTests/inspector/elements/elements-delete-inline-style.html

    r88243 r88337  
    88{
    99    WebInspector.showPanel("elements");
    10     InspectorTest.selectNodeWithId("inspected", step1);
     10    InspectorTest.selectNodeWithId("inspected");
     11    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1112
    1213    function step1(node)
    … …  
    1516        InspectorTest.dumpSelectedElementStyles(true);
    1617        node.removeAttribute("style");
    17         InspectorTest.runAfterPendingDispatches(step2);
     18        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step2);
    1819    }
    1920

  • trunk/LayoutTests/inspector/elements/elements-panel-styles.html

    r88243 r88337  
    99function test()
    1010{
    11     InspectorTest.selectNodeWithId("foo", step1);
     11    InspectorTest.selectNodeWithId("foo");
     12    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1, true);
    1213
    13     function step1()
     14    function step1(node)
    1415    {
    15         InspectorTest.dumpSelectedElementStyles(false, false);
    16         InspectorTest.completeTest();
     16        if (node && node.getAttribute("id") === "foo") {
     17            InspectorTest.dumpSelectedElementStyles(false, false);
     18            InspectorTest.completeTest();
     19        }
    1720    }
    1821}

  • trunk/LayoutTests/inspector/styles/styles-add-invalid-property.html

    r88243 r88337  
    88{
    99    WebInspector.showPanel("elements");
    10     InspectorTest.selectNodeWithId("inspected", step0);
     10    InspectorTest.selectNodeWithId("inspected");
     11    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step0);
    1112
    1213    var treeElement;
    … …  
    4647    function step3()
    4748    {
    48         InspectorTest.selectNodeWithId("other", step4);
     49        InspectorTest.selectNodeWithId("other");
     50        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step4);
    4951    }
    5052
    5153    function step4()
    5254    {
    53         InspectorTest.selectNodeWithId("inspected", step5);
     55        InspectorTest.selectNodeWithId("inspected");
     56        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step5);
    5457    }
    5558

  • trunk/LayoutTests/inspector/styles/styles-cancel-editing.html

    r88243 r88337  
    88{
    99    WebInspector.showPanel("elements");
    10     InspectorTest.selectNodeWithId("inspected", step1);
     10    InspectorTest.selectNodeWithId("inspected");
     11    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1112
    1213    var treeElement;
    … …  
    3435    function step2()
    3536    {
    36         InspectorTest.selectNodeWithId("other", step3);
     37        InspectorTest.selectNodeWithId("other");
     38        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step3);
    3739    }
    3840
    3941    function step3()
    4042    {
    41         InspectorTest.selectNodeWithId("inspected", step4);
     43        InspectorTest.selectNodeWithId("inspected");
     44        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step4);
    4245    }
    4346

  • trunk/LayoutTests/inspector/styles/styles-commit-editing.html

    r88243 r88337  
    88{
    99    WebInspector.showPanel("elements");
    10     InspectorTest.selectNodeWithId("inspected", step1);
     10    InspectorTest.selectNodeWithId("inspected");
     11    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1112
    1213    var treeElement;
    … …  
    3536    function step2()
    3637    {
    37         InspectorTest.selectNodeWithId("other", step3);
     38        InspectorTest.selectNodeWithId("other");
     39        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step3);
    3840    }
    3941
    4042    function step3()
    4143    {
    42         InspectorTest.selectNodeWithId("inspected", step4);
     44        InspectorTest.selectNodeWithId("inspected");
     45        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step4);
    4346    }
    4447

  • trunk/LayoutTests/inspector/styles/styles-computed-trace.html

    r88243 r88337  
    3838function test()
    3939{
    40     InspectorTest.selectNodeWithId("id1", step1);
     40    InspectorTest.selectNodeWithId("id1");
     41    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    4142
    4243    function step1()
    … …  
    4546        InspectorTest.dumpSelectedElementStyles(false, true);
    4647
    47         InspectorTest.selectNodeWithId("id2", step2);
     48        InspectorTest.selectNodeWithId("id2");
     49        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step2);
    4850    }
    4951

  • trunk/LayoutTests/inspector/styles/styles-disable-inherited.html

    r88243 r88337  
    88{
    99
    10     InspectorTest.selectNodeWithId("nested", step1);
     10    InspectorTest.selectNodeWithId("nested");
     11    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1112
    1213    function step1()
    … …  
    1617        InspectorTest.dumpSelectedElementStyles(true);
    1718
    18         InspectorTest.selectNodeWithId("container", step2);
     19        InspectorTest.selectNodeWithId("container");
     20        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step2);
    1921    }
    2022
    … …  
    2325        var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
    2426        treeItem.toggleEnabled({ target: { checked: false } });
    25         InspectorTest.selectNodeWithId("nested", step3);
     27        InspectorTest.selectNodeWithId("nested");
     28        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step3);
    2629    }
    2730

  • trunk/LayoutTests/inspector/styles/styles-disable-then-change.html

    r88243 r88337  
    77function test()
    88{
    9     InspectorTest.selectNodeWithId("container", step1);
     9    InspectorTest.selectNodeWithId("container");
     10    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1011
    1112    function step1()

  • trunk/LayoutTests/inspector/styles/styles-disable-then-delete.html

    r88243 r88337  
    77function test()
    88{
    9     InspectorTest.selectNodeWithId("container", step1);
     9    InspectorTest.selectNodeWithId("container");
     10    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1011
    1112    function step1()
    … …  
    3536    function step3()
    3637    {
    37         InspectorTest.selectNodeWithId("other", step4);
     38        InspectorTest.selectNodeWithId("other");
     39        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step4);
    3840    }
    3941
    4042    function step4()
    4143    {
    42         InspectorTest.selectNodeWithId("container", step5);
     44        InspectorTest.selectNodeWithId("container");
     45        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step5);
    4346    }
    4447
    45     function step5(node)
     48    function step5()
    4649    {
    4750        InspectorTest.addResult("After delete");

  • trunk/LayoutTests/inspector/styles/styles-disable-then-enable.html

    r88243 r88337  
    77function test()
    88{
    9     InspectorTest.selectNodeWithId("container", step1);
     9    InspectorTest.selectNodeWithId("container");
     10    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    1011
    1112    function step1()

  • trunk/LayoutTests/inspector/styles/styles-iframe.html

    r88243 r88337  
    3131        InspectorTest.addResult("Main frame style:");
    3232        InspectorTest.dumpSelectedElementStyles(true, false, true);
    33         InspectorTest.selectNodeWithId("iframeBody", step2);
     33        InspectorTest.selectNodeWithId("iframeBody");
     34        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step2);
    3435    }
    3536

  • trunk/LayoutTests/inspector/styles/styles-update-from-js-expected.txt

    r88243 r88337  
    11Tests that changes to an inline style from JavaScript are reflected in the Styles pane and Elements tree.
    22
    3 
    4 Running: testInit
    5 
    6 Running: testSetStyleAttribute
     3Modified "style" attribute
    74<div id="container" style="color: #daC0DE; border: 1px solid black;"></div>
    85[expanded] element.style { ()
    … …  
    2320
    2421
    25 
    26 Running: testSetStyleCSSText
     22Modified cssText
    2723<div id="container" style="color: rgb(192, 255, 238); "></div>
    2824[expanded] element.style { ()
    … …  
    3026
    3127
    32 
    33 Running: testSetViaParsedAttributes
     28Modified parsed attributes
    3429<div id="container" style="color: rgb(192, 255, 238); border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: green; border-right-color: green; border-bottom-color: green; border-left-color: green; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; "></div>
    3530[expanded] element.style { ()

  • trunk/LayoutTests/inspector/styles/styles-update-from-js.html

    r88243 r88337  
    2323function test()
    2424{
    25     InspectorTest.runTestSuite([
     25    var sniffCount = 0;
    2626
    27         function testInit(next)
    28         {
    29             InspectorTest.selectNodeWithId("container", next);
    30         },
     27    InspectorTest.selectNodeWithId("container");
     28    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", selectCallback);
    3129
    32         function testSetStyleAttribute(next)
    33         {
    34             var updateCount = 0;
    35             function callback()
    36             {
    37                 // Expect two updates while setting attribute.
    38                 if (++updateCount === 2) {
    39                     dumpAttributeAndStyles();
    40                     next();
    41                 }
    42             }
    43             InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", callback, true);
    44             InspectorTest.evaluateInPage("modifyStyleAttribute()");
    45         },
     30    function selectCallback()
     31    {
     32        InspectorTest.evaluateInPage("modifyStyleAttribute()");
     33        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", snifferCallback, true);
     34    }
    4635
    47         function testSetStyleCSSText(next)
    48         {
    49             var updateCount = 0;
    50             function callback()
    51             {
    52                 // Expect two updates while setting css text.
    53                 if (++updateCount === 2) {
    54                     dumpAttributeAndStyles();
    55                     next();
    56                 }
    57             }
    58             InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", callback, true);
    59             InspectorTest.evaluateInPage("modifyCSSText()", callback);
    60         },
    61 
    62         function testSetViaParsedAttributes(next)
    63         {
    64             function callback()
    65             {
     36    function snifferCallback()
     37    {
     38        switch (++sniffCount) {
     39            case 1:
     40                InspectorTest.addResult("Modified \"style\" attribute");
    6641                dumpAttributeAndStyles();
    67                 next();
    68             }
    69             InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", callback);
    70             InspectorTest.evaluateInPage("modifyParsedAttributes()");
     42                InspectorTest.evaluateInPage("modifyCSSText()");
     43                break;
     44            case 2:
     45                InspectorTest.addResult("Modified cssText");
     46                dumpAttributeAndStyles();
     47                InspectorTest.evaluateInPage("modifyParsedAttributes()");
     48                break;
     49            case 3:
     50                InspectorTest.addResult("Modified parsed attributes");
     51                dumpAttributeAndStyles();
     52                InspectorTest.completeTest();
     53                break;
    7154        }
    72     ]);
     55    }
    7356
    7457    function dumpAttributeAndStyles()

  • trunk/LayoutTests/inspector/styles/styles-url-linkify.html

    r88243 r88337  
    4747    }
    4848
    49     InspectorTest.selectNodeWithId("local", step1);
     49    InspectorTest.selectNodeWithId("local");
     50    InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step1);
    5051
    5152    function step1()
    … …  
    5354        InspectorTest.addResult("Link for a URI from CSS document:");
    5455        dumpHref();
    55         InspectorTest.selectNodeWithId("iframed", step2);
     56        InspectorTest.selectNodeWithId("iframed");
     57        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", step2);
     58
    5659    }
    5760

  • trunk/Source/WebCore/ChangeLog

    r88336 r88337  
     12011-06-08  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: node selection is slow in the Elements panel.
     6        https://bugs.webkit.org/show_bug.cgi?id=60813
     7
     8        Schedule full style updates rather than request all node styles from the backend immediately.
     9
     10        * inspector/front-end/StylesSidebarPane.js:
     11        (WebInspector.StylesSidebarPane.prototype.update.reloadAllStyles):
     12        (WebInspector.StylesSidebarPane.prototype.update):
     13
    1142011-06-08  Andreas Kling  <andreas.kling@nokia.com>
    215

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

    r88243 r88337  
    236236        }
    237237
     238        function reloadAllStyles()
     239        {
     240            delete this._reloadAllStylesTimer;
     241            WebInspector.cssModel.getStylesAsync(this._allStylesNodeId, stylesCallback.bind(this))
     242        }
     243
    238244        if (refresh)
    239245            WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
    240         else
    241             WebInspector.cssModel.getStylesAsync(node.id, stylesCallback.bind(this));
     246        else {
     247            // Always refresh the node to request styles for.
     248            this._allStylesNodeId = node.id;
     249            if ("_reloadAllStylesTimer" in this)
     250                return;
     251            this._reloadAllStylesTimer = setTimeout(reloadAllStyles.bind(this), 0);
     252        }
    242253    },
    243254
Note: See TracChangeset for help on using the changeset viewer.