Commit b90a213d authored by apavlov@chromium.org's avatar 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.

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
parent 1dd210cc
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.
......@@ -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)
......
......@@ -8,7 +8,7 @@
function test()
{
InspectorTest.selectNodeAndWaitForStyles("foo", step1);
InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", step1);
function step1()
{
......
......@@ -25,7 +25,7 @@ function test()
function didEditResource()
{
InspectorTest.selectNodeAndWaitForStyles("foo", didSelectElement);
InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", didSelectElement);
}
function didSelectElement()
......
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;
<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>
......@@ -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()
......
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
......@@ -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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment