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..7927531c589c9e8169864039f14869d7ff13feb6 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,7 @@ WebInspector.Color.Format = {
     Nickname: "nickname",
     HEX: "hex",
     ShortHEX: "shorthex",

[pfeldman, 2016/05/19 07:14:06]

Is there ShortHEXA?

[samli, 2016/05/20 00:22:18]

Done.

+    AlphaHEX: "alphahex",

[dgozman, 2016/05/19 07:10:59]

I'd go for HEXA and ShortHEXA (which is missing here anyway).

[pfeldman, 2016/05/19 07:14:06]

HEXA

[samli, 2016/05/20 00:22:18]

Done.

     RGB: "rgb",
     RGBA: "rgba",
     HSL: "hsl",
@@ -76,7 +77,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;

[pfeldman, 2016/05/19 07:14:06]

why different treatment of 3-4 ws 6-8?

[samli, 2016/05/20 00:22:18]

"6,8" includes 7
"3,4" is just 3 & 4

     var match = value.match(simple);
     if (match) {
         if (match[1]) { // hex
@@ -85,12 +86,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.AlphaHEX;
+                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.AlphaHEX;
+            }
             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 = format === WebInspector.Color.Format.AlphaHEX ? parseInt(hex.substring(6,8), 16) / 255 : 1;

[dgozman, 2016/05/19 07:10:59]

style: missing space after comma

[samli, 2016/05/20 00:22:18]

Done.

+            return new WebInspector.Color([r / 255, g / 255, b / 255, a], format, text);
         }
 
         if (match[2]) { // rgb
@@ -324,6 +332,8 @@ 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.AlphaHEX:
+            return String.sprintf("#%s%s%s%s", toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2]), toHexValue(this._rgba[3])).toLowerCase();;

[dgozman, 2016/05/19 07:10:59]

style: double semicolon

[samli, 2016/05/20 00:22:18]

Done.

         case WebInspector.Color.Format.HEX:
             if (this.hasAlpha())
                 return null;