Bug 1181839 - Include inspector/test/head.js (which imports shared-head.js) in animationinspector's tests and removes code duplication. r=pbro
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Tue, 08 Mar 2016 23:20:09 +0100
changeset 288092 11b057f8101e
parent 288091 6b6df349f7e9
child 288093 3e48de1a3b6c
push id73300
push userryanvm@gmail.com
push dateThu, 10 Mar 2016 22:08:40 +0000
treeherdermozilla-inbound@c3383af0d944 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1181839
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1181839 - Include inspector/test/head.js (which imports shared-head.js) in animationinspector's tests and removes code duplication. r=pbro MozReview-Commit-ID: GrsOewqAggD
devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
devtools/client/animationinspector/test/browser_animation_keyframe_click_to_set_time.js
devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
devtools/client/animationinspector/test/browser_animation_timeline_header.js
devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js
devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
devtools/client/animationinspector/test/browser_animation_timeline_ui.js
devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
devtools/client/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
devtools/client/animationinspector/test/head.js
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -17,17 +17,17 @@ const EXPECTED_PROPERTIES = [
   "border-top-right-radius",
   "filter",
   "height",
   "transform",
   "width"
 ].sort();
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_keyframes.html");
+  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");
 
--- a/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_click_selects_animation.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Check that animations displayed in the timeline can be selected by clicking
 // them, and that this emits the right events and adds the right classes.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   let selected = timeline.rootWrapperEl.querySelectorAll(".animation.selected");
   ok(!selected.length, "There are no animations selected by default");
 
   info("Click on the first animation, expect the right event and right class");
   let animation0 = yield clickOnAnimation(panel, 0);
--- a/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the controller provides the document.timeline currentTime (at least
 // the last known version since new animations were added).
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel, controller} = yield openAnimationInspector();
 
   ok(controller.documentCurrentTime, "The documentCurrentTime getter exists");
   checkDocumentTimeIsCorrect(controller);
   let time1 = controller.documentCurrentTime;
 
   yield startNewAnimation(controller, panel);
   checkDocumentTimeIsCorrect(controller);
--- a/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
@@ -6,38 +6,38 @@
 requestLongerTimeout(2);
 
 // Test that the panel shows no animation data for invalid or not animated nodes
 
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel, window} = yield openAnimationInspector();
   let {document} = window;
 
   info("Select node .still and check that the panel is empty");
   let stillNode = yield getNodeFront(".still", inspector);
   let onUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield selectNode(stillNode, inspector);
+  yield selectNodeAndWaitForAnimations(stillNode, inspector);
   yield onUpdated;
 
   is(panel.animationsTimelineComponent.animations.length, 0,
      "No animation players stored in the timeline component for a still node");
   is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
      "No animation displayed in the timeline component for a still node");
   is(document.querySelector("#error-type").textContent,
      L10N.getStr("panel.invalidElementSelected"),
      "The correct error message is displayed");
 
   info("Select the comment text node and check that the panel is empty");
   let commentNode = yield inspector.walker.previousSibling(stillNode);
   onUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield selectNode(commentNode, inspector);
