From 65a9e1b3ef9c77272cb96b1f531887c5559a14dd Mon Sep 17 00:00:00 2001 From: Randy Edmunds Date: Wed, 17 Apr 2013 19:45:59 -0700 Subject: [PATCH 1/5] ignore new gradient syntax --- src/extensions/default/HoverPreview/main.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/extensions/default/HoverPreview/main.js b/src/extensions/default/HoverPreview/main.js index 7d9c1c0aebc..e4aa0981d12 100644 --- a/src/extensions/default/HoverPreview/main.js +++ b/src/extensions/default/HoverPreview/main.js @@ -105,10 +105,17 @@ define(function (require, exports, module) { prefix = "", colorValue; - // 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. - if (gradientMatch && gradientMatch[0].indexOf("@") !== -1) { - gradientMatch = null; + 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 From 772abfc7546364ab691a72eec367ea44004a6038 Mon Sep 17 00:00:00 2001 From: Randy Edmunds Date: Thu, 18 Apr 2013 17:16:09 -0700 Subject: [PATCH 2/5] ignore new gradient syntax, for now --- src/extensions/default/HoverPreview/main.js | 54 ++++++++++++++++----- 1 file changed, 43 insertions(+), 11 deletions(-) diff --git a/src/extensions/default/HoverPreview/main.js b/src/extensions/default/HoverPreview/main.js index e4aa0981d12..f77efda95f7 100644 --- a/src/extensions/default/HoverPreview/main.js +++ b/src/extensions/default/HoverPreview/main.js @@ -95,7 +95,31 @@ define(function (require, exports, module) { event.clientY >= offset.top && event.clientY <= offset.top + $div.height()); } - + + // Heuristic to detect common cases of newer syntax color stops that Chrome 25 + // does not yet support. This is supported in Chrome 26 which will be upgraded + // to soon, so this code is quick (to write) and dirty (inefficient to run). + function hasNewSyntaxColorStop(gradient) { + // Old school webkit gradients are supported and don't fit this heuristic + if (gradient.indexOf("-webkit-gradient") !== -1) { + return false; + } + + // To make code easier to parse remove optional whitespace + var s = gradient.trim(); + + // Whitespace around commas and opening parens is optional. Also before + // (but not after) closing parens. This is common with colors specified as + // functions such as rgb(). + s = s.replace(/\s*,\s*/g, ","); + s = s.replace(/\s*\(\s*/g, "("); + s = s.replace(/\s*\)/g, ")"); + + // Whitespace in first (optional) parameter is supported, but all subsequent + // (i.e. after first comma) whitespace is from a color stop ( ). + return s.match(/,\S+\s/); + } + function colorAndGradientPreviewProvider(editor, pos, token, line) { var cm = editor._codeMirror; @@ -107,27 +131,35 @@ define(function (require, exports, module) { 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. + // 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 + // 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 (hasNewSyntaxColorStop(gradientMatch[0])) { + // Ignore new gradient color stop syntax, for now gradientMatch = null; } } - // If it was a linear-gradient or radial-gradient variant, prefix with "-webkit-" so it - // shows up correctly in Brackets. + // 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 && gradientMatch[2]) { - colorValue = gradientMatch[2]; + // 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 color From 7d255025c925105da7b4b49cb0b633577a35cfa7 Mon Sep 17 00:00:00 2001 From: Randy Edmunds Date: Thu, 18 Apr 2013 18:35:09 -0700 Subject: [PATCH 3/5] code cleanup --- src/extensions/default/HoverPreview/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/extensions/default/HoverPreview/main.js b/src/extensions/default/HoverPreview/main.js index f77efda95f7..987236d6519 100644 --- a/src/extensions/default/HoverPreview/main.js +++ b/src/extensions/default/HoverPreview/main.js @@ -106,14 +106,14 @@ define(function (require, exports, module) { } // To make code easier to parse remove optional whitespace - var s = gradient.trim(); - // Whitespace around commas and opening parens is optional. Also before // (but not after) closing parens. This is common with colors specified as // functions such as rgb(). - s = s.replace(/\s*,\s*/g, ","); - s = s.replace(/\s*\(\s*/g, "("); - s = s.replace(/\s*\)/g, ")"); + var s = gradient + .trim() + .replace(/\s*,\s*/g, ",") + .replace(/\s*\(\s*/g, "(") + .replace(/\s*\)/g, ")"); // Whitespace in first (optional) parameter is supported, but all subsequent // (i.e. after first comma) whitespace is from a color stop ( ). From 6fc420747f76f5a8a10b2c1afc4202b43c4695da Mon Sep 17 00:00:00 2001 From: Randy Edmunds Date: Mon, 22 Apr 2013 08:34:52 -0700 Subject: [PATCH 4/5] remove misguided attempt to filter gradients for Chrome 25 --- src/extensions/default/HoverPreview/main.js | 28 --------------------- 1 file changed, 28 deletions(-) diff --git a/src/extensions/default/HoverPreview/main.js b/src/extensions/default/HoverPreview/main.js index 1073f056b33..a8f7aa90e22 100644 --- a/src/extensions/default/HoverPreview/main.js +++ b/src/extensions/default/HoverPreview/main.js @@ -102,30 +102,6 @@ define(function (require, exports, module) { event.clientY <= offset.top + $div.height()); } - // Heuristic to detect common cases of newer syntax color stops that Chrome 25 - // does not yet support. This is supported in Chrome 26 which will be upgraded - // to soon, so this code is quick (to write) and dirty (inefficient to run). - function hasNewSyntaxColorStop(gradient) { - // Old school webkit gradients are supported and don't fit this heuristic - if (gradient.indexOf("-webkit-gradient") !== -1) { - return false; - } - - // To make code easier to parse remove optional whitespace - // Whitespace around commas and opening parens is optional. Also before - // (but not after) closing parens. This is common with colors specified as - // functions such as rgb(). - var s = gradient - .trim() - .replace(/\s*,\s*/g, ",") - .replace(/\s*\(\s*/g, "(") - .replace(/\s*\)/g, ")"); - - // Whitespace in first (optional) parameter is supported, but all subsequent - // (i.e. after first comma) whitespace is from a color stop ( ). - return s.match(/,\S+\s/); - } - function colorAndGradientPreviewProvider(editor, pos, token, line) { var cm = editor._codeMirror; @@ -147,10 +123,6 @@ define(function (require, exports, module) { // 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 (hasNewSyntaxColorStop(gradientMatch[0])) { - // Ignore new gradient color stop syntax, for now - gradientMatch = null; } } From c5eb37b4f2b9806ec83c4992057dccd5c5b84446 Mon Sep 17 00:00:00 2001 From: Randy Edmunds Date: Mon, 22 Apr 2013 09:03:36 -0700 Subject: [PATCH 5/5] fix unit tests for changes in this branch --- src/extensions/default/HoverPreview/unittests.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/extensions/default/HoverPreview/unittests.js b/src/extensions/default/HoverPreview/unittests.js index f488433e6bb..26ec3b4aeda 100644 --- a/src/extensions/default/HoverPreview/unittests.js +++ b/src/extensions/default/HoverPreview/unittests.js @@ -200,9 +200,10 @@ define(function (require, exports, module) { it("Should show linear gradient preview for those with w3c standard syntax (no prefix)", function () { runs(function () { - checkGradientAtPos("linear-gradient(to right, #333, #CCC)", 98, 50); + // Keyword "to" not supported until Brackets upgrades to Chrome 26 + //checkGradientAtPos("linear-gradient(to right, #333, #CCC)", 98, 50); checkGradientAtPos("linear-gradient(#333, #CCC)", 99, 50); - checkGradientAtPos("linear-gradient(to bottom right, #333, #CCC)", 100, 50); + //checkGradientAtPos("linear-gradient(to bottom right, #333, #CCC)", 100, 50); checkGradientAtPos("linear-gradient(135deg, #333, #CCC)", 101, 50); // multiple colors @@ -215,12 +216,12 @@ 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));", - expectedGradient2 = "radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);"; + expectedGradient2 = "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("-webkit-" + expectedGradient2, 111, 36); // Append -webkit- prefix - checkGradientAtPos("-moz-" + expectedGradient2, 112, 36); // Append -moz- prefix - checkGradientAtPos("-ms-" + expectedGradient2, 113, 36); // Append -ms- prefix - checkGradientAtPos("-o-" + expectedGradient2, 114, 36); // Append -0- prefix + checkGradientAtPos(expectedGradient2, 111, 36); // -webkit- prefix gets stripped + checkGradientAtPos(expectedGradient2, 112, 36); // -moz- prefix gets stripped + checkGradientAtPos(expectedGradient2, 113, 36); // -ms- prefix gets stripped + checkGradientAtPos(expectedGradient2, 114, 36); // -0- prefix gets stripped }); });