DevTools: [SSP] update style rules of SectionPropertyTreeElements

Source/devtools/front_end/elements/StylesSidebarPane.js

Index: Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/elements/StylesSidebarPane.js b/Source/devtools/front_end/elements/StylesSidebarPane.js
index 6a42183aada574a0c3fa6d3d8dea608939d737bf..f2052bf81c31b0e381a8af03d5be843732dd2296 100644
--- a/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -1859,6 +1859,23 @@ WebInspector.StylePropertiesSection.prototype = {
         }
     },
 
+    /**
+     * @param {!WebInspector.CSSStyleDeclaration} newStyle
+     */
+    _propogateNewStyle: function(newStyle)

[vsevik, 2014/11/05 07:52:05]

propagate

+    {
+        if (this.rule) {
+            newStyle.parentRule = this.rule;
+            this.rule.style = newStyle;
+        }
+        this.styleRule.style = newStyle;
+        for (var i = 0; i < this.propertiesTreeOutline.children.length; ++i) {
+            var treeElement = this.propertiesTreeOutline.children[i];
+            treeElement.style = newStyle;
+            treeElement._styleRule.style = newStyle;
+        }
+    },
+
     editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
     {
         this._editingSelectorEnded();
@@ -1891,8 +1908,9 @@ WebInspector.StylePropertiesSection.prototype = {
             var oldSelectorRange = this.rule.selectorRange;
             this.rule = newRule;
             this.styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, rule: newRule };
-
+            this._propogateNewStyle(this.rule.style);
             this._parentPane.update(selectedNode);
+
             this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
@@ -2813,11 +2831,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
      */
     _applyNewStyle: function(newStyle)
     {
-        newStyle.parentRule = this.style.parentRule;
         var oldStyleRange = /** @type {!WebInspector.TextRange} */ (this.style.range);
         var newStyleRange = /** @type {!WebInspector.TextRange} */ (newStyle.range);
-        this.style = newStyle;
-        this._styleRule.style = newStyle;
+        this.parent.section._propogateNewStyle(newStyle);
         if (this.style.parentRule) {
             this.style.parentRule.style = this.style;
             this._parentPane._styleSheetRuleEdited(this.style.parentRule, oldStyleRange, newStyleRange);