Devtools Color: Basic support for #RRGGBBAA and #RGBA

third_party/WebKit/Source/devtools/front_end/common/Color.js

Index: third_party/WebKit/Source/devtools/front_end/common/Color.js
diff --git a/third_party/WebKit/Source/devtools/front_end/common/Color.js b/third_party/WebKit/Source/devtools/front_end/common/Color.js
index 53842264edc29378c88d4437ddbeb626f4be6a69..f63df8282e4567fdae7dd3f8fe4945dea344c86d 100644
--- a/third_party/WebKit/Source/devtools/front_end/common/Color.js
+++ b/third_party/WebKit/Source/devtools/front_end/common/Color.js
@@ -62,6 +62,8 @@ WebInspector.Color.Format = {
     Nickname: "nickname",
     HEX: "hex",
     ShortHEX: "shorthex",
+    HEXA: "hexa",
+    ShortHEXA: "shorthexa",
     RGB: "rgb",
     RGBA: "rgba",
     HSL: "hsl",
@@ -76,7 +78,7 @@ WebInspector.Color.parse = function(text)
 {
     // Simple - #hex, rgb(), nickname, hsl()
     var value = text.toLowerCase().replace(/\s+/g, "");
-    var simple = /^(?:#([0-9a-f]{3}|[0-9a-f]{6})|rgb\(((?:-?\d+%?,){2}-?\d+%?)\)|(\w+)|hsl\((-?\d+\.?\d*(?:,-?\d+\.?\d*%){2})\))$/i;
+    var simple = /^(?:#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|rgb\(((?:-?\d+%?,){2}-?\d+%?)\)|(\w+)|hsl\((-?\d+\.?\d*(?:,-?\d+\.?\d*%){2})\))$/i;
     var match = value.match(simple);
     if (match) {
         if (match[1]) { // hex
@@ -85,12 +87,19 @@ WebInspector.Color.parse = function(text)
             if (hex.length === 3) {
                 format = WebInspector.Color.Format.ShortHEX;
                 hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
-            } else
+            } else if (hex.length === 4) {
+                format = WebInspector.Color.Format.ShortHEXA;
+                hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2) + hex.charAt(3) + hex.charAt(3);
+            } else if (hex.length === 6) {
                 format = WebInspector.Color.Format.HEX;
+            } else {
+                format = WebInspector.Color.Format.HEXA;
+            }
             var r = parseInt(hex.substring(0,2), 16);
             var g = parseInt(hex.substring(2,4), 16);
             var b = parseInt(hex.substring(4,6), 16);
-            return new WebInspector.Color([r / 255, g / 255, b / 255, 1], format, text);
+            var a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
+            return new WebInspector.Color([r / 255, g / 255, b / 255, a], format, text);
         }
 
         if (match[2]) { // rgb
@@ -254,18 +263,21 @@ WebInspector.Color.prototype = {
     },
 
     /**
-     * @return {boolean}
+     * @return {!WebInspector.Color.Format}
      */
-    canBeShortHex: function()
+    detectHEXFormat: function()
     {
-        if (this.hasAlpha())
-            return false;
-        for (var i = 0; i < 3; ++i) {
+        var canBeShort = true;
+        for (var i = 0; i < 4; ++i) {
             var c = Math.round(this._rgba[i] * 255);
             if (c % 17)
-                return false;
+                canBeShort = false;
         }
-        return true;
+        var hasAlpha = this.hasAlpha();
+        var cf = WebInspector.Color.Format;
+        if (canBeShort)
+            return hasAlpha ? cf.ShortHEXA : cf.ShortHEX;
+        return hasAlpha ? cf.HEXA : cf.HEX;
     },
 
     /**
@@ -324,14 +336,21 @@ WebInspector.Color.prototype = {
         case WebInspector.Color.Format.HSLA:
             var hsla = this.hsla();
             return String.sprintf("hsla(%d, %d%, %d%, %f)", Math.round(hsla[0] * 360), Math.round(hsla[1] * 100), Math.round(hsla[2] * 100), hsla[3]);
+        case WebInspector.Color.Format.HEXA:
+            return String.sprintf("#%s%s%s%s", toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2]), toHexValue(this._rgba[3])).toLowerCase();
         case WebInspector.Color.Format.HEX:
             if (this.hasAlpha())
                 return null;
-            return String.sprintf("#%s%s%s", toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2])).toLowerCase();;
+            return String.sprintf("#%s%s%s", toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2])).toLowerCase();
+        case WebInspector.Color.Format.ShortHEXA:
+            var hexFormat = this.detectHEXFormat();
+            if (hexFormat !== WebInspector.Color.Format.ShortHEXA && hexFormat !== WebInspector.Color.Format.ShortHEX)
+                return null;
+            return String.sprintf("#%s%s%s%s", toShortHexValue(this._rgba[0]), toShortHexValue(this._rgba[1]), toShortHexValue(this._rgba[2]), toShortHexValue(this._rgba[3])).toLowerCase();
         case WebInspector.Color.Format.ShortHEX:
-            if (!this.canBeShortHex())
+            if (this.detectHEXFormat() !== WebInspector.Color.Format.ShortHEX)
                 return null;
-            return String.sprintf("#%s%s%s", toShortHexValue(this._rgba[0]), toShortHexValue(this._rgba[1]), toShortHexValue(this._rgba[2])).toLowerCase();;
+            return String.sprintf("#%s%s%s", toShortHexValue(this._rgba[0]), toShortHexValue(this._rgba[1]), toShortHexValue(this._rgba[2])).toLowerCase();
         case WebInspector.Color.Format.Nickname:
             return this.nickname();
         }
@@ -813,8 +832,8 @@ WebInspector.Color.detectColorFormat = function(color)
         format = (color.hasAlpha() ? cf.RGBA : cf.RGB);
     else if (formatSetting === cf.HSL)
         format = (color.hasAlpha() ? cf.HSLA : cf.HSL);
-    else if (!color.hasAlpha())
-        format = (color.canBeShortHex() ? cf.ShortHEX : cf.HEX);
+    else if (formatSetting === cf.HEX)
+        format = color.detectHEXFormat();
     else
         format = cf.RGBA;