Devtools Color: Basic support for #RRGGBBAA and #RGBA

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

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 43 matching lines @@
     }
 }
 
 /**
  * @enum {string}
  */
 WebInspector.Color.Format = {
     Original: "original",
     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",
     HSLA: "hsla"
 }
 
 /**
  * @param {string} text
  * @return {?WebInspector.Color}
  */
 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
             var hex = match[1].toLowerCase();
             var format;
             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
             var rgbString = match[2].split(/\s*,\s*/);
             var rgba = [ WebInspector.Color._parseRgbNumeric(rgbString[0]),
                          WebInspector.Color._parseRgbNumeric(rgbString[1]),
                          WebInspector.Color._parseRgbNumeric(rgbString[2]), 1 ];
             return new WebInspector.Color(rgba, WebInspector.Color.Format.RGB, text);
         }
 
@@ skipping 145 matching lines @@
      * @return {boolean}
      */
     hasAlpha: function()
     {
         return this._rgba[3] !== 1;
     },
 
     /**
      * @return {boolean}
      */
     canBeShortHex: function()

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

I think this function is wrong now. We can replace it with detectHexFormat()
which returns HEX, ShortHEX, HEXA or ShortHEXA and check/upadte all usages of
|hasAlpha| and |canBeShortHex|.

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

Done. Not all |hasAlpha| changed since asString() should convert if possible.

     {
         if (this.hasAlpha())
             return false;
         for (var i = 0; i < 3; ++i) {
             var c = Math.round(this._rgba[i] * 255);
             if (c % 17)
                 return false;
         }
         return true;
     },
@@ skipping 47 matching lines @@
         case WebInspector.Color.Format.RGBA:
             return String.sprintf("rgba(%d, %d, %d, %f)", toRgbValue(this._rgba[0]), toRgbValue(this._rgba[1]), toRgbValue(this._rgba[2]), this._rgba[3]);
         case WebInspector.Color.Format.HSL:
             if (this.hasAlpha())
                 return null;
             var hsl = this.hsla();
             return String.sprintf("hsl(%d, %d%, %d%)", Math.round(hsl[0] * 360), Math.round(hsl[1] * 100), Math.round(hsl[2] * 100));
         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;
             return String.sprintf("#%s%s%s", toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2])).toLowerCase();;
         case WebInspector.Color.Format.ShortHEX:
             if (!this.canBeShortHex())
                 return null;
             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();
@@ skipping 476 matching lines @@
         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
         format = cf.RGBA;
 
     return format;
 }