Devtools Color: Basic support for #RRGGBBAA and #RGBA

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

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * 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.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 72 matching lines @@
         inputValue.addEventListener("keydown", this._inputChanged.bind(this), false);
         inputValue.addEventListener("input", this._inputChanged.bind(this), false);
         inputValue.addEventListener("mousewheel", this._inputChanged.bind(this), false);
     }
 
     this._textLabels = this._displayContainer.createChild("div", "spectrum-text-label");
 
     // 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);
 
     var label = this._hexContainer.createChild("div", "spectrum-text-label");
     label.textContent = "HEX";
 
     WebInspector.installDragHandle(this._hueElement, dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, "default");
     WebInspector.installDragHandle(this._alphaElement, dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null, "default");
     WebInspector.installDragHandle(this._colorElement, dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, "default");
@@ skipping 54 matching lines @@
     /**
      * @param {!Event} event
      * @this {WebInspector.Spectrum}
      */
     function positionAlpha(event)
     {
         var newAlpha = Math.round((event.x - this._hueAlphaLeft) / this._hueAlphaWidth * 100) / 100;
         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);
     }
 
     /**
      * @param {!Event} event
      * @this {WebInspector.Spectrum}
      */
     function positionColor(event)
     {
         var hsva = this._hsv.slice();
@@ skipping 402 matching lines @@
         if (hsva !== undefined)
             this._hsv = hsva;
         if (colorString !== undefined)
             this._colorString = colorString;
         if (colorFormat !== undefined) {
             console.assert(colorFormat !== WebInspector.Color.Format.Original, "Spectrum's color format cannot be Original");
             if (colorFormat === WebInspector.Color.Format.RGBA)
                 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;
         }
 
         this._updateHelperLocations();
         this._updateUI();
 
         if (changeSource !== WebInspector.Spectrum._ChangeSource.Input)
             this._updateInput();
         if (changeSource !== WebInspector.Spectrum._ChangeSource.Model)
             this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChanged, this.colorString());
@@ skipping 29 matching lines @@
         if (colorString)
             return colorString;
 
         if (this._colorFormat === cf.Nickname || this._colorFormat === cf.ShortHEX) {
             colorString = color.asString(cf.HEX);
             if (colorString)
                 return colorString;
         }
 
         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()
     {
         var h = this._hsv[0];
         var s = this._hsv[1];
         var v = this._hsv[2];
         var alpha = this._hsv[3];
 
         // Where to show the little circle that displays your current selected color.
@@ skipping 16 matching lines @@
 
     _updateInput: function()
     {
         var cf = WebInspector.Color.Format;
         if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX || this._colorFormat === cf.Nickname) {
             this._hexContainer.hidden = false;
             this._displayContainer.hidden = true;
             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;
             this._displayContainer.hidden = false;
             var isRgb = this._colorFormat === cf.RGB;
             this._textLabels.textContent = isRgb ? "RGBA" : "HSLA";
             var colorValues = isRgb ? this._color().canonicalRGBA() : this._color().canonicalHSLA();
             for (var i = 0; i < 3; ++i) {
                 this._textValues[i].value = colorValues[i];
                 if (!isRgb && (i === 1 || i === 2))
@@ skipping 106 matching lines @@
         var noAlpha = WebInspector.Color.fromHSVA(this._hsv.slice(0,3).concat(1));
         this._alphaElementBackground.style.backgroundImage = String.sprintf("linear-gradient(to right, rgba(0,0,0,0), %s)", noAlpha.asString(WebInspector.Color.Format.RGB));
     },
 
     _formatViewSwitch: function()
     {
         var cf = WebInspector.Color.Format;
         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);
     },
 
     /**
      * @param {!Event} event
      */
     _inputChanged: function(event)
     {
         /**
@@ skipping 204 matching lines @@
     "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B", "#FDD835", "#FBC02D", "#F9A825", "#F57F17"],
     "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"],
     "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FB8C00", "#F57C00", "#EF6C00", "#E65100"],
     "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722", "#F4511E", "#E64A19", "#D84315", "#BF360C"],
     "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548", "#6D4C41", "#5D4037", "#4E342E", "#3E2723"],
     "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E", "#757575", "#616161", "#424242", "#212121"],
     "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B", "#546E7A", "#455A64", "#37474F", "#263238"]
 };
 
 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, matchUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteShades) };