diff --git a/src/extensions/default/QuickView/main.js b/src/extensions/default/QuickView/main.js index fafe3c484cc..62f959fdc07 100644 --- a/src/extensions/default/QuickView/main.js +++ b/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; diff --git a/src/extensions/default/QuickView/unittest-files/test.js b/src/extensions/default/QuickView/unittest-files/test.js new file mode 100644 index 00000000000..2edb77ff7e2 --- /dev/null +++ b/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) diff --git a/src/extensions/default/QuickView/unittests.js b/src/extensions/default/QuickView/unittests.js index 8ee493cee13..6f40cab2261 100644 --- a/src/extensions/default/QuickView/unittests.js +++ b/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%)",