Merge pull request #3593 from adobe/randy/match-gradient-in-list

Quick View: match gradient in list

Author: gruehle

src/extensions/default/QuickView/main.js

@@ -169,52 +169,61 @@ define(function (require, exports, module) {
 
 
     // Color & gradient preview provider --------------------------------------
-    
+
     function colorAndGradientPreviewProvider(editor, pos, token, line) {
-        var cm = editor._codeMirror;
-        
-        // Check for gradient
-        var gradientRegEx = /-webkit-gradient\([^;]*;?|(-moz-|-ms-|-o-|-webkit-|\s)(linear-gradient\([^;]*);?|(-moz-|-ms-|-o-|-webkit-)(radial-gradient\([^;]*);?/,
-            gradientMatch = line.match(gradientRegEx),
-            prefix = "",
-            colorValue;
-        
-        if (gradientMatch) {
-            if (gradientMatch[0].indexOf("@") !== -1) {
-                // If the gradient match has "@" in it, it is most likely a less or
-                // sass variable. Ignore it since it won't be displayed correctly.
-                gradientMatch = null;
 
-            } else if (gradientMatch[0].indexOf("to ") !== -1) {
-                // If the gradient match has "to " in it, it's most likely the new gradient
-                // syntax which is not supported until Chrome 26, so we can't yet preview it
-                gradientMatch = null;
-            }
-        }
-        
-        // If it was a linear-gradient or radial-gradient variant, prefix with
-        // "-webkit-" so it shows up correctly in Brackets.
-        if (gradientMatch && gradientMatch[0].indexOf("-webkit-gradient") !== 0) {
-            prefix = "-webkit-";
-        }
-        
-        // For prefixed gradients, use the non-prefixed value as the color value.
-        // "-webkit-" will be added before this value
-        if (gradientMatch) {
-            if (gradientMatch[2]) {
-                colorValue = gradientMatch[2];    // linear gradiant
-            } else if (gradientMatch[4]) {
-                colorValue = gradientMatch[4];    // radial gradiant
+        // Check for gradient. -webkit-gradient() can have parens in parameters
+        // nested 2 levels. Other gradients can only nest 1 level.
+        var gradientRegEx = /-webkit-gradient\((?:[^\(]*?(?:\((?:[^\(]*?(?:\([^\)]*?\))*?)*?\))*?)*?\)|(?:(?:-moz-|-ms-|-o-|-webkit-|\s)(linear-gradient)|(?:-moz-|-ms-|-o-|-webkit-)(radial-gradient))(\((?:[^\)]*?(?:\([^\)]*?\))*?)*?\))/gi;
+
+        function execGradientMatch(line) {
+            var gradientMatch = gradientRegEx.exec(line),
+                prefix = "",
+                colorValue;
+            
+            if (gradientMatch) {
+                if (gradientMatch[0].indexOf("@") !== -1) {
+                    // If the gradient match has "@" in it, it is most likely a less or
+                    // sass variable. Ignore it since it won't be displayed correctly.
+                    gradientMatch = null;
+    
+                } else if (gradientMatch[0].indexOf("to ") !== -1) {
+                    // If the gradient match has "to " in it, it's most likely the new gradient
+                    // syntax which is not supported until Chrome 26, so we can't yet preview it
+                    gradientMatch = null;
+
+                } else {
+                    // If it was a linear-gradient or radial-gradient variant, prefix with
+                    // "-webkit-" so it shows up correctly in Brackets.
+                    if (gradientMatch[0].indexOf("-webkit-gradient") !== 0) {
+                        prefix = "-webkit-";
+                    }
+                    
+                    // For prefixed gradients, use the non-prefixed value as the color value.
+                    // "-webkit-" will be added before this value
+                    if (gradientMatch[1]) {
+                        colorValue = gradientMatch[1] + gradientMatch[3];    // linear gradiant
+                    } else if (gradientMatch[2]) {
+                        colorValue = gradientMatch[2] + gradientMatch[3];    // radial gradiant
+                    }
+                }
             }
+
+            return {
+                match:      gradientMatch,
+                prefix:     prefix,
+                colorValue: colorValue
+            };
         }
 
-        // Check for color
         var colorRegEx = /#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|\brgb\(\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*\)|\brgb\(\s*([0-9]{1,2}%|100%)\s*,\s*([0-9]{1,2}%|100%)\s*,\s*([0-9]{1,2}%|100%)\s*\)|\brgba\(\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*([0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\brgba\(\s*([0-9]{1,2}%|100%)\s*,\s*([0-9]{1,2}%|100%)\s*,\s*([0-9]{1,2}%|100%)\s*,\s*(1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\bhsl\(\s*([0-9]{1,3})\b\s*,\s*([0-9]{1,2}|100)\b%\s*,\s*([0-9]{1,2}|100)\b%\s*\)|\bhsla\(\s*([0-9]{1,3})\b\s*,\s*([0-9]{1,2}|100)\b%\s*,\s*([0-9]{1,2}|100)\b%\s*,\s*(1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\baliceblue\b|\bantiquewhite\b|\baqua\b|\baquamarine\b|\bazure\b|\bbeige\b|\bbisque\b|\bblack\b|\bblanchedalmond\b|\bblue\b|\bblueviolet\b|\bbrown\b|\bburlywood\b|\bcadetblue\b|\bchartreuse\b|\bchocolate\b|\bcoral\b|\bcornflowerblue\b|\bcornsilk\b|\bcrimson\b|\bcyan\b|\bdarkblue\b|\bdarkcyan\b|\bdarkgoldenrod\b|\bdarkgray\b|\bdarkgreen\b|\bdarkgrey\b|\bdarkkhaki\b|\bdarkmagenta\b|\bdarkolivegreen\b|\bdarkorange\b|\bdarkorchid\b|\bdarkred\b|\bdarksalmon\b|\bdarkseagreen\b|\bdarkslateblue\b|\bdarkslategray\b|\bdarkslategrey\b|\bdarkturquoise\b|\bdarkviolet\b|\bdeeppink\b|\bdeepskyblue\b|\bdimgray\b|\bdimgrey\b|\bdodgerblue\b|\bfirebrick\b|\bfloralwhite\b|\bforestgreen\b|\bfuchsia\b|\bgainsboro\b|\bghostwhite\b|\bgold\b|\bgoldenrod\b|\bgray\b|\bgreen\b|\bgreenyellow\b|\bgrey\b|\bhoneydew\b|\bhotpink\b|\bindianred\b|\bindigo\b|\bivory\b|\bkhaki\b|\blavender\b|\blavenderblush\b|\blawngreen\b|\blemonchiffon\b|\blightblue\b|\blightcoral\b|\blightcyan\b|\blightgoldenrodyellow\b|\blightgray\b|\blightgreen\b|\blightgrey\b|\blightpink\b|\blightsalmon\b|\blightseagreen\b|\blightskyblue\b|\blightslategray\b|\blightslategrey\b|\blightsteelblue\b|\blightyellow\b|\blime\b|\blimegreen\b|\blinen\b|\bmagenta\b|\bmaroon\b|\bmediumaquamarine\b|\bmediumblue\b|\bmediumorchid\b|\bmediumpurple\b|\bmediumseagreen\b|\bmediumslateblue\b|\bmediumspringgreen\b|\bmediumturquoise\b|\bmediumvioletred\b|\bmidnightblue\b|\bmintcream\b|\bmistyrose\b|\bmoccasin\b|\bnavajowhite\b|\bnavy\b|\boldlace\b|\bolive\b|\bolivedrab\b|\borange\b|\borangered\b|\borchid\b|\bpalegoldenrod\b|\bpalegreen\b|\bpaleturquoise\b|\bpalevioletred\b|\bpapayawhip\b|\bpeachpuff\b|\bperu\b|\bpink\b|\bplum\b|\bpowderblue\b|\bpurple\b|\bred\b|\brosybrown\b|\broyalblue\b|\bsaddlebrown\b|\bsalmon\b|\bsandybrown\b|\bseagreen\b|\bseashell\b|\bsienna\b|\bsilver\b|\bskyblue\b|\bslateblue\b|\bslategray\b|\bslategrey\b|\bsnow\b|\bspringgreen\b|\bsteelblue\b|\btan\b|\bteal\b|\bthistle\b|\btomato\b|\bturquoise\b|\bviolet\b|\bwheat\b|\bwhite\b|\bwhitesmoke\b|\byellow\b|\byellowgreen\b/gi,
-            match = gradientMatch || colorRegEx.exec(line);
+            gradientMatch = execGradientMatch(line),
+            match = gradientMatch.match || colorRegEx.exec(line),
+            cm = editor._codeMirror;
 
         while (match) {
             if (pos.ch >= match.index && pos.ch <= match.index + match[0].length) {
-                var previewCSS = prefix + (colorValue || match[0]);
+                var previewCSS = gradientMatch.prefix + (gradientMatch.colorValue || match[0]);
                 var preview = "<div class='color-swatch' style='background:" + previewCSS + "'>" +
                               "</div>";
                 var startPos = {line: pos.line, ch: match.index},
@@ -234,7 +243,12 @@ define(function (require, exports, module) {
                     _previewCSS: previewCSS
                 };
             }
-            match = colorRegEx.exec(line);
+
+            // Get next match
+            if (gradientMatch.match) {
+                gradientMatch = execGradientMatch(line);
+            }
+            match = gradientMatch.match || colorRegEx.exec(line);
         }
 
         return null;

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

@@ -88,7 +88,7 @@ background: -ms-linear-gradient(top,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3
 /* From css3please.com */
 .box_gradient {
     background-color: #333;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#CCC)); /* Chrome, Safari 4+ */
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(51,51,51)), to(rgb(204,204,204))); /* Chrome, Safari 4+ */
     background-image: -webkit-linear-gradient(top, #333, #CCC); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
     background-image:    -moz-linear-gradient(top, #333, #CCC); /* Firefox 3.6-15 */
     background-image:      -o-linear-gradient(top, #333, #CCC); /* Opera 11.10-12.00 */
@@ -130,6 +130,13 @@ background: -ms-linear-gradient(top,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3
     background-image: repeating-radial-gradient(red, blue 20px, red 40px);
 }
 
+/* lea.verou.me/css3patterns */
+.gradient_pattern {
+    background:
+        linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
+        linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 0%, #999 38%, #999 58%, transparent 100%), #444;
+}
+
 .images {
     background: url(img/grabber_color-well.png);
     background: url("img/Color.png");

src/extensions/default/QuickView/unittests.js

@@ -183,13 +183,15 @@ define(function (require, exports, module) {
             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%)",
-                        expectedGradient2 = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2dfed), color-stop(26%,#c8d7eb), color-stop(51%,#bed0ea), color-stop(51%,#a6c0e3), color-stop(62%,#afc7e8), color-stop(75%,#bad0ef), color-stop(88%,#99b5db), color-stop(100%,#799bc8));",
-                        expectedGradient3 = "-webkit-linear-gradient(top,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%)";
+                        expectedGradient2 = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2dfed), color-stop(26%,#c8d7eb), color-stop(51%,#bed0ea), color-stop(51%,#a6c0e3), color-stop(62%,#afc7e8), color-stop(75%,#bad0ef), color-stop(88%,#99b5db), color-stop(100%,#799bc8))",
+                        expectedGradient3 = "-webkit-linear-gradient(top,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%)",
+                        expectedGradient4 = "-webkit-gradient(linear, left top, left bottom, from(rgb(51,51,51)), to(rgb(204,204,204)))";
                     checkGradientAtPos(expectedGradient1, 80, 36);   // -moz- prefix gets stripped
                     checkGradientAtPos(expectedGradient2, 81, 36);   // Old webkit syntax
                     checkGradientAtPos(expectedGradient3, 82, 36);   // -webkit- prefix gets stripped
                     checkGradientAtPos(expectedGradient3, 83, 36);   // -o- prefix gets stripped
                     checkGradientAtPos(expectedGradient3, 84, 36);   // -ms- prefix gets stripped
+                    checkGradientAtPos(expectedGradient4, 90, 36);   // test parameters with 2 levels of nested parens
                 });
             });
 
@@ -213,7 +215,7 @@ define(function (require, exports, module) {
 
             it("Should show radial gradient preview for those with vendor prefix syntax", function () {
                 runs(function () {
-                    var expectedGradient1 = "-webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));",
+                    var expectedGradient1 = "-webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple))",
                         expectedGradient2 = "-webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%)";
                     checkGradientAtPos(expectedGradient1, 110, 93);   // old webkit syntax
                     checkGradientAtPos(expectedGradient2, 111, 36);   // -webkit- prefix preserved
@@ -261,6 +263,16 @@ define(function (require, exports, module) {
                 });
             });
 
+            it("Should show comma-separated gradients", function () {
+                runs(function () {
+                    // line ending in comma
+                    checkGradientAtPos("-webkit-linear-gradient(63deg, #999 23%, transparent 23%)", 135,  50);
+                    
+                    // multiple gradients on a line
+                    checkGradientAtPos("-webkit-linear-gradient(63deg, transparent 74%, #999 78%)", 136,  50);
+                    checkGradientAtPos("-webkit-linear-gradient(63deg, transparent 0%, #999 38%, #999 58%, transparent 100%)",   136, 100);
+                });
+            });
         });
 
         describe("Quick view display", function () {
@@ -346,24 +358,24 @@ define(function (require, exports, module) {
         describe("Quick view images", function () {
             it("Should show image preview for file path inside url()", function () {
                 runs(function () {
-                    checkImagePathAtPos("img/grabber_color-well.png", 133, 26);
-                    checkImagePathAtPos("img/Color.png",              134, 26);
-                    checkImagePathAtPos("img/DancingPeaks.gif",       135, 26);
-                    checkImagePathAtPos("img/Example.svg",            136, 26);
+                    checkImagePathAtPos("img/grabber_color-well.png", 140, 26);
+                    checkImagePathAtPos("img/Color.png",              141, 26);
+                    checkImagePathAtPos("img/DancingPeaks.gif",       142, 26);
+                    checkImagePathAtPos("img/Example.svg",            143, 26);
                 });
             });
 
             it("Should show image preview for urls with http/https", function () {
                 runs(function () {
-                    checkImagePathAtPos("https://raw.github.com/gruehle/HoverPreview/master/screenshots/Image.png", 138, 26);
+                    checkImagePathAtPos("https://raw.github.com/gruehle/HoverPreview/master/screenshots/Image.png", 145, 26);
                 });
             });
 
             it("Should show image preview for file path inside single or double quotes", function () {
                 runs(function () {
-                    checkImagePathAtPos("img/med_hero.jpg",       140, 26);
-                    checkImagePathAtPos("img/Gradient.png",       141, 26);
-                    checkImagePathAtPos("Lake_mapourika_NZ.jpeg", 142, 26);
+                    checkImagePathAtPos("img/med_hero.jpg",       147, 26);
+                    checkImagePathAtPos("img/Gradient.png",       148, 26);
+                    checkImagePathAtPos("Lake_mapourika_NZ.jpeg", 149, 26);
                 });
 
                 // This must be in the last spec in the suite.