DevTools: improve the color picker palette sorting algorithm.

Review URL: https://codereview.chromium.org/1297903005

git-svn-id: svn://svn.chromium.org/blink/trunk@200863 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -241,8 +241,6 @@ WebInspector.Spectrum.prototype = {
             var animationDelay = animate ? i * 100 / palette.colors.length : 0;
             var colorElement = this._createPaletteColor(palette.colors[i], animationDelay);
             colorElement.addEventListener("click", this._paletteColorSelected.bind(this, palette.colors[i]));
-            colorElement.addEventListener("mouseover", this._liveApplyStart.bind(this, palette.colors[i]));
-            colorElement.addEventListener("mouseout", this._liveApplyEnd.bind(this));
             if (palette.mutable)
                 colorElement.addEventListener("contextmenu", this._showPaletteColorContextMenu.bind(this, i));
             this._paletteContainer.appendChild(colorElement);
@@ -264,30 +262,6 @@ WebInspector.Spectrum.prototype = {
         this.dispatchEventToListeners(WebInspector.Spectrum.Events.SizeChanged);
     },
 
-    /**
-     * @param {string} colorText
-     */
-    _liveApplyStart: function(colorText)
-    {
-        this._underlyingHSV = this._hsv;
-        this._underlyingFormat = this._colorFormat;
-        this._underlyingColorString = this._colorString;
-        var color = WebInspector.Color.parse(colorText);
-        if (!color)
-            return;
-        this._innerSetColor(color.hsva(), colorText, color.format(), WebInspector.Spectrum._ChangeSource.Other);
-    },
-
-    _liveApplyEnd: function()
-    {
-        if (!this._underlyingHSV)
-            return;
-        this._innerSetColor(this._underlyingHSV, this._underlyingColorString, this._underlyingFormat, WebInspector.Spectrum._ChangeSource.Other);
-        delete this._underlyingHSV;
-        delete this._underlyingFormat;
-        delete this._underlyingColorString;
-    },
-
     /**
      * @param {!WebInspector.Spectrum.Palette} generatedPalette
      */
@@ -343,8 +317,7 @@ WebInspector.Spectrum.prototype = {
         var color = WebInspector.Color.parse(colorText);
         if (!color)
             return;
-        this._innerSetColor(color.hsva(), colorText, color.format(), WebInspector.Spectrum._ChangeSource.Other);
-        delete this._underlyingHSV;
+        this._innerSetColor(color.hsva(), colorText, undefined, WebInspector.Spectrum._ChangeSource.Other);
     },
 
     _addColorToCustomPalette: function()
@@ -761,7 +734,22 @@ WebInspector.Spectrum.PaletteGenerator.prototype = {
          */
         function hueComparator(a, b)
         {
-            return paletteColors.get(b).hsva()[0] - paletteColors.get(a).hsva()[0];
+            var hsva = paletteColors.get(a).hsva();
+            var hsvb = paletteColors.get(b).hsva();
+
+            // First trim the shades of gray
+            if (hsvb[1] < 0.12 && hsva[1] < 0.12)
+                return hsvb[2]*hsvb[3] - hsva[2]*hsva[3];
+            if (hsvb[1] < 0.12)
+                return -1;
+            if (hsva[1] < 0.12)
+                return 1;
+
+            // Equal hue -> sort by sat
+            if (hsvb[0] === hsva[0])
+                return hsvb[1]*hsvb[3] - hsva[1]*hsva[3];
+
+            return (hsvb[0] + 0.94) % 1 - (hsva[0] + 0.94) % 1;
         }
 
         var colors = this._frequencyMap.keysArray();
@@ -793,7 +781,8 @@ WebInspector.Spectrum.PaletteGenerator.prototype = {
          */
         function parseContent(text)
         {
-            var regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3})/g) || [];
+            text = text.toLowerCase();
+            var regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g) || [];
             for (var c of regexResult) {
                 var frequency = this._frequencyMap.get(c) || 0;
                 this._frequencyMap.set(c, ++frequency);

third_party/WebKit/Source/devtools/front_end/elements/spectrum.css

@@ -202,6 +202,7 @@
     border-radius: 2px;
     margin-left: 12px;
     margin-top: 12px;
+    cursor: pointer;
 }
 
 .spectrum-palette-color.empty-color {
@@ -268,6 +269,7 @@
 
 div.palette-preview {
     display: flex;
+    cursor: pointer;
 }
 
 .palette-preview-title {
@@ -276,7 +278,6 @@ div.palette-preview {
 
 .palette-preview > .spectrum-palette-color {
     margin-top: 1px;
-    cursor: default;
 }
 
 .palette-preview:hover {