Devtools Animations: Add cubic bezier easing editor for animations

Source/devtools/front_end/elements/animationTimeline.css

 /*
  * Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .animation-node-row {
     width: 100%;
     display: flex;
     border-bottom: 1px dashed #ccc;
@@ skipping 41 matching lines @@
 circle.animation-endpoint, circle.animation-keyframe-point {
     transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
     transform: scale(1);
     transform-origin: 50% 50%;
 }
 
 circle.animation-endpoint:hover, circle.animation-keyframe-point:hover {
     transform: scale(1.2);
 }
 
+.animation-tail-iterations circle.animation-endpoint:hover, .animation-tail-iterations circle.animation-keyframe-point:hover {
+    transform: scale(1);
+}
+
 circle.animation-endpoint:active, circle.animation-keyframe-point:active {
     transform: scale(1);
 }
 
 circle.animation-keyframe-point {
     fill: white;
 }
 
 .animation-name {
     position: absolute;
     top: 15px;
     color: #333;
     text-align: center;
     margin-left: -8px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    min-width: 45px;
 }
 
 .animation-timeline-header {
     height: 44px;
     border-bottom: 1px solid #ccc;
     flex-shrink: 0;
 }
 
 .animation-controls {
     width: 200px;
@@ skipping 190 matching lines @@
 }
 
 .animation-node-row.animation-node-removed {
     background-color: #fff0f0;
 }
 
 svg.animation-ui g:first-child {
     opacity: 1;
 }
 
-.animation-tail-iterations {
+g {
     opacity: 0.5;
 }
 
 svg.animation-ui.animation-ui-canceled {
     -webkit-filter: grayscale(100%);
     transition: -webkit-filter 100ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .animation-keyframe-step line {
     stroke-width: 2;
     stroke-opacity: 0.3;
 }
 
 text.animation-timeline-grid-label {
     font-size: 10px;
     fill: #999;
 }
 
 .animation-timeline-rows {
     flex-grow: 1;
     overflow-y: auto;
     z-index: 1;
 }
 
 .toolbar.animation-controls-toolbar {
     float: right;
-}
+}
+
+.bezier-icon {
+    width: 14px;
+    height: 14px;
+    background-color: #9C27B0;
+    position: absolute;
+    top: 13px;
+    border-radius: 2px;
+    opacity: 0;
+    z-index: 10;
+    padding: 2px;
+    left: -30px;
+    transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1);
+    transition-delay: 500ms;
+}
+
+.bezier-icon.shown {

[dgozman, 2015/05/26 12:02:23]

We usually use ".hidden" instead of ".shown". Doesn't it work for you here?

[samli, 2015/05/27 05:21:59]

In this case it wouldn't since I want to animate the opacity and it has a long
delay before hiding.

+    opacity: 0.3;
+    transition-delay: 0s;
+}
+
+.bezier-icon.bezier-editor-open {
+    opacity: 1.0 !important;
+}
+
+.bezier-icon:hover {
+    opacity: 1.0;
+    transition-delay: 0s;
+}
+
+.bezier-icon path {
+    stroke: white;
+    stroke-width: 1.5;
+    stroke-linecap: square;
+    fill: none;
+}