--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -485,16 +485,21 @@ AnimationsTimeline.prototype = {
       this.scrubberEl.style.display = "block";
       this.startAnimatingScrubber(this.wasRewound()
                                   ? TimeScale.minStartTime
                                   : documentCurrentTime);
     }
 
     // To indicate the animation progress in AnimationDetails.
     this.on("timeline-data-changed", this.onTimelineDataChanged);
+
+    // Display animation's detail if there is only one animation.
+    if (this.animations.length === 1) {
+      this.onAnimationSelected(null, this.animations[0]);
+    }
   },
 
   isAtLeastOneAnimationPlaying: function () {
     return this.animations.some(({state}) => state.playState === "running");
   },
 
   wasRewound: function () {
     return !this.isAtLeastOneAnimationPlaying() &&

--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -32,29 +32,25 @@ const EXPECTED_PROPERTIES = [
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
   let propertiesList = timeline.rootWrapperEl
                                .querySelector(".animated-properties");
 
-  ok(!isNodeVisible(propertiesList),
-     "The list of properties panel is hidden by default");
+  // doc_keyframes.html has only one animation,
+  // so the propertiesList shoud be shown.
+  ok(isNodeVisible(propertiesList),
+     "The list of properties panel shoud be shown");
 
-  info("Click to select the animation");
-  yield clickOnAnimation(panel, 0);
-
-  ok(isNodeVisible(propertiesList),
-     "The list of properties panel is shown");
   ok(propertiesList.querySelectorAll(".property").length,
      "The list of properties panel actually contains properties");
   ok(hasExpectedProperties(propertiesList),
      "The list of properties panel contains the right properties");
-
   ok(hasExpectedWarnings(propertiesList),
      "The list of properties panel contains the right warnings");
 
   info("Click same animation again");
   yield clickOnAnimation(panel, 0, true);
   ok(isNodeVisible(propertiesList),
      "The list of properties panel keeps");
 });

