Devtools Animations: Add cubic bezier easing editor for animations

Source/devtools/front_end/elements/StylesPopoverIcon.js

+// Copyright (c) 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylePropertyTreeElement} treeElement
+ * @param {!WebInspector.EditorPopoverHelper} editorPopoverHelper
+ * @param {string} text
+ */
+WebInspector.BezierPopoverIcon = function(treeElement, editorPopoverHelper, text)
+{
+    this._treeElement = treeElement;
+    this._editorPopoverHelper = editorPopoverHelper;
+    this._createDOM(text);
+
+    this._boundBezierChanged = this._bezierChanged.bind(this);
+}
+
+/**
+ * @param {!Element} parentElement
+ * @return {!Element}
+ */
+WebInspector.BezierPopoverIcon.createIcon = function(parentElement)
+{
+    var element = parentElement.createSVGChild("svg", "popover-icon bezier-icon");
+    element.setAttribute("height", 10);
+    element.setAttribute("width", 10);
+    var path = element.createSVGChild("path");
+    path.setAttribute("d", "M2,8 C2,3 8,7 8,2");
+    return element;
+}
+
+WebInspector.BezierPopoverIcon.prototype = {
+    /**
+     * @return {!Element}
+     */
+    element: function()
+    {
+        return this._element;
+    },
+
+    /**
+     * @param {string} text
+     */
+    _createDOM: function(text)
+    {
+        this._element = createElement("nobr");
+        this._iconElement = WebInspector.BezierPopoverIcon.createIcon(this._element);
+        this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
+        this._bezierValueElement = this._element.createChild("span");
+        this._bezierValueElement.textContent = text;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _iconClick: function(event)
+    {
+        event.consume(true);
+        if (this._editorPopoverHelper.isShowing()) {
+            this._editorPopoverHelper.hide(true);
+            return;
+        }
+
+        this._bezierEditor = new WebInspector.BezierEditor();
+        var geometry = WebInspector.Geometry.CubicBezier.parse(this._bezierValueElement.textContent);
+        this._bezierEditor.setBezier(geometry);
+        this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._boundBezierChanged);
+        var scrollerElement = this._iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        this._editorPopoverHelper.show(this._bezierEditor, this._iconElement, scrollerElement, this._onPopoverHidden.bind(this));
+
+        this._originalPropertyText = this._treeElement.property.propertyText;
+        this._treeElement.parentPane().setEditingStyle(true);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _bezierChanged: function(event)
+    {
+        this._bezierValueElement.textContent = /** @type {string} */ (event.data);
+        this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
+    },
+
+    /**
+     * @param {boolean} commitEdit
+     */
+    _onPopoverHidden: function(commitEdit)
+    {
+        this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._boundBezierChanged);
+        delete this._bezierEditor;
+
+        var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText;
+        this._treeElement.applyStyleText(propertyText, true);
+        this._treeElement.parentPane().setEditingStyle(false);
+        delete this._originalPropertyText;
+    }
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylePropertyTreeElement} treeElement
+ * @param {!WebInspector.EditorPopoverHelper} editorPopoverHelper
+ * @param {string} colorText
+ */
+WebInspector.ColorSwatchPopoverIcon = function(treeElement, editorPopoverHelper, colorText)
+{
+    this._treeElement = treeElement;
+    this._editorPopoverHelper = editorPopoverHelper;
+
+    this._swatch = WebInspector.ColorSwatch.create();
+    this._swatch.setColorText(colorText);
+    this._swatch.setFormat(WebInspector.ColorSwatchPopoverIcon._colorFormat(this._swatch.color()));
+    var shiftClickMessage = WebInspector.UIString("Shift-click to change color format.");
+    this._swatch.iconElement().title = String.sprintf("%s\n%s", WebInspector.UIString("Click to open a colorpicker."), shiftClickMessage);
+    this._swatch.iconElement().addEventListener("click", this._iconClick.bind(this));
+
+    this._boundSpectrumChanged = this._spectrumChanged.bind(this);
+}
+
+/**
+ * @param {!WebInspector.Color} color
+ * @return {!WebInspector.Color.Format}
+ */
+WebInspector.ColorSwatchPopoverIcon._colorFormat = function(color)
+{
+    const cf = WebInspector.Color.Format;
+    var format;
+    var formatSetting = WebInspector.moduleSetting("colorFormat").get();
+    if (formatSetting === cf.Original)
+        format = cf.Original;
+    else if (formatSetting === cf.RGB)
+        format = (color.hasAlpha() ? cf.RGBA : cf.RGB);
+    else if (formatSetting === cf.HSL)
+        format = (color.hasAlpha() ? cf.HSLA : cf.HSL);
+    else if (!color.hasAlpha())
+        format = (color.canBeShortHex() ? cf.ShortHEX : cf.HEX);
+    else
+        format = cf.RGBA;
+
+    return format;
+}
+
+WebInspector.ColorSwatchPopoverIcon.prototype = {
+    /**
+     * @return {!Element}
+     */
+    element: function()
+    {
+        return this._swatch;
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _iconClick: function(event)
+    {
+        event.consume(true);
+        if (this._editorPopoverHelper.isShowing()) {
+            this._editorPopoverHelper.hide(true);
+            return;
+        }
+
+        var color = this._swatch.color();
+        var format = this._swatch.format();
+        if (format === WebInspector.Color.Format.Original)
+            format = color.format();
+        this._spectrum = new WebInspector.Spectrum();
+        this._spectrum.setColor(color);
+        this._spectrum.setColorFormat(format);
+        this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._boundSpectrumChanged);
+        var scrollerElement = this._swatch.iconElement().enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        this._editorPopoverHelper.show(this._spectrum, this._swatch.iconElement(), scrollerElement, this._onPopoverHidden.bind(this));
+
+        this._originalPropertyText = this._treeElement.property.propertyText;
+        this._treeElement.parentPane().setEditingStyle(true);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _spectrumChanged: function(event)
+    {
+        var colorString = /** @type {string} */ (event.data);
+        this._swatch.setColorText(colorString);
+        this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
+    },
+
+    /**
+     * @param {boolean} commitEdit
+     */
+    _onPopoverHidden: function(commitEdit)
+    {
+        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._boundSpectrumChanged);
+        delete this._spectrum;
+
+        var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText;
+        this._treeElement.applyStyleText(propertyText, true);
+        this._treeElement.parentPane().setEditingStyle(false);
+        delete this._originalPropertyText;
+    }
+}