Devtools Color: Drag to delete custom color in palettes

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 95 matching lines @@
     /** @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));
+
+    this._deleteIconToolbar = new WebInspector.Toolbar();
+    this._deleteIconToolbar.element.classList.add("delete-color-toolbar");
+    this._deleteButton = new WebInspector.ToolbarButton("", "garbage-collect-toolbar-item");
+    this._deleteIconToolbar.appendToolbarItem(this._deleteButton);
+
     var overlay = this.contentElement.createChild("div", "spectrum-overlay fill");
     overlay.addEventListener("click", this._togglePalettePanel.bind(this, false));
 
     this._addColorToolbar = new WebInspector.Toolbar();
     this._addColorToolbar.element.classList.add("add-color-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));
@@ skipping 125 matching lines @@
                 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 / WebInspector.Spectrum._itemsPerPaletteRow));
-        if (palette.mutable)
-            this.contentElement.appendChild(this._addColorToolbar.element);
-        else
+        if (palette.mutable) {
+            this._paletteContainer.appendChild(this._addColorToolbar.element);
+            this._paletteContainer.appendChild(this._deleteIconToolbar.element);
+        } else {
             this._addColorToolbar.element.remove();
+            this._deleteIconToolbar.element.remove();
+        }
 
         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 = Math.min(localX / WebInspector.Spectrum._colorChipSize | 0, WebInspector.Spectrum._itemsPerPaletteRow - 1);
         var row = (localY / WebInspector.Spectrum._colorChipSize) | 0;
-        return Math.min(row * WebInspector.Spectrum._itemsPerPaletteRow + col, this._paletteContainer.children.length - 1);
+        return Math.min(row * WebInspector.Spectrum._itemsPerPaletteRow + col, this._customPaletteSetting.get().colors.length - 1);
     },
 
     /**
+     * @param {!Event} e
+     * @return {boolean}
+     */
+    _isDraggingToBin: function(e)
+    {
+        return e.pageX > this._deleteIconToolbar.element.totalOffsetLeft();
+    },
+
+    /**
      * @param {!Event} e
      * @return {boolean}
      */
     _paletteDragStart: function(e)
     {
         var element = e.deepElementFromPoint();
-        if (!element.__mutable)
+        if (!element || !element.__mutable)
             return false;
 
         var index = this._slotIndexForEvent(e);
         this._dragElement = element;
         this._dragHotSpotX = e.pageX - (index % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
         this._dragHotSpotY = e.pageY - (index / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
+
+        this._deleteIconToolbar.element.classList.add("dragging");
         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 % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
         var offsetY = e.pageY - (newIndex / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
 
-        this._dragElement.style.transform = "translateX(" + (offsetX - this._dragHotSpotX) + "px) translateY(" + (offsetY - this._dragHotSpotY) + "px)";
+        var isDeleting = this._isDraggingToBin(e);
+        this._deleteIconToolbar.element.classList.toggle("delete-color-toolbar-active", isDeleting);
+        var dragElementTransform = "translateX(" + (offsetX - this._dragHotSpotX) + "px) translateY(" + (offsetY - this._dragHotSpotY) + "px)";
+        this._dragElement.style.transform = isDeleting ? dragElementTransform + " scale(0.8)" : dragElementTransform;
         var children = Array.prototype.slice.call(this._paletteContainer.children);
         var index = children.indexOf(this._dragElement);
         /** @type {!Map.<!Element, {left: number, top: number}>} */
         var swatchOffsets = new Map();
         for (var swatch of children)
             swatchOffsets.set(swatch, swatch.totalOffset());
 
         if (index !== newIndex)
             this._paletteContainer.insertBefore(this._dragElement, children[newIndex > index ? newIndex + 1 : newIndex]);
 
         for (var swatch of children) {
             if (swatch === this._dragElement)
                 continue;
             var before = swatchOffsets.get(swatch);
             var after = swatch.totalOffset();
             if (before.left !== after.left || before.top !== after.top) {
                 swatch.animate([
                     { transform: "translateX(" + (before.left - after.left) + "px) translateY(" + (before.top - after.top) + "px)" },
                     { transform: "none" }], { duration: 100, easing: "cubic-bezier(0, 0, 0.2, 1)" });
             }
         }
     },
 
     /**
      * @param {!Event} e
      */
     _paletteDragEnd: function(e)
     {
+        if (this._isDraggingToBin(e))
+            this._dragElement.remove();
         this._dragElement.style.removeProperty("transform");
         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);
+
+        this._deleteIconToolbar.element.classList.remove("dragging");
+        this._deleteIconToolbar.element.classList.remove("delete-color-toolbar-active");
+        this._deleteButton.setToggled(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);
@@ skipping 541 matching lines @@
     "#8BC34A",
     "#CDDC39",
     "#FFEB3B",
     "#FFC107",
     "#FF9800",
     "#FF5722",
     "#795548",
     "#9E9E9E",
     "#607D8B"
 ]};