Devtools Color: Basic support for #RRGGBBAA and #RGBA

third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js

Index: third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js b/third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js
index 677bc7777dce67e7c229276b72e9314fa9c952ca..131864d63757c05b026641859c65575aae50fbfa 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js
@@ -90,7 +90,7 @@ WebInspector.Spectrum = function()
     // HEX display.
     this._hexContainer = this.contentElement.createChild("div", "spectrum-text spectrum-text-hex source-code");
     this._hexValue = this._hexContainer.createChild("input", "spectrum-text-value");
-    this._hexValue.maxLength = 7;
+    this._hexValue.maxLength = 9;
     this._hexValue.addEventListener("keydown", this._inputChanged.bind(this), false);
     this._hexValue.addEventListener("input", this._inputChanged.bind(this), false);
     this._hexValue.addEventListener("mousewheel", this._inputChanged.bind(this), false);
@@ -165,8 +165,8 @@ WebInspector.Spectrum = function()
         var hsva = this._hsv.slice();
         hsva[3] = Number.constrain(newAlpha, 0, 1);
         var colorFormat = undefined;
-        if (hsva[3] !== 1 && (this._colorFormat === WebInspector.Color.Format.ShortHEX || this._colorFormat === WebInspector.Color.Format.HEX || this._colorFormat === WebInspector.Color.Format.Nickname))
-            colorFormat = WebInspector.Color.Format.RGB;
+        if (hsva[3] !== 1 && this._colorFormat === WebInspector.Color.Format.Nickname)
+            colorFormat = WebInspector.Color.Format.RGBA;

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

Should this retain RGB?

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

Yes for mildly better readability, doesn't actually change anything.

         this._innerSetColor(hsva, "", colorFormat, WebInspector.Spectrum._ChangeSource.Other);
     }
 
@@ -589,6 +589,8 @@ WebInspector.Spectrum.prototype = {
                 colorFormat = WebInspector.Color.Format.RGB;
             else if (colorFormat === WebInspector.Color.Format.HSLA)
                 colorFormat = WebInspector.Color.Format.HSL;
+            else if (colorFormat === WebInspector.Color.Format.AlphaHEX)

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

This also seems to go the other way around.

+                colorFormat = WebInspector.Color.Format.HEX;
             this._colorFormat = colorFormat;
         }
 
@@ -638,7 +640,12 @@ WebInspector.Spectrum.prototype = {
         }
 
         console.assert(color.hasAlpha());
-        return this._colorFormat === cf.HSL ? /** @type {string} */(color.asString(cf.HSLA)) : /** @type {string} */(color.asString(cf.RGBA));
+        if (this._colorFormat === cf.HEX)
+            return /** @type {string} */(color.asString(cf.AlphaHEX));
+        else if (this._colorFormat === cf.HSL)
+            return /** @type {string} */(color.asString(cf.HSLA));
+        else
+            return /** @type {string} */(color.asString(cf.RGBA));
     },
 
     _updateHelperLocations: function()
@@ -675,7 +682,7 @@ WebInspector.Spectrum.prototype = {
             if (this._colorFormat === cf.ShortHEX && this._color().canBeShortHex())
                 this._hexValue.value = this._color().asString(cf.ShortHEX);
             else
-                this._hexValue.value = this._color().asString(cf.HEX);
+                this._hexValue.value = this._color().asString(this._color().hasAlpha() ? cf.AlphaHEX : cf.HEX);
         } else {
             // RGBA, HSLA display.
             this._hexContainer.hidden = true;
@@ -802,7 +809,7 @@ WebInspector.Spectrum.prototype = {
         var format = cf.RGB;
         if (this._colorFormat === cf.RGB)
             format = cf.HSL;
-        else if (this._colorFormat === cf.HSL && !this._color().hasAlpha())
+        else if (this._colorFormat === cf.HSL)

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

This change seems to be wrong. We cannot represent color with alpha in hex. Or
is it spectrum-only format?

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

Spectrum-only format, bit confusing I know sorry :(.

             format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX;
         this._innerSetColor(undefined, "", format, WebInspector.Spectrum._ChangeSource.Other);
     },