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

NOTRY=true

Review URL: https://codereview.chromium.org/1308563002

git-svn-id: svn://svn.chromium.org/blink/trunk@201008 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/elements/Spectrum.js

@@ -102,13 +102,14 @@ WebInspector.Spectrum = function()
     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");
+    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));
@@ -116,12 +117,12 @@ WebInspector.Spectrum = function()
     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));
-    }
 
     /**
      * @param {function(!Event)} callback
@@ -187,6 +188,9 @@ WebInspector.Spectrum.Events = {
     SizeChanged: "SizeChanged"
 };
 
+WebInspector.Spectrum._colorChipSize = 24;
+WebInspector.Spectrum._itemsPerPaletteRow = 8;
+
 WebInspector.Spectrum.prototype = {
     _updatePalettePanel: function()
     {
@@ -240,20 +244,26 @@ WebInspector.Spectrum.prototype = {
         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;
+                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++)
+        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._paletteContainer.appendChild(this._addColorToolbar.element);
+            this.contentElement.appendChild(this._addColorToolbar.element);
+        else
+            this._addColorToolbar.element.remove();
 
         this._togglePalettePanel(false);
         var paletteColorHeight = 12;
@@ -262,6 +272,76 @@ WebInspector.Spectrum.prototype = {
         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);
+    },
+
+    /**
+     * @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 % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
+        this._dragHotSpotY = e.pageY - (index / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
+        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.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]);
+    },
+
+    /**
+     * @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
      */
@@ -334,22 +414,28 @@ WebInspector.Spectrum.prototype = {
      */
     _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));
+            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)
-            palette.colors.splice(colorIndex, 1);
+        if (toRight)
+            palette.colors.splice(colorIndex + 1, palette.colors.length - colorIndex - 1);
         else
-            palette.colors = [];
+            palette.colors.splice(colorIndex, 1);
         this._customPaletteSetting.set(palette);
         this._showPalette(this._customPaletteSetting.get(), false);
     },

third_party/WebKit/Source/devtools/front_end/elements/spectrum.css

@@ -88,12 +88,12 @@
 }
 
 .swatch {
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
     margin: 0;
     position: absolute;
-    top: 148px;
-    left: 48px;
+    top: 144px;
+    left: 47px;
     background-image: url(Images/checker.png);
     border-radius: 16px;
 }
@@ -190,36 +190,38 @@
     position: absolute;
     top: 235px;
     width: 100%;
-    padding-right: 24px;
+    padding: 6px 24px 6px 6px;
     display: flex;
     flex-wrap: wrap;
 }
 
 .spectrum-palette-color {
+    width: 12px;
     height: 12px;
     flex: 0 0 12px;
     display: inline-block;
     border-radius: 2px;
-    margin-left: 12px;
-    margin-top: 12px;
+    margin: 6px;
     cursor: pointer;
 }
 
-.spectrum-palette-color.empty-color {
-    border: 1px solid #dadada;
-}
-
 .spectrum-palette > .spectrum-palette-color {
     transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.spectrum-palette > .spectrum-palette-color.empty-color {
+    border-color: transparent;
 }
 
 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover {
     transform: scale(1.15);
 }
 
-.spectrum-palette > .toolbar {
-    margin-left: 5px;
-    margin-top: 5px;
+.add-color-toolbar {
+    position: absolute;
+    right: 29px;
+    bottom: 5px;
 }
 
 .spectrum-palette-switcher {

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -126,7 +126,6 @@ WebInspector.Main.prototype = {
         Runtime.experiments.register("applyCustomStylesheet", "Allow custom UI themes");
         Runtime.experiments.register("blackboxJSFramesOnTimeline", "Blackbox JavaScript frames on Timeline", true);
         Runtime.experiments.register("colorContrastRatio", "Contrast ratio line in color picker", true);
-        Runtime.experiments.register("colorPalettes", "Color palettes");
         Runtime.experiments.register("customObjectFormatters", "Custom object formatters", true);
         Runtime.experiments.register("emptySourceMapAutoStepping", "Empty sourcemap auto-stepping");
         Runtime.experiments.register("fileSystemInspection", "FileSystem inspection");

third_party/WebKit/Source/devtools/front_end/ui/Tooltip.js

@@ -13,8 +13,8 @@ WebInspector.Tooltip = function(doc)
     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui/tooltip.css"));
 
     this._tooltipElement = this._shadowRoot.createChild("div", "tooltip");
-    doc.addEventListener("mousemove", this._mouseMove.bind(this), false);
-    doc.addEventListener("mousedown", this._hide.bind(this), false);
+    doc.addEventListener("mousemove", this._mouseMove.bind(this), true);
+    doc.addEventListener("mousedown", this._hide.bind(this), true);
 }
 
 WebInspector.Tooltip.Timing = {