feat: svg color gutter previews

Author: abose

docs/API-Reference/editor/Editor.md

@@ -59,7 +59,7 @@ const Editor = brackets.getModule("editor/Editor")
         * [.getMarksAfter(position, markType)](#Editor+getMarksAfter) ⇒ <code>Array.&lt;TextMarker&gt;</code>
         * [.getMarksBefore(position, markType)](#Editor+getMarksBefore) ⇒ <code>Array.&lt;TextMarker&gt;</code>
         * [.getAllMarks([markType])](#Editor+getAllMarks) ⇒ <code>Array.&lt;TextMarker&gt;</code>
-        * [.clearAllMarks([markType])](#Editor+clearAllMarks)
+        * [.clearAllMarks([markType], [lineNumbers])](#Editor+clearAllMarks)
         * [.isSamePosition(position1, position2)](#Editor+isSamePosition) ⇒ <code>boolean</code>
         * [.getHistory()](#Editor+getHistory) ⇒ <code>Array</code>
         * [.setHistory()](#Editor+setHistory)
@@ -729,14 +729,16 @@ Returns an array containing all marked ranges in the document.
 
 <a name="Editor+clearAllMarks"></a>
 
-### editor.clearAllMarks([markType])
-Clears all mark of the given type. If nothing is given, clears all marks(Don't use this API without types!).
+### editor.clearAllMarks([markType], [lineNumbers])
+Clears all marks of the given type. If a lineNumbers array is given, only clears marks on those lines.
+If no markType or lineNumbers are given, clears all marks (use cautiously).
 
 **Kind**: instance method of [<code>Editor</code>](#Editor)  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | [markType] | <code>string</code> | Optional, if given will only delete marks of that type. Else delete everything. |
+| [lineNumbers] | <code>Array.&lt;number&gt;</code> | Optional, array of line numbers where marks should be cleared. |
 
 <a name="Editor+isSamePosition"></a>
 

src/extensionsIntegrated/CSSColorPreview/main.js

@@ -48,6 +48,9 @@ define(function (require, exports, module) {
         COLOR_LANGUAGES= ["css", "scss", "less", "sass", "stylus", "html", "svg", "jsx", "tsx",
             "php", "ejs", "erb_html", "pug"];
 
+    const SVG_REGEX = /(:[^;]*;?|(?:fill|stroke|stop-color|flood-color|lighting-color|background-color|border-color|from|to)\s*=\s*(['"]?)[^'";]*\2)/g,
+        CSS_REGEX = /:[^;]*;?/g; // the last semi colon is optional.
+
 
     // For preferences settings, to toggle this feature on/off
     const PREFERENCES_CSS_COLOR_PREVIEW = "colorPreview";
@@ -323,13 +326,14 @@ define(function (require, exports, module) {
      */
     function detectValidColorsInLine(editor, lineNumber) {
         const lineText = editor.getLine(lineNumber);
+        const languageID = editor.document.getLanguage().getId();
 
         // to make sure that code doesn't break when lineText is null.
         if (!lineText) {
             return [];
         }
 
-        const valueRegex = /:[^;]*;?/g; // the last semi colon is optional.
+        const valueRegex = languageID === "svg" ? SVG_REGEX: CSS_REGEX;
         const validColors = [];
 
         // Find all property value sections in the line

test/spec/CSSColorPreview-test-files/base.svg

@@ -319,5 +319,27 @@ define(function (require, exports, module) {
 
             await __PR.closeFile();
         });
+
+        it(`should color gutter appear for SVG files`, async function () {
+            await __PR.openFile("base.svg");
+            const editor = EditorManager.getActiveEditor();
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), true);
+
+            // the line with cursor if there is no color should have a dummy color gutter
+            __PR.setCursors(["1:1"]);
+            for(let i in [0, 2, 4, 5, 7, 8, 9, 11, 12, 13, 14, 17, 18, 19, 20]){
+                validateNoColors(editor, i);
+            }
+            validateSingleColor(editor, 1, "#7f6ad3"); // fill attr
+            validateMultipleColors(editor, 3, ["red", "blue"]); // from, to attrs
+            validateMultipleColors(editor, 6, ["red", "#00ff00"]); // stroke attr
+            validateSingleColor(editor, 10, "yellow"); // flood-color attr
+            validateSingleColor(editor, 15, "coral"); // in css style tags
+            validateSingleColor(editor, 16, "navy"); // in css style tag
+            validateSingleColor(editor, 21, "red"); // stop-color attr
+            validateSingleColor(editor, 22, "blue"); // stop-color attr
+            await __PR.closeFile();
+
+        });
     });
 });