--- a/devtools/client/animationinspector/test/browser_animation_keyframe_click_to_set_time.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_click_to_set_time.js
@@ -13,19 +13,16 @@ add_task(function* () {
   let timeline = panel.animationsTimelineComponent;
   let {scrubberEl} = timeline;
 
   // XXX: The scrollbar is placed in the timeline in such a way that it causes
   // the animations to be slightly offset with the header when it appears.
   // So for now, let's hide the scrollbar. Bug 1229340 should fix this.
   timeline.animationsEl.style.overflow = "hidden";
 
-  info("Expand the animation");
-  yield clickOnAnimation(panel, 0);
-
   info("Click on the first keyframe of the first animated property");
   yield clickKeyframe(panel, "background-color", 0);
 
   info("Make sure the scrubber stopped moving and is at the right position");
   yield assertScrubberMoving(panel, false);
   checkScrubberPos(scrubberEl, 0);
 
   info("Click on a keyframe in the middle");

--- a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
@@ -21,18 +21,18 @@ const EXPECTED_PROPERTIES = [
   "width"
 ];
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
-  info("Expand the animation");
-  yield clickOnAnimation(panel, 0);
+  // doc_keyframes.html has only one animation.
+  // So we don't need to click the animation since already the animation detail shown.
 
   ok(timeline.rootWrapperEl.querySelectorAll(".frames .keyframes").length,
      "There are container elements for displaying keyframes");
 
   let data = yield getExpectedKeyframesData(timeline.animations[0]);
   for (let propertyName in data) {
     info("Check the keyframe markers for " + propertyName);
     let widthMarkerSelector = ".frame[data-property=" + propertyName + "]";

--- a/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
+++ b/devtools/client/animationinspector/test/browser_animation_pseudo_elements.js
@@ -29,21 +29,21 @@ add_task(function* () {
   let bodyContainer = yield getContainerForSelector("body", inspector);
   let getBodyChildNodeFront = index => {
     return bodyContainer.elt.children[1].childNodes[index].container.node;
   };
   let beforeNode = getBodyChildNodeFront(0);
   let afterNode = getBodyChildNodeFront(1);
 
   info("Select the ::before pseudo-element in the inspector");
-  yield selectNode(beforeNode, inspector);
+  yield selectNodeAndWaitForAnimations(beforeNode, inspector);
   is(timeline.timeBlocks.length, 1, "There is 1 animation in the timeline");
   is(timeline.targetNodes[0].previewer.nodeFront,
      inspector.selection.nodeFront,
      "The right node front is displayed in the timeline");
 
   info("Select the ::after pseudo-element in the inspector");
-  yield selectNode(afterNode, inspector);
+  yield selectNodeAndWaitForAnimations(afterNode, inspector);
   is(timeline.timeBlocks.length, 1, "There is 1 animation in the timeline");
   is(timeline.targetNodes[0].previewer.nodeFront,
      inspector.selection.nodeFront,
      "The right node front is displayed in the timeline");
 });

--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
@@ -40,11 +40,11 @@ function* testRefreshOnRemove(inspector,
   onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
   yield executeInContent("devtools:test:setAttribute", {
     selector: ".test-node",
     attributeName: "class",
     attributeValue: "ball short test-node"
   });
   yield onPanelUpdated;
   yield waitForAllAnimationTargets(panel);
-
+  yield waitForAnimationSelecting(panel);
   assertAnimationsDisplayed(panel, 1);
 }

--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
@@ -34,17 +34,17 @@ function* testRefresh(inspector, panel) 
 
   assertAnimationsDisplayed(panel, 1,
     "The panel shows the animation data after selecting it");
 
   info("Switch again to the rule-view");
   inspector.sidebar.select("ruleview");
 
   info("Select the non animated node again");
-  yield selectNodeAndWaitForAnimations(".still", inspector);
+  yield selectNode(".still", inspector);
 
   assertAnimationsDisplayed(panel, 1,
     "The panel still shows the previous animation data since it is inactive");
 
   info("Switch to the animation panel again");
   inspector.sidebar.select("animationinspector");
   yield panel.once(panel.UI_UPDATED_EVENT);
 

--- a/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
@@ -65,9 +65,10 @@ add_task(function* () {
                             nodeEl.ownerDocument.defaultView);
   yield onSelection;
 
   is(inspector.selection.nodeFront, targetNodeComponent.previewer.nodeFront,
     "The selected node is the one stored on the animation widget");
 
   yield onPanelUpdated;
   yield waitForAllAnimationTargets(panel);
+  yield waitForAnimationSelecting(panel);
 });

--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js
@@ -35,16 +35,18 @@ add_task(function* () {
   yield assertScrubberMoving(panel, false);
 
   info("Click again on the button to play the animation from the start again");
   yield clickTimelinePlayPauseButton(panel);
 
   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) {
   return new Promise(resolve => {
     let observer = new btn.ownerDocument.defaultView.MutationObserver(mutations => {
       for (let mutation of mutations) {
         if (mutation.type === "attributes" &&
             mutation.attributeName === "class" &&

--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
@@ -14,16 +14,17 @@ requestLongerTimeout(2);
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_end_delay.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   let selectors = ["#target1", "#target2", "#target3", "#target4"];
   for (let i = 0; i < selectors.length; i++) {
     let selector = selectors[i];
     yield selectNode(selector, inspector);
+    yield waitForAnimationSelecting(panel);
     let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
     let animationEl = timelineEl.querySelector(".animation");
     checkEndDelayAndName(animationEl);
     const state =
       panel.animationsTimelineComponent.timeBlocks[0].animation.state;
     checkPath(animationEl, state);
   }
 });

--- a/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
+++ b/devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
@@ -41,13 +41,14 @@ function* setStyle(animation, panel, nam
 
   let onAnimationChanged = once(animation, "changed");
   yield executeInContent("devtools:test:setStyle", {
     selector: ".animated",
     propertyName: name,
     propertyValue: value
   });
   yield onAnimationChanged;
+  yield waitForAnimationSelecting(panel);
 
   // Also wait for the target node previews to be loaded if the panel got
   // refreshed as a result of this animation mutation.
   yield waitForAllAnimationTargets(panel);
 }

--- a/devtools/client/animationinspector/test/head.js
+++ b/devtools/client/animationinspector/test/head.js
@@ -88,16 +88,21 @@ function* reloadTab(inspector) {
 var selectNodeAndWaitForAnimations = Task.async(
   function* (data, inspector, reason = "test") {
     yield selectNode(data, inspector, reason);
 
     // We want to make sure the rest of the test waits for the animations to
     // be properly displayed (wait for all target DOM nodes to be previewed).
     let {AnimationsPanel} = inspector.sidebar.getWindowForTab(TAB_NAME);
     yield waitForAllAnimationTargets(AnimationsPanel);
+
+    if (AnimationsPanel.animationsTimelineComponent.animations.length === 1) {
+      // Wait for selecting the animation since there is only one animation.
+      yield waitForAnimationSelecting(AnimationsPanel);
+    }
   }
 );
 
 /**
  * Check if there are the expected number of animations being displayed in the
  * panel right now.
  * @param {AnimationsPanel} panel
  * @param {Number} nbAnimations The expected number of animations.
@@ -154,16 +159,21 @@ var openAnimationInspector = Task.async(
     yield AnimationsPanel.once(AnimationsPanel.PANEL_INITIALIZED);
   }
 
   // Make sure we wait for all animations to be loaded (especially their target
   // nodes to be lazily displayed). This is safe to do even if there are no
   // animations displayed.
   yield waitForAllAnimationTargets(AnimationsPanel);
 
+  if (AnimationsPanel.animationsTimelineComponent.animations.length === 1) {
+    // Wait for selecting the animation since there is only one animation.
+    yield waitForAnimationSelecting(AnimationsPanel);
+  }
+
   return {
     toolbox: toolbox,
     inspector: inspector,
     controller: AnimationsController,
     panel: AnimationsPanel,
     window: win
   };
 });
@@ -346,16 +356,24 @@ function* changeTimelinePlaybackRate(pan
 
   // Simulate a mousemove outside of the rate selector area to avoid subsequent
   // tests from failing because of unwanted mouseover events.
   EventUtils.synthesizeMouseAtCenter(
     win.document.querySelector("#timeline-toolbar"), {type: "mousemove"}, win);
 }
 
 /**
+ * Wait for animation selecting.
+ * @param {AnimationsPanel} panel
+ */
+function* waitForAnimationSelecting(panel) {
+  yield panel.animationsTimelineComponent.once("animation-selected");
+}
+
+/**
  * Prevent the toolbox common highlighter from making backend requests.
  * @param {Toolbox} toolbox
  */
 function disableHighlighter(toolbox) {
   toolbox._highlighter = {
     showBoxModel: () => new Promise(r => r()),
     hideBoxModel: () => new Promise(r => r()),
     pick: () => new Promise(r => r()),