Merge pull request #8156 from MarcelGerber/quick-view-literal

Limit QuickView to literal color names in some languages

Author: redmunds

src/extensions/default/QuickView/main.js

@@ -37,7 +37,8 @@ define(function (require, exports, module) {
         Menus               = brackets.getModule("command/Menus"),
         PreferencesManager  = brackets.getModule("preferences/PreferencesManager"),
         Strings             = brackets.getModule("strings"),
-        ViewUtils           = brackets.getModule("utils/ViewUtils");
+        ViewUtils           = brackets.getModule("utils/ViewUtils"),
+        TokenUtils          = brackets.getModule("utils/TokenUtils");
 
     var previewContainerHTML       = require("text!QuickViewTemplate.html");
 
@@ -54,6 +55,8 @@ define(function (require, exports, module) {
         POINTER_HEIGHT              = 15,   // Pointer height, used to shift popover above pointer (plus a little bit of space)
         POPOVER_HORZ_MARGIN         =  5;   // Horizontal margin
 
+    var styleLanguages = ["css", "text/x-less", "sass", "text/x-scss"];
+
     prefs = PreferencesManager.getExtensionPrefs("quickview");
     prefs.definePreference("enabled", "boolean", true);
 
@@ -233,8 +236,9 @@ define(function (require, exports, module) {
             };
         }
 
-        function execColorMatch(line) {
-            var colorMatch;
+        function execColorMatch(editor, line, pos) {
+            var colorMatch,
+                ignoreNamedColors;
 
             function hyphenOnMatchBoundary(match, line) {
                 var beforeIndex, afterIndex;
@@ -252,11 +256,24 @@ define(function (require, exports, module) {
 
                 return false;
             }
+            function isNamedColor(match) {
+                if (match && match[0] && /^[a-z]+$/i.test(match[0])) { // only for color names, not for hex-/rgb-values
+                    return true;
+                }
+            }
 
             // Hyphens do not count as a regex word boundary (\b), so check for those here
             do {
                 colorMatch = colorRegEx.exec(line);
-            } while (colorMatch && hyphenOnMatchBoundary(colorMatch, line));
+                if (!colorMatch) {
+                    break;
+                }
+                if (ignoreNamedColors === undefined) {
+                    var mode = TokenUtils.getModeAt(editor._codeMirror, pos).name;
+                    ignoreNamedColors = styleLanguages.indexOf(mode) === -1;
+                }
+            } while (hyphenOnMatchBoundary(colorMatch, line) ||
+                    (ignoreNamedColors && isNamedColor(colorMatch)));
 
             return colorMatch;
         }
@@ -351,7 +368,7 @@ define(function (require, exports, module) {
         }
 
         var gradientMatch = execGradientMatch(line),
-            match = gradientMatch.match || execColorMatch(line),
+            match = gradientMatch.match || execColorMatch(editor, line, pos),
             cm = editor._codeMirror;
 
         while (match) {
@@ -397,7 +414,7 @@ define(function (require, exports, module) {
             if (gradientMatch.match) {
                 gradientMatch = execGradientMatch(line);
             }
-            match = gradientMatch.match || execColorMatch(line);
+            match = gradientMatch.match || execColorMatch(editor, line, pos);
         }
 
         return null;

src/extensions/default/QuickView/unittest-files/test.js

@@ -0,0 +1,10 @@
+/* Sample JS for testing the QuickView extension. */
+
+function green() { // generate green colors
+    var color = "green",
+        tan = Math.tan;
+    return tan(array["red"], array[red]);
+}
+darkgray
+// #123456
+// :rgb(65, 43, 21)

src/extensions/default/QuickView/unittests.js

@@ -41,7 +41,9 @@ define(function (require, exports, module) {
             Commands,
             EditorManager,
             QuickView,
-            editor;
+            editor,
+            testFile = "test.css",
+            oldFile;
 
         beforeEach(function () {
             // Create a new window that will be shared by ALL tests in this spec.
@@ -62,13 +64,16 @@ define(function (require, exports, module) {
                 runs(function () {
                     SpecRunnerUtils.loadProjectInTestWindow(testFolder);
                 });
+            }
 
+            if (testFile !== oldFile) {
                 runs(function () {
-                    waitsForDone(SpecRunnerUtils.openProjectFiles(["test.css"]), "open test file");
+                    waitsForDone(SpecRunnerUtils.openProjectFiles([testFile]), "open test file: " + testFile);
                 });
 
                 runs(function () {
-                    editor = EditorManager.getCurrentFullEditor();
+                    editor  = EditorManager.getCurrentFullEditor();
+                    oldFile = testFile;
                 });
             }
         });
@@ -191,9 +196,43 @@ define(function (require, exports, module) {
                     expectNoPreviewAtPos(75, 18);    // cursor on white in hyphenated word @bc-bg-highlight
                 });
             });
+
+            describe("JavaScript file", function () {
+                runs(function () {
+                    testFile = "test.js";
+                });
+
+                it("should NOT show preview of color-named functions and object/array keys", function () {
+                    runs(function () {
+                        expectNoPreviewAtPos(2, 12);    // cursor on green()
+                        expectNoPreviewAtPos(4, 22);    // cursor on Math.tan
+                        expectNoPreviewAtPos(5, 14);    // cursor on tan()
+                        expectNoPreviewAtPos(5, 38);    // cursor on array[red]
+                    });
+                });
+                it("should not show preview of literal color names", function () {
+                    runs(function () {
+                        expectNoPreviewAtPos(2, 36);  // green
+                        expectNoPreviewAtPos(3, 21);  // green
+                        expectNoPreviewAtPos(4, 11);  // tan
+                        expectNoPreviewAtPos(5, 25);  // red
+                        expectNoPreviewAtPos(7,  1);  // darkgray
+                    });
+                });
+                it("should show preview of non-literal color codes", function () {
+                    runs(function () {
+                        checkColorAtPos("#123456",          8, 7);
+                        checkColorAtPos("rgb(65, 43, 21)",  9, 8);
+                    });
+                });
+            });
         });
 
         describe("Quick view gradients", function () {
+            runs(function () {
+                testFile = "test.css";
+            });
+
             it("Should show linear gradient preview for those with vendor prefix", function () {
                 runs(function () {
                     var expectedGradient1 = "-webkit-linear-gradient(top,  #d2dfed 0%, #c8d7eb 26%, #bed0ea 51%, #a6c0e3 51%, #afc7e8 62%, #bad0ef 75%, #99b5db 88%, #799bc8 100%)",