Diff
Modified: trunk/LayoutTests/ChangeLog (128290 => 128291)
--- trunk/LayoutTests/ChangeLog 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/ChangeLog 2012-09-12 11:36:15 UTC (rev 128291)
@@ -1,3 +1,15 @@
+2012-09-12 Alexander Pavlov <[email protected]>
+
+ Web Inspector: [Elements] Sidebar panes not updated on style changes due to "class" attribute modifications
+ https://bugs.webkit.org/show_bug.cgi?id=95722
+
+ Reviewed by Vsevolod Vlasov.
+
+ * inspector/elements/edit-style-attribute.html: Renamed events on which to listen.
+ * inspector/styles/override-screen-size.html: Drive-by: fixed race condition that was resulting in this test's failures.
+ * inspector/styles/styles-update-from-js-expected.txt:
+ * inspector/styles/styles-update-from-js.html: Added test cases for style updates on ancestor and sibling attributes' changes.
+
2012-09-12 Csaba Osztrogonác <[email protected]>
[Qt][WK2] Unreviewed gardening, skip a new failing test to paint the bot green.
Modified: trunk/LayoutTests/inspector/elements/edit-style-attribute-expected.txt (128290 => 128291)
--- trunk/LayoutTests/inspector/elements/edit-style-attribute-expected.txt 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/inspector/elements/edit-style-attribute-expected.txt 2012-09-12 11:36:15 UTC (rev 128291)
@@ -4,7 +4,7 @@
Running: testSetUp
Running: testSetNewValue
-WebInspector.DOMAgent.Events.StyleInvalidated should be issued
+WebInspector.DOMAgent.Events.AttrModified should be issued
Running: testSetSameValue
WebInspector.DOMNode.prototype._setAttributesPayload should be called
Modified: trunk/LayoutTests/inspector/elements/edit-style-attribute.html (128290 => 128291)
--- trunk/LayoutTests/inspector/elements/edit-style-attribute.html 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/inspector/elements/edit-style-attribute.html 2012-09-12 11:36:15 UTC (rev 128291)
@@ -31,11 +31,11 @@
{
InspectorTest.evaluateInPage("testSetNewValue()");
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, listener);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, listener);
function listener(event)
{
- InspectorTest.addResult("WebInspector.DOMAgent.Events.StyleInvalidated should be issued");
- WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, listener);
+ InspectorTest.addResult("WebInspector.DOMAgent.Events.AttrModified should be issued");
+ WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.AttrModified, listener);
next();
}
},
@@ -44,18 +44,18 @@
{
InspectorTest.evaluateInPage("testSetSameValue()");
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, listener);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, listener);
function listener(event)
{
- InspectorTest.addResult("WebInspector.DOMAgent.Events.StyleInvalidated should not be issued");
- WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, listener);
+ InspectorTest.addResult("WebInspector.DOMAgent.Events.AttrModified should not be issued");
+ WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.AttrModified, listener);
}
InspectorTest.addSniffer(WebInspector.DOMNode.prototype, "_setAttributesPayload", callback);
function callback()
{
InspectorTest.addResult("WebInspector.DOMNode.prototype._setAttributesPayload should be called");
- WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, listener);
+ WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.AttrModified, listener);
next();
}
}
Modified: trunk/LayoutTests/inspector/styles/override-screen-size.html (128290 => 128291)
--- trunk/LayoutTests/inspector/styles/override-screen-size.html 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/inspector/styles/override-screen-size.html 2012-09-12 11:36:15 UTC (rev 128291)
@@ -158,19 +158,36 @@
function overrideAndDumpData(width, height, callback)
{
- function selectCallback()
+ function finalCallback()
{
InspectorTest.addResult("Main style:");
InspectorTest.dumpSelectedElementStyles(true, false, true);
callback();
}
+ var gotSizes;
+ var gotStyles;
+ function stylesCallback()
+ {
+ if (gotSizes)
+ return finalCallback();
+ gotStyles = true;
+ }
+
+ function sizesCallback()
+ {
+ gotSizes = true;
+ if (gotStyles)
+ finalCallback();
+ }
+
function applyCallback()
{
- getAndDumpSizes(selectCallback);
+ getAndDumpSizes(sizesCallback);
}
InspectorTest.addResult("Override: " + width + "x" + height);
+ InspectorTest.waitForStyles("main", stylesCallback);
applyOverride(width, height, applyCallback);
}
@@ -182,7 +199,8 @@
InspectorTest.addResult("Screen from page: " + result.screen);
InspectorTest.addResult("Window from page: " + result.inner);
InspectorTest.addResult("Body from page: " + result.body);
- callback();
+ if (callback)
+ callback();
}
InspectorTest.evaluateInPage("getSizes()", getSizesCallback);
Modified: trunk/LayoutTests/inspector/styles/styles-update-from-js-expected.txt (128290 => 128291)
--- trunk/LayoutTests/inspector/styles/styles-update-from-js-expected.txt 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/inspector/styles/styles-update-from-js-expected.txt 2012-09-12 11:36:15 UTC (rev 128291)
@@ -1,10 +1,10 @@
-Tests that changes to an inline style from _javascript_ are reflected in the Styles pane and Elements tree.
+Tests that changes to an inline style and ancestor/sibling className from _javascript_ are reflected in the Styles pane and Elements tree.
Running: testInit
Running: testSetStyleAttribute
-<div id="container" style="color: #daC0DE; border: 1px solid black;"></div>
+<div id="container" style="color: #daC0DE; border: 1px solid black;">…</div>
[expanded]
element.style { ()
color: #DAC0DE;
@@ -22,18 +22,28 @@
border-left-style: solid;
border-left-width: 1px;
+======== Matched CSS Rules ========
+[expanded]
+div { (user agent stylesheet)
+display: block;
+
Running: testSetStyleCSSText
-<div id="container" style="color: rgb(192, 255, 238);"></div>
+<div id="container" style="color: rgb(192, 255, 238);">…</div>
[expanded]
element.style { ()
color: #C0FFEE;
+======== Matched CSS Rules ========
+[expanded]
+div { (user agent stylesheet)
+display: block;
+
Running: testSetViaParsedAttributes
-<div id="container" style="color: rgb(192, 255, 238); border: 3px dashed green;"></div>
+<div id="container" style="color: rgb(192, 255, 238); border: 3px dashed green;">…</div>
[expanded]
element.style { ()
color: #C0FFEE;
@@ -51,5 +61,52 @@
border-left-style: dashed;
border-left-width: 3px;
+======== Matched CSS Rules ========
+[expanded]
+div { (user agent stylesheet)
+display: block;
+
+Running: testSetViaAncestorClass
+<div id="child"></div>
+[expanded]
+element.style { ()
+
+======== Matched CSS Rules ========
+[expanded]
+.red div:first-child { (styles-update-from-js.html:4)
+background-color: red;
+
+[expanded]
+div { (user agent stylesheet)
+display: block;
+
+======== Inherited from div#container.red ========
+[expanded]
+Style Attribute { ()
+color: #C0FFEE;
+
+
+
+Running: testSetViaSiblingAttr
+<div id="childSibling"></div>
+[expanded]
+element.style { ()
+
+======== Matched CSS Rules ========
+[expanded]
+div[foo="bar"] + div { (styles-update-from-js.html:8)
+background-color: blue;
+
+[expanded]
+div { (user agent stylesheet)
+display: block;
+
+======== Inherited from div#container.red ========
+[expanded]
+Style Attribute { ()
+color: #C0FFEE;
+
+
+
Modified: trunk/LayoutTests/inspector/styles/styles-update-from-js.html (128290 => 128291)
--- trunk/LayoutTests/inspector/styles/styles-update-from-js.html 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/LayoutTests/inspector/styles/styles-update-from-js.html 2012-09-12 11:36:15 UTC (rev 128291)
@@ -1,5 +1,15 @@
<html>
<head>
+<style>
+.red div:first-child {
+ background-color: red;
+}
+
+div[foo="bar"] + div {
+ background-color: blue;
+}
+
+</style>
<script src=""
<script src=""
<script>
@@ -20,6 +30,16 @@
style.borderWidth = "3px";
}
+function modifyContainerClass()
+{
+ document.getElementById("container").className = "red";
+}
+
+function modifyChildAttr()
+{
+ document.getElementById("child").setAttribute("foo", "bar");
+}
+
function test()
{
InspectorTest.runTestSuite([
@@ -44,36 +64,59 @@
{
waitAndDumpAttributeAndStyles(next);
InspectorTest.evaluateInPage("modifyParsedAttributes()");
+ },
+
+ function testSetViaAncestorClass(next)
+ {
+ InspectorTest.selectNodeAndWaitForStyles("child", callback);
+
+ function callback()
+ {
+ waitAndDumpAttributeAndStyles(next, "child");
+ InspectorTest.evaluateInPage("modifyContainerClass()");
+ }
+ },
+
+ function testSetViaSiblingAttr(next)
+ {
+ InspectorTest.selectNodeAndWaitForStyles("childSibling", callback);
+
+ function callback()
+ {
+ waitAndDumpAttributeAndStyles(next, "childSibling");
+ InspectorTest.evaluateInPage("modifyChildAttr()");
+ }
}
]);
- function waitAndDumpAttributeAndStyles(next)
+ function waitAndDumpAttributeAndStyles(next, id)
{
+ id = id || "container";
function callback()
{
- dumpAttributeAndStyles();
+ dumpAttributeAndStyles(id);
next();
}
- InspectorTest.waitForStyles("container", callback);
+ InspectorTest.waitForStyles(id, callback);
}
- function dumpAttributeAndStyles()
+ function dumpAttributeAndStyles(id)
{
- var treeElement = findNodeTreeElement()
+ var treeElement = findNodeTreeElement(id);
if (!treeElement) {
- InspectorTest.addResult("'container' tree element not found");
+ InspectorTest.addResult("'" + id + "' tree element not found");
return;
}
InspectorTest.addResult(treeElement.listItemElement.textContent.replace(/\u200b/g, ""));
- InspectorTest.dumpSelectedElementStyles(true, true);
+ InspectorTest.dumpSelectedElementStyles(true);
}
- function findNodeTreeElement()
+ function findNodeTreeElement(id)
{
WebInspector.panels.elements.treeOutline._updateModifiedNodes();
- var expandedNode = InspectorTest.expandedNodeWithId("container");
+ var expandedNode = InspectorTest.expandedNodeWithId(id);
if (!expandedNode) {
- InspectorTest.addResult("'container' node not found");
+ InspectorTest.addResult("'" + id + "' node not found");
InspectorTest.completeTest();
}
return WebInspector.panels.elements.treeOutline.findTreeElement(expandedNode);
@@ -84,10 +127,10 @@
<body _onload_="runTest()">
<p>
-Tests that changes to an inline style from _javascript_ are reflected in the Styles pane and Elements tree.
+Tests that changes to an inline style and ancestor/sibling className from _javascript_ are reflected in the Styles pane and Elements tree.
</p>
-<div id="container" style="font-weight:bold"></div>
+<div id="container" style="font-weight:bold"><div id="child"></div><div id="childSibling"></div></div>
</body>
</html>
Modified: trunk/Source/WebCore/ChangeLog (128290 => 128291)
--- trunk/Source/WebCore/ChangeLog 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/Source/WebCore/ChangeLog 2012-09-12 11:36:15 UTC (rev 128291)
@@ -1,3 +1,24 @@
+2012-09-12 Alexander Pavlov <[email protected]>
+
+ Web Inspector: [Elements] Sidebar panes not updated on style changes due to "class" attribute modifications
+ https://bugs.webkit.org/show_bug.cgi?id=95722
+
+ Reviewed by Vsevolod Vlasov.
+
+ The DOMAgent StyleInvalidated event has been removed in favor of the StylesSidebarPane explicitly listening on the
+ AttrModified/AttrRemoved events that result in those same updates.
+
+ * inspector/front-end/DOMAgent.js:
+ (WebInspector.DOMAgent.prototype._attributeModified):
+ (WebInspector.DOMAgent.prototype._loadNodeAttributes):
+ (WebInspector.DOMAgent.prototype._childNodeRemoved):
+ * inspector/front-end/ElementsTreeOutline.js:
+ (WebInspector.ElementsTreeElement.prototype.updateSelection): Drive-by: avoid a costly synchronous layout during DOM tree updates.
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylesSidebarPane):
+ (WebInspector.StylesSidebarPane.prototype._attributeChanged):
+ (WebInspector.StylesSidebarPane.prototype._canAffectCurrentStyles):
+
2012-09-12 Simon Hausmann <[email protected]>
Build with ENABLE_REQUEST_ANIMATION_FRAME=0 is broken
Modified: trunk/Source/WebCore/inspector/front-end/DOMAgent.js (128290 => 128291)
--- trunk/Source/WebCore/inspector/front-end/DOMAgent.js 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/Source/WebCore/inspector/front-end/DOMAgent.js 2012-09-12 11:36:15 UTC (rev 128291)
@@ -794,7 +794,6 @@
DocumentUpdated: "DocumentUpdated",
ChildNodeCountUpdated: "ChildNodeCountUpdated",
InspectElementRequested: "InspectElementRequested",
- StyleInvalidated: "StyleInvalidated",
UndoRedoRequested: "UndoRedoRequested",
UndoRedoCompleted: "UndoRedoCompleted"
}
@@ -916,12 +915,9 @@
var node = this._idToDOMNode[nodeId];
if (!node)
return;
- var issueStyleInvalidated = name === "style" && value !== node.getAttribute("style");
node._setAttribute(name, value);
this.dispatchEventToListeners(WebInspector.DOMAgent.Events.AttrModified, { node: node, name: name });
- if (issueStyleInvalidated)
- this.dispatchEventToListeners(WebInspector.DOMAgent.Events.StyleInvalidated, node)
},
/**
@@ -965,10 +961,8 @@
}
var node = this._idToDOMNode[nodeId];
if (node) {
- if (node._setAttributesPayload(attributes)) {
+ if (node._setAttributesPayload(attributes))
this.dispatchEventToListeners(WebInspector.DOMAgent.Events.AttrModified, { node: node, name: "style" });
- this.dispatchEventToListeners(WebInspector.DOMAgent.Events.StyleInvalidated, node);
- }
}
}
@@ -1080,7 +1074,7 @@
var node = this._idToDOMNode[nodeId];
parent._removeChild(node);
this._unbind(node);
- this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeRemoved, {node:node, parent:parent});
+ this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeRemoved, {node: node, parent: parent});
},
/**
Modified: trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js (128290 => 128291)
--- trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-09-12 11:36:15 UTC (rev 128291)
@@ -812,10 +812,14 @@
if (!listItemElement)
return;
- if (document.body.offsetWidth <= 0) {
- // The stylesheet hasn't loaded yet or the window is closed,
- // so we can't calculate what is need. Return early.
- return;
+ if (!this._readyToUpdateSelection) {
+ if (document.body.offsetWidth > 0)
+ this._readyToUpdateSelection = true;
+ else {
+ // The stylesheet hasn't loaded yet or the window is closed,
+ // so we can't calculate what we need. Return early.
+ return;
+ }
}
if (!this.selectionElement) {
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (128290 => 128291)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-09-12 11:34:34 UTC (rev 128290)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-09-12 11:36:15 UTC (rev 128291)
@@ -97,9 +97,8 @@
WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesModified, this);
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributesRemoved, this);
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.StyleInvalidated, this._styleInvalidated, this);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributeChanged, this);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributeChanged, this);
WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
}
@@ -314,39 +313,24 @@
this._rebuildUpdate();
},
- _attributesModified: function(event)
+ _attributeChanged: function(event)
{
- if (this.node !== event.data.node)
+ // Any attribute removal or modification can affect the styles of "related" nodes.
+ // Do not touch the styles if they are being edited.
+ if (this._isEditingStyle || this._userOperation)
return;
- // Changing style attribute will anyways generate _styleInvalidated message.
- if (event.data.name === "style")
+ if (!this._canAffectCurrentStyles(event.data.node))
return;
- // "class" (or any other) attribute might have changed. Update styles unless they are being edited.
- if (!this._isEditingStyle && !this._userOperation)
- this._rebuildUpdate();
+ this._rebuildUpdate();
},
- _attributesRemoved: function(event)
+ _canAffectCurrentStyles: function(node)
{
- if (this.node !== event.data.node)
- return;
-
- // "style" attribute might have been removed.
- if (!this._isEditingStyle && !this._userOperation)
- this._rebuildUpdate();
+ return this.node && (this.node === node || node.parentNode === this.node.parentNode || node.isAncestor(this.node));
},
- _styleInvalidated: function(event)
- {
- if (this.node !== event.data)
- return;
-
- if (!this._isEditingStyle && !this._userOperation)
- this._rebuildUpdate();
- },
-
_innerRefreshUpdate: function(node, computedStyle, editedSection)
{
for (var pseudoId in this.sections) {
