Devtools Color: Animate drag rearrangement of custom color palette

Source/devtools/front_end/elements/Spectrum.js

Index: Source/devtools/front_end/elements/Spectrum.js
diff --git a/Source/devtools/front_end/elements/Spectrum.js b/Source/devtools/front_end/elements/Spectrum.js
index 083c394c4d4038449fc0dd211fa986da395caf58..4c27644252e5259d2909bf32dd4773638a1b6b0e 100644
--- a/Source/devtools/front_end/elements/Spectrum.js
+++ b/Source/devtools/front_end/elements/Spectrum.js
@@ -258,8 +258,6 @@ WebInspector.Spectrum.prototype = {
         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
@@ -318,8 +316,25 @@ WebInspector.Spectrum.prototype = {
         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)" });
+            }
+        }
     },
 
     /**
@@ -376,6 +391,7 @@ WebInspector.Spectrum.prototype = {
             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;
     },