DevTools: [SSP] update style rules of SectionPropertyTreeElements

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 1841 matching lines @@
         } else {
             var previousSection = this.previousEditableSibling();
             if (!previousSection)
                 return;
 
             previousSection.expand();
             previousSection.addNewBlankProperty().startEditing();
         }
     },
 
+    /**
+     * @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();
         if (newContent)
             newContent = newContent.trim();
         if (newContent === oldContent) {
             // Revert to a trimmed version of the selector if need be.
             this._selectorElement.textContent = newContent;
             this._moveEditorFromSelector(moveDirection);
             return;
@@ skipping 12 matching lines @@
                 this.noAffect = true;
                 this.element.classList.add("no-affect");
             } else {
                 delete this.noAffect;
                 this.element.classList.remove("no-affect");
             }
 
             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.update(selectedNode);
             this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
         }
 
         /**
          * @this {WebInspector.StylePropertiesSection}
          */
         function finishOperationAndMoveEditor(direction)
         {
@@ skipping 900 matching lines @@
             if (userCallback)
                 userCallback();
         }
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} newStyle
      */
     _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);
         }
     },
 
     /**
      * @param {!Event} event
      */
     toggleEnabled: function(event)
@@ skipping 826 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }