Diff
Modified: trunk/LayoutTests/ChangeLog (91069 => 91070)
--- trunk/LayoutTests/ChangeLog 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/LayoutTests/ChangeLog 2011-07-15 15:34:28 UTC (rev 91070)
@@ -1,3 +1,15 @@
+2011-07-15 Pavel Feldman <[email protected]>
+
+ Web Inspector: Focusing on another node while editing CSS property does not update styles
+ https://bugs.webkit.org/show_bug.cgi?id=64283
+
+ Reviewed by Yury Semikhatsky.
+
+ * http/tests/inspector/elements-test.js:
+ (initialize_ElementTest.InspectorTest.waitForStyles):
+ * inspector/styles/styles-change-node-while-editing-expected.txt: Added.
+ * inspector/styles/styles-change-node-while-editing.html: Added.
+
2011-07-15 Mike Reed <[email protected]>
[skia] remove legacy draw-text-as-paths code, as skia now draws all text as text
Modified: trunk/LayoutTests/http/tests/inspector/elements-test.js (91069 => 91070)
--- trunk/LayoutTests/http/tests/inspector/elements-test.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/LayoutTests/http/tests/inspector/elements-test.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -84,7 +84,7 @@
callback();
return;
}
- InspectorTest.addSniffer(WebInspector.ElementsPanel.prototype, "_stylesUpdated", sniff);
+ InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_nodeStylesUpdatedForTest", sniff);
})(null);
}
Added: trunk/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt (0 => 91070)
--- trunk/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt 2011-07-15 15:34:28 UTC (rev 91070)
@@ -0,0 +1,16 @@
+Tests that changing selected node while editing style does update styles sidebar.
+
+Text
+[expanded] element.style { ()
+color: red;
+
+
+[expanded] element.style { ()
+color: blue;
+
+
+[expanded] element.style { ()
+background: red;
+
+
+
Property changes on: trunk/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/inspector/styles/styles-change-node-while-editing.html (0 => 91070)
--- trunk/LayoutTests/inspector/styles/styles-change-node-while-editing.html (rev 0)
+++ trunk/LayoutTests/inspector/styles/styles-change-node-while-editing.html 2011-07-15 15:34:28 UTC (rev 91070)
@@ -0,0 +1,51 @@
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+
+function test()
+{
+ WebInspector.showPanel("elements");
+ InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
+
+ var treeElement;
+ var section;
+
+ function step1()
+ {
+ InspectorTest.dumpSelectedElementStyles(true, true, true);
+ treeElement = InspectorTest.getElementStylePropertyTreeItem("color");
+
+ treeElement.startEditing();
+ treeElement.nameElement.textContent = "background";
+
+ InspectorTest.selectNodeAndWaitForStyles("other", step2);
+ }
+
+ function step2()
+ {
+ InspectorTest.dumpSelectedElementStyles(true, true, true);
+ InspectorTest.selectNodeAndWaitForStyles("inspected", step3);
+ }
+
+ function step3()
+ {
+ InspectorTest.dumpSelectedElementStyles(true, true, true);
+ InspectorTest.completeTest();
+ }
+}
+
+</script>
+</head>
+
+<body _onload_="runTest()">
+<p>
+Tests that changing selected node while editing style does update styles sidebar.
+</p>
+
+<div id="inspected" style="color: red">Text</div>
+<div id="other" style="color: blue"></div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/inspector/styles/styles-change-node-while-editing.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (91069 => 91070)
--- trunk/Source/WebCore/ChangeLog 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/ChangeLog 2011-07-15 15:34:28 UTC (rev 91070)
@@ -1,3 +1,50 @@
+2011-07-15 Pavel Feldman <[email protected]>
+
+ Web Inspector: Focusing on another node while editing CSS property does not update styles
+ https://bugs.webkit.org/show_bug.cgi?id=64283
+
+ Reviewed by Yury Semikhatsky.
+
+ Test: inspector/styles/styles-change-node-while-editing.html
+
+ * inspector/front-end/CSSStyleModel.js:
+ (WebInspector.CSSProperty.prototype.setText):
+ (WebInspector.CSSProperty.prototype.setText.callback):
+ * inspector/front-end/DOMAgent.js:
+ (WebInspector.DOMAgent.prototype._inlineStyleInvalidated):
+ (WebInspector.DOMDispatcher.prototype.inlineStyleInvalidated):
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel):
+ (WebInspector.ElementsPanel.prototype._attributesUpdated):
+ (WebInspector.ElementsPanel.prototype.updateStyles):
+ * inspector/front-end/MetricsSidebarPane.js:
+ (WebInspector.MetricsSidebarPane):
+ (WebInspector.MetricsSidebarPane.prototype.update):
+ (WebInspector.MetricsSidebarPane.prototype._innerUpdate.callback):
+ (WebInspector.MetricsSidebarPane.prototype._innerUpdate.inlineStyleCallback):
+ (WebInspector.MetricsSidebarPane.prototype._innerUpdate):
+ (WebInspector.MetricsSidebarPane.prototype._styleSheetChanged):
+ (WebInspector.MetricsSidebarPane.prototype._attributesUpdated):
+ (WebInspector.MetricsSidebarPane.prototype.startEditing):
+ (WebInspector.MetricsSidebarPane.prototype.editingEnded):
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylesSidebarPane):
+ (WebInspector.StylesSidebarPane.prototype.update):
+ (WebInspector.StylesSidebarPane.prototype._innerUpdate.stylesCallback):
+ (WebInspector.StylesSidebarPane.prototype._innerUpdate.computedStyleCallback):
+ (WebInspector.StylesSidebarPane.prototype._innerUpdate):
+ (WebInspector.StylesSidebarPane.prototype._styleSheetChanged):
+ (WebInspector.StylesSidebarPane.prototype._attributesUpdated):
+ (WebInspector.StylesSidebarPane.prototype._refreshUpdate):
+ (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
+ (WebInspector.StylesSidebarPane.prototype._nodeStylesUpdatedForTest):
+ (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
+ (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
+ (WebInspector.StylePropertyTreeElement.prototype):
+ (WebInspector.StylePropertyTreeElement.prototype.event):
+ (WebInspector.StylePropertyTreeElement.prototype.element.userInput.previousContent.context.moveDirection):
+ (WebInspector.StylePropertyTreeElement.prototype.styleText.updateInterface.majorChange.isRevert):
+
2011-07-15 Mike Reed <[email protected]>
[skia] remove legacy draw-text-as-paths code, as skia now draws all text as text
Modified: trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js (91069 => 91070)
--- trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -513,8 +513,8 @@
function enabledCallback(style)
{
if (style)
- WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange);
- if (userCallback)
+ WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(null, style) : null);
+ else if (userCallback)
userCallback(style);
}
@@ -530,7 +530,7 @@
return;
}
- WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(this, style) : null);
+ WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(null, style) : null);
} else {
if (userCallback)
userCallback(null);
Modified: trunk/Source/WebCore/inspector/front-end/DOMAgent.js (91069 => 91070)
--- trunk/Source/WebCore/inspector/front-end/DOMAgent.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/inspector/front-end/DOMAgent.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -429,6 +429,12 @@
this._loadNodeAttributesSoon(nodeIds);
},
+ _inlineStyleInvalidated: function(nodeIds)
+ {
+ // FIXME: handle differently (we don't necessarily need to update attributes upon this message).
+ this._loadNodeAttributesSoon(nodeIds);
+ },
+
_loadNodeAttributesSoon: function(nodeIds)
{
for (var i = 0; i < nodeIds.length; ++i)
@@ -590,7 +596,7 @@
inlineStyleInvalidated: function(nodeIds)
{
- this._domAgent._attributesUpdated(nodeIds);
+ this._domAgent._inlineStyleInvalidated(nodeIds);
},
characterDataModified: function(nodeId, newValue)
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (91069 => 91070)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -93,7 +93,6 @@
this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
- WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
this.sidebarElement = document.createElement("div");
this.sidebarElement.id = "elements-sidebar";
@@ -426,24 +425,11 @@
this.treeOutline.focusedDOMNode = x;
},
- startEditingStyle: function()
- {
- this._isEditingStyle = true;
- },
-
- endEditingStyle: function()
- {
- delete this._isEditingStyle;
- },
-
_attributesUpdated: function(event)
{
this.recentlyModifiedNodes.push({node: event.data, updated: true});
if (this.visible)
this._updateModifiedNodesSoon();
-
- if (!this._isEditingStyle && event.data ="" this.focusedDOMNode)
- this._styleSheetChanged();
},
_characterDataModified: function(event)
@@ -539,12 +525,6 @@
this.updateStyles(true);
},
- _styleSheetChanged: function()
- {
- this._metricsPaneEdited();
- this._stylesPaneEdited();
- },
-
_mouseMovedInCrumbs: function(event)
{
var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
@@ -1017,18 +997,13 @@
{
var stylesSidebarPane = this.sidebarPanes.styles;
var computedStylePane = this.sidebarPanes.computedStyle;
- if ((!stylesSidebarPane.expanded && !computedStylePane.expanded) || !stylesSidebarPane.needsUpdate || this._isEditingStyle)
+ if ((!stylesSidebarPane.expanded && !computedStylePane.expanded) || !stylesSidebarPane.needsUpdate)
return;
- stylesSidebarPane.update(this.focusedDOMNode, null, forceUpdate, this._stylesUpdated.bind(this, this.focusedDOMNode));
+ stylesSidebarPane.update(this.focusedDOMNode, forceUpdate);
stylesSidebarPane.needsUpdate = false;
},
- _stylesUpdated: function(node)
- {
- // This method is overriden in tests.
- },
-
updateMetrics: function()
{
var metricsSidebarPane = this.sidebarPanes.metrics;
Modified: trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js (91069 => 91070)
--- trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -29,6 +29,9 @@
WebInspector.MetricsSidebarPane = function()
{
WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics"));
+
+ WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
}
WebInspector.MetricsSidebarPane.prototype = {
@@ -36,30 +39,51 @@
{
if (node)
this.node = node;
- else
- node = this.node;
+ this._innerUpdate();
+ },
+ _innerUpdate: function()
+ {
+ // FIXME: avoid updates of a collapsed pane.
+ var node = this.node;
+
if (!node || node.nodeType() !== Node.ELEMENT_NODE) {
this.bodyElement.removeChildren();
return;
}
- var self = this;
- var callback = function(style) {
- if (!style)
+ function callback(style)
+ {
+ if (!style || this.node !== node)
return;
- self._update(style);
- };
- WebInspector.cssModel.getComputedStyleAsync(node.id, callback);
+ this._updateMetrics(style);
+ }
+ WebInspector.cssModel.getComputedStyleAsync(node.id, callback.bind(this));
- var inlineStyleCallback = function(style) {
- if (!style)
+ function inlineStyleCallback(style)
+ {
+ if (!style || this.node !== node)
return;
- self.inlineStyle = style;
- };
- WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback);
+ this.inlineStyle = style;
+ }
+ WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback.bind(this));
},
+ _styleSheetChanged: function()
+ {
+ this._innerUpdate();
+ },
+
+ _attributesUpdated: function(event)
+ {
+ if (this.node !== event.data)
+ return;
+
+ // "style" attribute might have changed. Update metrics unless they are being edited.
+ if (!this._isEditingMetrics)
+ this._innerUpdate();
+ },
+
_getPropertyValueAsPx: function(style, propertyName)
{
return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
@@ -124,7 +148,7 @@
WebInspector.highlightDOMNode(nodeId, mode);
},
- _update: function(style)
+ _updateMetrics: function(style)
{
// Updating with computed style.
var metricsElement = document.createElement("div");
@@ -272,7 +296,7 @@
context.keyDownHandler = boundKeyDown;
targetElement.addEventListener("keydown", boundKeyDown, false);
- WebInspector.panels.elements.startEditingStyle();
+ this._isEditingMetrics = true;
WebInspector.startEditing(targetElement, {
context: context,
commitHandler: this.editingCommitted.bind(this),
@@ -340,7 +364,7 @@
delete this.originalPropertyData;
delete this.previousPropertyDataCandidate;
element.removeEventListener("keydown", context.keyDownHandler, false);
- WebInspector.panels.elements.endEditingStyle();
+ delete this._isEditingMetrics;
},
editingCancelled: function(element, context)
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (91069 => 91070)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2011-07-15 15:27:30 UTC (rev 91069)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2011-07-15 15:34:28 UTC (rev 91070)
@@ -83,6 +83,9 @@
this.bodyElement.appendChild(this._elementStatePane);
this._sectionsContainer = document.createElement("div");
this.bodyElement.appendChild(this._sectionsContainer);
+
+ WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
+ WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
}
WebInspector.StylesSidebarPane.ColorFormat = {
@@ -210,14 +213,14 @@
}
},
- update: function(node, editedSection, forceUpdate, callback)
+ update: function(node, forceUpdate)
{
var refresh = false;
if (forceUpdate)
delete this.node;
- if (!forceUpdate && (!node || node === this.node))
+ if (!forceUpdate && (node === this.node))
refresh = true;
if (node && node.nodeType() === Node.TEXT_NODE && node.parentNode)
@@ -231,12 +234,16 @@
else
node = this.node;
+ this._innerUpdate(refresh, null);
+ },
+
+ _innerUpdate: function(refresh, editedSection)
+ {
+ var node = this.node;
if (!node) {
this._sectionsContainer.removeChildren();
this._computedStylePane.bodyElement.removeChildren();
this.sections = {};
- if (callback)
- callback();
return;
}
@@ -244,16 +251,12 @@
{
if (this.node === node && styles)
this._rebuildUpdate(node, styles);
- if (callback)
- callback();
}
function computedStyleCallback(computedStyle)
{
if (this.node === node && computedStyle)
this._refreshUpdate(node, computedStyle, editedSection);
- if (callback)
- callback();
}
if (refresh)
@@ -262,6 +265,24 @@
WebInspector.cssModel.getStylesAsync(node.id, this._forcedPseudoClasses, stylesCallback.bind(this));
},
+ _styleSheetChanged: function()
+ {
+ if (this._userOperation || this._isEditingStyle)
+ return;
+
+ this._innerUpdate(false);
+ },
+
+ _attributesUpdated: function(event)
+ {
+ if (this.node !== event.data)
+ return;
+
+ // "style" attribute might have changed. Update styles unless they are being edited.
+ if (!this._isEditingStyle && !this._userOperation)
+ this._innerUpdate(false);
+ },
+
_refreshUpdate: function(node, computedStyle, editedSection)
{
for (var pseudoId in this.sections) {
@@ -273,6 +294,8 @@
}
// Trace the computed style.
this.sections[0][0].rebuildComputedTrace(this.sections[0]);
+
+ this._nodeStylesUpdatedForTest(node, true);
},
_rebuildUpdate: function(node, styles)
@@ -308,8 +331,15 @@
this._markUsedProperties(styleRules, usedProperties, disabledComputedProperties);
this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, pseudoId, anchorElement);
}
+
+ this._nodeStylesUpdatedForTest(node, false);
},
+ _nodeStylesUpdatedForTest: function(node, refresh)
+ {
+ // Tests override this method.
+ },
+
_refreshStyleRules: function(sections, computedStyle)
{
var nodeComputedStyle = computedStyle;
@@ -680,7 +710,7 @@
for (var i = 0; i < this._elementStatePane.inputs.length; ++i)
this._elementStatePane.inputs[i].checked = false;
delete this._forcedPseudoClasses;
- this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+ this._innerUpdate(false);
}
}
},
@@ -702,7 +732,7 @@
pseudoClasses.push(inputs[i].state);
}
this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
- this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
+ this._innerUpdate(false);
}
function createCheckbox(state)
@@ -1581,12 +1611,12 @@
this.tooltip = this.property.propertyText;
},
- updateAll: function(updateAllRules)
+ _updateAll: function()
{
if (!this.treeOutline)
return;
- if (updateAllRules && this.treeOutline.section && this.treeOutline.section.pane)
- this.treeOutline.section.pane.update(null, this.treeOutline.section);
+ if (this.treeOutline.section && this.treeOutline.section.pane)
+ this.treeOutline.section.pane._innerUpdate(true, this.treeOutline.section);
else if (this.treeOutline.section)
this.treeOutline.section.update(true);
else
@@ -1608,7 +1638,7 @@
if (this.treeOutline.section && this.treeOutline.section.pane)
this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
- this.updateAll(true);
+ this._updateAll();
}
this.property.setDisabled(disabled, callback.bind(this));
@@ -1785,7 +1815,8 @@
}
delete this.originalPropertyText;
- WebInspector.panels.elements.startEditingStyle();
+
+ this._parentPane._isEditingStyle = true;
WebInspector.startEditing(selectElement, {
context: context,
commitHandler: this.editingCommitted.bind(this),
@@ -1907,7 +1938,7 @@
if (editedElement.parentElement)
editedElement.parentElement.removeStyleClass("child-editing");
- WebInspector.panels.elements.endEditingStyle();
+ delete this._parentPane._isEditingStyle;
},
editingCancelled: function(element, context)
@@ -1961,7 +1992,6 @@
var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue);
var shouldCommitNewProperty = this._newProperty && (moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
- WebInspector.panels.elements.startEditingStyle();
this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, this.treeOutline.section);
var propertyText;
if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent)))
@@ -1984,8 +2014,6 @@
// The Callback to start editing the next/previous property/selector.
function moveToNextCallback(alreadyNew, valueChanged, section)
{
- WebInspector.panels.elements.endEditingStyle();
-
if (!moveDirection)
return;
@@ -2070,8 +2098,12 @@
return;
}
+ var currentNode = this._parentPane.node;
+ this._parentPane._userOperation = true;
+
function callback(originalPropertyText, newStyle)
{
+ delete this._parentPane._userOperation;
if (!newStyle) {
if (updateInterface) {
// It did not apply, cancel editing.
@@ -2087,8 +2119,8 @@
if (section && section.pane)
section.pane.dispatchEventToListeners("style edited");
- if (updateInterface)
- this.updateAll(true);
+ if (updateInterface && currentNode === section.pane.node)
+ this._updateAll();
}
// Append a ";" if the new text does not end in ";".
