Web Inspector: Focusing on another node while editing CSS property does not update...
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Jul 2011 15:34:28 +0000 (15:34 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Jul 2011 15:34:28 +0000 (15:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=64283

Reviewed by Yury Semikhatsky.

Source/WebCore:

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):

LayoutTests:

* 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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@91070 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/elements-test.js
LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt [new file with mode: 0644]
LayoutTests/inspector/styles/styles-change-node-while-editing.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/CSSStyleModel.js
Source/WebCore/inspector/front-end/DOMAgent.js
Source/WebCore/inspector/front-end/ElementsPanel.js
Source/WebCore/inspector/front-end/MetricsSidebarPane.js
Source/WebCore/inspector/front-end/StylesSidebarPane.js

index 7350b40..6148a23 100644 (file)
@@ -1,3 +1,15 @@
+2011-07-15  Pavel Feldman  <pfeldman@google.com>
+
+        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  <reed@google.com>
 
         [skia] remove legacy draw-text-as-paths code, as skia now draws all text as text
index 928b4fc..c2ce11a 100644 (file)
@@ -84,7 +84,7 @@ InspectorTest.waitForStyles = function(idValue, callback)
             callback();
             return;
         }
-        InspectorTest.addSniffer(WebInspector.ElementsPanel.prototype, "_stylesUpdated", sniff);
+        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_nodeStylesUpdatedForTest", sniff);
     })(null);
 }
 
diff --git a/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt b/LayoutTests/inspector/styles/styles-change-node-while-editing-expected.txt
new file mode 100644 (file)
index 0000000..a585d9b
--- /dev/null
@@ -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;
+
+
+
diff --git a/LayoutTests/inspector/styles/styles-change-node-while-editing.html b/LayoutTests/inspector/styles/styles-change-node-while-editing.html
new file mode 100644 (file)
index 0000000..8291e37
--- /dev/null
@@ -0,0 +1,51 @@
+<html>
+<head>
+<script src="../../http/tests/inspector/inspector-test.js"></script>
+<script src="../../http/tests/inspector/elements-test.js"></script>
+<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>
index 4753fc3..c6c43fd 100644 (file)
@@ -1,3 +1,50 @@
+2011-07-15  Pavel Feldman  <pfeldman@google.com>
+
+        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  <reed@google.com>
 
         [skia] remove legacy draw-text-as-paths code, as skia now draws all text as text
index e4e8723..935792f 100644 (file)
@@ -513,8 +513,8 @@ WebInspector.CSSProperty.prototype = {
         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 @@ WebInspector.CSSProperty.prototype = {
                     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);
index cb2ebd4..9cac8d0 100644 (file)
@@ -429,6 +429,12 @@ WebInspector.DOMAgent.prototype = {
         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 @@ WebInspector.DOMDispatcher.prototype = {
 
     inlineStyleInvalidated: function(nodeIds)
     {
-        this._domAgent._attributesUpdated(nodeIds);
+        this._domAgent._inlineStyleInvalidated(nodeIds);
     },
 
     characterDataModified: function(nodeId, newValue)
index ba9fdb9..12a931f 100644 (file)
@@ -93,7 +93,6 @@ WebInspector.ElementsPanel = function()
     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 @@ WebInspector.ElementsPanel.prototype = {
         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 @@ WebInspector.ElementsPanel.prototype = {
         this.updateStyles(true);
     },
 
-    _styleSheetChanged: function()
-    {
-        this._metricsPaneEdited();
-        this._stylesPaneEdited();
-    },
-
     _mouseMovedInCrumbs: function(event)
     {
         var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
@@ -1017,18 +997,13 @@ WebInspector.ElementsPanel.prototype = {
     {
         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;
index 962a956..b058a40 100644 (file)
@@ -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 @@ WebInspector.MetricsSidebarPane.prototype = {
     {
         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.MetricsSidebarPane.prototype = {
         WebInspector.highlightDOMNode(nodeId, mode);
     },
 
-    _update: function(style)
+    _updateMetrics: function(style)
     {
         // Updating with computed style.
         var metricsElement = document.createElement("div");
@@ -272,7 +296,7 @@ WebInspector.MetricsSidebarPane.prototype = {
         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 @@ WebInspector.MetricsSidebarPane.prototype = {
         delete this.originalPropertyData;
         delete this.previousPropertyDataCandidate;
         element.removeEventListener("keydown", context.keyDownHandler, false);
-        WebInspector.panels.elements.endEditingStyle();
+        delete this._isEditingMetrics;
     },
 
     editingCancelled: function(element, context)
index d69b37e..670cfa8 100644 (file)
@@ -83,6 +83,9 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
     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 @@ WebInspector.StylesSidebarPane.prototype = {
         }
     },
 
-    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 @@ WebInspector.StylesSidebarPane.prototype = {
         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 @@ WebInspector.StylesSidebarPane.prototype = {
         {
             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.StylesSidebarPane.prototype = {
             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 @@ WebInspector.StylesSidebarPane.prototype = {
         }
         // Trace the computed style.
         this.sections[0][0].rebuildComputedTrace(this.sections[0]);
+
+        this._nodeStylesUpdatedForTest(node, true);
     },
 
     _rebuildUpdate: function(node, styles)
@@ -308,6 +331,13 @@ WebInspector.StylesSidebarPane.prototype = {
             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)
@@ -680,7 +710,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 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 @@ WebInspector.StylesSidebarPane.prototype = {
                     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 @@ WebInspector.StylePropertyTreeElement.prototype = {
         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 @@ WebInspector.StylePropertyTreeElement.prototype = {
             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 @@ WebInspector.StylePropertyTreeElement.prototype = {
         }
 
         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 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (editedElement.parentElement)
             editedElement.parentElement.removeStyleClass("child-editing");
 
-        WebInspector.panels.elements.endEditingStyle();
+        delete this._parentPane._isEditingStyle;
     },
 
     editingCancelled: function(element, context)
@@ -1961,7 +1992,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
         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 @@ WebInspector.StylePropertyTreeElement.prototype = {
         // 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 @@ WebInspector.StylePropertyTreeElement.prototype = {
             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 @@ WebInspector.StylePropertyTreeElement.prototype = {
             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 ";".