Fix colour editor for use in browsers that don't use -webkit- prefix

[humphd]

The inline colour editor tool in Brackets isn't designed to work outside WebKit. Here's what it looks like in the desktop Brackets app:

Here's what it looks like in Bramble running in Firefox:

Basically it just needs some tweaks to the LESS file used here https://github.com/adobe/brackets/blob/master/src/extensions/default/InlineColorEditor/css/main.less

I experimented a bit today and got to:

diff --git a/src/extensions/default/InlineColorEditor/css/main.less b/src/extensions/default/InlineColorEditor/css/main.less
index c9b46f3..a2d0d2a 100644
--- a/src/extensions/default/InlineColorEditor/css/main.less
+++ b/src/extensions/default/InlineColorEditor/css/main.less
@@ -55,7 +55,6 @@
     display: inline-block;
     position: relative;
     overflow: hidden;
-    -webkit-background-clip: padding-box;
     background-clip: padding-box;
     border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 }
@@ -137,10 +136,27 @@
     float: left;
 }
 .color-editor section .color-selection-field .saturation-gradient {
-    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#fff), to(rgba(255,255,255,0)));
+/*    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#fff), to(rgba(255,255,255,0))); */
+
+
+background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+background-image: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+background-image: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
+background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
+
+
 }
 .color-editor section .color-selection-field .luminosity-gradient {
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
+/*    background-image: gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); */
+background-image: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+background-image: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+background-image: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+background-image: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+background-image: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+
 }
 .color-editor section .color-selection-field .selector-base {
     width: 12px;
@@ -202,7 +218,15 @@
     margin-right: 0px;
 }
 .color-editor section .hue-slider {
-    background-image: -webkit-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
+/*    background-image: linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); */
+background-image: rgb(255,0,0); /* Old browsers */
+background-image: -moz-linear-gradient(top,  rgba(255,0,0,1) 0%, rgba(255,0,255,1) 17%, rgba(0,0,255,1) 33%, rgba(0,255,255,1) 50%, rgba(0,255,0,1) 67%, rgba(255,255,0,1) 83%, rgba(255,0,0,1) 100%); /* FF3.6+ */
+background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(17%,rgba(255,0,255,1)), color-stop(33%,rgba(0,0,255,1)), color-stop(50%,rgba(0,255,255,1)), color-stop(67%,rgba(0,255,0,1)), color-stop(83%,rgba(255,255,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
+background-image: -webkit-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+background-image: -o-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
+background-image: -ms-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* IE10+ */
+background-image: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* W3C */
+
 }
 .color-editor section footer {
     font-size: 100%;
@@ -267,7 +291,7 @@
     font-size: 100%;
     vertical-align: middle;
     background: transparent;
-    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
 }
 .color-editor ul.button-bar {

Which isn't bad, and looks like this:

But it could be better. And, since my goal is to get this landed upstream, I really want something that is exactly like the original--I just don't speak gradient very fluently.

Maybe I can convince @Pomax to take a crack at this?

[humphd]

For those playing along from home, I used http://www.colorzilla.com/gradient-editor/ to build those cross-browser gradients above.

[Pomax]

http://stackoverflow.com/questions/18452885/building-a-4-corners-colors-css3-gradient offers quite a few ways to achieve this, it looks like some of those should be possible here

[le717]

Just to quickly note: there is a bit more than LESS at play here, namely this line (which, IIRC, is the old WebKit gradient syntax). As you noted, there is a lot of -webkit- prefixed styles. Although we can't totally remove them until Linux gets CEF 2721, updating these to standardized versions is probably something that should happen upstream, if you'd like to submit the changes there as well. :)

[humphd]

Excellent, thanks for the link to the other code we have to touch. Yeah, I want this fix to happen upstream, and will file it there once we make some headway.

[AJDBenner]

This PR should fix this issue.