DevTools: synchronize links in StylesSidebarPane on edits.

Source/devtools/front_end/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 144 matching lines @@
     if (value.endsWith("\9"))
         return true;
     if (hasUnknownVendorPrefix(value))
         return true;
 
     return false;
 }
 
 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)
     {
         // We start editing upon click -> default navigation to resources panel is not available
         // Hence we add a soft context menu for hrefs.
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(/** @type {!Node} */ (event.target));
         contextMenu.show();
     },
@@ skipping 898 matching lines @@
     this.styleRule = styleRule;
     this.rule = this.styleRule.rule;
     this.editable = editable;
     this.isInherited = isInherited;
 
     var extraClasses = (this.rule && (this.rule.isUser || this.rule.isUserAgent) ? " user-rule" : "");
     this.element.className = "styles-section matched-styles monospace" + extraClasses;
     // 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;
     selectorContainer.appendChild(this._selectorElement);
 
     var openBrace = document.createElement("span");
     openBrace.textContent = " {";
     selectorContainer.appendChild(openBrace);
     selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
@@ skipping 15 matching lines @@
             if (this.rule.id)
                 this.navigable = !!this.rule.resourceURL();
         }
         this.titleElement.classList.add("styles-selector");
     }
 
     this._usedProperties = styleRule.usedProperties;
 
     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);
     this._selectorContainer = selectorContainer;
 
     if (isInherited)
         this.element.classList.add("styles-show-inherited"); // This one is related to inherited rules, not computed style.
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
 }
 
 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.
     },
 
     handleClick: function()
     {
         // Avoid consuming events.
     },
 
@@ skipping 422 matching lines @@
         {
             var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
             if (!doesAffectSelectedNode) {
                 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, sourceURL: newRule.resourceURL(), rule: newRule };
 
             this._parentPane.update(selectedNode);
-            this._updateRuleOrigin();
+            this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
         }
 
         /**
          * @this {WebInspector.StylePropertiesSection}
          */
         function finishOperationAndMoveEditor(direction)
         {
             delete this._parentPane._userOperation;
@@ skipping 846 matching lines @@
          * @this {WebInspector.StylePropertyTreeElement}
          */
         function callback(newStyle)
         {
             delete this._parentPane._userOperation;
 
             if (!newStyle)
                 return;
 
             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) {

[apavlov, 2014/04/02 16:43:47]

Can we extract this onto StylePropertyElement.prototype?

[lushnikov, 2014/04/02 16:53:02]

Done.

+                this.style.parentRule.style = this.style;
+                this._parentPane._styleSheetRuleEdited(this.style.parentRule, oldStyleRange, newStyleRange);
+            }
 
             var section = this.section();
             if (section && section._parentPane)
                 section._parentPane.dispatchEventToListeners("style property toggled");
 
             this._updatePane();
         }
 
         this._parentPane._userOperation = true;
         this.property.setDisabled(disabled, callback.bind(this));
@@ skipping 578 matching lines @@
                     // It did not apply, cancel editing.
                     this._revertStyleUponEditingCanceled(originalPropertyText);
                 }
                 userCallback();
                 return;
             }
 
             if (this._newProperty)
                 this._newPropertyInStyle = true;
             newStyle.parentRule = this.style.parentRule;
+            var oldStyleRange = /** @type {!WebInspector.TextRange} */ (this.style.range);
+            var newStyleRange = /** @type {!WebInspector.TextRange} */ (newStyle.range);
             this.style = newStyle;
             this.property = newStyle.propertyAt(this.property.index);
             this._styleRule.style = this.style;
 
+            if (this.style.parentRule) {
+                this.style.parentRule.style = this.style;
+                this._parentPane._styleSheetRuleEdited(this.style.parentRule, oldStyleRange, newStyleRange);
+            }
             if (section && section._parentPane)
                 section._parentPane.dispatchEventToListeners("style edited");
 
             if (updateInterface && currentNode === this.node()) {
                 this._updatePane(userCallback);
                 return;
             }
 
             userCallback();
         }
@@ skipping 145 matching lines @@
             return;
         }
 
         var results = this._cssCompletions.startsWith(prefix);
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }