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

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 506 matching lines @@
 
             styleRules = [];
             var pseudoId = pseudoElementCSSRules.pseudoId;
 
             var entry = { isStyleSeparator: true, pseudoId: pseudoId };
             styleRules.push(entry);
 
             // 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);
             this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, anchorElement);
         }
 
         if (this._filterRegex)
             this._updateFilter(false);
         this._nodeStylesUpdatedForTest(node, true);
     },
@@ skipping 49 matching lines @@
 
         // Add rules in reverse order to match the cascade order.
         var addedAttributesStyle;
         for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
             var rule = styles.matchedCSSRules[i];
             if ((rule.isUser || rule.isUserAgent) && !addedAttributesStyle) {
                 // Show element's Style Attributes after all author rules.
                 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)
             addAttributesStyle();
 
         // Walk the node structure and identify styles with inherited properties.
         var parentNode = node.parentNode;
         function insertInheritedNodeSeparator(node)
         {
             var entry = {};
@@ skipping 19 matching lines @@
             for (var i = parentStyles.matchedCSSRules.length - 1; i >= 0; --i) {
                 var rulePayload = parentStyles.matchedCSSRules[i];
                 if (!this._containsInherited(rulePayload.style))
                     continue;
                 var rule = rulePayload;
 
                 if (!separatorInserted) {
                     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;
         }
         return styleRules;
     },
 
     _markUsedProperties: function(styleRules, usedProperties)
     {
         var foundImportantProperties = {};
         var propertyToEffectiveRule = {};
@@ skipping 876 matching lines @@
         var property = style.newBlankProperty(index);
         var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, false, false, false);
         index = property.index;
         this.propertiesTreeOutline.insertChild(item, index);
         item.listItemElement.textContent = "";
         item._newProperty = true;
         item.updateTitle();
         return item;
     },
 
-    _createRuleOriginNode: function()
+    /**
+     * @param {?WebInspector.CSSRule} rule
+     * @param {!WebInspector.TextRange=} ruleLocation
+     * @return {!Node}
+     */
+    _createRuleOriginNode: function(rule, ruleLocation)
     {
         /**
          * @param {string} url
          * @param {number} line
          */
         function linkifyUncopyable(url, line)
         {
             var link = WebInspector.linkifyResourceAsNode(url, line, "", url + ":" + (line + 1));
             link.classList.add("webkit-html-resource-link");
             link.setAttribute("data-uncopyable", link.textContent);
             link.textContent = "";
             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;
     },
 
     _handleEmptySpaceClick: function(event)
     {
         if (!this.editable)
             return;
 
@@ skipping 108 matching lines @@
             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.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);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
         }
 
         /**
          * @this {WebInspector.StylePropertiesSection}
          */
         function finishOperationAndMoveEditor(direction)
         {
             delete this._parentPane._userOperation;
             this._moveEditorFromSelector(direction);
         }
 
         // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
         this._parentPane._userOperation = true;
         this._parentPane._target.cssModel.setRuleSelector(this.rule, selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection));
     },
 
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
-        this._selectorRefElement.appendChild(this._createRuleOriginNode());
+        this._selectorRefElement.appendChild(this._createRuleOriginNode(this.rule));
     },
 
     _editingSelectorEnded: function()
     {
         delete this._parentPane._isEditingStyle;
     },
 
     editingSelectorCancelled: function()
     {
         this._editingSelectorEnded();
@@ skipping 116 matching lines @@
 
                 var treeElement = this._propertyTreeElements[property.name.toLowerCase()];
                 if (treeElement) {
                     var fragment = document.createDocumentFragment();
                     var selector = fragment.createChild("span");
                     selector.style.color = "gray";
                     selector.textContent = section.styleRule.selectorText;
                     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))
                         childElement.listItemElement.classList.add("overloaded");
                     if (!property.parsedOk) {
                         childElement.listItemElement.classList.add("not-parsed-ok");
                         childElement.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(property), childElement.listItemElement.firstChild);
                         if (WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property))
                             childElement.listItemElement.classList.add("has-ignorable-error");
                     }
@@ skipping 16 matching lines @@
  * @extends {WebInspector.StylePropertiesSection}
  * @param {!WebInspector.StylesSidebarPane} stylesPane
  * @param {string} defaultSelectorText
  * @param {string} styleSheetId
  * @param {!WebInspector.TextRange} ruleLocation
  * @param {!WebInspector.CSSRule=} insertAfterRule
  */
 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[lines.length - 1].length);

[apavlov, 2014/08/15 08:29:38]

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;
     },
 
     expand: function()
     {
         if (!this.isBlank)
             WebInspector.StylePropertiesSection.prototype.expand.call(this);
     },
 
     editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
     {
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection);
             return;
         }
 
         /**
          * @param {!WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
         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) {
                 this.noAffect = true;
                 this.element.classList.add("no-affect");
             }
 
             var ruleTextLines = ruleText.split("\n");
             var startLine = this._ruleLocation.startLine;
             var startColumn = this._ruleLocation.startColumn;
             var newRange = new WebInspector.TextRange(startLine, startColumn, startLine + ruleTextLines.length - 1, startColumn + ruleTextLines[ruleTextLines.length - 1].length);
             this._parentPane._styleSheetRuleEdited(newRule, this._ruleLocation, newRange);
 
             this._updateRuleOrigin();
             this.expand();
             if (this.element.parentElement) // Might have been detached already.
                 this._moveEditorFromSelector(moveDirection);
 
             delete this._parentPane._userOperation;
             this._editingSelectorEnded();
             this._markSelectorMatches();
         }
 
         if (newContent)
             newContent = newContent.trim();
         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));
     },
 
     editingSelectorCancelled: function()
     {
         delete this._parentPane._userOperation;
         if (!this.isBlank) {
             WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
             return;
         }
@@ skipping 199 matching lines @@
          * @this {WebInspector.StylePropertyTreeElementBase}
          */
         function linkifyURL(url)
         {
             var hrefUrl = url;
             var match = hrefUrl.match(/['"]?([^'"]+)/);
             if (match)
                 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);
             // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
             container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl || url, url, undefined, !hasResource));
             container.appendChild(document.createTextNode(")"));
             return container;
         }
 
         if (value) {
@@ skipping 1168 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
 }