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

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 () {

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;
+}

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");
 });

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) {

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.