+  yield selectNodeAndWaitForAnimations(commentNode, inspector);
   yield onUpdated;
 
   is(panel.animationsTimelineComponent.animations.length, 0,
      "No animation players stored in the timeline component for a text node");
   is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
      "No animation displayed in the timeline component for a text node");
   is(document.querySelector("#error-type").textContent,
      L10N.getStr("panel.invalidElementSelected"),
--- 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
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that animated properties' keyframes can be clicked, and that doing so
 // sets the current time in the timeline.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_keyframes.html");
+  yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   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";
--- a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
+++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js
@@ -17,17 +17,17 @@ const EXPECTED_PROPERTIES = [
   "borderTopRightRadius",
   "filter",
   "height",
   "transform",
   "width"
 ];
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_keyframes.html");
+  yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   info("Expand the animation");
   yield clickOnAnimation(panel, 0);
 
   ok(timeline.rootWrapperEl.querySelectorAll(".frames .keyframes").length,
      "There are container elements for displaying keyframes");
--- a/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
+++ b/devtools/client/animationinspector/test/browser_animation_mutations_with_same_names.js
@@ -5,17 +5,17 @@
 "use strict";
 
 // Check that when animations are added later (through animation mutations) and
 // if these animations have the same names, then all of them are still being
 // displayed (which should be true as long as these animations apply to
 // different nodes).
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_negative_animation.html");
+  yield addTab(URL_ROOT + "doc_negative_animation.html");
   let {controller, panel} = yield openAnimationInspector();
 
   info("Wait until all animations have been added " +
        "(they're added with setTimeout)");
   while (controller.animationPlayers.length < 3) {
     yield controller.once(controller.PLAYERS_UPDATED_EVENT);
   }
   yield waitForAllAnimationTargets(panel);
--- a/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
+++ b/devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js
@@ -6,17 +6,17 @@
 
 requestLongerTimeout(2);
 
 // Test that the update of the animation panel participate in the
 // inspector-updated event. This means that the test verifies that the
 // inspector-updated event is emitted *after* the animation panel is ready.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel, controller} = yield openAnimationInspector();
 
   info("Listen for the players-updated, ui-updated and " +
        "inspector-updated events");
   let receivedEvents = [];
   controller.once(controller.PLAYERS_UPDATED_EVENT, () => {
     receivedEvents.push(controller.PLAYERS_UPDATED_EVENT);
   });
@@ -24,17 +24,17 @@ add_task(function*() {
     receivedEvents.push(panel.UI_UPDATED_EVENT);
   });
   inspector.once("inspector-updated", () => {
     receivedEvents.push("inspector-updated");
   });
 
   info("Selecting an animated node");
   let node = yield getNodeFront(".animated", inspector);
-  yield selectNode(node, inspector);
+  yield selectNodeAndWaitForAnimations(node, inspector);
 
   info("Check that all events were received");
   // Only assert that the inspector-updated event is last, the order of the
   // first 2 events is irrelevant.
 
   is(receivedEvents.length, 3, "3 events were received");
   is(receivedEvents[2], "inspector-updated",
      "The third event received was the inspector-updated event");
--- a/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
@@ -5,32 +5,32 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that the AnimationPlayerFront objects lifecycle is managed by the
 // AnimationController.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {controller, inspector} = yield openAnimationInspector();
 
   info("Selecting an animated node");
   // selectNode waits for the inspector-updated event before resolving, which
   // means the controller.PLAYERS_UPDATED_EVENT event has been emitted before
   // and players are ready.
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   is(controller.animationPlayers.length, 1,
     "One AnimationPlayerFront has been created");
 
   info("Selecting a node with mutliple animations");
-  yield selectNode(".multi", inspector);
+  yield selectNodeAndWaitForAnimations(".multi", inspector);
 
   is(controller.animationPlayers.length, 2,
     "2 AnimationPlayerFronts have been created");
 
   info("Selecting a node with no animations");
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   is(controller.animationPlayers.length, 0,
     "There are no more AnimationPlayerFront objects");
 });
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
@@ -11,17 +11,17 @@ const { ANIMATION_TYPES } = require("dev
 
 add_task(function*() {
   yield new Promise(resolve => {
     SpecialPowers.pushPrefEnv({"set": [
       ["dom.animations-api.core.enabled", true]
     ]}, resolve);
   });
 
-  yield addTab(TEST_URL_ROOT + "doc_multiple_animation_types.html");
+  yield addTab(URL_ROOT + "doc_multiple_animation_types.html");
 
   let {panel} = yield openAnimationInspector();
   is(panel.animationsTimelineComponent.animations.length, 3,
     "Three animations are handled by the timeline after init");
   assertAnimationsDisplayed(panel, 3,
     "Three animations are displayed after init");
   is(
     panel.animationsTimelineComponent
--- a/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
@@ -4,21 +4,21 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that player widgets display information about target nodes
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   let targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
   let {previewer} = targetNodeComponent;
 
   // Make sure to wait for the target-retrieved event if the nodeFront hasn't
   // yet been retrieved by the TargetNodeComponent.
   if (!previewer.nodeFront) {
     yield targetNodeComponent.once("target-retrieved");
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_added_animation.js
@@ -4,21 +4,21 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel content refreshes when new animations are added.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Select a non animated node");
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   assertAnimationsDisplayed(panel, 0);
 
   info("Start an animation on the node");
   yield changeElementAndWait({
     selector: ".still",
     attributeName: "class",
     attributeValue: "ball animated"
--- a/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_on_removed_animation.js
@@ -4,25 +4,25 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel content refreshes when animations are removed.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testRefreshOnRemove(inspector, panel);
 });
 
 function* testRefreshOnRemove(inspector, panel) {
   info("Select a animated node");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   assertAnimationsDisplayed(panel, 1);
 
   info("Listen to the next UI update event");
   let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
 
   info("Remove the animation on the node by removing the class");
   yield executeInContent("devtools:test:setAttribute", {
--- a/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/devtools/client/animationinspector/test/browser_animation_refresh_when_active.js
@@ -4,47 +4,47 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel only refreshes when it is visible in the sidebar.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testRefresh(inspector, panel);
 });
 
 function* testRefresh(inspector, panel) {
   info("Select a non animated node");
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   info("Switch to the rule-view panel");
   inspector.sidebar.select("ruleview");
 
   info("Select the animated node now");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   assertAnimationsDisplayed(panel, 0,
     "The panel doesn't show the animation data while inactive");
 
   info("Switch to the animation panel");
   inspector.sidebar.select("animationinspector");
   yield panel.once(panel.UI_UPDATED_EVENT);
 
   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 selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".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_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -8,31 +8,31 @@ requestLongerTimeout(2);
 
 // Test that when animations displayed in the timeline are running on the
 // compositor, they get a special icon and information in the tooltip.
 
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   info("Select a test node we know has an animation running on the compositor");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   let animationEl = timeline.animationsEl.querySelector(".animation");
   ok(animationEl.classList.contains("fast-track"),
      "The animation element has the fast-track css class");
   ok(hasTooltip(animationEl),
      "The animation element has the right tooltip content");
 
   info("Select a node we know doesn't have an animation on the compositor");
-  yield selectNode(".no-compositor", inspector);
+  yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
 
   animationEl = timeline.animationsEl.querySelector(".animation");
   ok(!animationEl.classList.contains("fast-track"),
      "The animation element does not have the fast-track css class");
   ok(!hasTooltip(animationEl),
      "The animation element has the right tooltip content");
 });
 
--- a/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
+++ b/devtools/client/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
@@ -5,19 +5,19 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that when playerFronts are updated, the same number of playerWidgets
 // are created in the panel.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel, controller} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   info("Selecting the test animated node again");
-  yield selectNode(".multi", inspector);
+  yield selectNodeAndWaitForAnimations(".multi", inspector);
 
   is(controller.animationPlayers.length,
     timeline.animationsEl.querySelectorAll(".animation").length,
     "As many timeline elements were created as there are playerFronts");
 });
--- a/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
+++ b/devtools/client/animationinspector/test/browser_animation_shows_player_on_valid_node.js
@@ -5,17 +5,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel shows an animation player when an animated node is
 // selected.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Select node .animated and check that the panel is not empty");
   let node = yield getNodeFront(".animated", inspector);
-  yield selectNode(node, inspector);
+  yield selectNodeAndWaitForAnimations(node, inspector);
 
   assertAnimationsDisplayed(panel, 1);
 });
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_animations.js
@@ -6,22 +6,22 @@
 
 // Test that the spacebar key press toggles the toggleAll button state
 // when a node with no animation is selected.
 // This test doesn't need to test if animations actually pause/resume
 // because there's an other test that does this :
 // browser_animation_toggle_button_toggles_animation.js
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel, inspector, window, controller} = yield openAnimationInspector();
   let {toggleAllButtonEl} = panel;
 
   // select a node without animations
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   // ensure the focus is on the animation panel
   window.focus();
 
   info("Simulate spacebar stroke and check toggleAll button" +
        " is in paused state");
 
   // sending the key will lead to a ALL_ANIMATIONS_TOGGLED_EVENT
