Web Inspector: Closed computed style sidebar pane rebuilds, resulting in slowness

https://bugs.webkit.org/show_bug.cgi?id=77865

Reviewed by Pavel Feldman.

Source/WebCore:

Test: inspector/styles/lazy-computed-style.html

* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane):
(WebInspector.StylesSidebarPane.prototype._executeRebuildUpdate):
(WebInspector.StylesSidebarPane.prototype._refreshComputedStyleSection):
(WebInspector.ComputedStyleSidebarPane.prototype.expand):
(WebInspector.ComputedStylePropertiesSection.prototype.onpopulate):

LayoutTests:

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed.stylesCallback):
(initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
* inspector/elements/elements-panel-styles.html:
* inspector/styles/css-live-edit.html:
* inspector/styles/lazy-computed-style-expected.txt: Added.
* inspector/styles/lazy-computed-style.html: Added.
* inspector/styles/styles-computed-trace.html:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 95c671a..d349fb8 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2012-02-07  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: Closed computed style sidebar pane rebuilds, resulting in slowness
+        https://bugs.webkit.org/show_bug.cgi?id=77865
+
+        Reviewed by Pavel Feldman.
+
+        * http/tests/inspector/elements-test.js:
+        (initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed.stylesCallback):
+        (initialize_ElementTest.InspectorTest.selectNodeAndWaitForStylesWithComputed):
+        * inspector/elements/elements-panel-styles.html:
+        * inspector/styles/css-live-edit.html:
+        * inspector/styles/lazy-computed-style-expected.txt: Added.
+        * inspector/styles/lazy-computed-style.html: Added.
+        * inspector/styles/styles-computed-trace.html:
+
 2012-02-08  Csaba Osztrogonác  <ossy@webkit.org>
 
         Unreviewed gardening after r106982.

diff --git a/LayoutTests/http/tests/inspector/elements-test.js b/LayoutTests/http/tests/inspector/elements-test.js
index e9aa660..dedfae9 100644 (file)
--- a/LayoutTests/http/tests/inspector/elements-test.js
+++ b/LayoutTests/http/tests/inspector/elements-test.js
@@ -105,6 +105,19 @@ InspectorTest.selectNodeAndWaitForStyles = function(idValue, callback)
     }
 }
 
