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 13 matching lines...) Expand all Loading... |
24 | 24 |
25 this._emptyTimelineMessage = this._animationsContainer.createChild("div", "a
nimation-timeline-empty-message"); | 25 this._emptyTimelineMessage = this._animationsContainer.createChild("div", "a
nimation-timeline-empty-message"); |
26 var message = this._emptyTimelineMessage.createChild("div"); | 26 var message = this._emptyTimelineMessage.createChild("div"); |
27 message.textContent = WebInspector.UIString("Trigger animations on the page
to view and tweak them on the animation timeline."); | 27 message.textContent = WebInspector.UIString("Trigger animations on the page
to view and tweak them on the animation timeline."); |
28 | 28 |
29 this._duration = this._defaultDuration(); | 29 this._duration = this._defaultDuration(); |
30 this._scrubberRadius = 30; | 30 this._scrubberRadius = 30; |
31 this._timelineControlsWidth = 230; | 31 this._timelineControlsWidth = 230; |
32 /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.No
deUI>} */ | 32 /** @type {!Map.<!DOMAgent.BackendNodeId, !WebInspector.AnimationTimeline.No
deUI>} */ |
33 this._nodesMap = new Map(); | 33 this._nodesMap = new Map(); |
| 34 this._groupBuffer = []; |
| 35 this._groupBufferSize = 8; |
| 36 /** @type {!Map.<!WebInspector.AnimationModel.AnimationGroup, !WebInspector.
AnimationGroupPreviewUI>} */ |
| 37 this._previewMap = new Map(); |
34 this._symbol = Symbol("animationTimeline"); | 38 this._symbol = Symbol("animationTimeline"); |
35 /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */ | 39 /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */ |
36 this._animationsMap = new Map(); | 40 this._animationsMap = new Map(); |
37 WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel,
WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNav
igated, this); | 41 WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel,
WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNav
igated, this); |
38 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); | 42 WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspec
tor.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); |
39 | 43 |
40 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag
e); | 44 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag
e); |
41 } | 45 } |
42 | 46 |
43 WebInspector.AnimationTimeline.GlobalPlaybackRates = [0.1, 0.25, 0.5, 1.0]; | 47 WebInspector.AnimationTimeline.GlobalPlaybackRates = [0.1, 0.25, 0.5, 1.0]; |
(...skipping 30 matching lines...) Expand all Loading... |
74 this._removeEventListeners(target); | 78 this._removeEventListeners(target); |
75 }, | 79 }, |
76 | 80 |
77 /** | 81 /** |
78 * @param {!WebInspector.Target} target | 82 * @param {!WebInspector.Target} target |
79 */ | 83 */ |
80 _addEventListeners: function(target) | 84 _addEventListeners: function(target) |
81 { | 85 { |
82 var animationModel = WebInspector.AnimationModel.fromTarget(target); | 86 var animationModel = WebInspector.AnimationModel.fromTarget(target); |
83 animationModel.ensureEnabled(); | 87 animationModel.ensureEnabled(); |
84 animationModel.addEventListener(WebInspector.AnimationModel.Events.Anima
tionCreated, this._animationCreated, this); | 88 animationModel.addEventListener(WebInspector.AnimationModel.Events.Anima
tionGroupStarted, this._animationGroupStarted, this); |
85 animationModel.addEventListener(WebInspector.AnimationModel.Events.Anima
tionCanceled, this._animationCanceled, this); | 89 animationModel.addEventListener(WebInspector.AnimationModel.Events.Anima
tionCanceled, this._animationCanceled, this); |
86 }, | 90 }, |
87 | 91 |
88 /** | 92 /** |
89 * @param {!WebInspector.Target} target | 93 * @param {!WebInspector.Target} target |
90 */ | 94 */ |
91 _removeEventListeners: function(target) | 95 _removeEventListeners: function(target) |
92 { | 96 { |
93 var animationModel = WebInspector.AnimationModel.fromTarget(target); | 97 var animationModel = WebInspector.AnimationModel.fromTarget(target); |
94 animationModel.removeEventListener(WebInspector.AnimationModel.Events.An
imationCreated, this._animationCreated, this); | 98 animationModel.removeEventListener(WebInspector.AnimationModel.Events.An
imationGroupStarted, this._animationGroupStarted, this); |
95 animationModel.removeEventListener(WebInspector.AnimationModel.Events.An
imationCanceled, this._animationCanceled, this); | 99 animationModel.removeEventListener(WebInspector.AnimationModel.Events.An
imationCanceled, this._animationCanceled, this); |
96 }, | 100 }, |
97 | 101 |
98 /** | 102 /** |
99 * @param {?WebInspector.DOMNode} node | 103 * @param {?WebInspector.DOMNode} node |
100 */ | 104 */ |
101 setNode: function(node) | 105 setNode: function(node) |
102 { | 106 { |
103 for (var nodeUI of this._nodesMap.values()) | 107 for (var nodeUI of this._nodesMap.values()) |
104 nodeUI.setNode(node); | 108 nodeUI.setNode(node); |
(...skipping 24 matching lines...) Expand all Loading... |
129 * @this {WebInspector.AnimationTimeline} | 133 * @this {WebInspector.AnimationTimeline} |
130 */ | 134 */ |
131 function playbackSliderInputHandler(event) | 135 function playbackSliderInputHandler(event) |
132 { | 136 { |
133 this._underlyingPlaybackRate = WebInspector.AnimationTimeline.Global
PlaybackRates[event.target.value]; | 137 this._underlyingPlaybackRate = WebInspector.AnimationTimeline.Global
PlaybackRates[event.target.value]; |
134 this._updatePlaybackControls(); | 138 this._updatePlaybackControls(); |
135 } | 139 } |
136 | 140 |
137 var container = createElementWithClass("div", "animation-timeline-header
"); | 141 var container = createElementWithClass("div", "animation-timeline-header
"); |
138 var controls = container.createChild("div", "animation-controls"); | 142 var controls = container.createChild("div", "animation-controls"); |
139 container.createChild("div", "animation-timeline-markers"); | 143 this._previewContainer = container.createChild("div", "animation-timelin
e-buffer"); |
140 | 144 |
141 var toolbar = new WebInspector.Toolbar(controls); | 145 var toolbar = new WebInspector.Toolbar(controls); |
142 toolbar.element.classList.add("animation-controls-toolbar"); | 146 toolbar.element.classList.add("animation-controls-toolbar"); |
143 this._controlButton = new WebInspector.ToolbarButton(WebInspector.UIStri
ng("Replay timeline"), "replay-outline-toolbar-item"); | 147 this._controlButton = new WebInspector.ToolbarButton(WebInspector.UIStri
ng("Replay timeline"), "replay-outline-toolbar-item"); |
144 this._controlButton.addEventListener("click", this._controlButtonToggle.
bind(this)); | 148 this._controlButton.addEventListener("click", this._controlButtonToggle.
bind(this)); |
145 toolbar.appendToolbarItem(this._controlButton); | 149 toolbar.appendToolbarItem(this._controlButton); |
146 | 150 |
147 this._playbackLabel = controls.createChild("span", "animation-playback-l
abel"); | 151 this._playbackLabel = controls.createChild("span", "animation-playback-l
abel"); |
148 this._playbackLabel.createTextChild("1x"); | 152 this._playbackLabel.createTextChild("1x"); |
149 this._playbackLabel.addEventListener("keydown", this._playbackLabelInput
.bind(this)); | 153 this._playbackLabel.addEventListener("keydown", this._playbackLabelInput
.bind(this)); |
(...skipping 177 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
327 */ | 331 */ |
328 _mainFrameNavigated: function(event) | 332 _mainFrameNavigated: function(event) |
329 { | 333 { |
330 this._reset(); | 334 this._reset(); |
331 this._updateAnimationsPlaybackRate(); | 335 this._updateAnimationsPlaybackRate(); |
332 if (this._scrubberPlayer) | 336 if (this._scrubberPlayer) |
333 this._scrubberPlayer.cancel(); | 337 this._scrubberPlayer.cancel(); |
334 delete this._scrubberPlayer; | 338 delete this._scrubberPlayer; |
335 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(0)); | 339 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(0)); |
336 this._updateControlButton(); | 340 this._updateControlButton(); |
| 341 this._groupBuffer = []; |
| 342 this._previewMap.clear(); |
| 343 this._previewContainer.removeChildren(); |
337 }, | 344 }, |
338 | 345 |
339 /** | 346 /** |
340 * @param {!WebInspector.Event} event | 347 * @param {!WebInspector.Event} event |
341 */ | 348 */ |
342 _animationCreated: function(event) | 349 _animationGroupStarted: function(event) |
343 { | 350 { |
344 this._addAnimation(/** @type {!WebInspector.AnimationModel.Animation} */
(event.data.player), event.data.resetTimeline) | 351 this._addAnimationGroup(/** @type {!WebInspector.AnimationModel.Animatio
nGroup} */(event.data)); |
| 352 }, |
| 353 |
| 354 /** |
| 355 * @param {!WebInspector.AnimationModel.AnimationGroup} group |
| 356 */ |
| 357 _addAnimationGroup: function(group) |
| 358 { |
| 359 /** |
| 360 * @param {!WebInspector.AnimationModel.AnimationGroup} left |
| 361 * @param {!WebInspector.AnimationModel.AnimationGroup} right |
| 362 */ |
| 363 function startTimeComparator(left, right) |
| 364 { |
| 365 return left.startTime() > right.startTime(); |
| 366 } |
| 367 |
| 368 this._groupBuffer.push(group); |
| 369 this._groupBuffer.sort(startTimeComparator); |
| 370 // Discard oldest groups from buffer if necessary |
| 371 var groupsToDiscard = []; |
| 372 while (this._groupBuffer.length > this._groupBufferSize) { |
| 373 var toDiscard = this._groupBuffer.splice(this._groupBuffer[0] === th
is._selectedGroup ? 1 : 0, 1); |
| 374 groupsToDiscard.push(toDiscard[0]); |
| 375 } |
| 376 for (var g of groupsToDiscard) { |
| 377 this._previewMap.get(g).element.remove(); |
| 378 this._previewMap.delete(g); |
| 379 // TODO(samli): needs to discard model too |
| 380 } |
| 381 // Generate preview |
| 382 var preview = new WebInspector.AnimationGroupPreviewUI(group); |
| 383 this._previewMap.set(group, preview); |
| 384 this._previewContainer.appendChild(preview.element); |
| 385 preview.element.addEventListener("click", this._selectAnimationGroup.bin
d(this, group)); |
| 386 }, |
| 387 |
| 388 /** |
| 389 * @param {!WebInspector.AnimationModel.AnimationGroup} group |
| 390 */ |
| 391 _selectAnimationGroup: function(group) |
| 392 { |
| 393 /** |
| 394 * @param {!WebInspector.AnimationGroupPreviewUI} ui |
| 395 * @param {!WebInspector.AnimationModel.AnimationGroup} group |
| 396 * @this {!WebInspector.AnimationTimeline} |
| 397 */ |
| 398 function applySelectionClass(ui, group) |
| 399 { |
| 400 ui.element.classList.toggle("selected", this._selectedGroup === grou
p); |
| 401 } |
| 402 |
| 403 if (this._selectedGroup === group) |
| 404 return; |
| 405 this._selectedGroup = group; |
| 406 this._previewMap.forEach(applySelectionClass, this); |
| 407 this._reset(); |
| 408 for (var anim of group.animations()) |
| 409 this._addAnimation(anim); |
| 410 this.scheduleRedraw(); |
345 }, | 411 }, |
346 | 412 |
347 /** | 413 /** |
348 * @param {!WebInspector.AnimationModel.Animation} animation | 414 * @param {!WebInspector.AnimationModel.Animation} animation |
349 * @param {boolean} resetTimeline | |
350 */ | 415 */ |
351 _addAnimation: function(animation, resetTimeline) | 416 _addAnimation: function(animation) |
352 { | 417 { |
353 /** | 418 /** |
354 * @param {?WebInspector.DOMNode} node | 419 * @param {?WebInspector.DOMNode} node |
355 * @this {WebInspector.AnimationTimeline} | 420 * @this {WebInspector.AnimationTimeline} |
356 */ | 421 */ |
357 function nodeResolved(node) | 422 function nodeResolved(node) |
358 { | 423 { |
359 if (!node) | 424 if (!node) |
360 return; | 425 return; |
361 uiAnimation.setNode(node); | 426 uiAnimation.setNode(node); |
362 node[this._symbol] = nodeUI; | 427 node[this._symbol] = nodeUI; |
363 } | 428 } |
364 | 429 |
365 if (this._emptyTimelineMessage) { | 430 if (this._emptyTimelineMessage) { |
366 this._emptyTimelineMessage.remove(); | 431 this._emptyTimelineMessage.remove(); |
367 delete this._emptyTimelineMessage; | 432 delete this._emptyTimelineMessage; |
368 } | 433 } |
369 | 434 |
370 if (resetTimeline) | |
371 this._reset(); | |
372 | |
373 // Ignore Web Animations custom effects & groups | 435 // Ignore Web Animations custom effects & groups |
374 if (animation.type() === "WebAnimation" && animation.source().keyframesR
ule().keyframes().length === 0) | 436 if (animation.type() === "WebAnimation" && animation.source().keyframesR
ule().keyframes().length === 0) |
375 return; | 437 return; |
376 | 438 |
377 if (this._resizeWindow(animation)) | 439 this._resizeWindow(animation); |
378 this.scheduleRedraw(); | |
379 | 440 |
380 var nodeUI = this._nodesMap.get(animation.source().backendNodeId()); | 441 var nodeUI = this._nodesMap.get(animation.source().backendNodeId()); |
381 if (!nodeUI) { | 442 if (!nodeUI) { |
382 nodeUI = new WebInspector.AnimationTimeline.NodeUI(animation.source(
)); | 443 nodeUI = new WebInspector.AnimationTimeline.NodeUI(animation.source(
)); |
383 this._animationsContainer.appendChild(nodeUI.element); | 444 this._animationsContainer.appendChild(nodeUI.element); |
384 this._nodesMap.set(animation.source().backendNodeId(), nodeUI); | 445 this._nodesMap.set(animation.source().backendNodeId(), nodeUI); |
385 } | 446 } |
386 var nodeRow = nodeUI.findRow(animation); | 447 var nodeRow = nodeUI.findRow(animation); |
387 var uiAnimation = new WebInspector.AnimationUI(animation, this, nodeRow.
element); | 448 var uiAnimation = new WebInspector.AnimationUI(animation, this, nodeRow.
element); |
388 animation.source().deferredNode().resolve(nodeResolved.bind(this)); | 449 animation.source().deferredNode().resolve(nodeResolved.bind(this)); |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
434 line.setAttribute("y", 0); | 495 line.setAttribute("y", 0); |
435 line.setAttribute("height", "100%"); | 496 line.setAttribute("height", "100%"); |
436 line.setAttribute("width", 1); | 497 line.setAttribute("width", 1); |
437 } | 498 } |
438 for (var time = 0; time < this.duration(); time += gridSize) { | 499 for (var time = 0; time < this.duration(); time += gridSize) { |
439 var gridWidth = time * this.pixelMsRatio(); | 500 var gridWidth = time * this.pixelMsRatio(); |
440 if (!lastDraw || gridWidth - lastDraw > 50) { | 501 if (!lastDraw || gridWidth - lastDraw > 50) { |
441 lastDraw = gridWidth; | 502 lastDraw = gridWidth; |
442 var label = this._grid.createSVGChild("text", "animation-timelin
e-grid-label"); | 503 var label = this._grid.createSVGChild("text", "animation-timelin
e-grid-label"); |
443 label.setAttribute("x", gridWidth + 5); | 504 label.setAttribute("x", gridWidth + 5); |
444 label.setAttribute("y", 35); | 505 label.setAttribute("y", 15); |
445 label.textContent = WebInspector.UIString(Number.millisToString(
time)); | 506 label.textContent = WebInspector.UIString(Number.millisToString(
time)); |
446 } | 507 } |
447 } | 508 } |
448 }, | 509 }, |
449 | 510 |
450 scheduleRedraw: function() { | 511 scheduleRedraw: function() { |
451 if (this._redrawing) | 512 if (this._redrawing) |
452 return; | 513 return; |
453 this._redrawing = true; | 514 this._redrawing = true; |
454 this._animationsContainer.window().requestAnimationFrame(this._redraw.bi
nd(this)); | 515 this._animationsContainer.window().requestAnimationFrame(this._redraw.bi
nd(this)); |
(...skipping 143 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
598 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); | 659 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); |
599 }, | 660 }, |
600 | 661 |
601 __proto__: WebInspector.VBox.prototype | 662 __proto__: WebInspector.VBox.prototype |
602 } | 663 } |
603 | 664 |
604 /** | 665 /** |
605 * @constructor | 666 * @constructor |
606 * @param {!WebInspector.AnimationModel.AnimationEffect} animationEffect | 667 * @param {!WebInspector.AnimationModel.AnimationEffect} animationEffect |
607 */ | 668 */ |
608 WebInspector.AnimationTimeline.NodeUI = function(animationEffect) { | 669 WebInspector.AnimationTimeline.NodeUI = function(animationEffect) |
| 670 { |
609 /** | 671 /** |
610 * @param {?WebInspector.DOMNode} node | 672 * @param {?WebInspector.DOMNode} node |
611 * @this {WebInspector.AnimationTimeline.NodeUI} | 673 * @this {WebInspector.AnimationTimeline.NodeUI} |
612 */ | 674 */ |
613 function nodeResolved(node) | 675 function nodeResolved(node) |
614 { | 676 { |
615 if (!node) | 677 if (!node) |
616 return; | 678 return; |
617 this._node = node; | 679 this._node = node; |
618 WebInspector.DOMPresentationUtils.decorateNodeLabel(node, this._descript
ion); | 680 WebInspector.DOMPresentationUtils.decorateNodeLabel(node, this._descript
ion); |
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
733 this._svg = parentElement.createSVGChild("svg", "animation-ui"); | 795 this._svg = parentElement.createSVGChild("svg", "animation-ui"); |
734 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); | 796 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); |
735 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; | 797 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; |
736 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); | 798 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); |
737 this._activeIntervalGroup = this._svg.createSVGChild("g"); | 799 this._activeIntervalGroup = this._svg.createSVGChild("g"); |
738 | 800 |
739 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, keyframeRender: !Object.<number, !Element>}>} */ | 801 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, keyframeRender: !Object.<number, !Element>}>} */ |
740 this._cachedElements = []; | 802 this._cachedElements = []; |
741 | 803 |
742 this._movementInMs = 0; | 804 this._movementInMs = 0; |
743 this.redraw(); | 805 this._color = WebInspector.AnimationUI.Color(this._animation); |
744 } | 806 } |
745 | 807 |
746 /** | 808 /** |
747 * @enum {string} | 809 * @enum {string} |
748 */ | 810 */ |
749 WebInspector.AnimationUI.MouseEvents = { | 811 WebInspector.AnimationUI.MouseEvents = { |
750 AnimationDrag: "AnimationDrag", | 812 AnimationDrag: "AnimationDrag", |
751 KeyframeMove: "KeyframeMove", | 813 KeyframeMove: "KeyframeMove", |
752 StartEndpointMove: "StartEndpointMove", | 814 StartEndpointMove: "StartEndpointMove", |
753 FinishEndpointMove: "FinishEndpointMove" | 815 FinishEndpointMove: "FinishEndpointMove" |
(...skipping 19 matching lines...) Expand all Loading... |
773 /** | 835 /** |
774 * @param {!Element} parentElement | 836 * @param {!Element} parentElement |
775 * @param {string} className | 837 * @param {string} className |
776 */ | 838 */ |
777 _createLine: function(parentElement, className) | 839 _createLine: function(parentElement, className) |
778 { | 840 { |
779 var line = parentElement.createSVGChild("line", className); | 841 var line = parentElement.createSVGChild("line", className); |
780 line.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin
); | 842 line.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin
); |
781 line.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight
); | 843 line.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight
); |
782 line.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight
); | 844 line.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight
); |
783 line.style.stroke = this._color(); | 845 line.style.stroke = this._color; |
784 return line; | 846 return line; |
785 }, | 847 }, |
786 | 848 |
787 /** | 849 /** |
788 * @param {number} iteration | 850 * @param {number} iteration |
789 * @param {!Element} parentElement | 851 * @param {!Element} parentElement |
790 */ | 852 */ |
791 _drawAnimationLine: function(iteration, parentElement) | 853 _drawAnimationLine: function(iteration, parentElement) |
792 { | 854 { |
793 var cache = this._cachedElements[iteration]; | 855 var cache = this._cachedElements[iteration]; |
(...skipping 29 matching lines...) Expand all Loading... |
823 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) | 885 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) |
824 { | 886 { |
825 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { | 887 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { |
826 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x.toFixed(2)); | 888 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x.toFixed(2)); |
827 return; | 889 return; |
828 } | 890 } |
829 | 891 |
830 var circle = parentElement.createSVGChild("circle", keyframeIndex <= 0 ?
"animation-endpoint" : "animation-keyframe-point"); | 892 var circle = parentElement.createSVGChild("circle", keyframeIndex <= 0 ?
"animation-endpoint" : "animation-keyframe-point"); |
831 circle.setAttribute("cx", x.toFixed(2)); | 893 circle.setAttribute("cx", x.toFixed(2)); |
832 circle.setAttribute("cy", WebInspector.AnimationUI.Options.AnimationHeig
ht); | 894 circle.setAttribute("cy", WebInspector.AnimationUI.Options.AnimationHeig
ht); |
833 circle.style.stroke = this._color(); | 895 circle.style.stroke = this._color; |
834 circle.setAttribute("r", WebInspector.AnimationUI.Options.AnimationMargi
n / 2); | 896 circle.setAttribute("r", WebInspector.AnimationUI.Options.AnimationMargi
n / 2); |
835 | 897 |
836 if (keyframeIndex <= 0) | 898 if (keyframeIndex <= 0) |
837 circle.style.fill = this._color(); | 899 circle.style.fill = this._color; |
838 | 900 |
839 this._cachedElements[iteration].keyframePoints[keyframeIndex] = circle; | 901 this._cachedElements[iteration].keyframePoints[keyframeIndex] = circle; |
840 | 902 |
841 if (!attachEvents) | 903 if (!attachEvents) |
842 return; | 904 return; |
843 | 905 |
844 if (keyframeIndex === 0) { | 906 if (keyframeIndex === 0) { |
845 circle.addEventListener("mousedown", this._mouseDown.bind(this, WebI
nspector.AnimationUI.MouseEvents.StartEndpointMove, keyframeIndex)); | 907 circle.addEventListener("mousedown", this._mouseDown.bind(this, WebI
nspector.AnimationUI.MouseEvents.StartEndpointMove, keyframeIndex)); |
846 } else if (keyframeIndex === -1) { | 908 } else if (keyframeIndex === -1) { |
847 circle.addEventListener("mousedown", this._mouseDown.bind(this, WebI
nspector.AnimationUI.MouseEvents.FinishEndpointMove, keyframeIndex)); | 909 circle.addEventListener("mousedown", this._mouseDown.bind(this, WebI
nspector.AnimationUI.MouseEvents.FinishEndpointMove, keyframeIndex)); |
(...skipping 28 matching lines...) Expand all Loading... |
876 } | 938 } |
877 | 939 |
878 var bezier = WebInspector.Geometry.CubicBezier.parse(easing); | 940 var bezier = WebInspector.Geometry.CubicBezier.parse(easing); |
879 var cache = this._cachedElements[iteration].keyframeRender; | 941 var cache = this._cachedElements[iteration].keyframeRender; |
880 if (!cache[keyframeIndex]) | 942 if (!cache[keyframeIndex]) |
881 cache[keyframeIndex] = bezier ? parentElement.createSVGChild("path",
"animation-keyframe") : parentElement.createSVGChild("g", "animation-keyframe-s
tep"); | 943 cache[keyframeIndex] = bezier ? parentElement.createSVGChild("path",
"animation-keyframe") : parentElement.createSVGChild("g", "animation-keyframe-s
tep"); |
882 var group = cache[keyframeIndex]; | 944 var group = cache[keyframeIndex]; |
883 group.style.transform = "translateX(" + leftDistance.toFixed(2) + "px)"; | 945 group.style.transform = "translateX(" + leftDistance.toFixed(2) + "px)"; |
884 | 946 |
885 if (bezier) { | 947 if (bezier) { |
886 group.style.fill = this._color(); | 948 group.style.fill = this._color; |
887 WebInspector.BezierUI.drawVelocityChart(bezier, group, width); | 949 WebInspector.BezierUI.drawVelocityChart(bezier, group, width); |
888 } else { | 950 } else { |
889 var stepFunction = WebInspector.AnimationTimeline.StepTimingFunction
.parse(easing); | 951 var stepFunction = WebInspector.AnimationTimeline.StepTimingFunction
.parse(easing); |
890 group.removeChildren(); | 952 group.removeChildren(); |
891 const offsetMap = {"start": 0, "middle": 0.5, "end": 1}; | 953 const offsetMap = {"start": 0, "middle": 0.5, "end": 1}; |
892 const offsetWeight = offsetMap[stepFunction.stepAtPosition]; | 954 const offsetWeight = offsetMap[stepFunction.stepAtPosition]; |
893 for (var i = 0; i < stepFunction.steps; i++) | 955 for (var i = 0; i < stepFunction.steps; i++) |
894 createStepLine(group, (i + offsetWeight) * width / stepFunction.
steps, this._color()); | 956 createStepLine(group, (i + offsetWeight) * width / stepFunction.
steps, this._color); |
895 } | 957 } |
896 }, | 958 }, |
897 | 959 |
898 redraw: function() | 960 redraw: function() |
899 { | 961 { |
900 var durationWithDelay = this._delay() + this._duration() * this._animati
on.source().iterations() + this._animation.source().endDelay(); | 962 var durationWithDelay = this._delay() + this._duration() * this._animati
on.source().iterations() + this._animation.source().endDelay(); |
901 var leftMargin = ((this._animation.startTime() - this._timeline.startTim
e()) * this._timeline.pixelMsRatio()); | 963 var leftMargin = ((this._animation.startTime() - this._timeline.startTim
e()) * this._timeline.pixelMsRatio()); |
902 var maxWidth = this._timeline.width() - WebInspector.AnimationUI.Options
.AnimationMargin - leftMargin; | 964 var maxWidth = this._timeline.width() - WebInspector.AnimationUI.Options
.AnimationMargin - leftMargin; |
903 var svgWidth = Math.min(maxWidth, durationWithDelay * this._timeline.pix
elMsRatio()); | 965 var svgWidth = Math.min(maxWidth, durationWithDelay * this._timeline.pix
elMsRatio()); |
904 | 966 |
(...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1043 | 1105 |
1044 // Commit changes | 1106 // Commit changes |
1045 if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.Keyfra
meMove) { | 1107 if (this._mouseEventType === WebInspector.AnimationUI.MouseEvents.Keyfra
meMove) { |
1046 this._keyframes[this._keyframeMoved].setOffset(this._offset(this._ke
yframeMoved)); | 1108 this._keyframes[this._keyframeMoved].setOffset(this._offset(this._ke
yframeMoved)); |
1047 } else { | 1109 } else { |
1048 var delay = this._delay(); | 1110 var delay = this._delay(); |
1049 var duration = this._duration(); | 1111 var duration = this._duration(); |
1050 this._setDelay(delay); | 1112 this._setDelay(delay); |
1051 this._setDuration(duration); | 1113 this._setDuration(duration); |
1052 if (this._animation.type() !== "CSSAnimation") { | 1114 if (this._animation.type() !== "CSSAnimation") { |
1053 for (var target of WebInspector.targetManager.targets(WebInspect
or.Target.Type.Page)) | 1115 var target = WebInspector.targetManager.mainTarget(); |
| 1116 if (target) |
1054 target.animationAgent().setTiming(this._animation.id(), dura
tion, delay); | 1117 target.animationAgent().setTiming(this._animation.id(), dura
tion, delay); |
1055 } | 1118 } |
1056 } | 1119 } |
1057 | 1120 |
1058 this._movementInMs = 0; | 1121 this._movementInMs = 0; |
1059 this.redraw(); | 1122 this.redraw(); |
1060 | 1123 |
1061 this._parentElement.ownerDocument.removeEventListener("mousemove", this.
_mouseMoveHandler); | 1124 this._parentElement.ownerDocument.removeEventListener("mousemove", this.
_mouseMoveHandler); |
1062 this._parentElement.ownerDocument.removeEventListener("mouseup", this._m
ouseUpHandler); | 1125 this._parentElement.ownerDocument.removeEventListener("mouseup", this._m
ouseUpHandler); |
1063 delete this._mouseMoveHandler; | 1126 delete this._mouseMoveHandler; |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1109 * @param {string} name | 1172 * @param {string} name |
1110 * @param {string} value | 1173 * @param {string} value |
1111 */ | 1174 */ |
1112 _setNodeStyle: function(name, value) | 1175 _setNodeStyle: function(name, value) |
1113 { | 1176 { |
1114 var style = this._node.getAttribute("style") || ""; | 1177 var style = this._node.getAttribute("style") || ""; |
1115 if (style) | 1178 if (style) |
1116 style = style.replace(new RegExp("\\s*(-webkit-)?" + name + ":[^;]*;
?\\s*", "g"), ""); | 1179 style = style.replace(new RegExp("\\s*(-webkit-)?" + name + ":[^;]*;
?\\s*", "g"), ""); |
1117 var valueString = name + ": " + value; | 1180 var valueString = name + ": " + value; |
1118 this._node.setAttributeValue("style", style + " " + valueString + "; -we
bkit-" + valueString + ";"); | 1181 this._node.setAttributeValue("style", style + " " + valueString + "; -we
bkit-" + valueString + ";"); |
1119 }, | |
1120 | |
1121 /** | |
1122 * @return {string} | |
1123 */ | |
1124 _color: function() | |
1125 { | |
1126 /** | |
1127 * @param {string} string | |
1128 * @return {number} | |
1129 */ | |
1130 function hash(string) | |
1131 { | |
1132 var hash = 0; | |
1133 for (var i = 0; i < string.length; i++) | |
1134 hash = (hash << 5) + hash + string.charCodeAt(i); | |
1135 return Math.abs(hash); | |
1136 } | |
1137 | |
1138 if (!this._selectedColor) { | |
1139 var names = Object.keys(WebInspector.AnimationUI.Colors); | |
1140 var color = WebInspector.AnimationUI.Colors[names[hash(this._animati
on.name() || this._animation.id()) % names.length]]; | |
1141 this._selectedColor = color.asString(WebInspector.Color.Format.RGB); | |
1142 } | |
1143 return this._selectedColor; | |
1144 } | 1182 } |
1145 } | 1183 } |
1146 | 1184 |
1147 WebInspector.AnimationUI.Options = { | 1185 WebInspector.AnimationUI.Options = { |
1148 AnimationHeight: 32, | 1186 AnimationHeight: 32, |
1149 AnimationSVGHeight: 80, | 1187 AnimationSVGHeight: 80, |
1150 AnimationMargin: 7, | 1188 AnimationMargin: 7, |
1151 EndpointsClickRegionSize: 10, | 1189 EndpointsClickRegionSize: 10, |
1152 GridCanvasHeight: 40 | 1190 GridCanvasHeight: 40 |
1153 } | 1191 } |
1154 | 1192 |
1155 WebInspector.AnimationUI.Colors = { | 1193 WebInspector.AnimationUI.Colors = { |
1156 "Purple": WebInspector.Color.parse("#9C27B0"), | 1194 "Purple": WebInspector.Color.parse("#9C27B0"), |
1157 "Light Blue": WebInspector.Color.parse("#03A9F4"), | 1195 "Light Blue": WebInspector.Color.parse("#03A9F4"), |
1158 "Deep Orange": WebInspector.Color.parse("#FF5722"), | 1196 "Deep Orange": WebInspector.Color.parse("#FF5722"), |
1159 "Blue": WebInspector.Color.parse("#5677FC"), | 1197 "Blue": WebInspector.Color.parse("#5677FC"), |
1160 "Lime": WebInspector.Color.parse("#CDDC39"), | 1198 "Lime": WebInspector.Color.parse("#CDDC39"), |
| 1199 "Blue Grey": WebInspector.Color.parse("#607D8B"), |
1161 "Pink": WebInspector.Color.parse("#E91E63"), | 1200 "Pink": WebInspector.Color.parse("#E91E63"), |
1162 "Green": WebInspector.Color.parse("#0F9D58"), | 1201 "Green": WebInspector.Color.parse("#0F9D58"), |
1163 "Brown": WebInspector.Color.parse("#795548"), | 1202 "Brown": WebInspector.Color.parse("#795548"), |
1164 "Cyan": WebInspector.Color.parse("#00BCD4") | 1203 "Cyan": WebInspector.Color.parse("#00BCD4") |
1165 } | 1204 } |
| 1205 |
| 1206 |
| 1207 /** |
| 1208 * @param {!WebInspector.AnimationModel.Animation} animation |
| 1209 * @return {string} |
| 1210 */ |
| 1211 WebInspector.AnimationUI.Color = function(animation) |
| 1212 { |
| 1213 /** |
| 1214 * @param {string} string |
| 1215 * @return {number} |
| 1216 */ |
| 1217 function hash(string) |
| 1218 { |
| 1219 var hash = 0; |
| 1220 for (var i = 0; i < string.length; i++) |
| 1221 hash = (hash << 5) + hash + string.charCodeAt(i); |
| 1222 return Math.abs(hash); |
| 1223 } |
| 1224 |
| 1225 var names = Object.keys(WebInspector.AnimationUI.Colors); |
| 1226 var color = WebInspector.AnimationUI.Colors[names[hash(animation.name() || a
nimation.id()) % names.length]]; |
| 1227 return color.asString(WebInspector.Color.Format.RGB); |
| 1228 } |
OLD | NEW |