Fix adobe#493: Color picker only works for an existing color (adobe#641)

* Using CSSProperties to check if any rule is of type color

* === instead of ==

* Removed unnecessary console log and remaned cursorLine2 to cssPropertyName

* Added CSSProperties.json file

* Changing include syntax of CSSProperties.json file

* Lots of improvements

* Renamed CSSProperties.json to ColorProperties.json and removed all non-color styles

* Added a default color value which would be returned when the first style of type color is written

* Added some comments, used try-catch while including files, checked if cssPropertyName is non-null and renamed some variables

* Restored the original color picker logic and modified the logic for checking css rules of type color

* Removed the hashPos variable

* Writing the default color value to a new css rule of type color and handling the case of empty color string for a css color rule

* Modified logic with color value check

* Removed 'type: color' from ColorProperties.json and made some small changes

* Using the replaceRange function of codeMirror instead of the setLine function

src/extensions/default/InlineColorEditor/ColorProperties.json

@@ -0,0 +1,13 @@
+{
+    "background-color":            {"values": ["inherit"]},
+    "border-color":                {"values": ["inherit"]},
+    "border-bottom-color":         {"values": ["inherit"]},
+    "border-left-color":           {"values": ["inherit"]},
+    "border-right-color":          {"values": ["inherit"]},
+    "border-top-color":            {"values": ["inherit"]},
+    "color":                       {"values": ["inherit"]},
+    "column-rule-color":           {"values": []},
+    "outline-color":               {"values": ["invert", "inherit"]},
+    "text-decoration-color":       {"values": []},
+    "text-emphasis-color":         {"values": []}
+}

src/extensions/default/InlineColorEditor/InlineColorEditor.js

@@ -30,7 +30,8 @@ define(function (require, exports, module) {
 
 
     /** @const @type {number} */
-    var MAX_USED_COLORS = 7;
+    var MAX_USED_COLORS = 7,
+        DEFAULT_COLOR  = "white";
 
     /** @type {number} Global var used to provide a unique ID for each color editor instance's _origin field. */
     var lastOriginId = 1;
@@ -167,7 +168,7 @@ define(function (require, exports, module) {
         InlineColorEditor.prototype.parentClass.load.apply(this, arguments);
 
         // Create color picker control
-        var allColorsInDoc = this.hostEditor.document.getText().match(ColorUtils.COLOR_REGEX);
+        var allColorsInDoc = this.hostEditor.document.getText().match(ColorUtils.COLOR_REGEX) || [DEFAULT_COLOR];
         var swatchInfo = this._collateColors(allColorsInDoc, MAX_USED_COLORS);
         this.colorEditor = new ColorEditor(this.$htmlContent, this._color, this._handleColorChange, swatchInfo);
     };

src/extensions/default/InlineColorEditor/main.js

@@ -27,8 +27,10 @@ define(function (require, exports, module) {
     var EditorManager       = brackets.getModule("editor/EditorManager"),
         ExtensionUtils      = brackets.getModule("utils/ExtensionUtils"),
         InlineColorEditor   = require("InlineColorEditor").InlineColorEditor,
-        ColorUtils          = brackets.getModule("utils/ColorUtils");
+        ColorUtils          = brackets.getModule("utils/ColorUtils"),
+        properties          = JSON.parse(require("text!ColorProperties.json"));
 
+    var DEFAULT_COLOR = "white";
 
     /**
      * Prepare hostEditor for an InlineColorEditor at pos if possible. Return
@@ -59,7 +61,54 @@ define(function (require, exports, module) {
         } while (match && (pos.ch < start || pos.ch > end));
 
         if (!match) {
-            return null;
+            // Check if the cursorLine has a CSS rule of type color
+            var cssPropertyName, semiColonPos, colonPos, colorValue, cursorLineSubstring, firstCharacterPos;
+
+            // Get the css property name after removing spaces and ":" so that we can check for it in the file ColorProperties.json
+            cssPropertyName = cursorLine.split(':')[0].trim();
+
+            if (!cssPropertyName || !properties[cssPropertyName]) {
+                return null;
+            }
+
+            if (properties[cssPropertyName]) {
+                colonPos = cursorLine.indexOf(":");
+                semiColonPos = cursorLine.indexOf(";");
+                cursorLineSubstring = cursorLine.substring(colonPos + 1, cursorLine.length);
+                colorValue = cursorLineSubstring.replace(/ /g,"").replace(";", "");
+                if (colorValue) {
+                    if (colorRegEx.test(colorValue)) {
+                        // edit the color value of an existing css rule
+                        firstCharacterPos = cursorLineSubstring.search(/\S/);
+                        pos.ch = colonPos + 1 + Math.min(firstCharacterPos,1);
+                        if (semiColonPos !== -1) {
+                            endPos = {line: pos.line, ch: semiColonPos};
+                        } else {
+                            endPos = {line: pos.line, ch: cursorLine.length};
+                        }
+                    } else {
+                         return null;
+                    }
+                } else {
+                    // edit the color value of a new css rule
+                    var newText = " ", from, to;
+                    newText = newText.concat(DEFAULT_COLOR, ";");
+                    from = {line: pos.line, ch: colonPos + 1};
+                    to = {line: pos.line, ch: cursorLine.length};
+                    hostEditor._codeMirror.replaceRange(newText, from, to);
+                    pos.ch = colonPos + 2;
+                    endPos = {line: pos.line, ch: pos.ch + DEFAULT_COLOR.length};
+                    colorValue = DEFAULT_COLOR;
+                }
+
+                marker = hostEditor._codeMirror.markText(pos, endPos);
+                hostEditor.setSelection(pos, endPos);
+
+                return {
+                    color: colorValue,
+                    marker: marker
+                };
+            }
         }
 
         // Adjust pos to the beginning of the match so that the inline editor won't get