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 * @implements {WebInspector.TargetManager.Observer} | 8 * @implements {WebInspector.TargetManager.Observer} |
9 */ | 9 */ |
10 WebInspector.AnimationTimeline = function() | 10 WebInspector.AnimationTimeline = function() |
(...skipping 19 matching lines...) Expand all Loading... |
30 this._uiAnimations = []; | 30 this._uiAnimations = []; |
31 this._groupBuffer = []; | 31 this._groupBuffer = []; |
32 /** @type {!Map.<!WebInspector.AnimationModel.AnimationGroup, !WebInspector.
AnimationGroupPreviewUI>} */ | 32 /** @type {!Map.<!WebInspector.AnimationModel.AnimationGroup, !WebInspector.
AnimationGroupPreviewUI>} */ |
33 this._previewMap = new Map(); | 33 this._previewMap = new Map(); |
34 this._symbol = Symbol("animationTimeline"); | 34 this._symbol = Symbol("animationTimeline"); |
35 /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */ | 35 /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */ |
36 this._animationsMap = new Map(); | 36 this._animationsMap = new Map(); |
37 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); | 37 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); |
38 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Capabili
ty.DOM); | 38 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Capabili
ty.DOM); |
39 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nod
eChanged, this); | 39 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nod
eChanged, this); |
40 } | 40 }; |
41 | 41 |
42 WebInspector.AnimationTimeline.GlobalPlaybackRates = [1, 0.25, 0.1]; | 42 WebInspector.AnimationTimeline.GlobalPlaybackRates = [1, 0.25, 0.1]; |
43 | 43 |
44 /** @enum {string} */ | 44 /** @enum {string} */ |
45 WebInspector.AnimationTimeline._ControlState = { | 45 WebInspector.AnimationTimeline._ControlState = { |
46 Play: "play-outline", | 46 Play: "play-outline", |
47 Replay: "replay-outline", | 47 Replay: "replay-outline", |
48 Pause: "pause-outline" | 48 Pause: "pause-outline" |
49 } | 49 }; |
50 | 50 |
51 WebInspector.AnimationTimeline.prototype = { | 51 WebInspector.AnimationTimeline.prototype = { |
52 wasShown: function() | 52 wasShown: function() |
53 { | 53 { |
54 for (var target of WebInspector.targetManager.targets(WebInspector.Targe
t.Capability.DOM)) | 54 for (var target of WebInspector.targetManager.targets(WebInspector.Targe
t.Capability.DOM)) |
55 this._addEventListeners(target); | 55 this._addEventListeners(target); |
56 }, | 56 }, |
57 | 57 |
58 willHide: function() | 58 willHide: function() |
59 { | 59 { |
(...skipping 629 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
689 */ | 689 */ |
690 _scrubberDragEnd: function(event) | 690 _scrubberDragEnd: function(event) |
691 { | 691 { |
692 var currentTime = Math.max(0, this._scrubberPlayer.currentTime); | 692 var currentTime = Math.max(0, this._scrubberPlayer.currentTime); |
693 this._scrubberPlayer.play(); | 693 this._scrubberPlayer.play(); |
694 this._scrubberPlayer.currentTime = currentTime; | 694 this._scrubberPlayer.currentTime = currentTime; |
695 this._currentTime.window().requestAnimationFrame(this._updateScrubber.bi
nd(this)); | 695 this._currentTime.window().requestAnimationFrame(this._updateScrubber.bi
nd(this)); |
696 }, | 696 }, |
697 | 697 |
698 __proto__: WebInspector.VBox.prototype | 698 __proto__: WebInspector.VBox.prototype |
699 } | 699 }; |
700 | 700 |
701 /** | 701 /** |
702 * @constructor | 702 * @constructor |
703 * @param {!WebInspector.AnimationModel.AnimationEffect} animationEffect | 703 * @param {!WebInspector.AnimationModel.AnimationEffect} animationEffect |
704 */ | 704 */ |
705 WebInspector.AnimationTimeline.NodeUI = function(animationEffect) | 705 WebInspector.AnimationTimeline.NodeUI = function(animationEffect) |
706 { | 706 { |
707 this.element = createElementWithClass("div", "animation-node-row"); | 707 this.element = createElementWithClass("div", "animation-node-row"); |
708 this._description = this.element.createChild("div", "animation-node-descript
ion"); | 708 this._description = this.element.createChild("div", "animation-node-descript
ion"); |
709 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); | 709 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); |
710 } | 710 }; |
711 | 711 |
712 WebInspector.AnimationTimeline.NodeUI.prototype = { | 712 WebInspector.AnimationTimeline.NodeUI.prototype = { |
713 /** | 713 /** |
714 * @param {?WebInspector.DOMNode} node | 714 * @param {?WebInspector.DOMNode} node |
715 */ | 715 */ |
716 nodeResolved: function(node) | 716 nodeResolved: function(node) |
717 { | 717 { |
718 if (!node) { | 718 if (!node) { |
719 this._description.createTextChild(WebInspector.UIString("<node>")); | 719 this._description.createTextChild(WebInspector.UIString("<node>")); |
720 return; | 720 return; |
(...skipping 16 matching lines...) Expand all Loading... |
737 nodeRemoved: function() | 737 nodeRemoved: function() |
738 { | 738 { |
739 this.element.classList.add("animation-node-removed"); | 739 this.element.classList.add("animation-node-removed"); |
740 this._node = null; | 740 this._node = null; |
741 }, | 741 }, |
742 | 742 |
743 _nodeChanged: function() | 743 _nodeChanged: function() |
744 { | 744 { |
745 this.element.classList.toggle("animation-node-selected", this._node && t
his._node === WebInspector.context.flavor(WebInspector.DOMNode)); | 745 this.element.classList.toggle("animation-node-selected", this._node && t
his._node === WebInspector.context.flavor(WebInspector.DOMNode)); |
746 } | 746 } |
747 } | 747 }; |
748 | 748 |
749 /** | 749 /** |
750 * @constructor | 750 * @constructor |
751 * @param {number} steps | 751 * @param {number} steps |
752 * @param {string} stepAtPosition | 752 * @param {string} stepAtPosition |
753 */ | 753 */ |
754 WebInspector.AnimationTimeline.StepTimingFunction = function(steps, stepAtPositi
on) | 754 WebInspector.AnimationTimeline.StepTimingFunction = function(steps, stepAtPositi
on) |
755 { | 755 { |
756 this.steps = steps; | 756 this.steps = steps; |
757 this.stepAtPosition = stepAtPosition; | 757 this.stepAtPosition = stepAtPosition; |
758 } | 758 }; |
759 | 759 |
760 /** | 760 /** |
761 * @param {string} text | 761 * @param {string} text |
762 * @return {?WebInspector.AnimationTimeline.StepTimingFunction} | 762 * @return {?WebInspector.AnimationTimeline.StepTimingFunction} |
763 */ | 763 */ |
764 WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) { | 764 WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) { |
765 var match = text.match(/^steps\((\d+), (start|middle)\)$/); | 765 var match = text.match(/^steps\((\d+), (start|middle)\)$/); |
766 if (match) | 766 if (match) |
767 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(ma
tch[1], 10), match[2]); | 767 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(ma
tch[1], 10), match[2]); |
768 match = text.match(/^steps\((\d+)\)$/); | 768 match = text.match(/^steps\((\d+)\)$/); |
769 if (match) | 769 if (match) |
770 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(ma
tch[1], 10), "end"); | 770 return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(ma
tch[1], 10), "end"); |
771 return null; | 771 return null; |
772 } | 772 }; |
OLD | NEW |