DevTools: allow editing custom color palette, move it out of experimental.

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 84 matching lines @@
     this._hexValue.addEventListener("keydown", 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");
 
-    if (Runtime.experiments.isEnabled("colorPalettes")) {
-        this.element.classList.add("palettes-enabled");
-        /** @type {!Map.<string, !WebInspector.Spectrum.Palette>} */
-        this._palettes = new Map();
-        this._palettePanel = this.contentElement.createChild("div", "palette-panel");
-        this._palettePanelShowing = false;
-        this._paletteContainer = this.contentElement.createChild("div", "spectrum-palette");
-        var paletteSwitcher = this.contentElement.createChild("div", "spectrum-palette-switcher spectrum-switcher");
-        appendSwitcherIcon(paletteSwitcher);
-        paletteSwitcher.addEventListener("click", this._togglePalettePanel.bind(this, true));
-        var overlay = this.contentElement.createChild("div", "spectrum-overlay fill");
-        overlay.addEventListener("click", this._togglePalettePanel.bind(this, false));
+    this.element.classList.add("palettes-enabled");
+    /** @type {!Map.<string, !WebInspector.Spectrum.Palette>} */
+    this._palettes = new Map();
+    this._palettePanel = this.contentElement.createChild("div", "palette-panel");
+    this._palettePanelShowing = false;
+    this._paletteContainer = this.contentElement.createChild("div", "spectrum-palette");
+    this._paletteContainer.addEventListener("contextmenu", this._showPaletteColorContextMenu.bind(this, -1));
+    WebInspector.installDragHandle(this._paletteContainer, this._paletteDragStart.bind(this), this._paletteDrag.bind(this), this._paletteDragEnd.bind(this), "default");
+    var paletteSwitcher = this.contentElement.createChild("div", "spectrum-palette-switcher spectrum-switcher");
+    appendSwitcherIcon(paletteSwitcher);
+    paletteSwitcher.addEventListener("click", this._togglePalettePanel.bind(this, true));
+    var overlay = this.contentElement.createChild("div", "spectrum-overlay fill");
+    overlay.addEventListener("click", this._togglePalettePanel.bind(this, false));
 
-        this._addColorToolbar = new WebInspector.Toolbar();
-        var addColorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Add to palette"), "add-toolbar-item");
-        addColorButton.addEventListener("click", this._addColorToCustomPalette.bind(this));
-        this._addColorToolbar.appendToolbarItem(addColorButton);
+    this._addColorToolbar = new WebInspector.Toolbar();
+    var addColorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Add to palette"), "add-toolbar-item");
+    addColorButton.addEventListener("click", this._addColorToCustomPalette.bind(this));
+    this._addColorToolbar.appendToolbarItem(addColorButton);
 
-        new WebInspector.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
-    }
+    new WebInspector.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
 
     /**
      * @param {function(!Event)} callback
      * @param {!Event} event
      * @return {boolean}
      * @this {WebInspector.Spectrum}
      */
     function dragStart(callback, event)
     {
         this._hueAlphaLeft = this._hueElement.totalOffsetLeft();
@@ skipping 98 matching lines @@
      * @param {!WebInspector.Spectrum.Palette} palette
      * @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]));
-            if (palette.mutable)
+            colorElement.addEventListener("mousedown", this._paletteColorSelected.bind(this, palette.colors[i]));
+            if (palette.mutable) {
+                colorElement.__mutable = true;

[dgozman, 2015/08/21 01:11:29]

Could use |this._paletteContainerMutable| instead.

+                colorElement.__color = palette.colors[i];
                 colorElement.addEventListener("contextmenu", this._showPaletteColorContextMenu.bind(this, i));
+            }
             this._paletteContainer.appendChild(colorElement);
         }
+        this._paletteContainerMutable = palette.mutable;
 
         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 {!Event} e
