From f3194a4a0ba54ee4c412fccf09c4de2e3fb57c01 Mon Sep 17 00:00:00 2001 From: Daisuke Akatsuka Date: Tue, 18 Apr 2017 12:15:57 +0900 Subject: [PATCH] Bug 1210796 - Part 15: Displays the animation detail if the previously displayed animation is included in timeline list after refresh all UI. r=pbro MozReview-Commit-ID: FiltMpwd4VY --HG-- extra : rebase_source : 607211ac1e205213961f1e1e848a338f6eb0eab6 --- .../components/animation-timeline.js | 30 +++++++++++++++---- ...erties_for_delayed_starttime_animations.js | 22 ++++++++++---- .../browser_animation_detail_displayed.js | 7 +++++ ...wser_animation_timeline_pause_button_03.js | 2 -- .../client/animationinspector/test/head.js | 2 -- 5 files changed, 49 insertions(+), 14 deletions(-) diff --git a/devtools/client/animationinspector/components/animation-timeline.js b/devtools/client/animationinspector/components/animation-timeline.js index 744047bd2f34..916e712eddc1 100644 --- a/devtools/client/animationinspector/components/animation-timeline.js +++ b/devtools/client/animationinspector/components/animation-timeline.js @@ -258,6 +258,7 @@ AnimationsTimeline.prototype = { this.animatedPropertiesEl = null; this.animationDetailCloseButton = null; this.animationRootEl = null; + this.selectedAnimation = null; }, /** @@ -277,6 +278,11 @@ AnimationsTimeline.prototype = { }, unrender: function () { + this.unrenderButLeaveDetailsComponent(); + this.details.unrender(); + }, + + unrenderButLeaveDetailsComponent: function () { for (let animation of this.animations) { animation.off("changed", this.onAnimationStateChanged); } @@ -284,7 +290,6 @@ AnimationsTimeline.prototype = { TimeScale.reset(); this.destroySubComponents("targetNodes"); this.destroySubComponents("timeBlocks"); - this.details.unrender(); this.animationsEl.innerHTML = ""; this.off("timeline-data-changed", this.onTimelineDataChanged); }, @@ -337,9 +342,13 @@ AnimationsTimeline.prototype = { const selectedAnimationEl = animationEls[index]; selectedAnimationEl.classList.add("selected"); this.animationRootEl.classList.add("animation-detail-visible"); - yield this.details.render(animation); + if (animation !== this.details.animation) { + this.selectedAnimation = animation; + // Don't render if the detail displays same animation already. + yield this.details.render(animation); + this.animationAnimationNameEl.textContent = getFormattedAnimationTitle(animation); + } this.onTimelineDataChanged(null, { time: this.currentTime || 0 }); - this.animationAnimationNameEl.textContent = getFormattedAnimationTitle(animation); this.emit("animation-selected", animation); }), @@ -421,7 +430,7 @@ AnimationsTimeline.prototype = { }, render: function (animations, documentCurrentTime) { - this.unrender(); + this.unrenderButLeaveDetailsComponent(); this.animations = animations; if (!this.animations.length) { @@ -496,10 +505,21 @@ AnimationsTimeline.prototype = { // To indicate the animation progress in AnimationDetails. this.on("timeline-data-changed", this.onTimelineDataChanged); - // Display animation's detail if there is only one animation. + // Display animation's detail if there is only one animation, + // or the previously displayed animation is included in timeline list. if (this.animations.length === 1) { this.onAnimationSelected(null, this.animations[0]); + return; } + if (!this.animationRootEl.classList.contains("animation-detail-visible")) { + // Do nothing since the animation detail pane is closing now. + return; + } + if (this.animations.indexOf(this.selectedAnimation) >= 0) { + this.onAnimationSelected(null, this.selectedAnimation); + return; + } + this.onDetailCloseButtonClick(); }, isAtLeastOneAnimationPlaying: function () { diff --git a/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js b/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js index 1862aff8331d..11cc26e4724c 100644 --- a/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js +++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_for_delayed_starttime_animations.js @@ -6,18 +6,24 @@ // Test for animations that have different starting time. // We should check progress indicator working well even if the start time is not zero. +// Also, check that there is no duplication display. add_task(function* () { yield addTab(URL_ROOT + "doc_delayed_starttime_animations.html"); const { panel } = yield openAnimationInspector(); - yield setStyle(null, panel, "animation", "anim 100s", "#target2"); - yield setStyle(null, panel, "animation", "anim 100s", "#target3"); - yield setStyle(null, panel, "animation", "anim 100s", "#target4"); - yield setStyle(null, panel, "animation", "anim 100s", "#target5"); + yield setStyleAndWaitForAnimationSelecting(panel, "animation", "anim 100s", "#target2"); + yield setStyleAndWaitForAnimationSelecting(panel, "animation", "anim 100s", "#target3"); + yield setStyleAndWaitForAnimationSelecting(panel, "animation", "anim 100s", "#target4"); + yield setStyleAndWaitForAnimationSelecting(panel, "animation", "anim 100s", "#target5"); - yield clickOnAnimation(panel, 1); const timelineComponent = panel.animationsTimelineComponent; const detailsComponent = timelineComponent.details; + const headers = + detailsComponent.containerEl.querySelectorAll(".animated-properties-header"); + is(headers.length, 1, "There should be only one header in the details panel"); + + // Check indicator. + yield clickOnAnimation(panel, 1); const progressIndicatorEl = detailsComponent.progressIndicatorEl; const startTime = detailsComponent.animation.state.previousStartTime; detailsComponent.indicateProgress(0); @@ -36,3 +42,9 @@ add_task(function* () { is(progressIndicatorEl.style.left, "0%", "The progress indicator position should be 0% at end of animation"); }); + +function* setStyleAndWaitForAnimationSelecting(panel, name, value, selector) { + const onSelecting = waitForAnimationSelecting(panel); + yield setStyle(null, panel, name, value, selector); + yield onSelecting; +} diff --git a/devtools/client/animationinspector/test/browser_animation_detail_displayed.js b/devtools/client/animationinspector/test/browser_animation_detail_displayed.js index ae48d0dbf8f8..808dcba33c73 100644 --- a/devtools/client/animationinspector/test/browser_animation_detail_displayed.js +++ b/devtools/client/animationinspector/test/browser_animation_detail_displayed.js @@ -11,6 +11,7 @@ // 3. Display after click on an animation. // 4. Display from first time if displayed animation is only one. // 5. Close the animation-detail element by clicking on close button. +// 6. Stay selected animation even if refresh all UI. requestLongerTimeout(5); @@ -57,4 +58,10 @@ add_task(function* () { "animation-detail element should display"); is(animationDetailEl.offsetHeight, previousHeight, "The height of animation-detail should keep the height"); + + // 6. Stay selected animation even if refresh all UI. + yield selectNodeAndWaitForAnimations("#target1", inspector); + yield clickTimelineRewindButton(panel); + ok(animationDetailEl.querySelector(".property"), + "The property in animation-detail element should stay as is"); }); diff --git a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js index 5a1247171c3b..5c6e324ed51d 100644 --- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js +++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js @@ -40,8 +40,6 @@ add_task(function* () { ok(!btn.classList.contains("paused"), "Clicking the button once finite animations are done should restart them"); yield assertScrubberMoving(panel, true); - - yield waitForAnimationSelecting(panel); }); function waitForButtonPaused(btn) { diff --git a/devtools/client/animationinspector/test/head.js b/devtools/client/animationinspector/test/head.js index 80bde89aeb55..249c2d7104ef 100644 --- a/devtools/client/animationinspector/test/head.js +++ b/devtools/client/animationinspector/test/head.js @@ -475,8 +475,6 @@ function* setStyle(animation, panel, name, value, selector) { propertyValue: value }); yield onAnimationChanged; - const onSelected = animation ? waitForAnimationSelecting(panel) : Promise.resolve(); - yield onSelected; // Also wait for the target node previews to be loaded if the panel got // refreshed as a result of this animation mutation.