Web Inspector: Custom transition bezier curve editor preview should loop when not...

https://bugs.webkit.org/show_bug.cgi?id=154738
<rdar://problem/24861563>

Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-02-26
Reviewed by Timothy Hatcher.

Added extra frames to bezier preview animation to allow it to infinitely
repeat without being jarring to watch.

* UserInterface/Views/BezierEditor.css:
(.bezier-editor > .bezier-preview-timing.animate):
(@keyframes bezierPreview):
* UserInterface/Views/BezierEditor.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197235 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index cd4013f..e2a33ef 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,21 @@
 2016-02-26  Devin Rousso  <dcrousso+webkit@gmail.com>
 
+        Web Inspector: Custom transition bezier curve editor preview should loop when not editing curve
+        https://bugs.webkit.org/show_bug.cgi?id=154738
+        <rdar://problem/24861563>
+
+        Reviewed by Timothy Hatcher.
+
+        Added extra frames to bezier preview animation to allow it to infinitely
+        repeat without being jarring to watch.
+
+        * UserInterface/Views/BezierEditor.css:
+        (.bezier-editor > .bezier-preview-timing.animate):
+        (@keyframes bezierPreview):
+        * UserInterface/Views/BezierEditor.js:
+
+2016-02-26  Devin Rousso  <dcrousso+webkit@gmail.com>
+
         Web Inspector: Keyboard controls to nudge control points in custom transition bezier curve editor would be nice
         https://bugs.webkit.org/show_bug.cgi?id=154739
         <rdar://problem/24861498>

diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
index 73938bb..f37e5b2 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
@@ -52,11 +52,13 @@
 }
 
 .bezier-editor > .bezier-preview-timing.animate {
-    animation: bezierPreview 2s linear 250ms forwards;
+    animation: bezierPreview 2.5s linear 250ms infinite;
 }
 
 @keyframes bezierPreview {
     from { transform: translate(0, 0); }
+    10% { transform: translate(0, 0); }
+    90% { transform: translate(170px, 0); }
     to { transform: translate(170px, 0); }
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
index 8688025..29dc96a 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
@@ -38,7 +38,7 @@ WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
         this._controlHandleRadius = 7;
         this._bezierWidth = editorWidth - (this._controlHandleRadius * 2);
         this._bezierHeight = editorHeight - (this._controlHandleRadius * 2) - (this._padding * 2);
-        this._bezierPreviewAnimationStyleText = "bezierPreview 2s 250ms forwards ";
+        this._bezierPreviewAnimationStyleText = "bezierPreview 2.5s 250ms infinite ";
 
         var bezierPreviewContainer = document.createElement("div");
         bezierPreviewContainer.id = "bezierPreview";