Devtools Color: Animate drag rearrangement of custom color palette

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 240 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));
-        for (var i = 0; palette.mutable && i < rowsNeeded * WebInspector.Spectrum._itemsPerPaletteRow - numItems; i++)
-            this._paletteContainer.createChild("div", "spectrum-palette-color empty-color");
         if (palette.mutable)
             this.contentElement.appendChild(this._addColorToolbar.element);
         else
             this._addColorToolbar.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);
@@ skipping 38 matching lines @@
             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.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);
+        /** @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)
     {
         this._dragElement.style.removeProperty("position");
         this._dragElement.style.removeProperty("left");
         this._dragElement.style.removeProperty("top");
@@ skipping 36 matching lines @@
     _createPreviewPaletteElement: function(palette)
     {
         var colorsPerPreviewRow = 5;
         var previewElement = createElementWithClass("div", "palette-preview");
         var titleElement = previewElement.createChild("div", "palette-preview-title");
         titleElement.textContent = palette.title;
         for (var i = 0; i < colorsPerPreviewRow && i < palette.colors.length; i++)
             previewElement.appendChild(this._createPaletteColor(palette.colors[i]));
         for (; i < colorsPerPreviewRow; i++)
             previewElement.createChild("div", "spectrum-palette-color empty-color");
+
         previewElement.addEventListener("click", this._paletteSelected.bind(this, palette));
         return previewElement;
     },
 
     /**
      * @param {!WebInspector.Spectrum.Palette} palette
      */
     _paletteSelected: function(palette)
     {
         this._selectedColorPalette.set(palette.title);
@@ skipping 505 matching lines @@
     "#8BC34A",
     "#CDDC39",
     "#FFEB3B",
     "#FFC107",
     "#FF9800",
     "#FF5722",
     "#795548",
     "#9E9E9E",
     "#607D8B"
 ]};