Update label in rule list when a selector is edited

Author: Narciso Jaramillo

src/editor/CSSInlineEditor.js

@@ -246,7 +246,7 @@ define(function (require, exports, module) {
 
         CSSUtils.findMatchingRules(selectorName, hostEditor.document)
             .done(function (rules) {
-                cssInlineEditor = new MultiRangeInlineEditor(CSSUtils.consolidateRules(rules) || [], _getNoRulesMsg);
+                cssInlineEditor = new MultiRangeInlineEditor(CSSUtils.consolidateRules(rules) || [], _getNoRulesMsg, CSSUtils.getRangeSelectors);
                 cssInlineEditor.load(hostEditor);
 
                 var $header = $(".inline-editor-header", cssInlineEditor.$htmlContent);

src/editor/MultiRangeInlineEditor.js

@@ -74,7 +74,10 @@ define(function (require, exports, module) {
     SearchResultItem.prototype.textRange = null;
     SearchResultItem.prototype.$listItem = null;
 
-    function _updateRangeLabel(listItem, range) {
+    function _updateRangeLabel(listItem, range, labelCB) {
+        if (labelCB) {
+            range.name = labelCB(range.textRange);
+        }
         var text = StringUtils.htmlEscape(range.name) + " <span class='related-file'>— " + StringUtils.htmlEscape(range.textRange.document.file.name) + " : " + (range.textRange.startLine + 1) + "</span>";
         listItem.html(text);
         listItem.attr("title", listItem.text());
@@ -85,9 +88,11 @@ define(function (require, exports, module) {
      * @param {Array.<{name:String,document:Document,lineStart:number,lineEnd:number}>} ranges The text ranges to display.
      * @param {function(): $.Promise} messageCB An optional callback that returns a promise that will be resolved with a message to show
      *      when no matches are available.
+     * @param {function(range): string} labelCB An optional callback that returns an updated label string for the given range. Called
+     *      when we detect that the content of one of the ranges has changed.
      * @extends {InlineTextEditor}
      */
-    function MultiRangeInlineEditor(ranges, messageCB) {
+    function MultiRangeInlineEditor(ranges, messageCB, labelCB) {
         InlineTextEditor.call(this);
 
         // Store the results to show in the range list. This creates TextRanges bound to the Document,
@@ -96,6 +101,7 @@ define(function (require, exports, module) {
             return new SearchResultItem(rangeResult);
         });
         this._messageCB = messageCB;
+        this._labelCB = labelCB;
 
         this._selectedRangeIndex = -1;
     }
@@ -113,6 +119,7 @@ define(function (require, exports, module) {
     MultiRangeInlineEditor.prototype._ranges = null;
     MultiRangeInlineEditor.prototype._selectedRangeIndex = null;
     MultiRangeInlineEditor.prototype._messageCB = null;
+    MultiRangeInlineEditor.prototype._labelCB = null;
 
     /**
      * @private
@@ -133,6 +140,8 @@ define(function (require, exports, module) {
         // Update list item as TextRange changes
         $(range.textRange).on("change", function () {
             _updateRangeLabel($rangeItem, range);
+        }).on("contentChange", function () {
+            _updateRangeLabel($rangeItem, range, self._labelCB);
         });
 
         // If TextRange lost sync, remove it from the list (and close the widget if no other ranges are left)

src/language/CSSUtils.js

@@ -1268,6 +1268,23 @@ define(function (require, exports, module) {
         return newRules;
     }
 
+    /**
+     * Given a TextRange, extracts the selector(s) at the beginning of the range and returns it.
+     * @param {TextRange} range The range to extract the selector(s) from.
+     * @return {string} The selector(s) at the beginning of the range.
+     */
+    function getRangeSelectors(range) {
+        // There's currently no immediate way to access a given line in a Document, because it's just
+        // stored as a string. Eventually, we should have Documents cache the lines in the document
+        // as well, or make them use CodeMirror documents which do the same thing.
+        var i, startIndex = 0, text = range.document.getText();
+        for (i = 0; i < range.startLine; i++) {
+            startIndex = text.indexOf("\n", startIndex) + 1;
+        }
+        var nextBrace = text.indexOf("{", startIndex);
+        return text.substring(startIndex, nextBrace).trim().replace("\n", " ");
+    }
+        
     exports._findAllMatchingSelectorsInText = _findAllMatchingSelectorsInText; // For testing only
     exports.findMatchingRules = findMatchingRules;
     exports.extractAllSelectors = extractAllSelectors;
@@ -1276,6 +1293,7 @@ define(function (require, exports, module) {
     exports.reduceStyleSheetForRegExParsing = reduceStyleSheetForRegExParsing;
     exports.addRuleToDocument = addRuleToDocument;
     exports.consolidateRules = consolidateRules;
+    exports.getRangeSelectors = getRangeSelectors;
 
     exports.SELECTOR = SELECTOR;
     exports.PROP_NAME = PROP_NAME;

test/spec/CSSUtils-test.js

@@ -32,7 +32,8 @@ define(function (require, exports, module) {
         FileUtils                  = require("file/FileUtils"),
         CSSUtils                   = require("language/CSSUtils"),
         HTMLUtils                  = require("language/HTMLUtils"),
-        SpecRunnerUtils            = require("spec/SpecRunnerUtils");
+        SpecRunnerUtils            = require("spec/SpecRunnerUtils"),
+        TextRange                  = require("document/TextRange").TextRange;
 
     var testPath                   = SpecRunnerUtils.getTestPath("/spec/CSSUtils-test-files"),
         simpleCssFileEntry         = new NativeFileSystem.FileEntry(testPath + "/simple.css"),
@@ -1653,6 +1654,20 @@ define(function (require, exports, module) {
                 rules[5]
             ]);
         });
+        
+        it("should extract selectors at the beginning of a text range", function () {
+            var doc = SpecRunnerUtils.createMockDocument(".foo {}\n.bar, #baz {}\nh2 {}\n"),
+                range = new TextRange(doc, 1, 1);
+            expect(CSSUtils.getRangeSelectors(range)).toBe(".bar, #baz");
+            range.dispose();
+        });
+        
+        it("should extract selectors spanning multiple lines at the beginning of a text range, with newlines replaced", function () {
+            var doc = SpecRunnerUtils.createMockDocument(".foo {}\n.bar,\n#baz {}\nh2 {}\n"),
+                range = new TextRange(doc, 1, 2);
+            expect(CSSUtils.getRangeSelectors(range)).toBe(".bar, #baz");
+            range.dispose();
+        });
     });
 
     // Unit Tests: "HTMLUtils (css)"