From b90a213d303f55d11e376fbfdd5f9540953c39a0 Mon Sep 17 00:00:00 2001 From: "apavlov@chromium.org" Date: Wed, 8 Feb 2012 10:00:52 +0000 Subject: [PATCH] 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 --- LayoutTests/ChangeLog | 16 ++++ LayoutTests/http/tests/inspector/elements-test.js | 13 ++++ .../inspector/elements/elements-panel-styles.html | 2 +- LayoutTests/inspector/styles/css-live-edit.html | 2 +- .../styles/lazy-computed-style-expected.txt | 90 ++++++++++++++++++++++ .../inspector/styles/lazy-computed-style.html | 55 +++++++++++++ .../inspector/styles/styles-computed-trace.html | 6 +- Source/WebCore/ChangeLog | 16 ++++ .../inspector/front-end/StylesSidebarPane.js | 26 ++++++- 9 files changed, 220 insertions(+), 6 deletions(-) create mode 100644 LayoutTests/inspector/styles/lazy-computed-style-expected.txt create mode 100644 LayoutTests/inspector/styles/lazy-computed-style.html diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog index 95c671a..d349fb8 100644 --- a/LayoutTests/ChangeLog +++ b/LayoutTests/ChangeLog @@ -1,3 +1,19 @@ +2012-02-07 Alexander Pavlov + + 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 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 --- 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 --- 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 --- 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 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 index 0000000..ce4d4f8 --- /dev/null +++ b/LayoutTests/inspector/styles/lazy-computed-style.html @@ -0,0 +1,55 @@ + + + + + + + + + +

+Tests that computed styles expand and allow tracing to style rules. +

+ +
+
+ + + diff --git a/LayoutTests/inspector/styles/styles-computed-trace.html b/LayoutTests/inspector/styles/styles-computed-trace.html index 7aaa7dc..7726593 100644 --- 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 767f3760..0ed628a 100644 --- a/Source/WebCore/ChangeLog +++ b/Source/WebCore/ChangeLog @@ -1,3 +1,19 @@ +2012-02-07 Alexander Pavlov + + 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 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 --- 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) -- 2.7.4