fix: clicking on color gutter opens color editor on wrong line after some line deletions

Author: abose

src/editor/Editor.js

@@ -2592,14 +2592,16 @@ define(function (require, exports, module) {
      * @param   {number}   lineNumber The line number for the inserted gutter marker
      * @param   {string}   gutterName The name of the gutter
      * @param   {object}   marker     The dom element representing the marker to the inserted in the gutter
+     * @returns {{lineNo : function}}   lineHandle   this can be used to track the gutter line as the line number
+     *                                  changes as the user edits code.
      */
     Editor.prototype.setGutterMarker = function (lineNumber, gutterName, marker) {
         if (!Editor.isGutterRegistered(gutterName)) {
             console.warn("Gutter name must be registered before calling editor.setGutterMarker");
             return;
         }
 
-        this._codeMirror.setGutterMarker(lineNumber, gutterName, marker);
+        return this._codeMirror.setGutterMarker(lineNumber, gutterName, marker);
     };
 
     /**

src/extensionsIntegrated/CSSColorPreview/main.js

@@ -142,22 +142,24 @@ define(function (require, exports, module) {
                     const colorGutters = _.sortBy(_results, "lineNumber");
 
                     colorGutters.forEach(function (obj) {
+                        let lineHandle;
                         let $marker;
                         if (obj.colorValues.length === 1) {
                             // Single color preview
                             $marker = $("<i>")
                                 .addClass(SINGLE_COLOR_PREVIEW_CLASS)
                                 .css('background-color', obj.colorValues[0].color);
+                            lineHandle = editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
 
-                            editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
                             $marker.click((event)=>{
                                 event.preventDefault();
                                 event.stopPropagation();
-                                _colorIconClicked(editor, obj.lineNumber, obj.colorValues[0].color);
+                                _colorIconClicked(editor, lineHandle.lineNo(), obj.colorValues[0].color);
                             });
                         } else {
                             // Multiple colors preview
                             $marker = $("<div>").addClass(MULTI_COLOR_PREVIEW_CLASS);
+                            lineHandle = editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
 
                             // Positions for up to 4 colors in grid
                             const positions = [
@@ -178,18 +180,16 @@ define(function (require, exports, module) {
                                     $colorBox.click((event)=>{
                                         event.preventDefault();
                                         event.stopPropagation();
-                                        _colorIconClicked(editor, obj.lineNumber, color.color);
+                                        _colorIconClicked(editor, lineHandle.lineNo(), color.color);
                                     });
                                     $marker.append($colorBox);
                                 }
                             });
-
-                            editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
                         }
                         $marker.mouseenter(event=>{
                             event.preventDefault();
                             event.stopPropagation();
-                            _applyInlineColor(editor, obj.lineNumber);
+                            _applyInlineColor(editor, lineHandle.lineNo());
                         });
                         $marker.mouseleave(event=>{
                             event.preventDefault();

test/spec/Extn-CSSColorPreview-integ-test.js

@@ -19,14 +19,14 @@
  *
  */
 
-/*global describe, it, beforeAll, afterAll*/
+/*global describe, it, beforeAll, afterAll, beforeEach*/
 
 define(function (require, exports, module) {
 
 
     var SpecRunnerUtils = require("spec/SpecRunnerUtils");
 
-    describe("integration:ColorPreview in gutter", function () {
+    describe("integration:ColorPreview in gutter - needs focus", function () {
         const testRootSpec = "/spec/CSSColorPreview-test-files/";
         const GUTTER_NAME = "CodeMirror-colorGutter",
             SINGLE_COLOR_PREVIEW_CLASS   = "ico-cssColorPreview",
@@ -55,6 +55,10 @@ define(function (require, exports, module) {
             await SpecRunnerUtils.closeTestWindow();
         }, 30000);
 
+        beforeEach(async function () {
+            await __PR.closeAll();
+        });
+
         it("should color gutter not appear in cpp files", async function () {
             const fileName = "a.cpp";
             await __PR.writeTextFile(fileName, "#include <iostream>", true);
@@ -204,16 +208,24 @@ define(function (require, exports, module) {
                 const editor = await init();
                 await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
                 if(baseFileName === "base.css"){
-                    await __PR.awaitsFor(()=>{
-                        return editor.getLine(0) === ".class-one {";
-                    }, "for beautify complete");
+                    await __PR.awaitsFor(async ()=>{
+                        if(editor.getLine(0) !== ".class-one {"){
+                            await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
+                            return false;
+                        }
+                        return true;
+                    }, "for beautify complete", 2000, 50);
                     _verifyExpectedColors(editor, [8, 12, 15, 18, 21, 24]);
                     await __PR.closeFile();
                     return;
                 }
-                await __PR.awaitsFor(()=>{
-                    return editor.getLine(2) === "    <head>";
-                }, "for beautify complete");
+                await __PR.awaitsFor(async ()=>{
+                    if(editor.getLine(2) !== "    <head>"){
+                        await __PR.execCommand(__PR.Commands.EDIT_BEAUTIFY_CODE);
+                        return false;
+                    }
+                    return true;
+                }, "for beautify complete", 2000, 50);
                 _verifyExpectedColors(editor, [8, 12, 13, 14, 15, 16]);
                 await __PR.closeFile();
             });
@@ -250,6 +262,29 @@ define(function (require, exports, module) {
                 await __PR.closeFile();
             });
 
+            it(`should color gutter track correct line numbers after deleting lines in ${fileName}`, async function () {
+                const editor = await init();
+                validateMultipleColors(editor, 12, ["#00ff8c", "red"]);
+
+                __PR.setCursors(["6:1-10:2"]);
+                __PR.keydown(["BACK_SPACE"]); // this will delete the selected lines
+
+                // now the color gutter should account for the missing lines
+                let gutterMarker = editor.getGutterMarker(11, GUTTER_NAME);
+                const individualColors = $(gutterMarker).find(".color-box");
+                individualColors[0].click();
+                await __PR.awaitsFor(()=>{
+                    return __PR.$(".CodeMirror-linewidget").length === 1 &&
+                        areColorsEqual(__PR.$(".CodeMirror-linewidget").find(".original-color")[0], "#ff0090");
+                }, "quick edit to color #ff0090 appear");
+                individualColors[2].click();
+                await __PR.awaitsFor(()=>{
+                    return __PR.$(".CodeMirror-linewidget").length === 1 &&
+                        areColorsEqual(__PR.$(".CodeMirror-linewidget").find(".original-color")[0], "#954e3e");
+                }, "quick edit to color #954e3e appear");
+                await __PR.closeFile();
+            });
+
             it(`should update colors on typing ${fileName}`, async function () {
                 const editor = await init();
                 validateSingleColor(editor, 8, "blue");