+InspectorTest.selectNodeAndWaitForStylesWithComputed = function(idValue, callback)
+{
+    callback = InspectorTest.safeWrap(callback);
+
+    function stylesCallback(targetNode)
+    {
+        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", callback);
+        WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
+    }
+
+    InspectorTest.selectNodeAndWaitForStyles(idValue, stylesCallback);
+}
+
 InspectorTest.dumpSelectedElementStyles = function(excludeComputed, excludeMatched, omitLonghands)
 {
     function extractText(element)

diff --git a/LayoutTests/inspector/elements/elements-panel-styles.html b/LayoutTests/inspector/elements/elements-panel-styles.html
index 6162f1b..614d88c 100644 (file)
--- a/LayoutTests/inspector/elements/elements-panel-styles.html
+++ b/LayoutTests/inspector/elements/elements-panel-styles.html
@@ -8,7 +8,7 @@
 
 function test()
 {
-    InspectorTest.selectNodeAndWaitForStyles("foo", step1);
+    InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", step1);
 
     function step1()
     {

diff --git a/LayoutTests/inspector/styles/css-live-edit.html b/LayoutTests/inspector/styles/css-live-edit.html
index d5e0f29..a2712b7 100644 (file)
--- a/LayoutTests/inspector/styles/css-live-edit.html
+++ b/LayoutTests/inspector/styles/css-live-edit.html
@@ -25,7 +25,7 @@ function test()
 
             function didEditResource()
             {
-                InspectorTest.selectNodeAndWaitForStyles("foo", didSelectElement);
+                InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", didSelectElement);
             }
 
             function didSelectElement()

diff --git a/LayoutTests/inspector/styles/lazy-computed-style-expected.txt b/LayoutTests/inspector/styles/lazy-computed-style-expected.txt
new file mode 100644 (file)
index 0000000..508c181
--- /dev/null
+++ b/LayoutTests/inspector/styles/lazy-computed-style-expected.txt
@@ -0,0 +1,90 @@
+Tests that computed styles expand and allow tracing to style rules.
+
+==== All styles (should be no computed) ====
+[expanded] 
+
+[expanded] 
+element.style  { ()
+
+======== Matched CSS Rules ========
+[expanded] 
+#inspected  { (lazy-computed-style.html:15)
+background: gray;
+    background-image: initial;
+    background-repeat-x: initial;
+    background-repeat-y: initial;
+    background-attachment: initial;
+    background-position-x: initial;
+    background-position-y: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: gray;
+
+[expanded] 
+#inspected  { (lazy-computed-style.html:10)
+/-- overloaded --/ background-color: black;
+font-family: Courier;
+
+[expanded] 
+#inspected  { (lazy-computed-style.html:5)
+/-- overloaded --/ background-color: green;
+/-- overloaded --/ font-family: Times;
+
+[expanded] 
+div  { (user agent stylesheet)
+display: block;
+
+
+==== All styles (computed should be there) ====
+[expanded] 
+background-attachment: scroll;
+    #inspected - initial lazy-computed-style.html:15
+background-clip: border-box;
+    #inspected - initial lazy-computed-style.html:15
+background-color: gray;
+    #inspected - gray lazy-computed-style.html:15
+    /-- overloaded --/ #inspected - black lazy-computed-style.html:10
+    /-- overloaded --/ #inspected - green lazy-computed-style.html:5
+background-image: none;
+    #inspected - initial lazy-computed-style.html:15
+background-origin: padding-box;
+    #inspected - initial lazy-computed-style.html:15
+display: block;
+    div - block user agent stylesheet
+font-family: Courier;
+    #inspected - Courier lazy-computed-style.html:10
+    /-- overloaded --/ #inspected - Times lazy-computed-style.html:5
+
+[expanded] 
+element.style  { ()
+
+======== Matched CSS Rules ========
+[expanded] 
+#inspected  { (lazy-computed-style.html:15)
+background: gray;
+    background-image: initial;
+    background-repeat-x: initial;
+    background-repeat-y: initial;
+    background-attachment: initial;
+    background-position-x: initial;
+    background-position-y: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: gray;
+
+[expanded] 
+#inspected  { (lazy-computed-style.html:10)
+/-- overloaded --/ background-color: black;
+font-family: Courier;
+
+[expanded] 
+#inspected  { (lazy-computed-style.html:5)
+/-- overloaded --/ background-color: green;
+/-- overloaded --/ font-family: Times;
+
+[expanded] 
+div  { (user agent stylesheet)
+display: block;
+
+
+

diff --git a/LayoutTests/inspector/styles/lazy-computed-style.html b/LayoutTests/inspector/styles/lazy-computed-style.html
new file mode 100644 (file)
index 0000000..ce4d4f8
--- /dev/null
+++ b/LayoutTests/inspector/styles/lazy-computed-style.html
@@ -0,0 +1,55 @@
+<html>
+<head>
+<style>
+
+#inspected {
+    background-color: green;
+    font-family: Times;
+}
+
+#inspected {
+    background-color: black;
+    font-family: Courier;
+}
+
+#inspected {
+    background: gray;
+}
+
+</style>
+<script src="../../http/tests/inspector/inspector-test.js"></script>
+<script src="../../http/tests/inspector/elements-test.js"></script>
+<script>
+
+function test()
+{
+    InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
+
+    function step1()
+    {
+        InspectorTest.addResult("==== All styles (should be no computed) ====");
+        InspectorTest.dumpSelectedElementStyles(false, false);
+        InspectorTest.addSniffer(WebInspector.SidebarPane.prototype, "expand", step2);
+        WebInspector.panels.elements.sidebarPanes.computedStyle.expand();
+    }
+
+    function step2()
+    {
+        InspectorTest.addResult("==== All styles (computed should be there) ====");
+        InspectorTest.dumpSelectedElementStyles(false, false);
+        InspectorTest.completeTest();
+    }
+}
+</script>
+</head>
+
+<body onload="runTest()">
+<p>
+Tests that computed styles expand and allow tracing to style rules.
+</p>
+
+<div id="inspected">
+</div>
+
+</body>
+</html>

diff --git a/LayoutTests/inspector/styles/styles-computed-trace.html b/LayoutTests/inspector/styles/styles-computed-trace.html
index 7aaa7dc..7726593 100644 (file)
--- a/LayoutTests/inspector/styles/styles-computed-trace.html
+++ b/LayoutTests/inspector/styles/styles-computed-trace.html
@@ -37,20 +37,20 @@ div {
 
 function test()
 {
-    InspectorTest.selectNodeAndWaitForStyles("id1", step1);
+    InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1);
 
     function step1()
     {
         InspectorTest.addResult("==== Computed style for ID1 ====");
         InspectorTest.dumpSelectedElementStyles(false, true);
-        InspectorTest.selectNodeAndWaitForStyles("id2", step2);
+        InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2);
     }
 
     function step2()
     {
         InspectorTest.addResult("==== Computed style for ID2 ====");
         InspectorTest.dumpSelectedElementStyles(false, true);
-        InspectorTest.selectNodeAndWaitForStyles("id3", step3);
+        InspectorTest.selectNodeAndWaitForStylesWithComputed("id3", step3);
     }
 
     function step3()

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 767f376..0ed628a 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2012-02-07  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: Closed computed style sidebar pane rebuilds, resulting in slowness
+        https://bugs.webkit.org/show_bug.cgi?id=77865
+
+        Reviewed by Pavel Feldman.
+
+        Test: inspector/styles/lazy-computed-style.html
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane):
+        (WebInspector.StylesSidebarPane.prototype._executeRebuildUpdate):
+        (WebInspector.StylesSidebarPane.prototype._refreshComputedStyleSection):
+        (WebInspector.ComputedStyleSidebarPane.prototype.expand):
+        (WebInspector.ComputedStylePropertiesSection.prototype.onpopulate):
+
 2012-02-08  Tommy Widenflycht  <tommyw@google.com>
 
         MediaStream API: Adding the onstatechange callback to PeerConnection

diff --git a/Source/WebCore/inspector/front-end/StylesSidebarPane.js b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
index f43aa58..d7e0a38 100644 (file)
--- a/Source/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -81,6 +81,7 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
     this.titleElement.appendChild(addButton);
 
     this._computedStylePane = computedStylePane;
+    computedStylePane._stylesSidebarPane = this;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
 
@@ -252,11 +253,17 @@ WebInspector.StylesSidebarPane.prototype = {
             resultStyles.computedStyle = computedStyle;
         }
 
-        WebInspector.cssModel.getComputedStyleAsync(node.id, this._forcedPseudoClasses, computedCallback.bind(this));
+        if (this._computedStylePane.expanded)
+            WebInspector.cssModel.getComputedStyleAsync(node.id, this._forcedPseudoClasses, computedCallback.bind(this));
         WebInspector.cssModel.getInlineStylesAsync(node.id, inlineCallback.bind(this));
         WebInspector.cssModel.getMatchedStylesAsync(node.id, this._forcedPseudoClasses, true, true, stylesCallback.bind(this));
     },
 
+    _refreshComputedStyleSection: function(callback)
+    {
+        this._innerUpdate(true, null, callback);
+    },
+
     /**
      * @param {WebInspector.StylePropertiesSection=} editedSection
      * @param {function()=} userCallback
@@ -840,6 +847,20 @@ WebInspector.ComputedStyleSidebarPane = function()
     showInheritedCheckbox.addEventListener(showInheritedToggleFunction.bind(this));
 }
 
+WebInspector.ComputedStyleSidebarPane.prototype = {
+
+    // Overriding expand() rather than onexpand() to eliminate the visual slowness due to a possible backend trip.
+    expand: function()
+    {
+        function callback()
+        {
+            WebInspector.SidebarPane.prototype.expand.call(this);
+        }
+
+        this._stylesSidebarPane._refreshComputedStyleSection(callback.bind(this));
+    }
+}
+
 WebInspector.ComputedStyleSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
 
 /**
@@ -1288,6 +1309,9 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
         }
 
         var style = this.styleRule.style;
+        if (!style)
+            return;
+
         var uniqueProperties = [];
         var allProperties = style.allProperties;
         for (var i = 0; i < allProperties.length; ++i)