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 33 matching lines @@
      * @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.position = "relative";
-        this._dragElement.style.left = (offsetX - this._dragHotSpotX) + "px";
-        this._dragElement.style.top = (offsetY - this._dragHotSpotY) + "px";
+        this._dragElement.style.transform = "translateX(" + (offsetX - this._dragHotSpotX) + "px) translateY(" + (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");
+        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);
@@ skipping 551 matching lines @@
     "#8BC34A",
     "#CDDC39",
     "#FFEB3B",
     "#FFC107",
     "#FF9800",
     "#FF5722",
     "#795548",
     "#9E9E9E",
     "#607D8B"
 ]};