OLD | NEW |
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 * @param {!WebInspector.StylesSidebarPane} stylesPane | 8 * @param {!WebInspector.StylesSidebarPane} stylesPane |
9 */ | 9 */ |
10 WebInspector.AnimationTimeline = function(stylesPane) | 10 WebInspector.AnimationTimeline = function(stylesPane) |
(...skipping 259 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
270 /** | 270 /** |
271 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation | 271 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation |
272 * @return {boolean} | 272 * @return {boolean} |
273 */ | 273 */ |
274 _resizeWindow: function(animation) | 274 _resizeWindow: function(animation) |
275 { | 275 { |
276 var resized = false; | 276 var resized = false; |
277 if (!this._startTime) | 277 if (!this._startTime) |
278 this._startTime = animation.startTime(); | 278 this._startTime = animation.startTime(); |
279 | 279 |
280 // This shows at most 3 iterations | 280 // This shows at most 2 iterations |
281 var duration = animation.source().duration() * Math.min(3, animation.sou
rce().iterations()); | 281 var iterations = animation.source().iterations() || 1; |
282 var requiredDuration = animation.startTime() + animation.source().delay(
) + duration + animation.source().endDelay() - this.startTime(); | 282 var duration = animation.source().duration() * Math.min(3, iterations); |
| 283 var requiredDuration = animation.startTime() + duration + animation.sour
ce().delay() - this.startTime(); |
283 if (requiredDuration > this._duration * 0.8) { | 284 if (requiredDuration > this._duration * 0.8) { |
284 resized = true; | 285 resized = true; |
285 this._duration = requiredDuration * 1.5; | 286 this._duration = requiredDuration * 1.5; |
286 this._animateTime(animation.startTime() - this.startTime()); | 287 this._animateTime(animation.startTime() - this.startTime()); |
287 } | 288 } |
288 return resized; | 289 return resized; |
289 }, | 290 }, |
290 | 291 |
291 /** | 292 /** |
292 * @param {number=} time | 293 * @param {number=} time |
293 */ | 294 */ |
294 _animateTime: function(time) | 295 _animateTime: function(time) |
295 { | 296 { |
296 var oldPlayer = this._scrubberPlayer; | 297 var oldPlayer = this._scrubberPlayer; |
297 | 298 |
298 this._scrubberPlayer = this._timelineScrubber.animate([ | 299 this._scrubberPlayer = this._timelineScrubber.animate([ |
299 { transform: "translateX(0px)" }, | 300 { transform: "translateX(0px)" }, |
300 { transform: "translateX(" + (this.width() - this._scrubberRadius)
+ "px)" } | 301 { transform: "translateX(" + (this._cachedTimelineWidth - this._scr
ubberRadius) + "px)" } |
301 ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRati
o(), fill: "forwards" }); | 302 ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRati
o(), fill: "forwards" }); |
302 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate; | 303 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate; |
303 | 304 |
304 if (time !== undefined) | 305 if (time !== undefined) |
305 this._scrubberPlayer.currentTime = time; | 306 this._scrubberPlayer.currentTime = time; |
306 else if (oldPlayer.playState === "finished") | 307 else if (oldPlayer.playState === "finished") |
307 this._scrubberPlayer.finish(); | 308 this._scrubberPlayer.finish(); |
308 else | 309 else |
309 this._scrubberPlayer.startTime = oldPlayer.startTime; | 310 this._scrubberPlayer.startTime = oldPlayer.startTime; |
310 | 311 |
311 if (oldPlayer) | 312 if (oldPlayer) |
312 oldPlayer.cancel(); | 313 oldPlayer.cancel(); |
313 this._timelineScrubber.classList.remove("animation-timeline-end"); | 314 this._timelineScrubber.classList.remove("animation-timeline-end"); |
314 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); | 315 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); |
315 }, | 316 }, |
316 | 317 |
317 /** | 318 /** |
318 * @return {number} | 319 * @return {number} |
319 */ | 320 */ |
320 pixelMsRatio: function() | 321 pixelMsRatio: function() |
321 { | 322 { |
322 return this.width() / this.duration() || 0; | 323 return this._cachedTimelineWidth / this.duration() || 0; |
323 }, | 324 }, |
324 | 325 |
325 /** | 326 /** |
326 * @param {number} timestamp | 327 * @param {number} timestamp |
327 */ | 328 */ |
328 _updateScrubber: function(timestamp) | 329 _updateScrubber: function(timestamp) |
329 { | 330 { |
330 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(this._scrubberPlayer.currentTime)); | 331 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(this._scrubberPlayer.currentTime)); |
331 if (this._scrubberPlayer.playState === "pending" || this._scrubberPlayer
.playState === "running") { | 332 if (this._scrubberPlayer.playState === "pending" || this._scrubberPlayer
.playState === "running") { |
332 this._timelineScrubberHead.window().requestAnimationFrame(this._upda
teScrubber.bind(this)); | 333 this._timelineScrubberHead.window().requestAnimationFrame(this._upda
teScrubber.bind(this)); |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
386 __proto__: WebInspector.VBox.prototype | 387 __proto__: WebInspector.VBox.prototype |
387 } | 388 } |
388 | 389 |
389 /** | 390 /** |
390 * @constructor | 391 * @constructor |
391 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode | 392 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode |
392 */ | 393 */ |
393 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { | 394 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { |
394 /** | 395 /** |
395 * @param {?WebInspector.DOMNode} node | 396 * @param {?WebInspector.DOMNode} node |
396 * @this {WebInspector.AnimationTimeline.NodeUI} | |
397 */ | 397 */ |
398 function nodeResolved(node) | 398 function nodeResolved(node) |
399 { | 399 { |
400 this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyN
odeReference(node)); | 400 description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeRef
erence(node)); |
401 } | 401 } |
402 | 402 |
403 this._rows = []; | 403 this._rows = []; |
404 this.element = createElementWithClass("div", "animation-node-row"); | 404 this.element = createElementWithClass("div", "animation-node-row"); |
405 this._description = this.element.createChild("div", "animation-node-descript
ion"); | 405 var description = this.element.createChild("div", "animation-node-descriptio
n"); |
406 animationNode.getNode(nodeResolved.bind(this)); | 406 animationNode.getNode(nodeResolved); |
407 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); | 407 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); |
408 } | 408 } |
409 | 409 |
410 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}
} */ | 410 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}
} */ |
411 WebInspector.AnimationTimeline.NodeRow; | 411 WebInspector.AnimationTimeline.NodeRow; |
412 | 412 |
413 WebInspector.AnimationTimeline.NodeUI.prototype = { | 413 WebInspector.AnimationTimeline.NodeUI.prototype = { |
414 /** | 414 /** |
415 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation | 415 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation |
416 * @return {!WebInspector.AnimationTimeline.NodeRow} | 416 * @return {!WebInspector.AnimationTimeline.NodeRow} |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
477 if (this._animation.source().keyframesRule()) | 477 if (this._animation.source().keyframesRule()) |
478 this._keyframes = this._animation.source().keyframesRule().keyframes(); | 478 this._keyframes = this._animation.source().keyframesRule().keyframes(); |
479 | 479 |
480 this._nameElement = parentElement.createChild("div", "animation-name"); | 480 this._nameElement = parentElement.createChild("div", "animation-name"); |
481 this._nameElement.textContent = this._animation.name(); | 481 this._nameElement.textContent = this._animation.name(); |
482 | 482 |
483 this._svg = parentElement.createSVGChild("svg", "animation-ui"); | 483 this._svg = parentElement.createSVGChild("svg", "animation-ui"); |
484 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); | 484 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); |
485 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; | 485 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; |
486 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); | 486 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); |
487 this._activeIntervalGroup = this._svg.createSVGChild("g"); | |
488 | 487 |
489 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, beziers: !Object.<number, !Element>}>} */ | 488 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, beziers: !Object.<number, !Element>}>} */ |
490 this._cachedElements = []; | 489 this._cachedElements = []; |
491 | 490 |
492 this._movementInMs = 0; | 491 this._movementInMs = 0; |
493 this.redraw(); | 492 this.redraw(); |
494 } | 493 } |
495 | 494 |
496 /** | 495 /** |
497 * @enum {string} | 496 * @enum {string} |
(...skipping 16 matching lines...) Expand all Loading... |
514 | 513 |
515 /** | 514 /** |
516 * @param {?WebInspector.DOMNode} node | 515 * @param {?WebInspector.DOMNode} node |
517 */ | 516 */ |
518 setNode: function(node) | 517 setNode: function(node) |
519 { | 518 { |
520 this._node = node; | 519 this._node = node; |
521 }, | 520 }, |
522 | 521 |
523 /** | 522 /** |
524 * @param {!Element} parentElement | |
525 * @param {string} className | |
526 */ | |
527 _createLine: function(parentElement, className) | |
528 { | |
529 var line = parentElement.createSVGChild("line", className); | |
530 line.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin
); | |
531 line.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight
); | |
532 line.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight
); | |
533 line.style.stroke = this._color(); | |
534 return line; | |
535 }, | |
536 | |
537 /** | |
538 * @param {number} iteration | 523 * @param {number} iteration |
539 * @param {!Element} parentElement | 524 * @param {!Element} parentElement |
540 */ | 525 */ |
541 _drawAnimationLine: function(iteration, parentElement) | 526 _drawAnimationLine: function(iteration, parentElement) |
542 { | 527 { |
543 var cache = this._cachedElements[iteration]; | 528 var cache = this._cachedElements[iteration]; |
544 if (!cache.animationLine) | 529 if (!cache.animationLine) |
545 cache.animationLine = this._createLine(parentElement, "animation-lin
e"); | 530 cache.animationLine = parentElement.createSVGChild("line", "animatio
n-line"); |
| 531 cache.animationLine.setAttribute("y1", WebInspector.AnimationUI.Options.
AnimationHeight); |
| 532 cache.animationLine.setAttribute("x1", WebInspector.AnimationUI.Options.
AnimationMargin); |
546 cache.animationLine.setAttribute("x2", this._duration() * this._timeline
.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin); | 533 cache.animationLine.setAttribute("x2", this._duration() * this._timeline
.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin); |
| 534 cache.animationLine.setAttribute("y2", WebInspector.AnimationUI.Options.
AnimationHeight); |
| 535 cache.animationLine.style.stroke = this._color(); |
547 }, | 536 }, |
548 | 537 |
549 /** | 538 /** |
550 * @param {!Element} parentElement | |
551 */ | |
552 _drawDelayLine: function(parentElement) | |
553 { | |
554 if (!this._delayLine) { | |
555 this._delayLine = this._createLine(parentElement, "animation-delay-l
ine"); | |
556 this._endDelayLine = this._createLine(parentElement, "animation-dela
y-line"); | |
557 } | |
558 this._delayLine.setAttribute("x1", WebInspector.AnimationUI.Options.Anim
ationMargin); | |
559 this._delayLine.setAttribute("x2", this._delay() * this._timeline.pixelM
sRatio() + WebInspector.AnimationUI.Options.AnimationMargin); | |
560 var leftMargin = (this._delay() + this._duration() * this._animation.sou
rce().iterations()) * this._timeline.pixelMsRatio(); | |
561 this._endDelayLine.style.transform = "translateX(" + Math.min(leftMargin
, this._timeline.width()) + "px)"; | |
562 this._endDelayLine.setAttribute("x1", WebInspector.AnimationUI.Options.A
nimationMargin); | |
563 this._endDelayLine.setAttribute("x2", this._animation.source().endDelay(
) * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMa
rgin); | |
564 }, | |
565 | |
566 /** | |
567 * @param {number} iteration | 539 * @param {number} iteration |
568 * @param {!Element} parentElement | 540 * @param {!Element} parentElement |
569 * @param {number} x | 541 * @param {number} x |
570 * @param {number} keyframeIndex | 542 * @param {number} keyframeIndex |
571 * @param {boolean} attachEvents | 543 * @param {boolean} attachEvents |
572 */ | 544 */ |
573 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) | 545 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) |
574 { | 546 { |
575 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { | 547 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { |
576 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x); | 548 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x); |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
613 var bezierCache = this._cachedElements[iteration].beziers; | 585 var bezierCache = this._cachedElements[iteration].beziers; |
614 if (!bezierCache[keyframeIndex]) | 586 if (!bezierCache[keyframeIndex]) |
615 bezierCache[keyframeIndex] = parentElement.createSVGChild("path", "a
nimation-keyframe"); | 587 bezierCache[keyframeIndex] = parentElement.createSVGChild("path", "a
nimation-keyframe"); |
616 bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistanc
e + "px)"; | 588 bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistanc
e + "px)"; |
617 bezierCache[keyframeIndex].style.fill = this._color(); | 589 bezierCache[keyframeIndex].style.fill = this._color(); |
618 WebInspector.BezierUI.drawVelocityChart(bezier, bezierCache[keyframeInde
x], width); | 590 WebInspector.BezierUI.drawVelocityChart(bezier, bezierCache[keyframeInde
x], width); |
619 }, | 591 }, |
620 | 592 |
621 redraw: function() | 593 redraw: function() |
622 { | 594 { |
623 var durationWithDelay = this._delay() + this._duration() * this._animati
on.source().iterations() + this._animation.source().endDelay(); | 595 var iterationWidth = this._duration() * this._timeline.pixelMsRatio(); |
624 var svgWidth = Math.min(this._timeline.width(), durationWithDelay * this
._timeline.pixelMsRatio()); | 596 var svgWidth = this._animation.source().iterations() ? Math.min(this._ti
meline.width(), iterationWidth * this._animation.source().iterations()) : this._
timeline.width(); |
625 var leftMargin = (this._animation.startTime() - this._timeline.startTime
()) * this._timeline.pixelMsRatio(); | 597 svgWidth += 2 * WebInspector.AnimationUI.Options.AnimationMargin; |
626 | 598 var leftMargin = (this._animation.startTime() - this._timeline.startTime
() + this._delay()) * this._timeline.pixelMsRatio(); |
627 this._svg.setAttribute("width", svgWidth + 2 * WebInspector.AnimationUI.
Options.AnimationMargin); | 599 this._svg.setAttribute("width", svgWidth); |
628 this._svg.style.transform = "translateX(" + leftMargin + "px)"; | 600 this._svg.style.transform = "translateX(" + leftMargin + "px)"; |
629 this._activeIntervalGroup.style.transform = "translateX(" + (this._delay
() * this._timeline.pixelMsRatio()) + "px)"; | 601 this._nameElement.style.transform = "translateX(" + leftMargin + "px)"; |
630 | 602 this._nameElement.style.width = svgWidth + "px"; |
631 this._nameElement.style.transform = "translateX(" + (leftMargin + this._
delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.Anima
tionMargin) + "px)"; | |
632 this._nameElement.style.width = this._duration() * this._timeline.pixelM
sRatio() + "px"; | |
633 this._drawDelayLine(this._svg); | |
634 | 603 |
635 if (this._animation.type() === "CSSTransition") { | 604 if (this._animation.type() === "CSSTransition") { |
636 this._renderTransition(); | 605 this._renderTransition(); |
637 return; | 606 return; |
638 } | 607 } |
639 | 608 |
640 this._renderIteration(this._activeIntervalGroup, 0); | 609 var numIterations = this._animation.source().iterations() ? this._animat
ion.source().iterations() : Infinity; |
| 610 this._renderIteration(this._svg, 0); |
641 if (!this._tailGroup) | 611 if (!this._tailGroup) |
642 this._tailGroup = this._activeIntervalGroup.createSVGChild("g", "ani
mation-tail-iterations"); | 612 this._tailGroup = this._svg.createSVGChild("g", "animation-tail-iter
ations"); |
643 var iterationWidth = this._duration() * this._timeline.pixelMsRatio(); | 613 for (var iteration = 1; iteration < numIterations && iterationWidth * (i
teration - 1) < this._timeline.width(); iteration++) |
644 for (var iteration = 1; iteration < this._animation.source().iterations(
) && iterationWidth * (iteration - 1) < this._timeline.width(); iteration++) | |
645 this._renderIteration(this._tailGroup, iteration); | 614 this._renderIteration(this._tailGroup, iteration); |
646 }, | 615 }, |
647 | 616 |
648 _renderTransition: function() | 617 _renderTransition: function() |
649 { | 618 { |
650 if (!this._cachedElements[0]) | 619 if (!this._cachedElements[0]) |
651 this._cachedElements[0] = { animationLine: null, keyframePoints: {},
beziers: {}, group: null }; | 620 this._cachedElements[0] = { animationLine: null, keyframePoints: {},
beziers: {}, group: null }; |
652 this._drawAnimationLine(0, this._activeIntervalGroup); | 621 this._drawAnimationLine(0, this._svg); |
653 var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.sou
rce().easing()); | 622 var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.sou
rce().easing()); |
654 // FIXME: add support for step functions | 623 // FIXME: add support for step functions |
655 if (bezier) | 624 if (bezier) |
656 this._renderBezierKeyframe(0, 0, this._activeIntervalGroup, WebInspe
ctor.AnimationUI.Options.AnimationMargin, this._duration() * this._timeline.pixe
lMsRatio(), bezier); | 625 this._renderBezierKeyframe(0, 0, this._svg, WebInspector.AnimationUI
.Options.AnimationMargin, this._duration() * this._timeline.pixelMsRatio(), bezi
er); |
657 this._drawPoint(0, this._activeIntervalGroup, WebInspector.AnimationUI.O
ptions.AnimationMargin, 0, true); | 626 this._drawPoint(0, this._svg, WebInspector.AnimationUI.Options.Animation
Margin, 0, true); |
658 this._drawPoint(0, this._activeIntervalGroup, this._duration() * this._t
imeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, t
rue); | 627 this._drawPoint(0, this._svg, this._duration() * this._timeline.pixelMsR
atio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, true); |
659 }, | 628 }, |
660 | 629 |
661 /** | 630 /** |
662 * @param {!Element} parentElement | 631 * @param {!Element} parentElement |
663 * @param {number} iteration | 632 * @param {number} iteration |
664 */ | 633 */ |
665 _renderIteration: function(parentElement, iteration) | 634 _renderIteration: function(parentElement, iteration) |
666 { | 635 { |
667 if (!this._cachedElements[iteration]) | 636 if (!this._cachedElements[iteration]) |
668 this._cachedElements[iteration] = { animationLine: null, keyframePoi
nts: {}, beziers: {}, group: parentElement.createSVGChild("g") }; | 637 this._cachedElements[iteration] = { animationLine: null, keyframePoi
nts: {}, beziers: {}, group: parentElement.createSVGChild("g") }; |
(...skipping 204 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
873 "Light Blue": WebInspector.Color.parse("#03A9F4"), | 842 "Light Blue": WebInspector.Color.parse("#03A9F4"), |
874 "Deep Orange": WebInspector.Color.parse("#FF5722"), | 843 "Deep Orange": WebInspector.Color.parse("#FF5722"), |
875 "Blue": WebInspector.Color.parse("#5677FC"), | 844 "Blue": WebInspector.Color.parse("#5677FC"), |
876 "Lime": WebInspector.Color.parse("#CDDC39"), | 845 "Lime": WebInspector.Color.parse("#CDDC39"), |
877 "Blue Grey": WebInspector.Color.parse("#607D8B"), | 846 "Blue Grey": WebInspector.Color.parse("#607D8B"), |
878 "Pink": WebInspector.Color.parse("#E91E63"), | 847 "Pink": WebInspector.Color.parse("#E91E63"), |
879 "Green": WebInspector.Color.parse("#0F9D58"), | 848 "Green": WebInspector.Color.parse("#0F9D58"), |
880 "Brown": WebInspector.Color.parse("#795548"), | 849 "Brown": WebInspector.Color.parse("#795548"), |
881 "Cyan": WebInspector.Color.parse("#00BCD4") | 850 "Cyan": WebInspector.Color.parse("#00BCD4") |
882 } | 851 } |
OLD | NEW |