Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188027 => 188028)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-06 06:17:59 UTC (rev 188028)
@@ -1,3 +1,111 @@
+2015-08-05 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Bezier curve visual editor
+ https://bugs.webkit.org/show_bug.cgi?id=134501
+
+ Reviewed by Timothy Hatcher.
+
+ Added a visual Cubic Bezier curve editor that is usable in both
+ the CSS sidebar and the resources panel.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Base/DOMUtilities.js:
+ (createSVGElement):
+ * UserInterface/Controllers/CodeMirrorBezierEditingController.js:
+ (WebInspector.CodeMirrorBezierEditingController):
+ (WebInspector.CodeMirrorBezierEditingController.prototype.get initialValue):
+ (WebInspector.CodeMirrorBezierEditingController.prototype.get cssClassName):
+ (WebInspector.CodeMirrorBezierEditingController.prototype.popoverWillPresent):
+ (WebInspector.CodeMirrorBezierEditingController.prototype.popoverDidPresent):
+ (WebInspector.CodeMirrorBezierEditingController.prototype._bezierEditorBezierChanged):
+ * UserInterface/Images/CubicBezier.svg: Added.
+ * UserInterface/Main.html:
+ * UserInterface/Models/Geometry.js:
+ (WebInspector.Point.prototype.distance):
+ (WebInspector.Point):
+ (WebInspector.CubicBezier):
+ (WebInspector.CubicBezier.fromPoints):
+ (WebInspector.CubicBezier.fromString):
+ (WebInspector.CubicBezier.prototype.get inPoint):
+ (WebInspector.CubicBezier.prototype.get outPoint):
+ (WebInspector.CubicBezier.prototype.copy):
+ (WebInspector.CubicBezier.prototype.toString):
+ (WebInspector.CubicBezier.prototype.solve):
+ (WebInspector.CubicBezier.prototype._sampleCurveX):
+ (WebInspector.CubicBezier.prototype._sampleCurveY):
+ (WebInspector.CubicBezier.prototype._sampleCurveDerivativeX):
+ (WebInspector.CubicBezier.prototype._solveCurveX):
+ * UserInterface/Models/TextMarker.js:
+ * UserInterface/Models/UnitBezier.js: Removed.
+ * UserInterface/Views/BezierEditor.css: Added.
+ (.bezier-editor):
+ (.bezier-editor > .bezier-preview):
+ (.bezier-editor > .bezier-preview > div):
+ (.bezier-editor > .bezier-preview-timing):
+ (.bezier-editor > .bezier-preview-timing.animate):
+ (.bezier-editor > .bezier-container):
+ (@keyframes bezierPreview):
+ (.bezier-editor > .bezier-container):
+ (.bezier-editor > .bezier-container .linear-curve):
+ (.bezier-editor > .bezier-container .bezier-curve):
+ (.bezier-editor > .bezier-container .control-line):
+ (.bezier-editor > .bezier-container .control-handle):
+ * UserInterface/Views/BezierEditor.js: Added.
+ (WebInspector.BezierEditor.createControl):
+ (WebInspector.BezierEditor):
+ (WebInspector.BezierEditor.prototype.get element):
+ (WebInspector.BezierEditor.prototype.set bezier):
+ (WebInspector.BezierEditor.prototype.get bezier):
+ (WebInspector.BezierEditor.prototype.handleEvent):
+ (WebInspector.BezierEditor.prototype._handleMousedown):
+ (WebInspector.BezierEditor.prototype._handleMousemove):
+ (WebInspector.BezierEditor.prototype._handleMouseup):
+ (WebInspector.BezierEditor.prototype._updateControlPointsForMouseEvent):
+ (WebInspector.BezierEditor.prototype._updateValue.round):
+ (WebInspector.BezierEditor.prototype._updateValue):
+ (WebInspector.BezierEditor.prototype._updateBezier):
+ (WebInspector.BezierEditor.prototype._updateControl):
+ (WebInspector.BezierEditor.prototype._triggerPreviewAnimation):
+ (WebInspector.BezierEditor.prototype._resetPreviewAnimation):
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker):
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover):
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active):
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):
+ * UserInterface/Views/CodeMirrorAdditions.js:
+ * UserInterface/Views/CodeMirrorTextMarkers.js: Added.
+ (createCodeMirrorTextMarkers):
+ (createCodeMirrorColorTextMarkers):
+ (createCodeMirrorGradientTextMarkers):
+ (createCodeMirrorCubicBezierTextMarkers):
+ * UserInterface/Views/Popover.js:
+ (WebInspector.Popover.prototype._animateFrame):
+ * UserInterface/Views/SourceCodeTextEditor.js:
+ (WebInspector.SourceCodeTextEditor.prototype._updateEditableMarkers):
+ (WebInspector.SourceCodeTextEditor.prototype._tokenTrackingControllerHighlightedMarkedExpression):
+ * UserInterface/Views/TextEditor.js:
+ (WebInspector.TextEditor.prototype.createColorMarkers):
+ (WebInspector.TextEditor.prototype.createGradientMarkers):
+ (WebInspector.TextEditor.prototype.createCubicBezierMarkers):
+ (WebInspector.TextEditor.prototype.editingControllerForMarker):
+
2015-08-05 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: Logging error objects should have a better UI
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -100,6 +100,8 @@
localizedStrings["Click or press the spacebar to stop recording."] = "Click or press the spacebar to stop recording.";
localizedStrings["Click to close this tab"] = "Click to close this tab";
localizedStrings["Click to open a colorpicker. Shift-click to change color format."] = "Click to open a colorpicker. Shift-click to change color format.";
+localizedStrings["Click to open a cubic-bezier editor"] = "Click to open a cubic-bezier editor";
+localizedStrings["Click to restart the animation"] = "Click to restart the animation";
localizedStrings["Clickable"] = "Clickable";
localizedStrings["Close"] = "Close";
localizedStrings["Close %s timeline view"] = "Close %s timeline view";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -103,3 +103,8 @@
return link;
};
+
+function createSVGElement(tagName)
+{
+ return document.createElementNS("http://www.w3.org/2000/svg", tagName);
+}
Copied: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js (from rev 188027, trunk/Source/WebInspectorUI/UserInterface/Models/TextMarker.js) (0 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -0,0 +1,63 @@
+/*
+ * 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.CodeMirrorBezierEditingController = class CodeMirrorBezierEditingController extends WebInspector.CodeMirrorEditingController
+{
+ constructor(codeMirror, marker)
+ {
+ super(codeMirror, marker);
+ }
+
+ // Public
+
+ get initialValue()
+ {
+ return WebInspector.CubicBezier.fromString(this.text);
+ }
+
+ get cssClassName()
+ {
+ return "cubic-bezier";
+ }
+
+ popoverWillPresent(popover)
+ {
+ this._bezierEditor = new WebInspector.BezierEditor;
+ this._bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._bezierEditorBezierChanged, this);
+ popover.content = this._bezierEditor.element;
+ }
+
+ popoverDidPresent(popover)
+ {
+ this._bezierEditor.bezier = this.value;
+ }
+
+ // Private
+
+ _bezierEditorBezierChanged(event)
+ {
+ this.value = event.data.bezier;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg (0 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg 2015-08-06 06:17:59 UTC (rev 188028)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="16" height="16" rx="3" ry="3" fill="hsl(212, 92%, 54%)"/>
+ <path xmlns="http://www.w3.org/2000/svg" d="M 4 14 C 4.5 2.5 11.5 13.5 12 2" fill="none" stroke="white" style="stroke-width: 3;"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-06 06:17:59 UTC (rev 188028)
@@ -32,6 +32,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -315,7 +316,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
@@ -381,6 +381,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -394,6 +395,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -549,6 +551,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Geometry.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Geometry.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Geometry.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -60,6 +60,13 @@
{
return (this.x === anotherPoint.x && this.y === anotherPoint.y);
}
+
+ distance(anotherPoint)
+ {
+ var dx = anotherPoint.x - this.x;
+ var dy = anotherPoint.y - this.y;
+ return Math.sqrt(dx * dx, dy * dy);
+ }
};
WebInspector.Size = class Size
@@ -314,3 +321,158 @@
return new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY);
}
}
+
+WebInspector.CubicBezier = class CubicBezier
+{
+ constructor(x1, y1, x2, y2)
+ {
+ this._inPoint = new WebInspector.Point(x1, y1);
+ this._outPoint = new WebInspector.Point(x2, y2);
+
+ // Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
+ this._curveInfo = {
+ x: {c: 3.0 * x1},
+ y: {c: 3.0 * y1}
+ }
+
+ this._curveInfo.x.b = 3.0 * (x2 - x1) - this._curveInfo.x.c;
+ this._curveInfo.x.a = 1.0 - this._curveInfo.x.c - this._curveInfo.x.b;
+
+ this._curveInfo.y.b = 3.0 * (y2 - y1) - this._curveInfo.y.c;
+ this._curveInfo.y.a = 1.0 - this._curveInfo.y.c - this._curveInfo.y.b;
+ }
+
+ // Static
+
+ static fromCoordinates(coordinates)
+ {
+ if (!coordinates || coordinates.length < 4)
+ return null;
+
+ coordinates = coordinates.map((x) => Number(x));
+ if (coordinates.includes(NaN))
+ return null;
+
+ return new WebInspector.CubicBezier(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
+ }
+
+ static fromString(text)
+ {
+ if (!text || !text.length)
+ return null;
+
+ var trimmedText = text.toLowerCase().replace(/\s/g, "");
+ if (!trimmedText.length)
+ return null;
+
+ if (Object.keys(WebInspector.CubicBezier.keywordValues).includes(trimmedText))
+ return WebInspector.CubicBezier.fromCoordinates(WebInspector.CubicBezier.keywordValues[trimmedText]);
+
+ var matches = trimmedText.match(/^cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)$/);
+ if (!matches)
+ return null;
+
+ matches.splice(0, 1);
+ return WebInspector.CubicBezier.fromCoordinates(matches);
+ }
+
+ // Public
+
+ get inPoint()
+ {
+ return this._inPoint;
+ }
+
+ get outPoint()
+ {
+ return this._outPoint;
+ }
+
+ copy()
+ {
+ return new WebInspector.CubicBezier(this._inPoint.x, this._inPoint.y, this._outPoint.x, this._outPoint.y);
+ }
+
+ toString()
+ {
+ var values = [this._inPoint.x, this._inPoint.y, this._outPoint.x, this._outPoint.y];
+ for (var key in WebInspector.CubicBezier.keywordValues) {
+ if (Object.shallowEqual(WebInspector.CubicBezier.keywordValues[key], values))
+ return key;
+ }
+
+ return "cubic-bezier(" + values.join(", ") + ")";
+ }
+
+ solve(x, epsilon)
+ {
+ return this._sampleCurveY(this._solveCurveX(x, epsilon));
+ }
+
+ // Private
+
+ _sampleCurveX(t)
+ {
+ // `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
+ return ((this._curveInfo.x.a * t + this._curveInfo.x.b) * t + this._curveInfo.x.c) * t;
+ }
+
+ _sampleCurveY(t)
+ {
+ return ((this._curveInfo.y.a * t + this._curveInfo.y.b) * t + this._curveInfo.y.c) * t;
+ }
+
+ _sampleCurveDerivativeX(t)
+ {
+ return (3.0 * this._curveInfo.x.a * t + 2.0 * this._curveInfo.x.b) * t + this._curveInfo.x.c;
+ }
+
+ // Given an x value, find a parametric value it came from.
+ _solveCurveX(x, epsilon)
+ {
+ var t0, t1, t2, x2, d2, i;
+
+ // First try a few iterations of Newton's method -- normally very fast.
+ for (t2 = x, i = 0; i < 8; i++) {
+ x2 = this._sampleCurveX(t2) - x;
+ if (Math.abs(x2) < epsilon)
+ return t2;
+ d2 = this._sampleCurveDerivativeX(t2);
+ if (Math.abs(d2) < 1e-6)
+ break;
+ t2 = t2 - x2 / d2;
+ }
+
+ // Fall back to the bisection method for reliability.
+ t0 = 0.0;
+ t1 = 1.0;
+ t2 = x;
+
+ if (t2 < t0)
+ return t0;
+ if (t2 > t1)
+ return t1;
+
+ while (t0 < t1) {
+ x2 = this._sampleCurveX(t2);
+ if (Math.abs(x2 - x) < epsilon)
+ return t2;
+ if (x > x2)
+ t0 = t2;
+ else
+ t1 = t2;
+ t2 = (t1 - t0) * 0.5 + t0;
+ }
+
+ // Failure.
+ return t2;
+ }
+}
+
+WebInspector.CubicBezier.keywordValues = {
+ "ease": [0.25, 0.1, 0.25, 1],
+ "ease-in": [0.42, 0, 1, 1],
+ "ease-out": [0, 0, 0.58, 1],
+ "ease-in-out": [0.42, 0, 0.58, 1],
+ "linear": [0, 0, 1, 1]
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/TextMarker.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Models/TextMarker.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/TextMarker.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -82,5 +82,6 @@
WebInspector.TextMarker.Type = {
Color: "text-marker-type-color",
Gradient: "text-marker-type-gradient",
- Plain: "text-marker-type-plain"
+ Plain: "text-marker-type-plain",
+ CubicBezier: "text-marker-type-cubic-bezier"
};
Deleted: trunk/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -1,105 +0,0 @@
-/*
- * Copyright (C) 2014 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.UnitBezier = class UnitBezier
-{
- constructor(x1, y1, x2, y2)
- {
- // Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
- this._cx = 3.0 * x1;
- this._bx = 3.0 * (x2 - x1) - this._cx;
- this._ax = 1.0 - this._cx - this._bx;
-
- this._cy = 3.0 * y1;
- this._by = 3.0 * (y2 - y1) - this._cy;
- this._ay = 1.0 - this._cy - this._by;
- }
-
- // Public
-
- solve(x, epsilon)
- {
- return this._sampleCurveY(this._solveCurveX(x, epsilon));
- }
-
- // Private
-
- _sampleCurveX(t)
- {
- // `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
- return ((this._ax * t + this._bx) * t + this._cx) * t;
- }
-
- _sampleCurveY(t)
- {
- return ((this._ay * t + this._by) * t + this._cy) * t;
- }
-
- _sampleCurveDerivativeX(t)
- {
- return (3.0 * this._ax * t + 2.0 * this._bx) * t + this._cx;
- }
-
- // Given an x value, find a parametric value it came from.
- _solveCurveX(x, epsilon)
- {
- var t0, t1, t2, x2, d2, i;
-
- // First try a few iterations of Newton's method -- normally very fast.
- for (t2 = x, i = 0; i < 8; i++) {
- x2 = this._sampleCurveX(t2) - x;
- if (Math.abs(x2) < epsilon)
- return t2;
- d2 = this._sampleCurveDerivativeX(t2);
- if (Math.abs(d2) < 1e-6)
- break;
- t2 = t2 - x2 / d2;
- }
-
- // Fall back to the bisection method for reliability.
- t0 = 0.0;
- t1 = 1.0;
- t2 = x;
-
- if (t2 < t0)
- return t0;
- if (t2 > t1)
- return t1;
-
- while (t0 < t1) {
- x2 = this._sampleCurveX(t2);
- if (Math.abs(x2 - x) < epsilon)
- return t2;
- if (x > x2)
- t0 = t2;
- else
- t1 = t2;
- t2 = (t1 - t0) * 0.5 + t0;
- }
-
- // Failure.
- return t2;
- }
-};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (0 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2015-08-06 06:17:59 UTC (rev 188028)
@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+
+.bezier-editor {
+ width: 200px;
+ height: 225px;
+}
+
+.bezier-editor > .bezier-preview {
+ width: calc(100% - 10px);
+ height: 25px;
+ margin: 5px 5px 0;
+ border-bottom: 1px solid lightgrey;
+}
+
+.bezier-editor > .bezier-preview > div {
+ width: 20px;
+ height: 20px;
+ background-color: hsl(212, 92%, 54%);
+ border-radius: 50%;
+}
+
+.bezier-editor > .bezier-preview-timing {
+ position: absolute;
+ top: 34px;
+ margin-left: 11px;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid black;
+}
+
+.bezier-editor > .bezier-preview-timing.animate {
+ animation: bezierPreview 2s linear 250ms forwards;
+}
+
+@keyframes bezierPreview {
+ from { transform: translate(0, 0); }
+ to { transform: translate(170px, 0); }
+}
+
+.bezier-editor > .bezier-container {
+ margin: 0 8px;
+}
+
+.bezier-editor > .bezier-container .linear-curve {
+ fill: none;
+ stroke:lightgrey;
+ stroke-width: 2;
+ stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .bezier-curve {
+ fill: none;
+ stroke: black;
+ stroke-width: 2;
+ stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .control-line {
+ fill: none;
+ stroke: hsl(210, 100%, 49%);
+ stroke-width: 2;
+ stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .control-handle {
+ r: 5px;
+ fill: hsl(210, 100%, 49%);
+}
+
+.bezier-editor > .bezier-container .control-handle.selected {
+ r: 7px;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (0 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -0,0 +1,265 @@
+/*
+ * 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.BezierEditor = class BezierEditor extends WebInspector.Object
+{
+ constructor()
+ {
+ super();
+
+ this._element = document.createElement("div");
+ this._element.classList.add("bezier-editor");
+
+ var editorWidth = 184;
+ var editorHeight = 200;
+ this._padding = 25;
+ this._controlHandleRadius = 7;
+ this._bezierWidth = editorWidth - (this._controlHandleRadius * 2);
+ this._bezierHeight = editorHeight - (this._controlHandleRadius * 2) - (this._padding * 2);
+ this._bezierPreviewAnimationStyleText = "bezierPreview 2s 250ms forwards ";
+
+ var bezierPreviewContainer = document.createElement("div");
+ bezierPreviewContainer.id = "bezierPreview";
+ bezierPreviewContainer.classList.add("bezier-preview");
+ bezierPreviewContainer.title = WebInspector.UIString("Click to restart the animation");
+ bezierPreviewContainer.addEventListener("mousedown", this._resetPreviewAnimation.bind(this));
+
+ this._bezierPreview = document.createElement("div");
+ bezierPreviewContainer.appendChild(this._bezierPreview);
+
+ this._element.appendChild(bezierPreviewContainer);
+
+ this._bezierContainer = createSVGElement("svg");
+ this._bezierContainer.id = "bezierContainer";
+ this._bezierContainer.setAttribute("width", editorWidth);
+ this._bezierContainer.setAttribute("height", editorHeight);
+ this._bezierContainer.classList.add("bezier-container");
+
+ var svgGroup = createSVGElement("g");
+ svgGroup.setAttribute("transform", "translate(0, " + this._padding + ")");
+
+ var linearCurve = createSVGElement("line");
+ linearCurve.classList.add("linear-curve");
+ linearCurve.setAttribute("x1", this._controlHandleRadius);
+ linearCurve.setAttribute("y1", this._bezierHeight + this._controlHandleRadius);
+ linearCurve.setAttribute("x2", this._bezierWidth + this._controlHandleRadius);
+ linearCurve.setAttribute("y2", this._controlHandleRadius);
+ svgGroup.appendChild(linearCurve);
+
+ this._bezierCurve = createSVGElement("path");
+ this._bezierCurve.classList.add("bezier-curve");
+ svgGroup.appendChild(this._bezierCurve);
+
+ function createControl(x1, y1)
+ {
+ x1 += this._controlHandleRadius;
+ y1 += this._controlHandleRadius;
+
+ var line = createSVGElement("line");
+ line.classList.add("control-line");
+ line.setAttribute("x1", x1);
+ line.setAttribute("y1", y1);
+ line.setAttribute("x2", x1);
+ line.setAttribute("y2", y1);
+ svgGroup.appendChild(line);
+
+ var handle = createSVGElement("circle");
+ handle.classList.add("control-handle");
+ svgGroup.appendChild(handle);
+
+ return {point: null, line, handle};
+ }
+
+ this._inControl = createControl.call(this, 0, this._bezierHeight);
+ this._outControl = createControl.call(this, this._bezierWidth, 0);
+
+ this._bezierContainer.appendChild(svgGroup);
+ this._element.appendChild(this._bezierContainer);
+
+ this._bezierPreviewTiming = document.createElement("div");
+ this._bezierPreviewTiming.classList.add("bezier-preview-timing");
+ this._element.appendChild(this._bezierPreviewTiming);
+
+ this._selectedControl = null;
+ this._bezierContainer.addEventListener("mousedown", this);
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ set bezier(bezier)
+ {
+ if (!bezier)
+ return;
+
+ var isCubicBezier = bezier instanceof WebInspector.CubicBezier;
+ console.assert(isCubicBezier);
+ if (!isCubicBezier)
+ return;
+
+ this._bezier = bezier;
+ this._inControl.point = new WebInspector.Point(this._bezier.inPoint.x * this._bezierWidth, (1 - this._bezier.inPoint.y) * this._bezierHeight);
+ this._outControl.point = new WebInspector.Point(this._bezier.outPoint.x * this._bezierWidth, (1 - this._bezier.outPoint.y) * this._bezierHeight);
+
+ this._updateBezier();
+ this._triggerPreviewAnimation();
+ }
+
+ get bezier()
+ {
+ return this._bezier;
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ switch (event.type) {
+ case "mousedown":
+ this._handleMousedown(event);
+ break;
+ case "mousemove":
+ this._handleMousemove(event);
+ break;
+ case "mouseup":
+ this._handleMouseup(event);
+ break;
+ }
+ }
+
+ // Private
+
+ _handleMousedown(event)
+ {
+ if (event.button !== 0)
+ return;
+
+ window.addEventListener("mousemove", this, true);
+ window.addEventListener("mouseup", this, true);
+
+ this._bezierPreview.style.animation = null;
+ this._bezierPreviewTiming.classList.remove("animate");
+
+ this._updateControlPointsForMouseEvent(event, true);
+ }
+
+ _handleMousemove(event)
+ {
+ this._updateControlPointsForMouseEvent(event);
+ }
+
+ _handleMouseup(event)
+ {
+ this._selectedControl.handle.classList.remove("selected");
+ this._selectedControl = null;
+ this._triggerPreviewAnimation();
+
+ window.removeEventListener("mousemove", this, true);
+ window.removeEventListener("mouseup", this, true);
+ }
+
+ _updateControlPointsForMouseEvent(event, calculateSelectedControlPoint)
+ {
+ var point = WebInspector.Point.fromEventInElement(event, this._bezierContainer);
+ point.x = clamp(0, point.x - this._controlHandleRadius, this._bezierWidth);
+ point.y -= this._controlHandleRadius + this._padding;
+
+ if (calculateSelectedControlPoint) {
+ if (this._inControl.point.distance(point) < this._outControl.point.distance(point))
+ this._selectedControl = this._inControl;
+ else
+ this._selectedControl = this._outControl;
+ }
+
+ this._selectedControl.point = point;
+ this._selectedControl.handle.classList.add("selected");
+ this._updateValue();
+ }
+
+ _updateValue()
+ {
+ function round(num)
+ {
+ return Math.round(num * 100) / 100;
+ }
+
+ var inValueX = round(this._inControl.point.x / this._bezierWidth);
+ var inValueY = round(1 - (this._inControl.point.y / this._bezierHeight));
+
+ var outValueX = round(this._outControl.point.x / this._bezierWidth);
+ var outValueY = round(1 - (this._outControl.point.y / this._bezierHeight));
+
+ this._bezier = new WebInspector.CubicBezier(inValueX, inValueY, outValueX, outValueY);
+ this._updateBezier();
+
+ this.dispatchEventToListeners(WebInspector.BezierEditor.Event.BezierChanged, {bezier: this._bezier});
+ }
+
+ _updateBezier()
+ {
+ var r = this._controlHandleRadius;
+ var inControlX = this._inControl.point.x + r;
+ var inControlY = this._inControl.point.y + r;
+ var outControlX = this._outControl.point.x + r;
+ var outControlY = this._outControl.point.y + r;
+ var path = `M ${r} ${this._bezierHeight + r} C ${inControlX} ${inControlY} ${outControlX} ${outControlY} ${this._bezierWidth + r} ${r}`;
+ this._bezierCurve.setAttribute("d", path);
+ this._updateControl(this._inControl);
+ this._updateControl(this._outControl);
+ }
+
+ _updateControl(control)
+ {
+ control.handle.setAttribute("cx", control.point.x + this._controlHandleRadius);
+ control.handle.setAttribute("cy", control.point.y + this._controlHandleRadius);
+
+ control.line.setAttribute("x2", control.point.x + this._controlHandleRadius);
+ control.line.setAttribute("y2", control.point.y + this._controlHandleRadius);
+ }
+
+ _triggerPreviewAnimation()
+ {
+ this._bezierPreview.style.animation = this._bezierPreviewAnimationStyleText + this._bezier.toString();
+ this._bezierPreviewTiming.classList.add("animate");
+ }
+
+ _resetPreviewAnimation()
+ {
+ var parent = this._bezierPreview.parentNode;
+ parent.removeChild(this._bezierPreview);
+ parent.appendChild(this._bezierPreview);
+
+ this._element.removeChild(this._bezierPreviewTiming);
+ this._element.appendChild(this._bezierPreviewTiming);
+ }
+};
+
+WebInspector.BezierEditor.Event = {
+ BezierChanged: "bezier-editor-bezier-changed"
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2015-08-06 06:17:59 UTC (rev 188028)
@@ -94,6 +94,23 @@
-webkit-filter: brightness(0.9);
}
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker {
+ width: 11px;
+ height: 11px;
+ margin-right: 2px;
+ vertical-align: -2px;
+ content: url(../Images/CubicBezier.svg);
+ cursor: default;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover {
+ -webkit-filter: brightness(0.9);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active {
+ -webkit-filter: brightness(0.8);
+}
+
.computed .css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
opacity: 0.5;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -389,7 +389,9 @@
didDismissPopover(popover)
{
if (popover === this._colorPickerPopover)
- delete this._colorPickerPopover;
+ this._colorPickerPopover = null;
+ if (popover === this._cubicBezierEditorPopover)
+ this._cubicBezierEditorPopover = null;
}
completionControllerCompletionsHidden(completionController)
@@ -768,8 +770,10 @@
// When the change is a completion change, create color swatches now since the changes
// will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
// This way any auto completed colors get swatches right away.
- if (this._completionController.isCompletionChange(change))
+ if (this._completionController.isCompletionChange(change)) {
this._createColorSwatches(false, change.from.line);
+ this._createBezierEditors(false, change.from.line);
+ }
// Use a short delay for user input to coalesce more changes before committing. Other actions like
// undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
@@ -821,6 +825,7 @@
// Look for colors and make swatches.
this._createColorSwatches(true);
+ this._createBezierEditors(true);
this._markLinesWithCheckboxPlaceholder();
}
@@ -873,7 +878,7 @@
var range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
// Look for color strings and add swatches in front of them.
- this._codeMirror.createColorMarkers(range, function(marker, color, colorString) {
+ createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
var swatchElement = document.createElement("span");
swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
@@ -897,6 +902,33 @@
this._codeMirror.operation(update.bind(this));
}
+ _createBezierEditors(nonatomic, lineNumber)
+ {
+ function update()
+ {
+ var range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
+
+ // Look for cubic-bezier and timing functions and add cubic-bezier icons in front of them.
+ createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, function(marker, cubicBezier) {
+ var bezierMarker = document.createElement("span");
+ bezierMarker.title = WebInspector.UIString("Click to open a cubic-bezier editor");
+ bezierMarker.className = WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName;
+ bezierMarker.addEventListener("click", this._cubicBezierMarkerClicked.bind(this));
+
+ var codeMirrorTextMarker = marker.codeMirrorTextMarker;
+ this._codeMirror.setUniqueBookmark(codeMirrorTextMarker.find().from, bezierMarker);
+
+ bezierMarker.__textMarker = codeMirrorTextMarker;
+ bezierMarker.__bezier = cubicBezier;
+ }.bind(this));
+ }
+
+ if (nonatomic)
+ update.call(this);
+ else
+ this._codeMirror.operation(update.bind(this));
+ }
+
_updateTextMarkerForPropertyIfNeeded(property)
{
var textMarker = property.__propertyTextMarker;
@@ -1242,8 +1274,9 @@
// Replace the text with a commented version.
this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
- // Update the line for any color swatches that got removed.
+ // Update the line for any color swatches or cubic-beziers that got removed.
this._createColorSwatches(true, range.from.line);
+ this._createBezierEditors(true, range.from.line);
}
this._codeMirror.operation(update.bind(this));
@@ -1281,8 +1314,9 @@
this._codeMirror.addLineClass(range.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
this._codeMirror.replaceRange(text, range.from, range.to);
- // Update the line for any color swatches that got removed.
+ // Update the line for any color swatches or cubic-beziers that got removed.
this._createColorSwatches(true, range.from.line);
+ this._createBezierEditors(true, range.from.line);
}
this._codeMirror.operation(update.bind(this));
@@ -1391,6 +1425,93 @@
}
}
+ _cubicBezierMarkerClicked(event)
+ {
+ if (this._cubicBezierEditorPopover)
+ return;
+
+ var bezierMarker = event.target;
+
+ var bezier = bezierMarker.__bezier;
+ console.assert(bezier);
+ if (!bezier)
+ return;
+
+ var bezierTextMarker = bezierMarker.__textMarker;
+ console.assert(bezierTextMarker);
+ if (!bezierTextMarker)
+ return;
+
+ var range = bezierTextMarker.find();
+ console.assert(range);
+ if (!range)
+ return;
+
+ function updateCodeMirror(newCubicBezierText)
+ {
+ function update()
+ {
+ // The original text marker might have been cleared by a style update,
+ // in this case we need to find the new bezier text marker so we know
+ // the right range for the new style bezier text.
+ if (!bezierTextMarker || !bezierTextMarker.find()) {
+ bezierTextMarker = null;
+
+ var marks = this._codeMirror.findMarksAt(range.from);
+ if (!marks.length)
+ return;
+
+ for (var i = 0; i < marks.length; ++i) {
+ var mark = marks[i];
+ if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.CubicBezier)
+ continue;
+ bezierTextMarker = mark;
+ break;
+ }
+ }
+
+ if (!bezierTextMarker)
+ return;
+
+ // Sometimes we still might find a stale text marker with findMarksAt.
+ var newRange = bezierTextMarker.find();
+ if (!newRange)
+ return;
+
+ range = newRange;
+
+ bezierTextMarker.clear();
+
+ this._codeMirror.replaceRange(newCubicBezierText, range.from, range.to);
+
+ // The bezier's text format could have changed, so we need to update the "range"
+ // variable to anticipate a different "range.to" property.
+ range.to.ch = range.from.ch + newCubicBezierText.length;
+
+ bezierTextMarker = this._codeMirror.markText(range.from, range.to);
+
+ bezierMarker.__textMarker = bezierTextMarker;
+ }
+
+ this._codeMirror.operation(update.bind(this));
+ }
+
+ this._cubicBezierEditorPopover = new WebInspector.Popover(this);
+
+ var bezierEditor = new WebInspector.BezierEditor;
+
+ bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, function(event) {
+ updateCodeMirror.call(this, event.data.bezier.toString());
+ }.bind(this));
+
+ var bounds = WebInspector.Rect.rectFromClientRect(bezierMarker.getBoundingClientRect());
+
+ this._cubicBezierEditorPopover.content = bezierEditor.element;
+ this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+ bezierEditor.bezier = bezier;
+ }
+
_propertyOverriddenStatusChanged(event)
{
this._updateTextMarkerForPropertyIfNeeded(event.target);
@@ -1594,6 +1715,7 @@
// Look for colors and make swatches.
this._createColorSwatches(true);
+ this._createBezierEditors(true);
// Restore the cursor position/selection.
this._codeMirror.setSelection(selectionAnchor, selectionHead);
@@ -1682,6 +1804,7 @@
WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName = "color-swatch";
+WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName = "cubic-bezier-marker";
WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -496,140 +496,6 @@
return lineRects;
});
- CodeMirror.defineExtension("createColorMarkers", function(range, callback) {
- var createdMarkers = [];
-
- var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
- var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : this.lineCount();
-
- // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
- var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
-
- for (var lineNumber = start; lineNumber < end; ++lineNumber) {
- var lineContent = this.getLine(lineNumber);
- var match = colorRegex.exec(lineContent);
- while (match) {
-
- // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
- if (match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1])) {
- match = colorRegex.exec(lineContent);
- continue;
- }
-
- var from = {line: lineNumber, ch: match.index};
- var to = {line: lineNumber, ch: match.index + match[0].length};
-
- var foundColorMarker = false;
- var markers = this.findMarksAt(to);
- for (var j = 0; j < markers.length; ++j) {
- if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(markers[j]).type === WebInspector.TextMarker.Type.Color) {
- foundColorMarker = true;
- break;
- }
- }
-
- if (foundColorMarker) {
- match = colorRegex.exec(lineContent);
- continue;
- }
-
- // We're not interested if the color value is not inside a keyword.
- var tokenType = this.getTokenTypeAt(from);
- if (tokenType && !tokenType.includes("keyword")) {
- match = colorRegex.exec(lineContent);
- continue;
- }
-
- var colorString = match[0];
- var color = WebInspector.Color.fromString(colorString);
- if (!color) {
- match = colorRegex.exec(lineContent);
- continue;
- }
-
- var marker = this.markText(from, to);
- marker = new WebInspector.TextMarker(marker, WebInspector.TextMarker.Type.Color);
-
- createdMarkers.push(marker);
-
- if (callback)
- callback(marker, color, colorString);
-
- match = colorRegex.exec(lineContent);
- }
- }
-
- return createdMarkers;
- });
-
- CodeMirror.defineExtension("createGradientMarkers", function(range, callback) {
- var createdMarkers = [];
-
- var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
- var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : this.lineCount();
-
- var gradientRegex = /(repeating-)?(linear|radial)-gradient\s*\(\s*/g;
-
- for (var lineNumber = start; lineNumber < end; ++lineNumber) {
- var lineContent = this.getLine(lineNumber);
- var match = gradientRegex.exec(lineContent);
- while (match) {
- var startLine = lineNumber;
- var startChar = match.index;
- var endChar = match.index + match[0].length;
-
- var openParentheses = 0;
- var c = null;
- while (c = lineContent[endChar]) {
- if (c === "(")
- openParentheses++;
- if (c === ")")
- openParentheses--;
-
- if (openParentheses === -1) {
- endChar++;
- break;
- }
-
- endChar++;
- if (endChar >= lineContent.length) {
- lineNumber++;
- endChar = 0;
- lineContent = this.getLine(lineNumber);
- if (!lineContent)
- break;
- }
- }
-
- if (openParentheses !== -1) {
- match = gradientRegex.exec(lineContent);
- continue;
- }
-
- var from = {line: startLine, ch: startChar};
- var to = {line: lineNumber, ch: endChar};
-
- var gradientString = this.getRange(from, to);
- var gradient = WebInspector.Gradient.fromString(gradientString);
- if (!gradient) {
- match = gradientRegex.exec(lineContent);
- continue;
- }
-
- var marker = new WebInspector.TextMarker(this.markText(from, to), WebInspector.TextMarker.Type.Gradient);
-
- createdMarkers.push(marker);
-
- if (callback)
- callback(marker, gradient, gradientString);
-
- match = gradientRegex.exec(lineContent);
- }
- }
-
- return createdMarkers;
- });
-
function ignoreKey(codeMirror)
{
// Do nothing to ignore the key.
Added: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (0 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -0,0 +1,170 @@
+/*
+ * 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.
+ */
+
+function createCodeMirrorTextMarkers(type, pattern, matchFunction, codeMirror, range, callback)
+{
+ var createdMarkers = [];
+ var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
+ var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : codeMirror.lineCount();
+ for (var lineNumber = start; lineNumber < end; ++lineNumber) {
+ var lineContent = codeMirror.getLine(lineNumber);
+ var match = pattern.exec(lineContent);
+ while (match) {
+ if (typeof matchFunction === "function" && !matchFunction(lineContent, match)) {
+ match = pattern.exec(lineContent);
+ continue;
+ }
+
+ var from = {line: lineNumber, ch: match.index};
+ var to = {line: lineNumber, ch: match.index + match[0].length};
+
+ var foundMarker = false;
+ var markers = codeMirror.findMarksAt(to);
+ for (var j = 0; j < markers.length; ++j) {
+ if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(markers[j]).type === WebInspector.TextMarker.Type[type]) {
+ foundMarker = true;
+ break;
+ }
+ }
+
+ if (foundMarker) {
+ match = pattern.exec(lineContent);
+ continue;
+ }
+
+ // We're not interested if the value is not inside a keyword.
+ var tokenType = codeMirror.getTokenTypeAt(from);
+ if (tokenType && !tokenType.includes("keyword")) {
+ match = pattern.exec(lineContent);
+ continue;
+ }
+
+ var valueString = match[0];
+ var value = WebInspector[type].fromString(valueString);
+ if (!value) {
+ match = pattern.exec(lineContent);
+ continue;
+ }
+
+ var marker = codeMirror.markText(from, to);
+ marker = new WebInspector.TextMarker(marker, WebInspector.TextMarker.Type[type]);
+ createdMarkers.push(marker);
+
+ if (typeof callback === "function")
+ callback(marker, value, valueString);
+
+ match = pattern.exec(lineContent);
+ }
+ }
+
+ return createdMarkers;
+}
+
+function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
+{
+ // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
+ var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
+ function matchFunction(lineContent, match) {
+ // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
+ return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));
+ }
+
+ return createCodeMirrorTextMarkers("Color", colorRegex, matchFunction, codeMirror, range, callback);
+}
+
+function createCodeMirrorGradientTextMarkers(codeMirror, range, callback)
+{
+ var createdMarkers = [];
+
+ var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
+ var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : codeMirror.lineCount();
+
+ var gradientRegex = /(repeating-)?(linear|radial)-gradient\s*\(\s*/g;
+
+ for (var lineNumber = start; lineNumber < end; ++lineNumber) {
+ var lineContent = codeMirror.getLine(lineNumber);
+ var match = gradientRegex.exec(lineContent);
+ while (match) {
+ var startLine = lineNumber;
+ var startChar = match.index;
+ var endChar = match.index + match[0].length;
+
+ var openParentheses = 0;
+ var c = null;
+ while (c = lineContent[endChar]) {
+ if (c === "(")
+ openParentheses++;
+ if (c === ")")
+ openParentheses--;
+
+ if (openParentheses === -1) {
+ endChar++;
+ break;
+ }
+
+ endChar++;
+ if (endChar >= lineContent.length) {
+ lineNumber++;
+ endChar = 0;
+ lineContent = codeMirror.getLine(lineNumber);
+ if (!lineContent)
+ break;
+ }
+ }
+
+ if (openParentheses !== -1) {
+ match = gradientRegex.exec(lineContent);
+ continue;
+ }
+
+ var from = {line: startLine, ch: startChar};
+ var to = {line: lineNumber, ch: endChar};
+
+ var gradientString = codeMirror.getRange(from, to);
+ var gradient = WebInspector.Gradient.fromString(gradientString);
+ if (!gradient) {
+ match = gradientRegex.exec(lineContent);
+ continue;
+ }
+
+ var marker = new WebInspector.TextMarker(codeMirror.markText(from, to), WebInspector.TextMarker.Type.Gradient);
+
+ createdMarkers.push(marker);
+
+ if (typeof callback === "function")
+ callback(marker, gradient, gradientString);
+
+ match = gradientRegex.exec(lineContent);
+ }
+ }
+
+ return createdMarkers;
+}
+
+function createCodeMirrorCubicBezierTextMarkers(codeMirror, range, callback)
+{
+ var cubicBezierRegex = /(cubic-bezier\([^)]+\)|\b\w+\b(?:-\b\w+\b){0,2})/g;
+ return createCodeMirrorTextMarkers("CubicBezier", cubicBezierRegex, null, codeMirror, range, callback);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -314,7 +314,7 @@
var startTime = Date.now();
var duration = 350;
var epsilon = 1 / (200 * duration);
- var spline = new WebInspector.UnitBezier(0.25, 0.1, 0.25, 1);
+ var spline = new WebInspector.CubicBezier(0.25, 0.1, 0.25, 1);
var fromFrame = this._frame.copy();
var fromAnchor = this._anchorPoint.copy();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -1594,6 +1594,7 @@
{
this.createColorMarkers(range);
this.createGradientMarkers(range);
+ this.createCubicBezierMarkers(range);
this._updateTokenTrackingControllerState();
}
@@ -1603,7 +1604,7 @@
// Look for the outermost editable marker.
var editableMarker;
for (var marker of markers) {
- if (!marker.range || (marker.type !== WebInspector.TextMarker.Type.Color && marker.type !== WebInspector.TextMarker.Type.Gradient))
+ if (!marker.range || (marker.type !== WebInspector.TextMarker.Type.Color && marker.type !== WebInspector.TextMarker.Type.Gradient && marker.type !== WebInspector.TextMarker.Type.CubicBezier))
continue;
if (!editableMarker || (marker.range.startLine < editableMarker.range.startLine || (marker.range.startLine === editableMarker.range.startLine && marker.range.startColumn < editableMarker.range.startColumn)))
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js (188027 => 188028)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js 2015-08-06 06:07:31 UTC (rev 188027)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js 2015-08-06 06:17:59 UTC (rev 188028)
@@ -633,14 +633,19 @@
createColorMarkers(range)
{
- return this._codeMirror.createColorMarkers(range);
+ return createCodeMirrorColorTextMarkers(this._codeMirror, range);
}
createGradientMarkers(range)
{
- return this._codeMirror.createGradientMarkers(range);
+ return createCodeMirrorGradientTextMarkers(this._codeMirror, range);
}
+ createCubicBezierMarkers(range)
+ {
+ return createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range);
+ }
+
editingControllerForMarker(editableMarker)
{
switch (editableMarker.type) {
@@ -648,6 +653,8 @@
return new WebInspector.CodeMirrorColorEditingController(this._codeMirror, editableMarker);
case WebInspector.TextMarker.Type.Gradient:
return new WebInspector.CodeMirrorGradientEditingController(this._codeMirror, editableMarker);
+ case WebInspector.TextMarker.Type.CubicBezier:
+ return new WebInspector.CodeMirrorBezierEditingController(this._codeMirror, editableMarker);
default:
return new WebInspector.CodeMirrorEditingController(this._codeMirror, editableMarker);
}
