<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[193070] branches/safari-601-branch/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/193070">193070</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:43:04 -0800 (Thu, 03 Dec 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188028">r188028</a>. rdar://problem/23221163</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceBaseDOMUtilitiesjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceModelsGeometryjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Geometry.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceModelsTextMarkerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/TextMarker.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsPopoverjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsTextEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TextEditor.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorBezierEditingControllerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceImagesCubicBeziersvg">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsBezierEditorcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsBezierEditorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceModelsUnitBezierjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -1,5 +1,117 @@
</span><span class="cx"> 2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Merge r188028. rdar://problem/23221163
+
+    2015-08-05  Devin Rousso  &lt;drousso@apple.com&gt;
+
+            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 &gt; .bezier-preview):
+            (.bezier-editor &gt; .bezier-preview &gt; div):
+            (.bezier-editor &gt; .bezier-preview-timing):
+            (.bezier-editor &gt; .bezier-preview-timing.animate):
+            (.bezier-editor &gt; .bezier-container):
+            (@keyframes bezierPreview):
+            (.bezier-editor &gt; .bezier-container):
+            (.bezier-editor &gt; .bezier-container .linear-curve):
+            (.bezier-editor &gt; .bezier-container .bezier-curve):
+            (.bezier-editor &gt; .bezier-container .control-line):
+            (.bezier-editor &gt; .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 &gt; .CodeMirror .CodeMirror-lines .cubic-bezier-marker):
+            (.css-style-text-editor &gt; .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover):
+            (.css-style-text-editor &gt; .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-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
</ins><span class="cx">         Merge r188017. rdar://problem/23221163
</span><span class="cx"> 
</span><span class="cx">     2015-08-05  Nikita Vasilyev  &lt;nvasilyev@apple.com&gt;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -100,6 +100,8 @@
</span><span class="cx"> localizedStrings[&quot;Click or press the spacebar to stop recording.&quot;] = &quot;Click or press the spacebar to stop recording.&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to close this tab&quot;] = &quot;Click to close this tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to open a colorpicker. Shift-click to change color format.&quot;] = &quot;Click to open a colorpicker. Shift-click to change color format.&quot;;
</span><ins>+localizedStrings[&quot;Click to open a cubic-bezier editor&quot;] = &quot;Click to open a cubic-bezier editor&quot;;
+localizedStrings[&quot;Click to restart the animation&quot;] = &quot;Click to restart the animation&quot;;
</ins><span class="cx"> localizedStrings[&quot;Clickable&quot;] = &quot;Clickable&quot;;
</span><span class="cx"> localizedStrings[&quot;Close&quot;] = &quot;Close&quot;;
</span><span class="cx"> localizedStrings[&quot;Close %s timeline view&quot;] = &quot;Close %s timeline view&quot;;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceBaseDOMUtilitiesjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -103,3 +103,8 @@
</span><span class="cx"> 
</span><span class="cx">     return link;
</span><span class="cx"> };
</span><ins>+
+function createSVGElement(tagName)
+{
+    return document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, tagName);
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceControllersCodeMirrorBezierEditingControllerjsfromrev193069branchessafari601branchSourceWebInspectorUIUserInterfaceModelsTextMarkerjs"></a>
<div class="copfile"><h4>Copied: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js (from rev 193069, branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/TextMarker.js) (0 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -0,0 +1,63 @@
</span><ins>+/*
+ * 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 &quot;cubic-bezier&quot;;
+    }
+
+    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;
+    }
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceImagesCubicBeziersvg"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg (0 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Images/CubicBezier.svg        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+&lt;!-- Copyright © 2015 Apple Inc. All rights reserved. --&gt;
+&lt;svg viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
+    &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;16&quot; rx=&quot;3&quot; ry=&quot;3&quot; fill=&quot;hsl(212, 92%, 54%)&quot;/&gt;
+    &lt;path xmlns=&quot;http://www.w3.org/2000/svg&quot; d=&quot;M 4 14 C 4.5 2.5 11.5 13.5 12 2&quot; fill=&quot;none&quot; stroke=&quot;white&quot; style=&quot;stroke-width: 3;&quot;/&gt;
+&lt;/svg&gt;
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -32,6 +32,7 @@
</span><span class="cx"> 
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ApplicationCacheFrameContentView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ApplicationCacheIcons.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/BezierEditor.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/BoxModelDetailsSectionRow.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/Breakpoint.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/BreakpointActionView.css&quot;&gt;
</span><span class="lines">@@ -315,7 +316,6 @@
</span><span class="cx">     &lt;script src=&quot;Models/TimelineRecording.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/TypeDescription.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Models/TypeSet.js&quot;&gt;&lt;/script&gt;
</span><del>-    &lt;script src=&quot;Models/UnitBezier.js&quot;&gt;&lt;/script&gt;
</del><span class="cx">     &lt;script src=&quot;Models/WrappedPromise.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> 
</span><span class="cx">     &lt;script src=&quot;Views/ConsoleCommandView.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -381,6 +381,7 @@
</span><span class="cx">     &lt;script src=&quot;Views/ApplicationCacheFrameContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/ApplicationCacheFrameTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/ApplicationCacheManifestTreeElement.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/BezierEditor.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/BoxModelDetailsSectionRow.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/BreakpointActionView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/BreakpointTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -394,6 +395,7 @@
</span><span class="cx">     &lt;script src=&quot;Views/ClusterContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/CodeMirrorAdditions.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/CodeMirrorFormatters.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/CodeMirrorTextMarkers.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/ColorPicker.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/ColorWheel.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/CompletionSuggestionsView.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -549,6 +551,7 @@
</span><span class="cx">     &lt;script src=&quot;Controllers/CSSStyleManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorColorEditingController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorCompletionController.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Controllers/CodeMirrorBezierEditingController.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorDragToAdjustNumberController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorGradientEditingController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorTokenTrackingController.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceModelsGeometryjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Geometry.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Geometry.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Geometry.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -60,6 +60,13 @@
</span><span class="cx">     {
</span><span class="cx">         return (this.x === anotherPoint.x &amp;&amp; this.y === anotherPoint.y);
</span><span class="cx">     }
</span><ins>+
+    distance(anotherPoint)
+    {
+        var dx = anotherPoint.x - this.x;
+        var dy = anotherPoint.y - this.y;
+        return Math.sqrt(dx * dx, dy * dy);
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.Size = class Size
</span><span class="lines">@@ -314,3 +321,158 @@
</span><span class="cx">         return new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY);
</span><span class="cx">     }
</span><span class="cx"> }
</span><ins>+
+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 &lt; 4)
+            return null;
+
+        coordinates = coordinates.map((x) =&gt; 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, &quot;&quot;);
+        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 &quot;cubic-bezier(&quot; + values.join(&quot;, &quot;) + &quot;)&quot;;
+    }
+
+    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 &lt; 8; i++) {
+            x2 = this._sampleCurveX(t2) - x;
+            if (Math.abs(x2) &lt; epsilon)
+                return t2;
+            d2 = this._sampleCurveDerivativeX(t2);
+            if (Math.abs(d2) &lt; 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 &lt; t0)
+            return t0;
+        if (t2 &gt; t1)
+            return t1;
+
+        while (t0 &lt; t1) {
+            x2 = this._sampleCurveX(t2);
+            if (Math.abs(x2 - x) &lt; epsilon)
+                return t2;
+            if (x &gt; x2)
+                t0 = t2;
+            else
+                t1 = t2;
+            t2 = (t1 - t0) * 0.5 + t0;
+        }
+
+        // Failure.
+        return t2;
+    }
+}
+
+WebInspector.CubicBezier.keywordValues = {
+    &quot;ease&quot;:         [0.25, 0.1, 0.25, 1],
+    &quot;ease-in&quot;:      [0.42, 0, 1, 1],
+    &quot;ease-out&quot;:     [0, 0, 0.58, 1],
+    &quot;ease-in-out&quot;:  [0.42, 0, 0.58, 1],
+    &quot;linear&quot;:       [0, 0, 1, 1]
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceModelsTextMarkerjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/TextMarker.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/TextMarker.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/TextMarker.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -82,5 +82,6 @@
</span><span class="cx"> WebInspector.TextMarker.Type = {
</span><span class="cx">     Color: &quot;text-marker-type-color&quot;,
</span><span class="cx">     Gradient: &quot;text-marker-type-gradient&quot;,
</span><del>-    Plain: &quot;text-marker-type-plain&quot;
</del><ins>+    Plain: &quot;text-marker-type-plain&quot;,
+    CubicBezier: &quot;text-marker-type-cubic-bezier&quot;
</ins><span class="cx"> };
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceModelsUnitBezierjs"></a>
<div class="delfile"><h4>Deleted: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/UnitBezier.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -1,105 +0,0 @@
</span><del>-/*
- * 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 &lt; 8; i++) {
-            x2 = this._sampleCurveX(t2) - x;
-            if (Math.abs(x2) &lt; epsilon)
-                return t2;
-            d2 = this._sampleCurveDerivativeX(t2);
-            if (Math.abs(d2) &lt; 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 &lt; t0)
-            return t0;
-        if (t2 &gt; t1)
-            return t1;
-
-        while (t0 &lt; t1) {
-            x2 = this._sampleCurveX(t2);
-            if (Math.abs(x2 - x) &lt; epsilon)
-                return t2;
-            if (x &gt; x2)
-                t0 = t2;
-            else
-                t1 = t2;
-            t2 = (t1 - t0) * 0.5 + t0;
-        }
-
-        // Failure.
-        return t2;
-    }
-};
</del></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsBezierEditorcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (0 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+/*
+ * 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 &gt; .bezier-preview {
+    width: calc(100% - 10px);
+    height: 25px;
+    margin: 5px 5px 0;
+    border-bottom: 1px solid lightgrey;
+}
+
+.bezier-editor &gt; .bezier-preview &gt; div {
+    width: 20px;
+    height: 20px;
+    background-color: hsl(212, 92%, 54%);
+    border-radius: 50%;
+}
+
+.bezier-editor &gt; .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 &gt; .bezier-preview-timing.animate {
+    animation: bezierPreview 2s linear 250ms forwards;
+}
+
+@keyframes bezierPreview {
+    from { transform: translate(0, 0); }
+    to { transform: translate(170px, 0); }
+}
+
+.bezier-editor &gt; .bezier-container {
+    margin: 0 8px;
+}
+
+.bezier-editor &gt; .bezier-container .linear-curve {
+    fill: none;
+    stroke:lightgrey;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor &gt; .bezier-container .bezier-curve {
+    fill: none;
+    stroke: black;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor &gt; .bezier-container .control-line {
+    fill: none;
+    stroke: hsl(210, 100%, 49%);
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor &gt; .bezier-container .control-handle {
+    r: 5px;
+    fill: hsl(210, 100%, 49%);
+}
+
+.bezier-editor &gt; .bezier-container .control-handle.selected {
+    r: 7px;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsBezierEditorjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (0 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -0,0 +1,265 @@
</span><ins>+/*
+ * 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(&quot;div&quot;);
+        this._element.classList.add(&quot;bezier-editor&quot;);
+
+        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 = &quot;bezierPreview 2s 250ms forwards &quot;;
+
+        var bezierPreviewContainer = document.createElement(&quot;div&quot;);
+        bezierPreviewContainer.id = &quot;bezierPreview&quot;;
+        bezierPreviewContainer.classList.add(&quot;bezier-preview&quot;);
+        bezierPreviewContainer.title = WebInspector.UIString(&quot;Click to restart the animation&quot;);
+        bezierPreviewContainer.addEventListener(&quot;mousedown&quot;, this._resetPreviewAnimation.bind(this));
+
+        this._bezierPreview = document.createElement(&quot;div&quot;);
+        bezierPreviewContainer.appendChild(this._bezierPreview);
+
+        this._element.appendChild(bezierPreviewContainer);
+
+        this._bezierContainer = createSVGElement(&quot;svg&quot;);
+        this._bezierContainer.id = &quot;bezierContainer&quot;;
+        this._bezierContainer.setAttribute(&quot;width&quot;, editorWidth);
+        this._bezierContainer.setAttribute(&quot;height&quot;, editorHeight);
+        this._bezierContainer.classList.add(&quot;bezier-container&quot;);
+
+        var svgGroup = createSVGElement(&quot;g&quot;);
+        svgGroup.setAttribute(&quot;transform&quot;, &quot;translate(0, &quot; + this._padding + &quot;)&quot;);
+
+        var linearCurve = createSVGElement(&quot;line&quot;);
+        linearCurve.classList.add(&quot;linear-curve&quot;);
+        linearCurve.setAttribute(&quot;x1&quot;, this._controlHandleRadius);
+        linearCurve.setAttribute(&quot;y1&quot;, this._bezierHeight + this._controlHandleRadius);
+        linearCurve.setAttribute(&quot;x2&quot;, this._bezierWidth + this._controlHandleRadius);
+        linearCurve.setAttribute(&quot;y2&quot;, this._controlHandleRadius);
+        svgGroup.appendChild(linearCurve);
+
+        this._bezierCurve = createSVGElement(&quot;path&quot;);
+        this._bezierCurve.classList.add(&quot;bezier-curve&quot;);
+        svgGroup.appendChild(this._bezierCurve);
+
+        function createControl(x1, y1)
+        {
+            x1 += this._controlHandleRadius;
+            y1 += this._controlHandleRadius;
+
+            var line = createSVGElement(&quot;line&quot;);
+            line.classList.add(&quot;control-line&quot;);
+            line.setAttribute(&quot;x1&quot;, x1);
+            line.setAttribute(&quot;y1&quot;, y1);
+            line.setAttribute(&quot;x2&quot;, x1);
+            line.setAttribute(&quot;y2&quot;, y1);
+            svgGroup.appendChild(line);
+
+            var handle = createSVGElement(&quot;circle&quot;);
+            handle.classList.add(&quot;control-handle&quot;);
+            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(&quot;div&quot;);
+        this._bezierPreviewTiming.classList.add(&quot;bezier-preview-timing&quot;);
+        this._element.appendChild(this._bezierPreviewTiming);
+
+        this._selectedControl = null;
+        this._bezierContainer.addEventListener(&quot;mousedown&quot;, 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 &quot;mousedown&quot;:
+            this._handleMousedown(event);
+            break;
+        case &quot;mousemove&quot;:
+            this._handleMousemove(event);
+            break;
+        case &quot;mouseup&quot;:
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        window.addEventListener(&quot;mousemove&quot;, this, true);
+        window.addEventListener(&quot;mouseup&quot;, this, true);
+
+        this._bezierPreview.style.animation = null;
+        this._bezierPreviewTiming.classList.remove(&quot;animate&quot;);
+
+        this._updateControlPointsForMouseEvent(event, true);
+    }
+
+    _handleMousemove(event)
+    {
+        this._updateControlPointsForMouseEvent(event);
+    }
+
+    _handleMouseup(event)
+    {
+        this._selectedControl.handle.classList.remove(&quot;selected&quot;);
+        this._selectedControl = null;
+        this._triggerPreviewAnimation();
+
+        window.removeEventListener(&quot;mousemove&quot;, this, true);
+        window.removeEventListener(&quot;mouseup&quot;, 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) &lt; this._outControl.point.distance(point))
+                this._selectedControl = this._inControl;
+            else
+                this._selectedControl = this._outControl;
+        }
+
+        this._selectedControl.point = point;
+        this._selectedControl.handle.classList.add(&quot;selected&quot;);
+        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(&quot;d&quot;, path);
+        this._updateControl(this._inControl);
+        this._updateControl(this._outControl);
+    }
+
+    _updateControl(control)
+    {
+        control.handle.setAttribute(&quot;cx&quot;, control.point.x + this._controlHandleRadius);
+        control.handle.setAttribute(&quot;cy&quot;, control.point.y + this._controlHandleRadius);
+
+        control.line.setAttribute(&quot;x2&quot;, control.point.x + this._controlHandleRadius);
+        control.line.setAttribute(&quot;y2&quot;, control.point.y + this._controlHandleRadius);
+    }
+
+    _triggerPreviewAnimation()
+    {
+        this._bezierPreview.style.animation = this._bezierPreviewAnimationStyleText + this._bezier.toString();
+        this._bezierPreviewTiming.classList.add(&quot;animate&quot;);
+    }
+
+    _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: &quot;bezier-editor-bezier-changed&quot;
+};
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -94,6 +94,23 @@
</span><span class="cx">     -webkit-filter: brightness(0.9);
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.css-style-text-editor &gt; .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 &gt; .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover {
+    -webkit-filter: brightness(0.9);
+}
+
+.css-style-text-editor &gt; .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active {
+    -webkit-filter: brightness(0.8);
+}
+
</ins><span class="cx"> .computed .css-style-text-editor &gt; .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
</span><span class="cx"> .css-style-text-editor &gt; .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
</span><span class="cx">     opacity: 0.5;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -389,7 +389,9 @@
</span><span class="cx">     didDismissPopover(popover)
</span><span class="cx">     {
</span><span class="cx">         if (popover === this._colorPickerPopover)
</span><del>-            delete this._colorPickerPopover;
</del><ins>+            this._colorPickerPopover = null;
+        if (popover === this._cubicBezierEditorPopover)
+            this._cubicBezierEditorPopover = null;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     completionControllerCompletionsHidden(completionController)
</span><span class="lines">@@ -768,8 +770,10 @@
</span><span class="cx">         // When the change is a completion change, create color swatches now since the changes
</span><span class="cx">         // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
</span><span class="cx">         // This way any auto completed colors get swatches right away.
</span><del>-        if (this._completionController.isCompletionChange(change))
</del><ins>+        if (this._completionController.isCompletionChange(change)) {
</ins><span class="cx">             this._createColorSwatches(false, change.from.line);
</span><ins>+            this._createBezierEditors(false, change.from.line);
+        }
</ins><span class="cx"> 
</span><span class="cx">         // Use a short delay for user input to coalesce more changes before committing. Other actions like
</span><span class="cx">         // undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
</span><span class="lines">@@ -821,6 +825,7 @@
</span><span class="cx"> 
</span><span class="cx">             // Look for colors and make swatches.
</span><span class="cx">             this._createColorSwatches(true);
</span><ins>+            this._createBezierEditors(true);
</ins><span class="cx"> 
</span><span class="cx">             this._markLinesWithCheckboxPlaceholder();
</span><span class="cx">         }
</span><span class="lines">@@ -873,7 +878,7 @@
</span><span class="cx">             var range = typeof lineNumber === &quot;number&quot; ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</span><span class="cx"> 
</span><span class="cx">             // Look for color strings and add swatches in front of them.
</span><del>-            this._codeMirror.createColorMarkers(range, function(marker, color, colorString) {
</del><ins>+            createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
</ins><span class="cx">                 var swatchElement = document.createElement(&quot;span&quot;);
</span><span class="cx">                 swatchElement.title = WebInspector.UIString(&quot;Click to open a colorpicker. Shift-click to change color format.&quot;);
</span><span class="cx">                 swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
</span><span class="lines">@@ -897,6 +902,33 @@
</span><span class="cx">             this._codeMirror.operation(update.bind(this));
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _createBezierEditors(nonatomic, lineNumber)
+    {
+        function update()
+        {
+            var range = typeof lineNumber === &quot;number&quot; ? 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(&quot;span&quot;);
+                bezierMarker.title = WebInspector.UIString(&quot;Click to open a cubic-bezier editor&quot;);
+                bezierMarker.className = WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName;
+                bezierMarker.addEventListener(&quot;click&quot;, 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));
+    }
+
</ins><span class="cx">     _updateTextMarkerForPropertyIfNeeded(property)
</span><span class="cx">     {
</span><span class="cx">         var textMarker = property.__propertyTextMarker;
</span><span class="lines">@@ -1242,8 +1274,9 @@
</span><span class="cx">             // Replace the text with a commented version.
</span><span class="cx">             this._codeMirror.replaceRange(&quot;/* &quot; + text + &quot; */&quot;, range.from, range.to);
</span><span class="cx"> 
</span><del>-            // Update the line for any color swatches that got removed.
</del><ins>+            // Update the line for any color swatches or cubic-beziers that got removed.
</ins><span class="cx">             this._createColorSwatches(true, range.from.line);
</span><ins>+            this._createBezierEditors(true, range.from.line);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._codeMirror.operation(update.bind(this));
</span><span class="lines">@@ -1281,8 +1314,9 @@
</span><span class="cx">             this._codeMirror.addLineClass(range.from.line, &quot;wrap&quot;, WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
</span><span class="cx">             this._codeMirror.replaceRange(text, range.from, range.to);
</span><span class="cx"> 
</span><del>-            // Update the line for any color swatches that got removed.
</del><ins>+            // Update the line for any color swatches or cubic-beziers that got removed.
</ins><span class="cx">             this._createColorSwatches(true, range.from.line);
</span><ins>+            this._createBezierEditors(true, range.from.line);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this._codeMirror.operation(update.bind(this));
</span><span class="lines">@@ -1391,6 +1425,93 @@
</span><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _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 &lt; 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 &quot;range&quot;
+                // variable to anticipate a different &quot;range.to&quot; 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;
+    }
+
</ins><span class="cx">     _propertyOverriddenStatusChanged(event)
</span><span class="cx">     {
</span><span class="cx">         this._updateTextMarkerForPropertyIfNeeded(event.target);
</span><span class="lines">@@ -1594,6 +1715,7 @@
</span><span class="cx"> 
</span><span class="cx">             // Look for colors and make swatches.
</span><span class="cx">             this._createColorSwatches(true);
</span><ins>+            this._createBezierEditors(true);
</ins><span class="cx"> 
</span><span class="cx">             // Restore the cursor position/selection.
</span><span class="cx">             this._codeMirror.setSelection(selectionAnchor, selectionHead);
</span><span class="lines">@@ -1682,6 +1804,7 @@
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = &quot;css-style-text-editor&quot;;
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = &quot;read-only&quot;;
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName = &quot;color-swatch&quot;;
</span><ins>+WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName = &quot;cubic-bezier-marker&quot;;
</ins><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = &quot;checkbox-placeholder&quot;;
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = &quot;editing-line&quot;;
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -496,140 +496,6 @@
</span><span class="cx">         return lineRects;
</span><span class="cx">     });
</span><span class="cx"> 
</span><del>-    CodeMirror.defineExtension(&quot;createColorMarkers&quot;, 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 &lt; 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 &gt; 0 &amp;&amp; /[-.\&quot;\']/.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 &lt; 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 &amp;&amp; !tokenType.includes(&quot;keyword&quot;)) {
-                    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(&quot;createGradientMarkers&quot;, 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 &lt; 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 === &quot;(&quot;)
-                        openParentheses++;
-                    if (c === &quot;)&quot;)
-                        openParentheses--;
-
-                    if (openParentheses === -1) {
-                        endChar++;
-                        break;
-                    }
-
-                    endChar++;
-                    if (endChar &gt;= 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;
-    });
-
</del><span class="cx">     function ignoreKey(codeMirror)
</span><span class="cx">     {
</span><span class="cx">         // Do nothing to ignore the key.
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (0 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -0,0 +1,170 @@
</span><ins>+/*
+ * 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 &lt; end; ++lineNumber) {
+        var lineContent = codeMirror.getLine(lineNumber);
+        var match = pattern.exec(lineContent);
+        while (match) {
+            if (typeof matchFunction === &quot;function&quot; &amp;&amp; !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 &lt; 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 &amp;&amp; !tokenType.includes(&quot;keyword&quot;)) {
+                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 === &quot;function&quot;)
+                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 &gt; 0 &amp;&amp; /[-.\&quot;\']/.test(lineContent[match.index - 1]));
+    }
+
+    return createCodeMirrorTextMarkers(&quot;Color&quot;, 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 &lt; 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 === &quot;(&quot;)
+                    openParentheses++;
+                if (c === &quot;)&quot;)
+                    openParentheses--;
+
+                if (openParentheses === -1) {
+                    endChar++;
+                    break;
+                }
+
+                endChar++;
+                if (endChar &gt;= 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 === &quot;function&quot;)
+                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(&quot;CubicBezier&quot;, cubicBezierRegex, null, codeMirror, range, callback);
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsPopoverjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -314,7 +314,7 @@
</span><span class="cx">         var startTime = Date.now();
</span><span class="cx">         var duration = 350;
</span><span class="cx">         var epsilon = 1 / (200 * duration);
</span><del>-        var spline = new WebInspector.UnitBezier(0.25, 0.1, 0.25, 1);
</del><ins>+        var spline = new WebInspector.CubicBezier(0.25, 0.1, 0.25, 1);
</ins><span class="cx"> 
</span><span class="cx">         var fromFrame = this._frame.copy();
</span><span class="cx">         var fromAnchor = this._anchorPoint.copy();
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -1594,6 +1594,7 @@
</span><span class="cx">     {
</span><span class="cx">         this.createColorMarkers(range);
</span><span class="cx">         this.createGradientMarkers(range);
</span><ins>+        this.createCubicBezierMarkers(range);
</ins><span class="cx"> 
</span><span class="cx">         this._updateTokenTrackingControllerState();
</span><span class="cx">     }
</span><span class="lines">@@ -1603,7 +1604,7 @@
</span><span class="cx">         // Look for the outermost editable marker.
</span><span class="cx">         var editableMarker;
</span><span class="cx">         for (var marker of markers) {
</span><del>-            if (!marker.range || (marker.type !== WebInspector.TextMarker.Type.Color &amp;&amp; marker.type !== WebInspector.TextMarker.Type.Gradient))
</del><ins>+            if (!marker.range || (marker.type !== WebInspector.TextMarker.Type.Color &amp;&amp; marker.type !== WebInspector.TextMarker.Type.Gradient &amp;&amp; marker.type !== WebInspector.TextMarker.Type.CubicBezier))
</ins><span class="cx">                 continue;
</span><span class="cx"> 
</span><span class="cx">             if (!editableMarker || (marker.range.startLine &lt; editableMarker.range.startLine || (marker.range.startLine === editableMarker.range.startLine &amp;&amp; marker.range.startColumn &lt; editableMarker.range.startColumn)))
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsTextEditorjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TextEditor.js (193069 => 193070)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TextEditor.js        2015-12-03 18:42:52 UTC (rev 193069)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TextEditor.js        2015-12-03 18:43:04 UTC (rev 193070)
</span><span class="lines">@@ -633,14 +633,19 @@
</span><span class="cx"> 
</span><span class="cx">     createColorMarkers(range)
</span><span class="cx">     {
</span><del>-        return this._codeMirror.createColorMarkers(range);
</del><ins>+        return createCodeMirrorColorTextMarkers(this._codeMirror, range);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     createGradientMarkers(range)
</span><span class="cx">     {
</span><del>-        return this._codeMirror.createGradientMarkers(range);
</del><ins>+        return createCodeMirrorGradientTextMarkers(this._codeMirror, range);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    createCubicBezierMarkers(range)
+    {
+        return createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range);
+    }
+
</ins><span class="cx">     editingControllerForMarker(editableMarker)
</span><span class="cx">     {
</span><span class="cx">         switch (editableMarker.type) {
</span><span class="lines">@@ -648,6 +653,8 @@
</span><span class="cx">             return new WebInspector.CodeMirrorColorEditingController(this._codeMirror, editableMarker);
</span><span class="cx">         case WebInspector.TextMarker.Type.Gradient:
</span><span class="cx">             return new WebInspector.CodeMirrorGradientEditingController(this._codeMirror, editableMarker);
</span><ins>+        case WebInspector.TextMarker.Type.CubicBezier:
+            return new WebInspector.CodeMirrorBezierEditingController(this._codeMirror, editableMarker);
</ins><span class="cx">         default:
</span><span class="cx">             return new WebInspector.CodeMirrorEditingController(this._codeMirror, editableMarker);
</span><span class="cx">         }
</span></span></pre>
</div>
</div>

</body>
</html>