+     * @return {number}
+     */
+    _slotIndexForEvent: function(e)
+    {
+        var localX = e.pageX - this._paletteContainer.totalOffsetLeft();
+        var localY = e.pageY - this._paletteContainer.totalOffsetTop();
+        var col = localX / 24 % 8 | 0;

[dgozman, 2015/08/21 01:11:29]

nit: add parenthesis for consistency.

[dgozman, 2015/08/21 01:11:29]

Why %8, and not Math.min(, 7)?

+        var row = (localY / 24) | 0;

[dgozman, 2015/08/21 01:11:28]

24 to named constant!

+        return Math.min(row * 8 + col, this._paletteContainer.children.length - 2);

[dgozman, 2015/08/21 01:11:29]

Let's move add button out of container.

+    },
+
+    /**
+     * @param {!Event} e
+     * @return {boolean}
+     */
+    _paletteDragStart: function(e)
+    {
+        var element = e.deepElementFromPoint();
+        if (!element.__mutable)
+            return false;
+
+        var index = this._slotIndexForEvent(e);
+        this._dragElement = element;
+        this._dragHotSpotX = e.pageX - (index % 8) * 24;
+        this._dragHotSpotY = e.pageY - (index / 8 | 0) * 24;
+        return true;
+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _paletteDrag: function(e)
+    {
+        if (e.pageX < this._paletteContainer.totalOffsetLeft() || e.pageY < this._paletteContainer.totalOffsetTop())
+            return;
+        var newIndex = this._slotIndexForEvent(e);
+        var offsetX = e.pageX - (newIndex % 8) * 24;
+        var offsetY = e.pageY - (newIndex / 8 | 0) * 24;
+
+        this._dragElement.style.position = "relative";
+        this._dragElement.style.left = (offsetX - this._dragHotSpotX) + "px";
+        this._dragElement.style.top = (offsetY - this._dragHotSpotY) + "px";
+        var children = Array.prototype.slice.call(this._paletteContainer.children);
+        var index = children.indexOf(this._dragElement);
+        if (index !== newIndex)
+             this._paletteContainer.insertBefore(this._dragElement, children[newIndex > index ? newIndex + 1 : newIndex]);

[dgozman, 2015/08/21 01:11:29]

nit: weird indent. Presubmit?

+    },
+
+    /**
+     * @param {!Event} e
+     */
+    _paletteDragEnd: function(e)
+    {
+        this._dragElement.style.removeProperty("position");
+        this._dragElement.style.removeProperty("left");
+        this._dragElement.style.removeProperty("top");
+        var children = this._paletteContainer.children;
+        var colors = [];
+        for (var i = 0; i < children.length; ++i) {
+            if (children[i].__color)
+                colors.push(children[i].__color);
+        }
+        var palette = this._customPaletteSetting.get();
+        palette.colors = colors;
+        this._customPaletteSetting.set(palette);
+        this._showPalette(this._customPaletteSetting.get(), false);
+    },
+
+    /**
      * @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 51 matching lines @@
         this._customPaletteSetting.set(palette);
         this._showPalette(this._customPaletteSetting.get(), false);
     },
 
     /**
      * @param {number} colorIndex
      * @param {!Event} event
      */
     _showPaletteColorContextMenu: function(colorIndex, event)
     {
+        if (!this._paletteContainerMutable)
+            return;
         var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendItem(WebInspector.UIString("Remove color"), this._deletePaletteColor.bind(this, colorIndex));
-        contextMenu.appendItem(WebInspector.UIString("Clear palette"), this._deletePaletteColor.bind(this, undefined));
+        if (colorIndex !== -1) {
+            contextMenu.appendItem(WebInspector.UIString("Remove color"), this._deletePaletteColors.bind(this, colorIndex, false));

[dgozman, 2015/08/21 01:11:29]

We use |UIString.capitalize| in context menus.

+            contextMenu.appendItem(WebInspector.UIString("Remove all to the right"), this._deletePaletteColors.bind(this, colorIndex, true));
+        }
+        contextMenu.appendItem(WebInspector.UIString("Clear palette"), this._deletePaletteColors.bind(this, -1, true));
         contextMenu.show();
     },
 
     /**
-     * @param {number=} colorIndex
+     * @param {number} colorIndex
+     * @param {boolean} toRight
      */
-    _deletePaletteColor: function(colorIndex)
+    _deletePaletteColors: function(colorIndex, toRight)
     {
         var palette = this._customPaletteSetting.get();
-        if (colorIndex !== undefined)
+        if (toRight)
+            palette.colors.splice(colorIndex + 1, palette.colors.length - colorIndex - 1);
+        else
             palette.colors.splice(colorIndex, 1);
-        else
-            palette.colors = [];
         this._customPaletteSetting.set(palette);
         this._showPalette(this._customPaletteSetting.get(), false);
     },
 
     /**
      * @param {!WebInspector.Color} color
      * @param {string} colorFormat
      */
     setColor: function(color, colorFormat)
     {
@@ skipping 445 matching lines @@
     "#8BC34A",
     "#CDDC39",
     "#FFEB3B",
     "#FFC107",
     "#FF9800",
     "#FF5722",
     "#795548",
     "#9E9E9E",
     "#607D8B"
 ]};