--- a/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_spacebar_toggles_node_animations.js
@@ -6,17 +6,17 @@
 
 // Test that the spacebar key press toggles the play/resume button state.
 // This test doesn't need to test if animations actually pause/resume
 // because there's an other test that does this.
 // There are animations in the test page and since, by default, the <body> node
 // is selected, animations will be displayed in the timeline, so the timeline
 // play/resume button will be displayed
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel, window} = yield openAnimationInspector();
   let {playTimelineButtonEl} = panel;
 
   // ensure the focus is on the animation panel
   window.focus();
 
   info("Simulate spacebar stroke and check playResume button" +
        " is in paused state");
--- a/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlight_select.js
@@ -5,23 +5,23 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {toolbox, inspector, panel} = yield openAnimationInspector();
 
   info("Select the simple animated node");
   let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
   yield onPanelUpdated;
 
   let targets = yield waitForAllAnimationTargets(panel);
   // Arbitrary select the first one
   let targetNodeComponent = targets[0];
 
   info("Retrieve the part of the widget that highlights the node on hover");
   let highlightingEl = targetNodeComponent.previewer.previewEl;
@@ -45,17 +45,17 @@ add_task(function*() {
     "The highlighted node has the correct tagName");
   is(nodeFront.attributes[0].name, "class",
     "The highlighted node has the correct attributes");
   is(nodeFront.attributes[0].value, "ball animated",
     "The highlighted node has the correct class");
 
   info("Select the body node in order to have the list of all animations");
   onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield selectNode("body", inspector);
+  yield selectNodeAndWaitForAnimations("body", inspector);
   yield onPanelUpdated;
 
   targets = yield waitForAllAnimationTargets(panel);
   targetNodeComponent = targets[0];
 
   info("Click on the first animated node component and wait for the " +
        "selection to change");
   let onSelection = inspector.selection.once("new-node-front");
--- a/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
+++ b/devtools/client/animationinspector/test/browser_animation_target_highlighter_lock.js
@@ -5,17 +5,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   let targets = panel.animationsTimelineComponent.targetNodes;
 
   info("Click on the highlighter icon for the first animated node");
   let domNodePreview1 = targets[0].previewer;
   yield lockHighlighterOn(domNodePreview1);
   ok(domNodePreview1.highlightNodeEl.classList.contains("selected"),
--- a/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_currentTime.js
@@ -6,17 +6,17 @@
 
 requestLongerTimeout(2);
 
 // Check that the timeline toolbar displays the current time, and that it
 // changes when animations are playing, gets back to 0 when animations are
 // rewound, and stops when animations are paused.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {panel} = yield openAnimationInspector();
   let label = panel.timelineCurrentTimeEl;
   ok(label, "The current time label exists");
 
   // On page load animations are playing so the time shoud change, although we
   // don't want to test the exact value of the time displayed, just that it
   // actually changes.
--- a/devtools/client/animationinspector/test/browser_animation_timeline_header.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_header.js
@@ -10,17 +10,17 @@ requestLongerTimeout(2);
 
 const {findOptimalTimeInterval, TimeScale} = require("devtools/client/animationinspector/utils");
 
 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
 // animation-timeline.js
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let headerEl = timeline.timeHeaderEl;
 
   info("Find out how many time graduations should there be");
   let width = headerEl.offsetWidth;
 
--- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js
@@ -12,17 +12,17 @@ requestLongerTimeout(2);
 // that the scrubber resumes/stops moving.
 // Also checks that the button goes to the right state when the scrubber has
 // reached the end of the timeline: continues to be in playing mode for infinite
 // animations, goes to paused mode otherwise.
 // And test that clicking the button once the scrubber has reached the end of
 // the timeline does the right thing.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {panel, inspector} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
   let btn = panel.playTimelineButtonEl;
 
   ok(btn, "The play/pause button exists");
   ok(!btn.classList.contains("paused"),
      "The play/pause button is in its playing state");
@@ -40,17 +40,17 @@ add_task(function*() {
   ok(!btn.classList.contains("paused"),
      "The play/pause button is in its playing state again");
   yield assertScrubberMoving(panel, true);
 
   // Some animations on the test page are infinite, so the scrubber won't stop
   // at the end of the timeline, and the button should remain in play mode.
   info("Select an infinite animation, reload the page and wait for the " +
        "animation to complete");
-  yield selectNode(".multi", inspector);
+  yield selectNodeAndWaitForAnimations(".multi", inspector);
   yield reloadTab(inspector);
   yield waitForOutOfBoundScrubber(timeline);
 
   ok(!btn.classList.contains("paused"),
      "The button is in its playing state still, animations are infinite.");
   yield assertScrubberMoving(panel, true);
 
   info("Click on the button after the scrubber has moved out of bounds");
@@ -59,17 +59,17 @@ add_task(function*() {
   ok(btn.classList.contains("paused"),
      "The button can be paused after the scrubber has moved out of bounds");
   yield assertScrubberMoving(panel, false);
 
   // For a finite animation though, once the scrubber reaches the end of the
   // timeline, it should go back to paused mode.
   info("Select a finite animation, reload the page and wait for the " +
        "animation to complete");
-  yield selectNode(".negative-delay", inspector);
+  yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
 
   let onScrubberStopped = waitForScrubberStopped(timeline);
   yield reloadTab(inspector);
   yield onScrubberStopped;
 
   ok(btn.classList.contains("paused"),
      "The button is in paused state once finite animations are done");
   yield assertScrubberMoving(panel, false);
--- a/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rate_selector.js
@@ -8,17 +8,17 @@ requestLongerTimeout(2);
 
 // Check that the timeline toolbar contains a playback rate selector UI and that
 // it can be used to change the playback rate of animations in the timeline.
 // Also check that it displays the rate of the current animations in case they
 // all have the same rate, or that it displays the empty value in case they
 // have mixed rates.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {panel, controller, inspector, toolbox} = yield openAnimationInspector();
 
   // In this test, we disable the highlighter on purpose because of the way
   // events are simulated to select an option in the playbackRate <select>.
   // Indeed, this may cause mousemove events to be triggered on the nodes that
   // are underneath the <select>, and these are AnimationTargetNode instances.
   // Simulating mouse events on them will cause the highlighter to emit requests
@@ -29,23 +29,23 @@ add_task(function*() {
 
   ok(select, "The rate selector exists");
 
   info("Change all of the current animations' rates to 0.5");
   yield changeTimelinePlaybackRate(panel, .5);
   checkAllAnimationsRatesChanged(controller, select, .5);
 
   info("Select just one animated node and change its rate only");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   yield changeTimelinePlaybackRate(panel, 2);
   checkAllAnimationsRatesChanged(controller, select, 2);
 
   info("Select the <body> again, it should now have mixed-rates animations");
-  yield selectNode("body", inspector);
+  yield selectNodeAndWaitForAnimations("body", inspector);
 
   is(select.value, "", "The selected rate is empty");
 
   info("Change the rate for these mixed-rate animations");
   yield changeTimelinePlaybackRate(panel, 1);
   checkAllAnimationsRatesChanged(controller, select, 1);
 });
 
--- a/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js
@@ -8,17 +8,17 @@ requestLongerTimeout(2);
 
 // Check that the timeline toolbar contains a rewind button and that it can be
 // clicked. Check that when it is, the current animations displayed in the
 // timeline get their playstates changed to paused, and their currentTimes
 // reset to 0, and that the scrubber stops moving and is positioned to the
 // start.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {panel, controller} = yield openAnimationInspector();
   let players = controller.animationPlayers;
   let btn = panel.rewindTimelineButtonEl;
 
   ok(btn, "The rewind button exists");
 
   info("Click on the button to rewind all timeline animations");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_exists.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that the timeline does have a scrubber element.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let scrubberEl = timeline.scrubberEl;
 
   ok(scrubberEl, "The scrubber element exists");
   ok(scrubberEl.classList.contains("scrubber"), "It has the right classname");
 });
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@@ -8,17 +8,17 @@ requestLongerTimeout(2);
 
 // Check that the scrubber in the timeline can be moved by clicking & dragging
 // in the header area.
 // Also check that doing so changes the timeline's play/pause button to paused
 // state.
 // Finally, also check that the scrubber can be moved using the scrubber handle.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
 
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
   let {win, timeHeaderEl, scrubberEl, scrubberHandleEl} = timeline;
   let playTimelineButtonEl = panel.playTimelineButtonEl;
 
   ok(!playTimelineButtonEl.classList.contains("paused"),
      "The timeline play button is in its playing state by default");
--- a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_moves.js
@@ -7,17 +7,17 @@
 requestLongerTimeout(2);
 
 // Check that the scrubber in the timeline moves when animations are playing.
 // The animations in the test page last for a very long time, so the test just
 // measures the position of the scrubber once, then waits for some time to pass
 // and measures its position again.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let scrubberEl = timeline.scrubberEl;
   let startPos = scrubberEl.getBoundingClientRect().left;
 
   info("Wait for some time to check that the scrubber moves");
   yield new Promise(r => setTimeout(r, 2000));
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_delay.js
@@ -7,30 +7,30 @@
 requestLongerTimeout(2);
 
 // Check that animation delay is visualized in the timeline when the animation
 // is delayed.
 // Also check that negative delays do not overflow the UI, and are shown like
 // positive delays.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Selecting a delayed animated node");
-  yield selectNode(".delayed", inspector);
+  yield selectNodeAndWaitForAnimations(".delayed", inspector);
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
   checkDelayAndName(timelineEl, true);
 
   info("Selecting a no-delay animated node");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
   checkDelayAndName(timelineEl, false);
 
   info("Selecting a negative-delay animated node");
-  yield selectNode(".negative-delay", inspector);
+  yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
   checkDelayAndName(timelineEl, true);
 });
 
 function checkDelayAndName(timelineEl, hasDelay) {
   let delay = timelineEl.querySelector(".delay");
 
   is(!!delay, hasDelay, "The timeline " +
                         (hasDelay ? "contains" : "does not contain") +
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_iterations.js
@@ -5,21 +5,21 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that the timeline is displays as many iteration elements as there are
 // iterations in an animation.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Selecting the test node");
-  yield selectNode(".delayed", inspector);
+  yield selectNodeAndWaitForAnimations(".delayed", inspector);
 
   info("Getting the animation element from the panel");
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
   let animation = timelineEl.querySelector(".time-block");
   let iterations = animation.querySelector(".iterations");
 
   // Iterations are rendered with a repeating linear-gradient, so we need to
   // calculate how many iterations are represented by looking at the background
@@ -27,17 +27,17 @@ add_task(function*() {
   let iterationCount = getIterationCountFromBackground(iterations);
 
   is(iterationCount, 10,
      "The animation timeline contains the right number of iterations");
   ok(!iterations.classList.contains("infinite"),
      "The iteration element doesn't have the infinite class");
 
   info("Selecting another test node with an infinite animation");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   info("Getting the animation element from the panel again");
   animation = timelineEl.querySelector(".time-block");
   iterations = animation.querySelector(".iterations");
 
   iterationCount = getIterationCountFromBackground(iterations);
 
   is(iterationCount, 1,
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
@@ -5,17 +5,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that the timeline displays animations' duration, delay and iteration
 // counts in tooltips.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel, controller} = yield openAnimationInspector();
 
   info("Getting the animation element from the panel");
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
   let timeBlockNameEls = timelineEl.querySelectorAll(".time-block .name");
 
   // Verify that each time-block's name element has a tooltip that looks sort of
   // ok. We don't need to test the actual content.
--- a/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
@@ -13,17 +13,17 @@
 
 add_task(function*() {
   yield new Promise(resolve => {
     SpecialPowers.pushPrefEnv({"set": [
       ["dom.animations-api.core.enabled", true]
     ]}, resolve);
   });
 
-  yield addTab(TEST_URL_ROOT + "doc_modify_playbackRate.html");
+  yield addTab(URL_ROOT + "doc_modify_playbackRate.html");
 
   let {panel} = yield openAnimationInspector();
 
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
 
   let timeBlocks = timelineEl.querySelectorAll(".time-block");
   is(timeBlocks.length, 2, "2 animations are displayed");
 
--- a/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_ui.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Check that the timeline contains the right elements.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let el = timeline.rootWrapperEl;
 
   ok(el.querySelector(".time-header"),
      "The header element is in the DOM of the timeline");
   ok(el.querySelectorAll(".time-header .time-tick").length,
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_resets_on_navigate.js
@@ -4,21 +4,21 @@
 
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that a page navigation resets the state of the global toggle button.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
 
   info("Select the non-animated test node");
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   ok(!panel.toggleAllButtonEl.classList.contains("paused"),
     "The toggle button is in its running state by default");
 
   info("Toggle all animations, so that they pause");
   yield panel.toggleAll();
   ok(panel.toggleAllButtonEl.classList.contains("paused"),
     "The toggle button now is in its paused state");
--- a/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
+++ b/devtools/client/animationinspector/test/browser_animation_toggle_button_toggles_animations.js
@@ -7,17 +7,17 @@
 requestLongerTimeout(2);
 
 // Test that the main toggle button actually toggles animations.
 // This test doesn't need to be extra careful about checking that *all*
 // animations have been paused (including inside iframes) because there's an
 // actor test in /devtools/server/tests/browser/ that does this.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel} = yield openAnimationInspector();
 
   info("Click the toggle button");
   yield panel.toggleAll();
   yield checkState("paused");
 
   info("Click again the toggle button");
   yield panel.toggleAll();
--- a/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/devtools/client/animationinspector/test/browser_animation_toolbar_exists.js
@@ -7,30 +7,30 @@
 requestLongerTimeout(2);
 
 // Test that the animation panel has a top toolbar that contains the play/pause
 // button and that is displayed at all times.
 // Also test that this toolbar gets replaced by the timeline toolbar when there
 // are animations to be displayed.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, window} = yield openAnimationInspector();
   let doc = window.document;
   let toolbar = doc.querySelector("#global-toolbar");
 
   ok(toolbar, "The panel contains the toolbar element with the new UI");
   ok(!isNodeVisible(toolbar),
      "The toolbar is hidden while there are animations");
 
   let timelineToolbar = doc.querySelector("#timeline-toolbar");
   ok(timelineToolbar, "The panel contains a timeline toolbar element");
   ok(isNodeVisible(timelineToolbar),
      "The timeline toolbar is visible when there are animations");
 
   info("Select a node that has no animations");
-  yield selectNode(".still", inspector);
+  yield selectNodeAndWaitForAnimations(".still", inspector);
 
   ok(isNodeVisible(toolbar),
      "The toolbar is shown when there are no animations");
   ok(!isNodeVisible(timelineToolbar),
      "The timeline toolbar is hidden when there are no animations");
 });
--- 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
@@ -5,21 +5,21 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Verify that if the animation's duration, iterations or delay change in
 // content, then the widget reflects the changes.
 
 add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {panel, controller, inspector} = yield openAnimationInspector();
 
   info("Select the test node");
-  yield selectNode(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".animated", inspector);
 
   let animation = controller.animationPlayers[0];
   yield setStyle(animation, panel, "animationDuration", "5.5s");
   yield setStyle(animation, panel, "animationIterationCount", "300");
   yield setStyle(animation, panel, "animationDelay", "45s");
 
   let animationsEl = panel.animationsTimelineComponent.animationsEl;
   let timeBlockEl = animationsEl.querySelector(".time-block");
--- a/devtools/client/animationinspector/test/head.js
+++ b/devtools/client/animationinspector/test/head.js
@@ -1,142 +1,94 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 /* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
 
 "use strict";
 
-var Cu = Components.utils;
-const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
-const {gDevTools} = require("devtools/client/framework/devtools");
-const promise = require("promise");
-const {TargetFactory} = require("devtools/client/framework/target");
-const {console} = Cu.import("resource://gre/modules/Console.jsm", {});
+/* import-globals-from ../../inspector/test/head.js */
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this);
+
 const {ViewHelpers} = Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm", {});
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
-
-// All tests are asynchronous
-waitForExplicitFinish();
-
-const TEST_URL_ROOT = "http://example.com/browser/devtools/client/animationinspector/test/";
-const ROOT_TEST_DIR = getRootDirectory(gTestPath);
-const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
+const FRAME_SCRIPT_URL = CHROME_URL_ROOT + "doc_frame_script.js";
 const COMMON_FRAME_SCRIPT_URL = "chrome://devtools/content/shared/frame-script-utils.js";
 const TAB_NAME = "animationinspector";
 
 // Auto clean-up when a test ends
 registerCleanupFunction(function*() {
   yield closeAnimationInspector();
 
   while (gBrowser.tabs.length > 1) {
     gBrowser.removeCurrentTab();
   }
 });
 
-// Uncomment this pref to dump all devtools emitted events to the console.
-// Services.prefs.setBoolPref("devtools.dump.emit", true);
-
-// Uncomment this pref to dump all devtools protocol traffic
-// Services.prefs.setBoolPref("devtools.debugger.log", true);
-
-// Set the testing flag on DevToolsUtils and reset it when the test ends
-DevToolsUtils.testing = true;
-registerCleanupFunction(() => DevToolsUtils.testing = false);
-
 // Clean-up all prefs that might have been changed during a test run
 // (safer here because if the test fails, then the pref is never reverted)
 registerCleanupFunction(() => {
-  Services.prefs.clearUserPref("devtools.dump.emit");
   Services.prefs.clearUserPref("devtools.debugger.log");
 });
 
 /**
  * Add a new test tab in the browser and load the given url.
  * @param {String} url The url to be loaded in the new tab
  * @return a promise that resolves to the tab object when the url is loaded
  */
-function addTab(url) {
-  info("Adding a new tab with URL: '" + url + "'");
-  let def = promise.defer();
-
-  window.focus();
-
-  let tab = window.gBrowser.selectedTab = window.gBrowser.addTab(url);
-  let browser = tab.linkedBrowser;
-
-  info("Loading the helper frame script " + FRAME_SCRIPT_URL);
-  browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
-
-  info("Loading the helper frame script " + COMMON_FRAME_SCRIPT_URL);
-  browser.messageManager.loadFrameScript(COMMON_FRAME_SCRIPT_URL, false);
-
-  browser.addEventListener("load", function onload() {
-    browser.removeEventListener("load", onload, true);
-    info("URL '" + url + "' loading complete");
-
-    def.resolve(tab);
-  }, true);
-
-  return def.promise;
-}
+var _addTab = addTab;
+addTab = function(url) {
+  return _addTab(url).then(tab => {
+    let browser = tab.linkedBrowser;
+    info("Loading the helper frame script " + FRAME_SCRIPT_URL);
+    browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
+    info("Loading the helper frame script " + COMMON_FRAME_SCRIPT_URL);
+    browser.messageManager.loadFrameScript(COMMON_FRAME_SCRIPT_URL, false);
+    return tab;
+  });
+};
 
 /**
  * Reload the current tab location.
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * loaded in the toolbox
  */
 function* reloadTab(inspector) {
   let onNewRoot = inspector.once("new-root");
   yield executeInContent("devtools:test:reload", {}, {}, false);
   yield onNewRoot;
   yield inspector.once("inspector-updated");
 }
 
-/**
- * Get the NodeFront for a given css selector, via the protocol
- * @param {String} selector
- * @param {InspectorPanel} inspector The instance of InspectorPanel currently
- * loaded in the toolbox
- * @return {Promise} Resolves to the NodeFront instance
- */
-function getNodeFront(selector, {walker}) {
-  return walker.querySelector(walker.rootNode, selector);
-}
-
 /*
  * Set the inspector's current selection to a node or to the first match of the
- * given css selector.
+ * given css selector and wait for the animations to be displayed
  * @param {String|NodeFront}
  *        data The node to select
  * @param {InspectorPanel} inspector
  *        The instance of InspectorPanel currently
  * loaded in the toolbox
  * @param {String} reason
  *        Defaults to "test" which instructs the inspector not
  *        to highlight the node upon selection
  * @return {Promise} Resolves when the inspector is updated with the new node
+           and animations of its subtree are properly displayed.
  */
-var selectNode = Task.async(function*(data, inspector, reason = "test") {
-  info("Selecting the node for '" + data + "'");
-  let nodeFront = data;
-  if (!data._form) {
-    nodeFront = yield getNodeFront(data, 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);
   }
-  let updated = inspector.once("inspector-updated");
-  inspector.selection.setNodeFront(nodeFront, reason);
-  yield updated;
-
-  // 99% of the times, selectNode is called to select an animated node, and 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).
-  // Even if there are no animations, this is safe to do.
-  let {AnimationsPanel} = inspector.sidebar.getWindowForTab(TAB_NAME);
-  yield waitForAllAnimationTargets(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.
  * @param {String} msg An optional string to be used as the assertion message.
  */
@@ -171,33 +123,20 @@ var waitForAnimationInspectorReady = Tas
 });
 
 /**
  * Open the toolbox, with the inspector tool visible and the animationinspector
  * sidebar selected.
  * @return a promise that resolves when the inspector is ready.
  */
 var openAnimationInspector = Task.async(function*() {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-
-  info("Opening the toolbox with the inspector selected");
-  let toolbox = yield gDevTools.showToolbox(target, "inspector");
-
-  info("Switching to the animationinspector");
-  let inspector = toolbox.getPanel("inspector");
-
-  let panelReady = waitForAnimationInspectorReady(inspector);
-
-  info("Waiting for toolbox focus");
-  yield waitForToolboxFrameFocus(toolbox);
-
-  inspector.sidebar.select(TAB_NAME);
+  let {inspector, toolbox} = yield openInspectorSidebarTab(TAB_NAME);
 
   info("Waiting for the inspector and sidebar to be ready");
-  yield panelReady;
+  yield waitForAnimationInspectorReady(inspector);
 
   let win = inspector.sidebar.getWindowForTab(TAB_NAME);
   let {AnimationsController, AnimationsPanel} = win;
 
   info("Waiting for the animation controller and panel to be ready");
   if (AnimationsPanel.initialized) {
     yield AnimationsPanel.initialized;
   } else {
@@ -223,70 +162,16 @@ var openAnimationInspector = Task.async(
  * @return a promise that resolves when the toolbox has closed.
  */
 var closeAnimationInspector = Task.async(function*() {
   let target = TargetFactory.forTab(gBrowser.selectedTab);
   yield gDevTools.closeToolbox(target);
 });
 
 /**
- * Wait for the toolbox frame to receive focus after it loads
- * @param {Toolbox} toolbox
- * @return a promise that resolves when focus has been received
- */
-function waitForToolboxFrameFocus(toolbox) {
-  info("Making sure that the toolbox's frame is focused");
-  let def = promise.defer();
-  let win = toolbox.frame.contentWindow;
-  waitForFocus(def.resolve, win);
-  return def.promise;
-}
-
-/**
- * Checks whether the inspector's sidebar corresponding to the given id already
- * exists
- * @param {InspectorPanel}
- * @param {String}
- * @return {Boolean}
- */
-function hasSideBarTab(inspector, id) {
-  return !!inspector.sidebar.getWindowForTab(id);
-}
-
-/**
- * Wait for eventName on target.
- * @param {Object} target An observable object that either supports on/off or
- * addEventListener/removeEventListener
- * @param {String} eventName
- * @param {Boolean} useCapture Optional, for add/removeEventListener
- * @return A promise that resolves when the event has been handled
- */
-function once(target, eventName, useCapture = false) {
-  info("Waiting for event: '" + eventName + "' on " + target + ".");
-
-  let deferred = promise.defer();
-
-  for (let [add, remove] of [
-    ["addEventListener", "removeEventListener"],
-    ["addListener", "removeListener"],
-    ["on", "off"]
-  ]) {
-    if ((add in target) && (remove in target)) {
-      target[add](eventName, function onEvent(...aArgs) {
-        target[remove](eventName, onEvent, useCapture);
-        deferred.resolve.apply(deferred, aArgs);
-      }, useCapture);
-      break;
-    }
-  }
-
-  return deferred.promise;
-}
-
-/**
  * Wait for a content -> chrome message on the message manager (the window
  * messagemanager is used).
  * @param {String} name The message name
  * @return {Promise} A promise that resolves to the response data when the
  * message has been received
  */
 function waitForContentMessage(name) {
   info("Expecting message " + name + " from content");