DevTools: improve the color picker palette sorting algorithm.

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 223 matching lines @@
      * @param {boolean} animate
      * @param {!Event=} event
      */
     _showPalette: function(palette, animate, event)
     {
         this._paletteContainer.removeChildren();
         for (var i = 0; i < palette.colors.length; i++) {
             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);
         }
 
         var numItems = palette.colors.length;
         if (palette.mutable)
             numItems++;
         var rowsNeeded = Math.max(1, Math.ceil(numItems / 8));
         for (var i = 0; palette.mutable && i < rowsNeeded * 8 - numItems; i++)
             this._paletteContainer.createChild("div", "spectrum-palette-color empty-color");
         if (palette.mutable)
             this._paletteContainer.appendChild(this._addColorToolbar.element);
 
         this._togglePalettePanel(false);
         var paletteColorHeight = 12;
         var paletteMargin = 12;
         this.element.style.height = (this._paletteContainer.offsetTop + paletteMargin + (paletteColorHeight + paletteMargin) * rowsNeeded) + "px";
         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
      */
     _generatedPaletteLoaded: function(generatedPalette)
     {
         if (generatedPalette.colors.length)
             this._palettes.set(generatedPalette.title, generatedPalette);
         this._palettes.set(WebInspector.Spectrum.MaterialPalette.title, WebInspector.Spectrum.MaterialPalette);
         /** @type {!WebInspector.Spectrum.Palette} */
         var defaultCustomPalette = { title: "Custom", colors: [], mutable: true };
         this._customPaletteSetting = WebInspector.settings.createSetting("customColorPalette", defaultCustomPalette);
@@ skipping 34 matching lines @@
     },
 
     /**
      * @param {string} colorText
      */
     _paletteColorSelected: function(colorText)
     {
         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()
     {
         var palette = this._customPaletteSetting.get();
         palette.colors.push(this.colorString());
         this._customPaletteSetting.set(palette);
         this._showPalette(this._customPaletteSetting.get(), false);
     },
 
@@ skipping 396 matching lines @@
 
     _finish: function()
     {
         /**
          * @param {string} a
          * @param {string} b
          * @return {number}
          */
         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];

[dgozman, 2015/08/19 20:27:44]

nit: spaces around *

+
+            return (hsvb[0] + 0.94) % 1 - (hsva[0] + 0.94) % 1;
         }
 
         var colors = this._frequencyMap.keysArray();
         colors = colors.sort(this._frequencyComparator.bind(this));
         /** @type {!Map.<string, !WebInspector.Color>} */
         var paletteColors = new Map();
         var colorsPerRow = 24;
         while (paletteColors.size < colorsPerRow && colors.length) {
             var colorText = colors.shift();
             var color = WebInspector.Color.parse(colorText);
@@ skipping 11 matching lines @@
      * @this {WebInspector.Spectrum.PaletteGenerator}
      */
     _processStylesheet: function(stylesheet, resolve)
     {
         /**
          * @param {?string} text
          * @this {WebInspector.Spectrum.PaletteGenerator}
          */
         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);
             }
             resolve(null);
         }
 
         stylesheet.requestContent(parseContent.bind(this));
     }
 }
@@ skipping 12 matching lines @@
     "#8BC34A",
     "#CDDC39",
     "#FFEB3B",
     "#FFC107",
     "#FF9800",
     "#FF5722",
     "#795548",
     "#9E9E9E",
     "#607D8B"
 ]};