DevTools: synchronize links in StylesSidebarPane on edits.

Source/devtools/front_end/CSSStyleModel.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 714 matching lines @@
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSStyle} payload
  */
 WebInspector.CSSStyleDeclaration = function(cssModel, payload)
 {
     this._cssModel = cssModel;
     this.id = payload.styleId;
     this.width = payload.width;
     this.height = payload.height;
-    this.range = payload.range;
+    this.range = payload.range ? WebInspector.TextRange.fromObject(payload.range) : null;
     this._shorthandValues = WebInspector.CSSStyleDeclaration.buildShorthandValueMap(payload.shorthandEntries);
     this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty }
     this._allProperties = []; // ALL properties: [ CSSProperty ]
     this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty }
     var payloadPropertyCount = payload.cssProperties.length;
 
 
     for (var i = 0; i < payloadPropertyCount; ++i) {
         var property = WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]);
         this._allProperties.push(property);
@@ skipping 48 matching lines @@
 WebInspector.CSSStyleDeclaration.parseComputedStylePayload = function(cssModel, payload)
 {
     var newPayload = /** @type {!CSSAgent.CSSStyle} */ ({ cssProperties: [], shorthandEntries: [], width: "", height: "" });
     if (payload)
         newPayload.cssProperties = /** @type {!Array.<!CSSAgent.CSSProperty>} */ (payload);
 
     return new WebInspector.CSSStyleDeclaration(cssModel, newPayload);
 }
 
 WebInspector.CSSStyleDeclaration.prototype = {
+    /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
+    {
+        if (!this.id || this.id.styleSheetId !== styleSheetId)
+            return;
+        if (this.range)
+            this.range = this.range.rebaseAfterTextEdit(oldRange, newRange);
+        for (var i = 0; i < this._allProperties.length; ++i)
+            this._allProperties[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
+    },
+
     _computeActiveProperties: function()
     {
         var activeProperties = {};
         for (var i = this._allProperties.length - 1; i >= 0; --i) {
             var property = this._allProperties[i];
             if (property.styleBased || property.disabled)
                 continue;
             property._setActive(false);
             if (!property.parsedOk)
                 continue;
@@ skipping 149 matching lines @@
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSRule} payload
  * @param {!Array.<number>=} matchingSelectors
  */
 WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
 {
     this._cssModel = cssModel;
     this.id = payload.ruleId;
     if (matchingSelectors)
         this.matchingSelectors = matchingSelectors;
-    this.selectors = payload.selectorList.selectors;
+    this.selectors = payload.selectorList.selectors || [];

[apavlov, 2014/04/02 15:23:57]

Being on too safe a side?

[lushnikov, 2014/04/02 15:35:04]

Done.

+    for (var i = 0; i < this.selectors.length; ++i) {
+        var selector = this.selectors[i];
+        if (selector.range)
+            selector.range = WebInspector.TextRange.fromObject(selector.range);
+    }
     this.selectorText = this.selectors.select("value").join(", ");
 
     var firstRange = this.selectors[0].range;
     if (firstRange) {
         var lastRange = this.selectors.peekLast().range;
         this.selectorRange = new WebInspector.TextRange(firstRange.startLine, firstRange.startColumn, lastRange.endLine, lastRange.endColumn);
     }
     this.sourceURL = payload.sourceURL;
     this.origin = payload.origin;
     this.style = WebInspector.CSSStyleDeclaration.parsePayload(this._cssModel, payload.style);
     this.style.parentRule = this;
     if (payload.media)
         this.media = WebInspector.CSSMedia.parseMediaArrayPayload(cssModel, payload.media);
     this._setRawLocationAndFrameId();
 }
 
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!CSSAgent.CSSRule} payload
  * @param {!Array.<number>=} matchingIndices
  * @return {!WebInspector.CSSRule}
  */
 WebInspector.CSSRule.parsePayload = function(cssModel, payload, matchingIndices)
 {
     return new WebInspector.CSSRule(cssModel, payload, matchingIndices);
 }
 
 WebInspector.CSSRule.prototype = {
+    /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
+    {
+        if (this.id && this.id.styleSheetId === styleSheetId) {
+            if (this.selectorRange)
+                this.selectorRange = this.selectorRange.rebaseAfterTextEdit(oldRange, newRange);
+            for (var i = 0; i < this.selectors.length; ++i) {
+                var selector = this.selectors[i];
+                if (selector.range)
+                    selector.range = selector.range.rebaseAfterTextEdit(oldRange, newRange);
+            }
+        }
+        if (this.media) {
+            for (var i = 0; i < this.media.length; ++i)
+                this.media[i].sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
+        }
+        this.style.sourceStyleSheetEdited(styleSheetId, oldRange, newRange);
+    },
+
     _setRawLocationAndFrameId: function()
     {
         if (!this.id)
             return;
         var styleSheetHeader = this._cssModel.styleSheetHeaderForId(this.id.styleSheetId);
         this.frameId = styleSheetHeader.frameId;
         var url = styleSheetHeader.resourceURL();
         if (!url)
             return;
         this.rawLocation = new WebInspector.CSSLocation(this._cssModel.target(), url, this.lineNumberInSource(0), this.columnNumberInSource(0));
@@ skipping 75 matching lines @@
 {
     this.ownerStyle = ownerStyle;
     this.index = index;
     this.name = name;
     this.value = value;
     this.important = important;
     this.disabled = disabled;
     this.parsedOk = parsedOk;
     this.implicit = implicit;
     this.text = text;
-    this.range = range;
+    this.range = range ? WebInspector.TextRange.fromObject(range) : null;
 }
 
 /**
  * @param {?WebInspector.CSSStyleDeclaration} ownerStyle
  * @param {number} index
  * @param {!CSSAgent.CSSProperty} payload
  * @return {!WebInspector.CSSProperty}
  */
 WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload)
 {
     // The following default field values are used in the payload:
     // important: false
     // parsedOk: true
     // implicit: false
     // disabled: false
     var result = new WebInspector.CSSProperty(
         ownerStyle, index, payload.name, payload.value, payload.important || false, payload.disabled || false, ("parsedOk" in payload) ? !!payload.parsedOk : true, !!payload.implicit, payload.text, payload.range);
     return result;
 }
 
 WebInspector.CSSProperty.prototype = {
     /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
+    {
+        if (!this.ownerStyle.id || this.ownerStyle.id.styleSheetId !== styleSheetId)
+            return;
+        if (this.range)
+            this.range = this.range.rebaseAfterTextEdit(oldRange, newRange);
+    },
+
+    /**
      * @param {boolean} active
      */
     _setActive: function(active)
     {
         this._active = active;
     },
 
     get propertyText()
     {
         if (this.text !== undefined)
@@ skipping 172 matching lines @@
 WebInspector.CSSMedia.parseMediaArrayPayload = function(cssModel, payload)
 {
     var result = [];
     for (var i = 0; i < payload.length; ++i)
         result.push(WebInspector.CSSMedia.parsePayload(cssModel, payload[i]));
     return result;
 }
 
 WebInspector.CSSMedia.prototype = {
     /**
+     * @param {string} styleSheetId
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleSheetEdited: function(styleSheetId, oldRange, newRange)
+    {
+        if (this.parentStyleSheetId !== styleSheetId)
+            return;
+        if (this.range)
+            this.range = this.range.rebaseAfterTextEdit(oldRange, newRange);
+    },
+
+    /**
      * @return {number|undefined}
      */
     lineNumberInSource: function()
     {
         if (!this.range)
             return undefined;
         var header = this.header();
         if (!header)
             return undefined;
         return header.lineNumberInSource(this.range.startLine);
@@ skipping 311 matching lines @@
             for (var i = 0; i < callbacks.length; ++i)
                 callbacks[i](computedStyle);
         }
     }
 }
 
 /**
  * @type {!WebInspector.CSSStyleModel}
  */
 WebInspector.cssModel;