Diff
Modified: trunk/LayoutTests/ChangeLog (107054 => 107055)
--- trunk/LayoutTests/ChangeLog 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/LayoutTests/ChangeLog 2012-02-08 10:00:52 UTC (rev 107055)
@@ -1,3 +1,19 @@
+2012-02-07 Alexander Pavlov <apav...@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 <o...@webkit.org>
Unreviewed gardening after r106982.
Modified: trunk/LayoutTests/http/tests/inspector/elements-test.js (107054 => 107055)
--- trunk/LayoutTests/http/tests/inspector/elements-test.js 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/LayoutTests/http/tests/inspector/elements-test.js 2012-02-08 10:00:52 UTC (rev 107055)
@@ -105,6 +105,19 @@
}
}
+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)
Modified: trunk/LayoutTests/inspector/elements/elements-panel-styles.html (107054 => 107055)
--- trunk/LayoutTests/inspector/elements/elements-panel-styles.html 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/LayoutTests/inspector/elements/elements-panel-styles.html 2012-02-08 10:00:52 UTC (rev 107055)
@@ -8,7 +8,7 @@
function test()
{
- InspectorTest.selectNodeAndWaitForStyles("foo", step1);
+ InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", step1);
function step1()
{
Modified: trunk/LayoutTests/inspector/styles/css-live-edit.html (107054 => 107055)
--- trunk/LayoutTests/inspector/styles/css-live-edit.html 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/LayoutTests/inspector/styles/css-live-edit.html 2012-02-08 10:00:52 UTC (rev 107055)
@@ -25,7 +25,7 @@
function didEditResource()
{
- InspectorTest.selectNodeAndWaitForStyles("foo", didSelectElement);
+ InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", didSelectElement);
}
function didSelectElement()
Added: trunk/LayoutTests/inspector/styles/lazy-computed-style-expected.txt (0 => 107055)
--- trunk/LayoutTests/inspector/styles/lazy-computed-style-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/styles/lazy-computed-style-expected.txt 2012-02-08 10:00:52 UTC (rev 107055)
@@ -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;
+
+
+
Property changes on: trunk/LayoutTests/inspector/styles/lazy-computed-style-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/inspector/styles/lazy-computed-style.html (0 => 107055)
--- trunk/LayoutTests/inspector/styles/lazy-computed-style.html (rev 0)
+++ trunk/LayoutTests/inspector/styles/lazy-computed-style.html 2012-02-08 10:00:52 UTC (rev 107055)
@@ -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=""
+<script src=""
+<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>
Property changes on: trunk/LayoutTests/inspector/styles/lazy-computed-style.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/LayoutTests/inspector/styles/styles-computed-trace.html (107054 => 107055)
--- trunk/LayoutTests/inspector/styles/styles-computed-trace.html 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/LayoutTests/inspector/styles/styles-computed-trace.html 2012-02-08 10:00:52 UTC (rev 107055)
@@ -37,20 +37,20 @@
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()
Modified: trunk/Source/WebCore/ChangeLog (107054 => 107055)
--- trunk/Source/WebCore/ChangeLog 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/Source/WebCore/ChangeLog 2012-02-08 10:00:52 UTC (rev 107055)
@@ -1,3 +1,19 @@
+2012-02-07 Alexander Pavlov <apav...@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 <tom...@google.com>
MediaStream API: Adding the onstatechange callback to PeerConnection
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (107054 => 107055)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-08 09:52:17 UTC (rev 107054)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-08 10:00:52 UTC (rev 107055)
@@ -81,6 +81,7 @@
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 @@
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 @@
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 @@
}
var style = this.styleRule.style;
+ if (!style)
+ return;
+
var uniqueProperties = [];
var allProperties = style.allProperties;
for (var i = 0; i < allProperties.length; ++i)
