DevTools: synchronize links in StylesSidebarPane on edits.

Source/devtools/front_end/StylesSidebarPane.js

Index: Source/devtools/front_end/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/StylesSidebarPane.js b/Source/devtools/front_end/StylesSidebarPane.js
index bacf510b0cae942fc7aafc3d90373d96bb963703..0a92f074f2e0fb8addeccfe3761d52d8c2a5b728 100644
--- a/Source/devtools/front_end/StylesSidebarPane.js
+++ b/Source/devtools/front_end/StylesSidebarPane.js
@@ -162,6 +162,18 @@ WebInspector.StylesSidebarPane._ignoreErrorsForProperty = function(property) {
 
 WebInspector.StylesSidebarPane.prototype = {
     /**
+     * @param {!WebInspector.CSSRule} editedRule
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
+    {
+        var styleRuleSections = this.sections[0];
+        for (var i = 1; i < styleRuleSections.length; ++i)
+            styleRuleSections[i]._styleSheetRuleEdited(editedRule, oldRange, newRange);
+    },
+
+    /**
      * @param {?Event} event
      */
     _contextMenuEventFired: function(event)
@@ -1080,55 +1092,6 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable,
     // We don't really use properties' disclosure.
     this.propertiesElement.classList.remove("properties-tree");
 
-    if (styleRule.media) {
-        for (var i = styleRule.media.length - 1; i >= 0; --i) {
-            var media = styleRule.media[i];
-            var mediaDataElement = this.titleElement.createChild("div", "media");
-            var mediaText;
-            switch (media.source) {
-            case WebInspector.CSSMedia.Source.LINKED_SHEET:
-            case WebInspector.CSSMedia.Source.INLINE_SHEET:
-                mediaText = "media=\"" + media.text + "\"";
-                break;
-            case WebInspector.CSSMedia.Source.MEDIA_RULE:
-                mediaText = "@media " + media.text;
-                break;
-            case WebInspector.CSSMedia.Source.IMPORT_RULE:
-                mediaText = "@import " + media.text;
-                break;
-            }
-
-            if (media.sourceURL) {
-                var refElement = mediaDataElement.createChild("div", "subtitle");
-                var rawLocation;
-                var mediaHeader;
-                if (media.range) {
-                    mediaHeader = media.header();
-                    if (mediaHeader) {
-                        var lineNumber = media.lineNumberInSource();
-                        var columnNumber = media.columnNumberInSource();
-                        console.assert(typeof lineNumber !== "undefined" && typeof columnNumber !== "undefined");
-                        rawLocation = new WebInspector.CSSLocation(this._parentPane._target, media.sourceURL, lineNumber, columnNumber);
-                    }
-                }
-
-                var anchor;
-                if (rawLocation)
-                    anchor = this._parentPane._linkifier.linkifyCSSLocation(mediaHeader.id, rawLocation);
-                else {
-                    // The "linkedStylesheet" case.
-                    anchor = WebInspector.linkifyResourceAsNode(media.sourceURL, undefined, "subtitle", media.sourceURL);
-                }
-                anchor.style.float = "right";
-                refElement.appendChild(anchor);
-            }
-
-            var mediaTextElement = mediaDataElement.createChild("span");
-            mediaTextElement.textContent = mediaText;
-            mediaTextElement.title = media.text;
-        }
-    }
-
     var selectorContainer = document.createElement("div");
     this._selectorElement = document.createElement("span");
     this._selectorElement.textContent = styleRule.selectorText;
@@ -1164,6 +1127,8 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable,
 
     this._selectorRefElement = document.createElement("div");
     this._selectorRefElement.className = "subtitle";
+    this._mediaListElement = this.titleElement.createChild("div", "media-list");
+    this._updateMediaList();
     this._updateRuleOrigin();
     selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild);
     this.titleElement.appendChild(selectorContainer);
@@ -1180,6 +1145,82 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable,
 }
 
 WebInspector.StylePropertiesSection.prototype = {
+    /**
+     * @param {!WebInspector.CSSRule} editedRule
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
+    {
+        if (!this.rule || !this.rule.id)
+            return;
+        if (this.rule !== editedRule)
+            this.rule.sourceStyleSheetEdited(this.rule.id.styleSheetId, oldRange, newRange);
+        this._updateMediaList();
+        this._updateRuleOrigin();
+    },
+
+    /**
+     * @param {!Object} styleRule
+     */
+    _createMediaList: function(styleRule)
+    {
+        if (!styleRule.media)
+            return;
+        for (var i = styleRule.media.length - 1; i >= 0; --i) {
+            var media = styleRule.media[i];
+            var mediaDataElement = this._mediaListElement.createChild("div", "media");
+            var mediaText;
+            switch (media.source) {
+            case WebInspector.CSSMedia.Source.LINKED_SHEET:
+            case WebInspector.CSSMedia.Source.INLINE_SHEET:
+                mediaText = "media=\"" + media.text + "\"";
+                break;
+            case WebInspector.CSSMedia.Source.MEDIA_RULE:
+                mediaText = "@media " + media.text;
+                break;
+            case WebInspector.CSSMedia.Source.IMPORT_RULE:
+                mediaText = "@import " + media.text;
+                break;
+            }
+
+            if (media.sourceURL) {
+                var refElement = mediaDataElement.createChild("div", "subtitle");
+                var rawLocation;
+                var mediaHeader;
+                if (media.range) {
+                    mediaHeader = media.header();
+                    if (mediaHeader) {
+                        var lineNumber = media.lineNumberInSource();
+                        var columnNumber = media.columnNumberInSource();
+                        console.assert(typeof lineNumber !== "undefined" && typeof columnNumber !== "undefined");
+                        rawLocation = new WebInspector.CSSLocation(this._parentPane._target, media.sourceURL, lineNumber, columnNumber);
+                    }
+                }
+
+                var anchor;
+                if (rawLocation)
+                    anchor = this._parentPane._linkifier.linkifyCSSLocation(mediaHeader.id, rawLocation);
+                else {
+                    // The "linkedStylesheet" case.
+                    anchor = WebInspector.linkifyResourceAsNode(media.sourceURL, undefined, "subtitle", media.sourceURL);
+                }
+                anchor.style.float = "right";
+                refElement.appendChild(anchor);
+            }
+
+            var mediaTextElement = mediaDataElement.createChild("span");
+            mediaTextElement.textContent = mediaText;
+            mediaTextElement.title = media.text;
+        }
+    },
+
+    _updateMediaList: function()
+    {
+        this._mediaListElement.removeChildren();
+        this._createMediaList(this.styleRule);
+    },
+
     collapse: function()
     {
         // Overriding with empty body.
@@ -1622,11 +1663,12 @@ WebInspector.StylePropertiesSection.prototype = {
                 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, sourceURL: newRule.resourceURL(), rule: newRule };
 
             this._parentPane.update(selectedNode);
-            this._updateRuleOrigin();
+            this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
         }
@@ -2475,6 +2517,22 @@ WebInspector.StylePropertyTreeElement.prototype = {
     },
 
     /**
+     * @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;
+        if (this.style.parentRule) {
+            this.style.parentRule.style = this.style;
+            this._parentPane._styleSheetRuleEdited(this.style.parentRule, oldStyleRange, newStyleRange);
+        }
+    },
+
+    /**
      * @param {?Event} event
      */
     toggleEnabled: function(event)
@@ -2491,10 +2549,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
             if (!newStyle)
                 return;
-
-            newStyle.parentRule = this.style.parentRule;
-            this.style = newStyle;
-            this._styleRule.style = newStyle;
+            this._applyNewStyle(newStyle);
 
             var section = this.section();
             if (section && section._parentPane)
@@ -3089,14 +3144,12 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 userCallback();
                 return;
             }
+            this._applyNewStyle(newStyle);
 
             if (this._newProperty)
                 this._newPropertyInStyle = true;
-            newStyle.parentRule = this.style.parentRule;
-            this.style = newStyle;
-            this.property = newStyle.propertyAt(this.property.index);
-            this._styleRule.style = this.style;
 
+            this.property = newStyle.propertyAt(this.property.index);
             if (section && section._parentPane)
                 section._parentPane.dispatchEventToListeners("style edited");