DevTools: [SSP] show source location for the newly inserted style rules.

To achieve the specified goal, the patch does the following:
- StylePropertiesSection.styleRule no longer has sourceURL as it could
be always fetched from styleRule.rule
- StylePropertiesSection._createRuleOrigin is receiving CSSRule and
ruleLocation as arguments
- BlankStylePropertiesSection is taught to infer the actual rule
location of the rule that will be inserted

Layout Test change: the CSSOM rule now don't show source location (used to be "located" on first line)

R=pfeldman, vsevik, apavlov

Review URL: https://codereview.chromium.org/474433004

git-svn-id: svn://svn.chromium.org/blink/trunk@180348 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/elements/styles/cssom-media-insert-crash-expected.txt

@@ -5,7 +5,7 @@ element.style  { ()
 
 [expanded] 
 @media all (cssom-media-insert-crash.html)
-#box  { (cssom-media-ins…t-crash.html:1 -> cssom-media-insert-crash.html:1:1)
+#box  { ()
 background: red;
 color: white;
 

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

@@ -517,7 +517,7 @@ WebInspector.StylesSidebarPane.prototype = {
             // Add rules in reverse order to match the cascade order.
             for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) {
                 var rule = pseudoElementCSSRules.rules[j];
-                styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rule.style && rule.style.styleSheetId) });
+                styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, rule: rule, editable: !!(rule.style && rule.style.styleSheetId) });
             }
             usedProperties = {};
             this._markUsedProperties(styleRules, usedProperties);
@@ -587,7 +587,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 addedAttributesStyle = true;
                 addAttributesStyle();
             }
-            styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rule.style && rule.style.styleSheetId) });
+            styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, rule: rule, editable: !!(rule.style && rule.style.styleSheetId) });
         }
 
         if (!addedAttributesStyle)
@@ -627,7 +627,7 @@ WebInspector.StylesSidebarPane.prototype = {
                     insertInheritedNodeSeparator(parentNode);
                     separatorInserted = true;
                 }
-                styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, isInherited: true, parentNode: parentNode, editable: !!(rule.style && rule.style.styleSheetId) });
+                styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, rule: rule, isInherited: true, parentNode: parentNode, editable: !!(rule.style && rule.style.styleSheetId) });
             }
             parentNode = parentNode.parentNode;
         }
@@ -1524,7 +1524,12 @@ WebInspector.StylePropertiesSection.prototype = {
         return item;
     },
 
