Modified: trunk/Source/WebInspectorUI/ChangeLog (188478 => 188479)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 18:06:51 UTC (rev 188478)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 18:31:38 UTC (rev 188479)
@@ -1,3 +1,30 @@
+2015-08-14 Devin Rousso <[email protected]>
+
+ Web Inspector: Add a visual editor for timing functions
+ https://bugs.webkit.org/show_bug.cgi?id=148022
+
+ Reviewed by Timothy Hatcher.
+
+ Uses the existing bezier editor and the Visual keyword picker to make an editor for timing functions.
+
+ * UserInterface/Views/VisualStyleTimingEditor.css: Added.
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container):
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .keyword-picker-select):
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor):
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover):
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active):
+
+ * UserInterface/Views/VisualStyleTimingEditor.js: Added.
+ (WebInspector.VisualStyleTimingEditor):
+ (WebInspector.VisualStyleTimingEditor.prototype.parseValue):
+ (WebInspector.VisualStyleTimingEditor.prototype.get bezierValue):
+ (WebInspector.VisualStyleTimingEditor.prototype.set bezierValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._getValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._setValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._generateSynthesizedValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._bezierMarkerClicked):
+ (WebInspector.VisualStyleTimingEditor.prototype._handleKeywordChanged):
+
2015-08-13 Nikita Vasilyev <[email protected]>
Web Inspector: Can't resize split console when window is too narrow
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css (0 => 188479)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css 2015-08-14 18:31:38 UTC (rev 188479)
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2015 Apple Inc. 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
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container {
+ display: flex;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .keyword-picker-select {
+ order: 1;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
+ width: 23px;
+ height: 20px;
+ margin: 0 2px 0 0.5px;
+ content: url(../Images/CubicBezier.svg);
+ cursor: default;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover {
+ filter: brightness(0.9);
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active {
+ filter: brightness(0.8);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js (0 => 188479)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js 2015-08-14 18:31:38 UTC (rev 188479)
@@ -0,0 +1,119 @@
+/*
+ * Copyright (C) 2015 Apple Inc. 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
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleTimingEditor = class VisualStyleTimingEditor extends WebInspector.VisualStyleKeywordPicker
+{
+ constructor(propertyNames, text, possibleValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, layoutReversed);
+
+ this.element.classList.add("timing-editor");
+
+ this._customValueOptionElement = document.createElement("option");
+ this._customValueOptionElement.value = "custom";
+ this._customValueOptionElement.text = WebInspector.UIString("Custom");
+ this._keywordSelectElement.appendChild(this._customValueOptionElement);
+
+ this._bezierMarkerElement = document.createElement("span");
+ this._bezierMarkerElement.title = WebInspector.UIString("Click to open a cubic-bezier editor");
+ this._bezierMarkerElement.classList.add("bezier-editor");
+ this._bezierMarkerElement.hidden = true;
+ this._bezierMarkerElement.addEventListener("click", this._bezierMarkerClicked.bind(this));
+ this.contentElement.appendChild(this._bezierMarkerElement);
+
+ this._bezierEditor = new WebInspector.BezierEditor;
+ this._bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueDidChange.bind(this));
+ this._bezierEditor.bezier = WebInspector.CubicBezier.fromString("linear");
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ return /(cubic-bezier\(.+\))/.exec(text);
+ }
+
+ get bezierValue()
+ {
+ let bezier = this._bezierEditor.bezier;
+ if (!bezier)
+ return null;
+
+ return bezier.toString();
+ }
+
+ set bezierValue(text)
+ {
+ let bezier = WebInspector.CubicBezier.fromString(text);
+ this._bezierEditor.bezier = bezier;
+ }
+
+ // Private
+
+ _getValue()
+ {
+ return this._customValueOptionElement.selected ? this.bezierValue : super._getValue();
+ }
+
+ _setValue(value)
+ {
+ this.bezierValue = value;
+ if (this.valueIsSupportedKeyword(value)) {
+ super._setValue(value);
+ this._bezierMarkerElement.hidden = true;
+ return;
+ }
+
+ let bezier = this.bezierValue;
+ this._customValueOptionElement.selected = !!bezier;
+ this._bezierMarkerElement.hidden = !bezier;
+ this.specialPropertyPlaceholderElement.hidden = !!bezier;
+ if (!bezier)
+ super._setValue(value);
+ }
+
+ _generateSynthesizedValue()
+ {
+ return this._customValueOptionElement.selected ? this.bezierValue : super._generateSynthesizedValue();
+ }
+
+ _bezierMarkerClicked()
+ {
+ let bounds = WebInspector.Rect.rectFromClientRect(this._bezierMarkerElement.getBoundingClientRect());
+ this._cubicBezierEditorPopover = new WebInspector.Popover(this);
+ this._cubicBezierEditorPopover.content = this._bezierEditor.element;
+ this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+ }
+
+ _handleKeywordChanged()
+ {
+ super._handleKeywordChanged();
+ let customOptionSelected = this._customValueOptionElement.selected;
+ this._bezierMarkerElement.hidden = !customOptionSelected;
+ this.specialPropertyPlaceholderElement.hidden = !!customOptionSelected;
+ if (customOptionSelected)
+ this.bezierValue = "linear";
+ }
+};
