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 44 matching lines @@
 }
 
 /**
  * @enum {string}
  */
 WebInspector.Color.Format = {
     Original: "original",
     Nickname: "nickname",
     HEX: "hex",
     ShortHEX: "shorthex",
+    HEXA: "hexa",
+    ShortHEXA: "shorthexa",
     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;
     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.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
             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 143 matching lines @@
 
     /**
      * @return {boolean}
      */
     hasAlpha: function()
     {
         return this._rgba[3] !== 1;
     },
 
     /**
-     * @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;
     },
 
     /**
      * @return {?string}
      */
     asString: function(format)
     {
         if (format === this._format && this._originalTextIsValid)
             return this._originalText;
 
@@ skipping 38 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.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();
         }
 
         return this._originalText;
     },
 
 
     /**
      * @return {!Array<number>}
@@ skipping 461 matching lines @@
 {
     const cf = WebInspector.Color.Format;
     var format;
     var formatSetting = WebInspector.moduleSetting("colorFormat").get();
     if (formatSetting === cf.Original)
         format = cf.Original;
     else if (formatSetting === cf.RGB)
         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;
 
     return format;
 }