-    _createRuleOriginNode: function()
+    /**
+     * @param {?WebInspector.CSSRule} rule
+     * @param {!WebInspector.TextRange=} ruleLocation
+     * @return {!Node}
+     */
+    _createRuleOriginNode: function(rule, ruleLocation)
     {
         /**
          * @param {string} url
@@ -1539,24 +1544,40 @@ WebInspector.StylePropertiesSection.prototype = {
             return link;
         }
 
-        if (this.styleRule.sourceURL) {
-            var firstMatchingIndex = this.styleRule.rule.matchingSelectors && this.rule.matchingSelectors.length ? this.rule.matchingSelectors[0] : 0;
-            var matchingSelectorLocation = new WebInspector.CSSLocation(this._parentPane._target, this.rule.styleSheetId, this.styleRule.sourceURL, this.rule.lineNumberInSource(firstMatchingIndex), this.rule.columnNumberInSource(firstMatchingIndex));
-            return this._parentPane._linkifier.linkifyCSSLocation(matchingSelectorLocation) || linkifyUncopyable(this.styleRule.sourceURL, this.rule.lineNumberInSource());
+        if (!rule)
+            return document.createTextNode("");
+
+        if (!ruleLocation) {
+            var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
+            ruleLocation = rule.selectors[firstMatchingIndex].range;
         }
 
-        if (!this.rule)
-            return document.createTextNode("");
+        var sourceURL = rule.resourceURL();
+        if (sourceURL && ruleLocation && rule.styleSheetId) {
+            var styleSheetHeader = this._parentPane._target.cssModel.styleSheetHeaderForId(rule.styleSheetId);
+            var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
+            var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
+            var matchingSelectorLocation = new WebInspector.CSSLocation(this._parentPane._target, rule.styleSheetId, sourceURL, lineNumber, columnNumber);
+            return this._parentPane._linkifier.linkifyCSSLocation(matchingSelectorLocation) || linkifyUncopyable(sourceURL, 0);
+        }
 
-        if (this.rule.isUserAgent)
+        if (rule.isUserAgent)
             return document.createTextNode(WebInspector.UIString("user agent stylesheet"));
-        if (this.rule.isUser)
+        if (rule.isUser)
             return document.createTextNode(WebInspector.UIString("user stylesheet"));
-        if (this.rule.isViaInspector)
-            return document.createTextNode(WebInspector.UIString("via inspector"));
+        if (rule.isViaInspector)
+            return this._createRuleViaInspectorOriginNode();
         return document.createTextNode("");
     },
 
+    /**
+     * @return {!Node}
+     */
+    _createRuleViaInspectorOriginNode: function()
+    {
+        return document.createTextNode(WebInspector.UIString("via inspector"));
+    },
+
     _handleEmptySpaceMouseDown: function()
     {
         this._willCauseCancelEditing = this._parentPane._isEditingStyle;
@@ -1686,7 +1707,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
             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.styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, rule: newRule };
 
             this._parentPane.update(selectedNode);
             this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
@@ -1711,7 +1732,7 @@ WebInspector.StylePropertiesSection.prototype = {
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
-        this._selectorRefElement.appendChild(this._createRuleOriginNode());
+        this._selectorRefElement.appendChild(this._createRuleOriginNode(this.rule));
     },
 
     _editingSelectorEnded: function()
@@ -1848,7 +1869,7 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
                     fragment.appendChild(document.createTextNode(" - " + property.value + " "));
                     var subtitle = fragment.createChild("span");
                     subtitle.style.float = "right";
-                    subtitle.appendChild(section._createRuleOriginNode());
+                    subtitle.appendChild(section._createRuleOriginNode(section.rule));
                     var childElement = new TreeElement(fragment, null, false);
                     treeElement.appendChild(childElement);
                     if (property.inactive || section.isPropertyOverloaded(property.name))
@@ -1885,15 +1906,39 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
 WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText, styleSheetId, ruleLocation, insertAfterRule)
 {
     var styleSheetHeader = WebInspector.cssModel.styleSheetHeaderForId(styleSheetId);
-    WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: styleSheetHeader.isViaInspector()}}, true, false);
+    WebInspector.StylePropertiesSection.call(this, stylesPane, { selectorText: defaultSelectorText }, true, false);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
-    if (insertAfterRule)
+    this._selectorRefElement.removeChildren();
+    if (insertAfterRule) {
+        this._selectorRefElement.appendChild(this._createRuleOriginNode(insertAfterRule, this._actualRuleLocation()));
         this._createMediaList(insertAfterRule);
+    } else {
+        this._selectorRefElement.appendChild(this._createRuleViaInspectorOriginNode());
+    }
     this.element.classList.add("blank-section");
 }
 
 WebInspector.BlankStylePropertiesSection.prototype = {
+    /**
+     * @return {!WebInspector.TextRange}
+     */
+    _actualRuleLocation: function()
+    {
+        var prefix = this._rulePrefix();
+        var lines = prefix.split("\n");
+        var editRange = new WebInspector.TextRange(0, 0, lines.length - 1, lines.peekLast().length);
+        return this._ruleLocation.rebaseAfterTextEdit(WebInspector.TextRange.createFromLocation(0, 0), editRange);
+    },
+
+    /**
+     * @return {string}
+     */
+    _rulePrefix: function()
+    {
+        return this._ruleLocation.startLine === 0 && this._ruleLocation.startColumn === 0 ? "" : "\n\n";
+    },
+
     get isBlank()
     {
         return !this._normal;
@@ -1919,7 +1964,7 @@ WebInspector.BlankStylePropertiesSection.prototype = {
         function successCallback(newRule)
         {
             var doesSelectorAffectSelectedNode = newRule.matchingSelectors.length > 0;
-            var styleRule = { media: newRule.media, section: this, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.resourceURL(), rule: newRule };
+            var styleRule = { media: newRule.media, section: this, style: newRule.style, selectorText: newRule.selectorText, rule: newRule };
             this._makeNormal(styleRule);
 
             if (!doesSelectorAffectSelectedNode) {
@@ -1948,8 +1993,7 @@ WebInspector.BlankStylePropertiesSection.prototype = {
         this._parentPane._userOperation = true;
 
         var cssModel = this._parentPane._target.cssModel;
-        var rulePrefix = this._ruleLocation.startLine === 0 && this._ruleLocation.startColumn === 0 ? "" : "\n\n";
-        var ruleText = rulePrefix + newContent + " {}";
+        var ruleText = this._rulePrefix() + newContent + " {}";
         cssModel.addRule(this._styleSheetId, this._parentPane._node, ruleText, this._ruleLocation, successCallback.bind(this), this.editingSelectorCancelled.bind(this));
     },
 
@@ -2169,8 +2213,8 @@ WebInspector.StylePropertyTreeElementBase.prototype = {
                 hrefUrl = match[1];
             var container = document.createDocumentFragment();
             container.appendChild(document.createTextNode("url("));
-            if (this._styleRule.sourceURL)
-                hrefUrl = WebInspector.ParsedURL.completeURL(this._styleRule.sourceURL, hrefUrl);
+            if (this._styleRule.rule && this._styleRule.rule.resourceURL())
+                hrefUrl = WebInspector.ParsedURL.completeURL(this._styleRule.rule.resourceURL(), hrefUrl);
             else if (this.node())
                 hrefUrl = this.node().resolveURL(hrefUrl);
             var hasResource = hrefUrl && !!WebInspector.resourceForURL(hrefUrl);

third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleModel.js

@@ -889,6 +889,39 @@ WebInspector.CSSStyleDeclaration.prototype = {
     }
 }
 
+/**
+ * @constructor
+ * @param {!CSSAgent.Selector} payload
+ */
+WebInspector.CSSRuleSelector = function(payload)
+{
+    this.value = payload.value;
+    if (payload.range)
+        this.range = WebInspector.TextRange.fromObject(payload.range);
+}
+
+/**
+ * @param {!CSSAgent.Selector} payload
+ * @return {!WebInspector.CSSRuleSelector}
+ */
+WebInspector.CSSRuleSelector.parsePayload = function(payload)
+{
+    return new WebInspector.CSSRuleSelector(payload)
+}
+
+WebInspector.CSSRuleSelector.prototype = {
+    /**
+     * @param {!WebInspector.TextRange} oldRange
+     * @param {!WebInspector.TextRange} newRange
+     */
+    sourceStyleRuleEdited: function(oldRange, newRange)
+    {
+        if (!this.range)
+            return;
+        this.range = this.range.rebaseAfterTextEdit(oldRange, newRange);
+    }
+}
+
 /**
  * @constructor
  * @param {!WebInspector.CSSStyleModel} cssModel
@@ -901,11 +934,12 @@ WebInspector.CSSRule = function(cssModel, payload, matchingSelectors)
     this.styleSheetId = payload.styleSheetId;
     if (matchingSelectors)
         this.matchingSelectors = matchingSelectors;
-    this.selectors = payload.selectorList.selectors;
-    for (var i = 0; i < this.selectors.length; ++i) {
-        var selector = this.selectors[i];
-        if (selector.range)
-            selector.range = WebInspector.TextRange.fromObject(selector.range);
+
+    /** @type {!Array.<!WebInspector.CSSRuleSelector>} */
+    this.selectors = [];
+    for (var i = 0; i < payload.selectorList.selectors.length; ++i) {
+        var selectorPayload = payload.selectorList.selectors[i];
+        this.selectors.push(WebInspector.CSSRuleSelector.parsePayload(selectorPayload));
     }
     this.selectorText = this.selectors.select("value").join(", ");
 
@@ -948,11 +982,8 @@ WebInspector.CSSRule.prototype = {
         if (this.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);
-            }
+            for (var i = 0; i < this.selectors.length; ++i)
+                this.selectors[i].sourceStyleRuleEdited(oldRange, newRange);
         }
         if (this.media) {
             for (var i = 0; i < this.media.length; ++i)