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.HEX;
         this._innerSetColor(hsva, "", colorFormat, WebInspector.Spectrum._ChangeSource.Other);
     }
 
     /**
      * @param {!Event} event
      * @this {WebInspector.Spectrum}
      */
     function positionColor(event)
     {
         var hsva = this._hsv.slice();
@@ skipping 397 matching lines @@
      * @param {string|undefined} colorFormat
      * @param {string} changeSource
      */
     _innerSetColor: function(hsva, colorString, colorFormat, changeSource)
     {
         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;
+            var cf = WebInspector.Color.Format;
+            console.assert(colorFormat !== cf.Original, "Spectrum's color format cannot be Original");
+            if (colorFormat === cf.RGBA)
+                colorFormat = cf.RGB;
+            else if (colorFormat === cf.HSLA)
+                colorFormat = cf.HSL;
+            else if (colorFormat === cf.HEXA)
+                colorFormat = cf.HEX;
+            else if (colorFormat === cf.ShortHEXA)
+                colorFormat = cf.ShortHEX;
             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 22 matching lines @@
     colorString: function()
     {
         if (this._colorString)
             return this._colorString;
         var cf = WebInspector.Color.Format;
         var color = this._color();
         var colorString = color.asString(this._colorFormat);
         if (colorString)
             return colorString;
 
-        if (this._colorFormat === cf.Nickname || this._colorFormat === cf.ShortHEX) {
+        if (this._colorFormat === cf.Nickname) {
             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.ShortHEX)
+            return /** @type {string} */(color.asString(color.detectHEXFormat()));
+        if (this._colorFormat === cf.HEX)
+            return /** @type {string} */(color.asString(color.hasAlpha() ? cf.HEXA : cf.HEX));

[dgozman, 2016/05/20 00:55:15]

If I'm not missing something, this could return null, and we should check it.

[samli, 2016/05/20 01:58:02]

Done.

+        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 13 matching lines @@
         var alphaSlideX = alpha * this._hueAlphaWidth - this.slideHelperWidth;
         this._alphaSlider.style.left = alphaSlideX + "px";
     },
 
     _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);
+            if (this._colorFormat === cf.ShortHEX)
+                this._hexValue.value = this._color().asString(this._color().detectHEXFormat());
             else
-                this._hexValue.value = this._color().asString(cf.HEX);
+                // Don't use short HEX if original was not in that format.
+                this._hexValue.value = this._color().asString(this._color().hasAlpha() ? cf.HEXA : 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)
             format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX;
         this._innerSetColor(undefined, "", format, WebInspector.Spectrum._ChangeSource.Other);
     },
 
     /**
      * @param {!Event} event
      */
     _inputChanged: function(event)
     {
         /**
@@ skipping 26 matching lines @@
             var format = this._colorFormat === cf.RGB ? "rgba" : "hsla";
             var values = this._textValues.map(elementValue).join(",");
             colorString = String.sprintf("%s(%s)", format, values);
         }
 
         var color = WebInspector.Color.parse(colorString);
         if (!color)
             return;
         var hsv = color.hsva();
         if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX)
-            this._colorFormat = color.canBeShortHex() ? cf.ShortHEX : cf.HEX;
+            this._colorFormat = color.detectHEXFormat();
         this._innerSetColor(hsv, colorString, undefined, WebInspector.Spectrum._ChangeSource.Input);
     },
 
     wasShown: function()
     {
         this._hueAlphaWidth = this._hueElement.offsetWidth;
         this.slideHelperWidth = this._hueSlider.offsetWidth / 2;
         this.dragWidth = this._colorElement.offsetWidth;
         this.dragHeight = this._colorElement.offsetHeight;
         this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2;
@@ skipping 157 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) };