From ff259011c17cf60cd3a3469f0976a4e40c3377db Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Thu, 10 Sep 2015 11:11:05 +0200
Subject: [PATCH 01/19] Bug 1155661 - 1 - Rename toolbar to global-toolbar;
 r=zer0

--HG--
extra : commitid : 9ZuxvQRBfXi
extra : rebase_source : 7b28c519530857f72e9e12deba5ab526eec8539e
---
 browser/devtools/animationinspector/animation-inspector.xhtml | 2 +-
 browser/devtools/animationinspector/animation-panel.js        | 4 ++--
 .../test/browser_animation_toolbar_exists.js                  | 4 ++--
 browser/themes/shared/devtools/animationinspector.css         | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/browser/devtools/animationinspector/animation-inspector.xhtml b/browser/devtools/animationinspector/animation-inspector.xhtml
index 2dfa4118e4d2..6b0c141e5fe7 100644
--- a/browser/devtools/animationinspector/animation-inspector.xhtml
+++ b/browser/devtools/animationinspector/animation-inspector.xhtml
@@ -15,7 +15,7 @@
     <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
   </head>
   <body class="theme-sidebar devtools-monospace" role="application">
-    <div id="toolbar" class="theme-toolbar">
+    <div id="global-toolbar" class="theme-toolbar">
       <span class="label">&allAnimations;</span>
       <button id="toggle-all" standalone="true" class="devtools-button"></button>
     </div>
diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js
index 7c37776fdbfb..5f582bf00f73 100644
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -41,9 +41,9 @@ var AnimationsPanel = {
     this.toggleAllButtonEl = document.querySelector("#toggle-all");
 
     // If the server doesn't support toggling all animations at once, hide the
-    // whole bottom toolbar.
+    // whole global toolbar.
     if (!AnimationsController.traits.hasToggleAll) {
-      document.querySelector("#toolbar").style.display = "none";
+      document.querySelector("#global-toolbar").style.display = "none";
     }
 
     let hUtils = gToolbox.highlighterUtils;
diff --git a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
index 9257f322258b..d3ec2453654f 100644
--- a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
@@ -12,7 +12,7 @@ add_task(function*() {
   let {inspector, window} = yield openAnimationInspector();
   let doc = window.document;
 
-  let toolbar = doc.querySelector("#toolbar");
+  let toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel contains the toolbar element");
   ok(toolbar.querySelector("#toggle-all"), "The toolbar contains the toggle button");
   ok(isNodeVisible(toolbar), "The toolbar is visible");
@@ -20,7 +20,7 @@ add_task(function*() {
   info("Select an animated node");
   yield selectNode(".animated", inspector);
 
-  toolbar = doc.querySelector("#toolbar");
+  toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel still contains the toolbar element");
   ok(isNodeVisible(toolbar), "The toolbar is still visible");
 });
diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css
index 5887bcbf5822..7e60fb78b5be 100644
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -37,7 +37,7 @@ body {
 
 /* The top toolbar, containing the toggle-all button */
 
-#toolbar {
+#global-toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
@@ -46,7 +46,7 @@ body {
   height: var(--toolbar-height);
 }
 
-#toolbar .label {
+#global-toolbar .label {
   padding: 1px 4px;
 }
 

From f4ca82633dc25a0d062548982e9414bb0af57219 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Fri, 11 Sep 2015 13:05:01 +0200
Subject: [PATCH 02/19] Bug 1155661 - 2 - Add a new timeline toolbar shown only
 when the timeline is displayed and non empty; r=zer0

--HG--
extra : commitid : ER8xYFm5q1X
extra : rebase_source : c71d9c9ae9d945c4fe6681ad141aa334b347b870
---
 .../animation-inspector.xhtml                 |  5 +++-
 .../animationinspector/animation-panel.js     | 22 +++++++++-------
 .../test/browser_animation_toolbar_exists.js  | 26 ++++++++++++++++++-
 .../shared/devtools/animationinspector.css    | 26 +++++++++++++++++--
 4 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/browser/devtools/animationinspector/animation-inspector.xhtml b/browser/devtools/animationinspector/animation-inspector.xhtml
index 6b0c141e5fe7..13132372a823 100644
--- a/browser/devtools/animationinspector/animation-inspector.xhtml
+++ b/browser/devtools/animationinspector/animation-inspector.xhtml
@@ -14,10 +14,13 @@
     <link rel="stylesheet" href="chrome://browser/skin/devtools/animationinspector.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
   </head>
-  <body class="theme-sidebar devtools-monospace" role="application">
+  <body class="theme-sidebar devtools-monospace" role="application" empty="true">
     <div id="global-toolbar" class="theme-toolbar">
       <span class="label">&allAnimations;</span>
       <button id="toggle-all" standalone="true" class="devtools-button"></button>
+    </div>
+    <div id="timeline-toolbar" class="theme-toolbar">
+
     </div>
     <div id="players"></div>
     <div id="error-message">
diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js
index 5f582bf00f73..c8575164e94c 100644
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -128,14 +128,16 @@ var AnimationsPanel = {
     }
   },
 
-  displayErrorMessage: function() {
-    this.errorMessageEl.style.display = "block";
-    this.playersEl.style.display = "none";
-  },
-
-  hideErrorMessage: function() {
-    this.errorMessageEl.style.display = "none";
-    this.playersEl.style.display = "block";
+  togglePlayers: function(isVisible) {
+    if (isVisible) {
+      document.body.removeAttribute("empty");
+      if (AnimationsController.traits.isNewUI) {
+        document.body.setAttribute("timeline", "true");
+      }
+    } else {
+      document.body.setAttribute("empty", "true");
+      document.body.removeAttribute("timeline");
+    }
   },
 
   onPickerStarted: function() {
@@ -181,7 +183,7 @@ var AnimationsPanel = {
     let done = gInspector.updating("animationspanel");
 
     // Empty the whole panel first.
-    this.hideErrorMessage();
+    this.togglePlayers(true);
     yield this.destroyPlayerWidgets();
 
     // Re-render the timeline component.
@@ -194,7 +196,7 @@ var AnimationsPanel = {
     // If there are no players to show, show the error message instead and
     // return.
     if (!AnimationsController.animationPlayers.length) {
-      this.displayErrorMessage();
+      this.togglePlayers(false);
       this.emit(this.UI_UPDATED_EVENT);
       done();
       return;
diff --git a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
index d3ec2453654f..fe1389e42e0a 100644
--- a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
@@ -6,6 +6,8 @@
 
 // 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 with the new UI, that 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");
@@ -14,7 +16,8 @@ add_task(function*() {
 
   let toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel contains the toolbar element");
-  ok(toolbar.querySelector("#toggle-all"), "The toolbar contains the toggle button");
+  ok(toolbar.querySelector("#toggle-all"),
+     "The toolbar contains the toggle button");
   ok(isNodeVisible(toolbar), "The toolbar is visible");
 
   info("Select an animated node");
@@ -23,4 +26,25 @@ add_task(function*() {
   toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel still contains the toolbar element");
   ok(isNodeVisible(toolbar), "The toolbar is still visible");
+
+  ({inspector, window} = yield closeAnimationInspectorAndRestartWithNewUI());
+  doc = window.document;
+  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);
+
+  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");
 });
diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css
index 7e60fb78b5be..94cb4c4471df 100644
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -35,9 +35,12 @@ body {
   color: var(--theme-content-color3);
 }
 
-/* The top toolbar, containing the toggle-all button */
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+   containing playback control buttons, shown only when there are animations
+   displayed in the timeline */
 
-#global-toolbar {
+#global-toolbar,
+#timeline-toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
@@ -46,6 +49,18 @@ body {
   height: var(--toolbar-height);
 }
 
+#timeline-toolbar {
+  display: none;
+}
+
+[timeline] #global-toolbar {
+  display: none;
+}
+
+[timeline] #timeline-toolbar {
+  display: flex;
+}
+
 #global-toolbar .label {
   padding: 1px 4px;
 }
@@ -62,6 +77,10 @@ body {
   overflow: auto;
 }
 
+[empty] #players {
+  display: none;
+}
+
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
@@ -74,6 +93,9 @@ body {
   display: none;
 }
 
+[empty] #error-message {
+  display: block;
+}
 
 /* Element picker and toggle-all buttons */
 

From 0af1b344541eb9eae2c0f57d8d1bbd0037efd9c6 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Wed, 16 Sep 2015 14:42:32 +0200
Subject: [PATCH 03/19] Bug 1155661 - 3 - Add a way to play/pause the current
 animations at the same time; r=miker

This is a useful method to expose on the AnimationsActor so that the front-end
can play or pause the list of animations currently displayed in the UI without
introducing synchronization offsets. This way all animations are paused
synchronously on the server instead of having to request pausing each animation
one by one from the front-end.

--HG--
extra : commitid : GOlqvpCVgrA
extra : rebase_source : 71d436d18907a97b6b287f4bf7df93d2b6ee3796
---
 .../animation-controller.js                   | 31 ++++++++-
 toolkit/devtools/server/actors/animation.js   | 18 ++++++
 .../browser/browser_animation_actors_08.js    | 63 ++++++++++++++-----
 3 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/browser/devtools/animationinspector/animation-controller.js b/browser/devtools/animationinspector/animation-controller.js
index 035c71285718..a56cae85d1c0 100644
--- a/browser/devtools/animationinspector/animation-controller.js
+++ b/browser/devtools/animationinspector/animation-controller.js
@@ -80,6 +80,8 @@ var getServerTraits = Task.async(function*(target) {
   let config = [
     { name: "hasToggleAll", actor: "animations",
       method: "toggleAll" },
+    { name: "hasToggleSeveral", actor: "animations",
+      method: "toggleSeveral" },
     { name: "hasSetCurrentTime", actor: "animationplayer",
       method: "setCurrentTime" },
     { name: "hasMutationEvents", actor: "animations",
@@ -245,11 +247,32 @@ var AnimationsController = {
     return this.animationsFront.toggleAll().catch(e => console.error(e));
   },
 
+  /**
+   * Similar to toggleAll except that it only plays/pauses the currently known
+   * animations (those listed in this.animationPlayers).
+   * @param {Boolean} shouldPause True if the animations should be paused, false
+   * if they should be played.
+   * @return {Promise} Resolves when the playState has been changed.
+   */
+  toggleCurrentAnimations: Task.async(function*(shouldPause) {
+    if (this.traits.hasToggleSeveral) {
+      yield this.animationsFront.toggleSeveral(this.animationPlayers,
+                                               shouldPause);
+    } else {
+      // Fall back to pausing/playing the players one by one, which is bound to
+      // introduce some de-synchronization.
+      for (let player of this.animationPlayers) {
+        if (shouldPause) {
+          yield player.pause();
+        } else {
+          yield player.play();
+        }
+      }
+    }
+  }),
+
   /**
    * Set all known animations' currentTimes to the provided time.
-   * Note that depending on the server's capabilities, this might resolve in
-   * either one packet, or as many packets as there are animations. In the
-   * latter case, some time deltas might be introduced.
    * @param {Number} time.
    * @param {Boolean} shouldPause Should the animations be paused too.
    * @return {Promise} Resolves when the current time has been set.
@@ -259,6 +282,8 @@ var AnimationsController = {
       yield this.animationsFront.setCurrentTimes(this.animationPlayers, time,
                                                  shouldPause);
     } else {
+      // Fall back to pausing and setting the current time on each player, one
+      // by one, which is bound to introduce some de-synchronization.
       for (let animation of this.animationPlayers) {
         if (shouldPause) {
           yield animation.pause();
diff --git a/toolkit/devtools/server/actors/animation.js b/toolkit/devtools/server/actors/animation.js
index 6755a06956d1..45e4b09f9e7f 100644
--- a/toolkit/devtools/server/actors/animation.js
+++ b/toolkit/devtools/server/actors/animation.js
@@ -840,6 +840,24 @@ var AnimationsActor = exports.AnimationsActor = ActorClass({
     response: {}
   }),
 
+  /**
+   * Toggle (play/pause) several animations at the same time.
+   * @param {Array} players A list of AnimationPlayerActor objects.
+   * @param {Boolean} shouldPause If set to true, the players will be paused,
+   * otherwise they will be played.
+   */
+  toggleSeveral: method(function(players, shouldPause) {
+    return promise.all(players.map(player => {
+      return shouldPause ? player.pause() : player.play();
+    }));
+  }, {
+    request: {
+      players: Arg(0, "array:animationplayer"),
+      shouldPause: Arg(1, "boolean")
+    },
+    response: {}
+  }),
+
   /**
    * Set the current time of several animations at the same time.
    * @param {Array} players A list of AnimationPlayerActor.
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_08.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_08.js
index 390f3835447e..86afc5ea55d9 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_08.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_08.js
@@ -4,13 +4,24 @@
 
 "use strict";
 
-// Check that the AnimationsActor can pause/play all animations at once.
+// Check that the AnimationsActor can pause/play all animations at once, and
+// check that it can also pause/play a given list of animations at once.
 
 const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
+// List of selectors that match "all" animated nodes in the test page.
+// This list misses a bunch of animated nodes on purpose. Only the ones that
+// have infinite animations are listed. This is done to avoid intermittents
+// caused when finite animations are already done playing by the time the test
+// runs.
+const ALL_ANIMATED_NODES = [".simple-animation", ".multiple-animations",
+                            ".delayed-animation"];
+// List of selectors that match some animated nodes in the test page only.
+const SOME_ANIMATED_NODES = [".simple-animation", ".delayed-animation"];
+
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
@@ -21,35 +32,57 @@ add_task(function*() {
 
   info("Pause all animations in the test document");
   yield front.pauseAll();
-  yield checkAllAnimationsStates(walker, front, "paused");
+  yield checkAnimationsStates(walker, front, ALL_ANIMATED_NODES, "paused");
 
   info("Play all animations in the test document");
   yield front.playAll();
-  yield checkAllAnimationsStates(walker, front, "running");
+  yield checkAnimationsStates(walker, front, ALL_ANIMATED_NODES, "running");
 
   info("Pause all animations in the test document using toggleAll");
   yield front.toggleAll();
-  yield checkAllAnimationsStates(walker, front, "paused");
+  yield checkAnimationsStates(walker, front, ALL_ANIMATED_NODES, "paused");
 
   info("Play all animations in the test document using toggleAll");
   yield front.toggleAll();
-  yield checkAllAnimationsStates(walker, front, "running");
+  yield checkAnimationsStates(walker, front, ALL_ANIMATED_NODES, "running");
+
+  info("Pause a given list of animations only");
+  let players = [];
+  for (let selector of SOME_ANIMATED_NODES) {
+    let [player] = yield getPlayersFor(walker, front, selector);
+    players.push(player);
+  }
+  yield front.toggleSeveral(players, true);
+  yield checkAnimationsStates(walker, front, SOME_ANIMATED_NODES, "paused");
+  yield checkAnimationsStates(walker, front, [".multiple-animations"], "running");
+
+  info("Play the same list of animations");
+  yield front.toggleSeveral(players, false);
+  yield checkAnimationsStates(walker, front, ALL_ANIMATED_NODES, "running");
 
   yield closeDebuggerClient(client);
   gBrowser.removeCurrentTab();
 });
 
-function* checkAllAnimationsStates(walker, front, playState) {
-  info("Checking the playState of all the nodes that have infinite running animations");
+function* checkAnimationsStates(walker, front, selectors, playState) {
+  info("Checking the playState of all the nodes that have infinite running " +
+       "animations");
 
-  let selectors = [".simple-animation", ".multiple-animations", ".delayed-animation"];
   for (let selector of selectors) {
     info("Getting the AnimationPlayerFront for node " + selector);
-    let node = yield walker.querySelector(walker.rootNode, selector);
-    let [player] = yield front.getAnimationPlayersForNode(node);
-    yield player.ready;
-    let state = yield player.getCurrentState();
-    is(state.playState, playState,
-      "The playState of node " + selector + " is " + playState);
+    let [player] = yield getPlayersFor(walker, front, selector);
+    yield player.ready();
+    yield checkPlayState(player, selector, playState);
   }
 }
+
+function* getPlayersFor(walker, front, selector) {
+  let node = yield walker.querySelector(walker.rootNode, selector);
+  return front.getAnimationPlayersForNode(node);
+}
+
+function* checkPlayState(player, selector, expectedState) {
+  let state = yield player.getCurrentState();
+  is(state.playState, expectedState,
+    "The playState of node " + selector + " is " + expectedState);
+}

From 54ef8ca61dbfa5aa0dab2540f60a0d2b5d363b09 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Wed, 16 Sep 2015 21:05:51 +0200
Subject: [PATCH 04/19] Bug 1155661 - 4 - Add the timeline play/pause button;
 r=bgrins

--HG--
extra : commitid : KIhTJTWqEQ3
extra : rebase_source : e395082d13171698bd75c7f3b948ea53ea6426c1
---
 .../animation-inspector.xhtml                 |  4 +--
 .../shared/devtools/animationinspector.css    | 30 ++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/browser/devtools/animationinspector/animation-inspector.xhtml b/browser/devtools/animationinspector/animation-inspector.xhtml
index 13132372a823..663b6cc954c2 100644
--- a/browser/devtools/animationinspector/animation-inspector.xhtml
+++ b/browser/devtools/animationinspector/animation-inspector.xhtml
@@ -17,10 +17,10 @@
   <body class="theme-sidebar devtools-monospace" role="application" empty="true">
     <div id="global-toolbar" class="theme-toolbar">
       <span class="label">&allAnimations;</span>
-      <button id="toggle-all" standalone="true" class="devtools-button"></button>
+      <button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
     </div>
     <div id="timeline-toolbar" class="theme-toolbar">
-
+      <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
     </div>
     <div id="players"></div>
     <div id="error-message">
diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css
index 94cb4c4471df..be241981f96b 100644
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -65,11 +65,6 @@ body {
   padding: 1px 4px;
 }
 
-#toggle-all {
-  border-width: 0 0 0 1px;
-  min-height: var(--toolbar-height);
-}
-
 /* The main animations container */
 
 #players {
@@ -97,15 +92,19 @@ body {
   display: block;
 }
 
-/* Element picker and toggle-all buttons */
+/* Element picker, toggle-all buttons, timeline pause button, ... */
 
-#element-picker,
-#toggle-all {
+#global-toolbar .devtools-button,
+#timeline-toolbar .devtools-button {
+  border-width: 0 0 0 1px;
+  min-height: var(--toolbar-height);
+}
+
+.devtools-button {
   position: relative;
 }
 
-#element-picker::before,
-#toggle-all::before {
+.devtools-button::before {
   content: "";
   display: block;
   width: 16px;
@@ -114,10 +113,13 @@ body {
   left: 50%;
   top: 50%;
   margin: -8px 0 0 -8px;
+}
+
+#element-picker::before {
   background-image: url("chrome://browser/skin/devtools/command-pick.png");
 }
 
-#toggle-all::before {
+.pause-button::before {
   background-image: url("debugger-pause.png");
 }
 
@@ -126,7 +128,7 @@ body {
   filter: none; /* Icon is blue when checked, don't invert for light theme */
 }
 
-#toggle-all.paused::before {
+.pause-button.paused::before {
   background-image: url("debugger-play.png");
 }
 
@@ -136,11 +138,11 @@ body {
     background-size: 64px;
   }
 
-  #toggle-all::before {
+  .pause-button::before {
     background-image: url("debugger-pause@2x.png");
   }
 
-  #toggle-all.paused::before {
+  .pause-button.paused::before {
     background-image: url("debugger-play@2x.png");
   }
 }

From a3e22a774a1233180e2611019bc6d36bb34ba76a Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Wed, 16 Sep 2015 17:00:07 +0200
Subject: [PATCH 05/19] Bug 1155661 - 5 - Make the timeline emit data about its
 current state and update the play/pause button based on this; r=miker

--HG--
extra : commitid : AZllnUhLaW9
extra : rebase_source : 04dc23ca21d7584019f7a4c3f86d5d3309dbb0e4
---
 .../animationinspector/animation-panel.js     | 41 +++++++++++++------
 .../devtools/animationinspector/components.js | 28 +++++++++++--
 ...ser_animation_timeline_scrubber_movable.js | 22 +++++++++-
 3 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js
index c8575164e94c..d1fa084424e6 100644
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -39,6 +39,7 @@ var AnimationsPanel = {
     this.errorMessageEl = document.querySelector("#error-message");
     this.pickerButtonEl = document.querySelector("#element-picker");
     this.toggleAllButtonEl = document.querySelector("#toggle-all");
+    this.playTimelineButtonEl = document.querySelector("#pause-resume-timeline");
 
     // If the server doesn't support toggling all animations at once, hide the
     // whole global toolbar.
@@ -46,14 +47,14 @@ var AnimationsPanel = {
       document.querySelector("#global-toolbar").style.display = "none";
     }
 
+    // Binding functions that need to be called in scope.
+    for (let functionName of ["onPickerStarted", "onPickerStopped",
+      "refreshAnimations", "toggleAll", "onTabNavigated",
+      "onTimelineDataChanged"]) {
+      this[functionName] = this[functionName].bind(this);
+    }
     let hUtils = gToolbox.highlighterUtils;
     this.togglePicker = hUtils.togglePicker.bind(hUtils);
-    this.onPickerStarted = this.onPickerStarted.bind(this);
-    this.onPickerStopped = this.onPickerStopped.bind(this);
-    this.refreshAnimations = this.refreshAnimations.bind(this);
-    this.toggleAll = this.toggleAll.bind(this);
-    this.onTabNavigated = this.onTabNavigated.bind(this);
-    this.onTimelineTimeChanged = this.onTimelineTimeChanged.bind(this);
 
     if (AnimationsController.traits.isNewUI) {
       this.animationsTimelineComponent = new AnimationsTimeline(gInspector);
@@ -90,6 +91,7 @@ var AnimationsPanel = {
 
     this.playersEl = this.errorMessageEl = null;
     this.toggleAllButtonEl = this.pickerButtonEl = null;
+    this.playTimelineButtonEl = null;
 
     this.destroyed.resolve();
   }),
@@ -106,8 +108,8 @@ var AnimationsPanel = {
     gToolbox.target.on("navigate", this.onTabNavigated);
 
     if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.on("current-time-changed",
-        this.onTimelineTimeChanged);
+      this.animationsTimelineComponent.on("timeline-data-changed",
+        this.onTimelineDataChanged);
     }
   },
 
@@ -123,8 +125,8 @@ var AnimationsPanel = {
     gToolbox.target.off("navigate", this.onTabNavigated);
 
     if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.off("current-time-changed",
-        this.onTimelineTimeChanged);
+      this.animationsTimelineComponent.off("timeline-data-changed",
+        this.onTimelineDataChanged);
     }
   },
 
@@ -174,9 +176,22 @@ var AnimationsPanel = {
     this.toggleAllButtonEl.classList.remove("paused");
   },
 
-  onTimelineTimeChanged: function(e, time) {
-    AnimationsController.setCurrentTimeAll(time, true)
-                        .catch(error => console.error(error));
+  onTimelineDataChanged: function(e, data) {
+    this.timelineData = data;
+    let {isPaused, isMoving, time} = data;
+
+    this.playTimelineButtonEl.classList.toggle("paused", !isMoving);
+
+    // Pause all animations and set their currentTimes (but only do this after
+    // the previous currentTime setting is done, as this gets called many times
+    // when users drag the scrubber with the mouse, and we want the server-side
+    // requests to be sequenced).
+    if (isPaused && !this.setCurrentTimeAllPromise) {
+      this.setCurrentTimeAllPromise =
+        AnimationsController.setCurrentTimeAll(time, true)
+                            .catch(error => console.error(error))
+                            .then(() => this.setCurrentTimeAllPromise = null);
+    }
   },
 
   refreshAnimations: Task.async(function*() {
diff --git a/browser/devtools/animationinspector/components.js b/browser/devtools/animationinspector/components.js
index 92cd611844d8..e0426daf85d8 100644
--- a/browser/devtools/animationinspector/components.js
+++ b/browser/devtools/animationinspector/components.js
@@ -661,8 +661,8 @@ exports.TimeScale = TimeScale;
  * Animations are organized by lines, with a left margin containing the preview
  * of the target DOM element the animation applies to.
  * The current time play head can be moved by clicking/dragging in the header.
- * when this happens, the component emits "current-time-changed" events with the
- * new time.
+ * when this happens, the component emits "current-data-changed" events with the
+ * new time and state of the timeline.
  *
  * @param {InspectorPanel} inspector.
  */
@@ -793,7 +793,12 @@ AnimationsTimeline.prototype = {
 
     let time = TimeScale.distanceToRelativeTime(offset,
       this.timeHeaderEl.offsetWidth);
-    this.emit("current-time-changed", time);
+
+    this.emit("timeline-data-changed", {
+      isPaused: true,
+      isMoving: false,
+      time: time
+    });
   },
 
   render: function(animations, documentCurrentTime) {
@@ -868,11 +873,27 @@ AnimationsTimeline.prototype = {
 
     if (time < TimeScale.minStartTime ||
         time > TimeScale.maxEndTime) {
+      this.stopAnimatingScrubber();
+      this.emit("timeline-data-changed", {
+        isPaused: false,
+        isMoving: false,
+        time: TimeScale.distanceToRelativeTime(x, this.timeHeaderEl.offsetWidth)
+      });
       return;
     }
 
+    this.emit("timeline-data-changed", {
+      isPaused: false,
+      isMoving: true,
+      time: TimeScale.distanceToRelativeTime(x, this.timeHeaderEl.offsetWidth)
+    });
+
     let now = this.win.performance.now();
     this.rafID = this.win.requestAnimationFrame(() => {
+      if (!this.rafID) {
+        // In case the scrubber was stopped in the meantime.
+        return;
+      }
       this.startAnimatingScrubber(time + this.win.performance.now() - now);
     });
   },
@@ -880,6 +901,7 @@ AnimationsTimeline.prototype = {
   stopAnimatingScrubber: function() {
     if (this.rafID) {
       this.win.cancelAnimationFrame(this.rafID);
+      this.rafID = null;
     }
   },
 
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
index 19330203f3f2..d04863e2cc6c 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@@ -6,6 +6,8 @@
 
 // Check that the scrubber in the timeline-based UI 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.
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
@@ -16,20 +18,36 @@ add_task(function*() {
   let win = timeline.win;
   let timeHeaderEl = timeline.timeHeaderEl;
   let scrubberEl = timeline.scrubberEl;
+  let playTimelineButtonEl = panel.playTimelineButtonEl;
+
+  ok(!playTimelineButtonEl.classList.contains("paused"),
+     "The timeline play button is in its playing state by default");
 
   info("Mousedown in the header to move the scrubber");
-  EventUtils.synthesizeMouse(timeHeaderEl, 50, 1, {type: "mousedown"}, win);
+  yield synthesizeMouseAndWaitForTimelineChange(timeline, 50, 1, "mousedown");
   let newPos = parseInt(scrubberEl.style.left, 10);
   is(newPos, 50, "The scrubber moved on mousedown");
 
+  ok(playTimelineButtonEl.classList.contains("paused"),
+     "The timeline play button is in its paused state after mousedown");
+
   info("Continue moving the mouse and verify that the scrubber tracks it");
-  EventUtils.synthesizeMouse(timeHeaderEl, 100, 1, {type: "mousemove"}, win);
+  yield synthesizeMouseAndWaitForTimelineChange(timeline, 100, 1, "mousemove");
   newPos = parseInt(scrubberEl.style.left, 10);
   is(newPos, 100, "The scrubber followed the mouse");
 
+  ok(playTimelineButtonEl.classList.contains("paused"),
+     "The timeline play button is in its paused state after mousemove");
+
   info("Release the mouse and move again and verify that the scrubber stays");
   EventUtils.synthesizeMouse(timeHeaderEl, 100, 1, {type: "mouseup"}, win);
   EventUtils.synthesizeMouse(timeHeaderEl, 200, 1, {type: "mousemove"}, win);
   newPos = parseInt(scrubberEl.style.left, 10);
   is(newPos, 100, "The scrubber stopped following the mouse");
 });
+
+function* synthesizeMouseAndWaitForTimelineChange(timeline, x, y, type) {
+  let onDataChanged = timeline.once("timeline-data-changed");
+  EventUtils.synthesizeMouse(timeline.timeHeaderEl, x, y, {type}, timeline.win);
+  yield onDataChanged;
+}

From 39192ba1c367e920c3caddac0be5f7d4204535af Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Fri, 18 Sep 2015 09:28:14 +0200
Subject: [PATCH 06/19] Bug 1155661 - 6 - Implement the behavior behind the
 timeline play/pause button; r=miker

--HG--
extra : commitid : FJgXxXJhXPt
extra : rebase_source : a7c1b396fd0e08bc5830f59934981aa436362955
---
 .../animationinspector/animation-panel.js     | 30 +++++++--
 .../devtools/animationinspector/components.js | 18 +++--
 .../animationinspector/test/browser.ini       |  1 +
 ...browser_animation_timeline_pause_button.js | 67 +++++++++++++++++++
 .../test/unit/test_timeScale.js               | 10 +--
 toolkit/devtools/server/actors/animation.js   | 18 ++++-
 6 files changed, 127 insertions(+), 17 deletions(-)
 create mode 100644 browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js

diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js
index d1fa084424e6..07bc35605662 100644
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -50,7 +50,7 @@ var AnimationsPanel = {
     // Binding functions that need to be called in scope.
     for (let functionName of ["onPickerStarted", "onPickerStopped",
       "refreshAnimations", "toggleAll", "onTabNavigated",
-      "onTimelineDataChanged"]) {
+      "onTimelineDataChanged", "playPauseTimeline"]) {
       this[functionName] = this[functionName].bind(this);
     }
     let hUtils = gToolbox.highlighterUtils;
@@ -100,11 +100,12 @@ var AnimationsPanel = {
     AnimationsController.on(AnimationsController.PLAYERS_UPDATED_EVENT,
       this.refreshAnimations);
 
-    this.pickerButtonEl.addEventListener("click", this.togglePicker, false);
+    this.pickerButtonEl.addEventListener("click", this.togglePicker);
     gToolbox.on("picker-started", this.onPickerStarted);
     gToolbox.on("picker-stopped", this.onPickerStopped);
 
-    this.toggleAllButtonEl.addEventListener("click", this.toggleAll, false);
+    this.toggleAllButtonEl.addEventListener("click", this.toggleAll);
+    this.playTimelineButtonEl.addEventListener("click", this.playPauseTimeline);
     gToolbox.target.on("navigate", this.onTabNavigated);
 
     if (this.animationsTimelineComponent) {
@@ -117,11 +118,12 @@ var AnimationsPanel = {
     AnimationsController.off(AnimationsController.PLAYERS_UPDATED_EVENT,
       this.refreshAnimations);
 
-    this.pickerButtonEl.removeEventListener("click", this.togglePicker, false);
+    this.pickerButtonEl.removeEventListener("click", this.togglePicker);
     gToolbox.off("picker-started", this.onPickerStarted);
     gToolbox.off("picker-stopped", this.onPickerStopped);
 
-    this.toggleAllButtonEl.removeEventListener("click", this.toggleAll, false);
+    this.toggleAllButtonEl.removeEventListener("click", this.toggleAll);
+    this.playTimelineButtonEl.removeEventListener("click", this.playPauseTimeline);
     gToolbox.target.off("navigate", this.onTabNavigated);
 
     if (this.animationsTimelineComponent) {
@@ -172,6 +174,24 @@ var AnimationsPanel = {
     yield AnimationsController.toggleAll();
   }),
 
+  /**
+   * Depending on the state of the timeline either pause or play the animations
+   * displayed in it.
+   * If the animations are finished, this will play them from the start again.
+   * If the animations are playing, this will pause them.
+   * If the animations are paused, this will resume them.
+   */
+  playPauseTimeline: Task.async(function*() {
+    yield AnimationsController.toggleCurrentAnimations(this.timelineData.isMoving);
+
+    // Now that the playState have been changed make sure the player (the
+    // fronts) are up to date, and then refresh the UI.
+    for (let player of AnimationsController.animationPlayers) {
+      yield player.refreshState(true);
+    }
+    yield this.refreshAnimations();
+  }),
+
   onTabNavigated: function() {
     this.toggleAllButtonEl.classList.remove("paused");
   },
diff --git a/browser/devtools/animationinspector/components.js b/browser/devtools/animationinspector/components.js
index e0426daf85d8..d15fd4f84a40 100644
--- a/browser/devtools/animationinspector/components.js
+++ b/browser/devtools/animationinspector/components.js
@@ -565,18 +565,21 @@ var TimeScale = {
    * @param {Object} state A PlayerFront.state object.
    */
   addAnimation: function(state) {
-    let {startTime, delay, duration, iterationCount, playbackRate} = state;
+    let {previousStartTime, delay, duration,
+         iterationCount, playbackRate} = state;
 
     // Negative-delayed animations have their startTimes set such that we would
     // be displaying the delay outside the time window if we didn't take it into
     // account here.
     let relevantDelay = delay < 0 ? delay / playbackRate : 0;
+    previousStartTime = previousStartTime || 0;
 
-    this.minStartTime = Math.min(this.minStartTime, startTime + relevantDelay);
+    this.minStartTime = Math.min(this.minStartTime,
+                                 previousStartTime + relevantDelay);
     let length = (delay / playbackRate) +
                  ((duration / playbackRate) *
                   (!iterationCount ? 1 : iterationCount));
-    this.maxEndTime = Math.max(this.maxEndTime, startTime + length);
+    this.maxEndTime = Math.max(this.maxEndTime, previousStartTime + length);
   },
 
   /**
@@ -867,12 +870,17 @@ AnimationsTimeline.prototype = {
     }
   },
 
+  isAtLeastOneAnimationPlaying: function() {
+    return this.animations.some(({state}) => state.playState === "running");
+  },
+
   startAnimatingScrubber: function(time) {
     let x = TimeScale.startTimeToDistance(time, this.timeHeaderEl.offsetWidth);
     this.scrubberEl.style.left = x + "px";
 
     if (time < TimeScale.minStartTime ||
-        time > TimeScale.maxEndTime) {
+        time > TimeScale.maxEndTime ||
+        !this.isAtLeastOneAnimationPlaying()) {
       this.stopAnimatingScrubber();
       this.emit("timeline-data-changed", {
         isPaused: false,
@@ -957,7 +965,7 @@ AnimationsTimeline.prototype = {
     // Create a container element to hold the delay and iterations.
     // It is positioned according to its delay (divided by the playbackrate),
     // and its width is according to its duration (divided by the playbackrate).
-    let start = state.startTime;
+    let start = state.previousStartTime || 0;
     let duration = state.duration;
     let rate = state.playbackRate;
     let count = state.iterationCount;
diff --git a/browser/devtools/animationinspector/test/browser.ini b/browser/devtools/animationinspector/test/browser.ini
index 3cbded3f6f5b..67d80a0678f4 100644
--- a/browser/devtools/animationinspector/test/browser.ini
+++ b/browser/devtools/animationinspector/test/browser.ini
@@ -40,6 +40,7 @@ support-files =
 [browser_animation_target_highlight_select.js]
 [browser_animation_timeline_displays_with_pref.js]
 [browser_animation_timeline_header.js]
+[browser_animation_timeline_pause_button.js]
 [browser_animation_timeline_scrubber_exists.js]
 [browser_animation_timeline_scrubber_movable.js]
 [browser_animation_timeline_scrubber_moves.js]
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js b/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js
new file mode 100644
index 000000000000..d951c86fab74
--- /dev/null
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js
@@ -0,0 +1,67 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the timeline toolbar contains a pause button and that this pause
+// button can be clicked. Check that when it is, the current animations
+// displayed in the timeline get their playstates changed accordingly, and check
+// that the scrubber resumes/stops moving.
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+
+  let {panel} = yield openAnimationInspectorNewUI();
+  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");
+
+  info("Click on the button to pause all timeline animations");
+  yield clickPlayPauseButton(panel);
+
+  ok(btn.classList.contains("paused"),
+     "The play/pause button is in its paused state");
+  yield checkIfScrubberMoving(panel, false);
+
+  info("Click again on the button to play all timeline animations");
+  yield clickPlayPauseButton(panel);
+
+  ok(!btn.classList.contains("paused"),
+     "The play/pause button is in its playing state again");
+  yield checkIfScrubberMoving(panel, true);
+});
+
+function* clickPlayPauseButton(panel) {
+  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
+
+  let btn = panel.playTimelineButtonEl;
+  let win = btn.ownerDocument.defaultView;
+  EventUtils.sendMouseEvent({type: "click"}, btn, win);
+
+  yield onUiUpdated;
+  yield waitForAllAnimationTargets(panel);
+}
+
+function* checkIfScrubberMoving(panel, isMoving) {
+  let timeline = panel.animationsTimelineComponent;
+  let scrubberEl = timeline.scrubberEl;
+
+  if (isMoving) {
+    // If we expect the scrubber to move, just wait for a couple of
+    // timeline-data-changed events and compare times.
+    let {time: time1} = yield timeline.once("timeline-data-changed");
+    let {time: time2} = yield timeline.once("timeline-data-changed");
+    ok(time2 > time1, "The scrubber is moving");
+  } else {
+    // If instead we expect the scrubber to remain at its position, just wait
+    // for some time. A relatively long timeout is used because the test page
+    // has long running animations, so the scrubber doesn't move that quickly.
+    let startOffset = scrubberEl.offsetLeft;
+    yield new Promise(r => setTimeout(r, 2000));
+    let endOffset = scrubberEl.offsetLeft;
+    is(startOffset, endOffset, "The scrubber is not moving");
+  }
+}
diff --git a/browser/devtools/animationinspector/test/unit/test_timeScale.js b/browser/devtools/animationinspector/test/unit/test_timeScale.js
index df29b03c8469..4284733eb6d9 100644
--- a/browser/devtools/animationinspector/test/unit/test_timeScale.js
+++ b/browser/devtools/animationinspector/test/unit/test_timeScale.js
@@ -12,19 +12,19 @@ const {TimeScale} = require("devtools/animationinspector/components");
 const TEST_ANIMATIONS = [{
   desc: "Testing a few standard animations",
   animations: [{
-    startTime: 500,
+    previousStartTime: 500,
     delay: 0,
     duration: 1000,
     iterationCount: 1,
     playbackRate: 1
   }, {
-    startTime: 400,
+    previousStartTime: 400,
     delay: 100,
     duration: 10,
     iterationCount: 100,
     playbackRate: 1
   }, {
-    startTime: 50,
+    previousStartTime: 50,
     delay: 1000,
     duration: 100,
     iterationCount: 20,
@@ -35,7 +35,7 @@ const TEST_ANIMATIONS = [{
 }, {
   desc: "Testing a single negative-delay animation",
   animations: [{
-    startTime: 100,
+    previousStartTime: 100,
     delay: -100,
     duration: 100,
     iterationCount: 1,
@@ -46,7 +46,7 @@ const TEST_ANIMATIONS = [{
 }, {
   desc: "Testing a single negative-delay animation with a different rate",
   animations: [{
-    startTime: 3500,
+    previousStartTime: 3500,
     delay: -1000,
     duration: 10000,
     iterationCount: 2,
diff --git a/toolkit/devtools/server/actors/animation.js b/toolkit/devtools/server/actors/animation.js
index 45e4b09f9e7f..a7057b7dc8e8 100644
--- a/toolkit/devtools/server/actors/animation.js
+++ b/toolkit/devtools/server/actors/animation.js
@@ -267,6 +267,15 @@ var AnimationPlayerActor = ActorClass({
    * @return {Object}
    */
   getCurrentState: method(function() {
+    // Remember the startTime each time getCurrentState is called, it may be
+    // useful when animations get paused. As in, when an animation gets paused,
+    // it's startTime goes back to null, but the front-end might still be
+    // interested in knowing what the previous startTime was. So everytime it
+    // is set, remember it and send it along with the newState.
+    if (this.player.startTime) {
+      this.previousStartTime = this.player.startTime;
+    }
+
     // Note that if you add a new property to the state object, make sure you
     // add the corresponding property in the AnimationPlayerFront' initialState
     // getter.
@@ -274,6 +283,7 @@ var AnimationPlayerActor = ActorClass({
       type: this.getType(),
       // startTime is null whenever the animation is paused or waiting to start.
       startTime: this.player.startTime,
+      previousStartTime: this.previousStartTime,
       currentTime: this.player.currentTime,
       playState: this.player.playState,
       playbackRate: this.player.playbackRate,
@@ -443,6 +453,7 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
     return {
       type: this._form.type,
       startTime: this._form.startTime,
+      previousStartTime: this._form.previousStartTime,
       currentTime: this._form.currentTime,
       playState: this._form.playState,
       playbackRate: this._form.playbackRate,
@@ -518,12 +529,15 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
   /**
    * Called automatically when auto-refresh is on. Doesn't return anything, but
    * emits the "updated-state" event.
+   * @param {Boolean} forceRefresh This function is normally called by the
+   * auto-refresh loop. If you need to call it but are not using this mechanism,
+   * then set this to true.
    */
-  refreshState: Task.async(function*() {
+  refreshState: Task.async(function*(forceRefresh) {
     let data = yield this.getCurrentState();
 
     // By the time the new state is received, auto-refresh might be stopped.
-    if (!this.autoRefreshTimer) {
+    if (!this.autoRefreshTimer && !forceRefresh) {
       return;
     }
 

From e6743e528880e8ddcc8dc642264c85b96d75cde6 Mon Sep 17 00:00:00 2001
From: Sebastian Kaspari <s.kaspari@gmail.com>
Date: Wed, 16 Sep 2015 12:35:48 +0200
Subject: [PATCH 07/19] Bug 1203011 - Restricted profiles: Hide 'Remove'
 context menu item from Top Sites list. r=ally

--HG--
extra : commitid : BRlbpduV8IU
extra : rebase_source : d61b7567dd124abc0e738636dac6fd7a9b1fa0bd
extra : amend_source : 2ff2f7e7e100886e29e36e4683975cd1f9a5d91d
---
 mobile/android/base/home/TopSitesPanel.java | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/mobile/android/base/home/TopSitesPanel.java b/mobile/android/base/home/TopSitesPanel.java
index 00672d2840c3..7f0679070450 100644
--- a/mobile/android/base/home/TopSitesPanel.java
+++ b/mobile/android/base/home/TopSitesPanel.java
@@ -342,6 +342,11 @@ public class TopSitesPanel extends HomeFragment {
             // Long pressed item was not a Top Sites GridView item. Superclass
             // can handle this.
             super.onCreateContextMenu(menu, view, menuInfo);
+
+            if (!RestrictedProfiles.isAllowed(view.getContext(), Restriction.DISALLOW_CLEAR_HISTORY)) {
+                menu.findItem(R.id.home_remove).setVisible(false);
+            }
+
             return;
         }
 

From 696f2789fbe443e84b859a07ab055d5917d3f815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= <florian@queze.net>
Date: Fri, 18 Sep 2015 10:42:59 +0200
Subject: [PATCH 08/19] Bug 1202372 - remove the UITour dead code related to
 the old searchbar UI, r=MattN.

---
 browser/components/uitour/UITour.jsm          | 123 ++----------------
 .../components/uitour/test/browser_UITour.js  |  70 +++-------
 .../test/browser_UITour_availableTargets.js   |  11 +-
 3 files changed, 28 insertions(+), 176 deletions(-)

diff --git a/browser/components/uitour/UITour.jsm b/browser/components/uitour/UITour.jsm
index c4d865cf2113..7b124b4ee3ee 100644
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -220,12 +220,6 @@ this.UITour = {
       query: "#searchbar",
       widgetName: "search-container",
     }],
-    ["searchProvider", {
-      query: (aDocument) => {
-        return null;
-      },
-      widgetName: "search-container",
-    }],
     ["searchIcon", {
       query: (aDocument) => {
         let searchbar = aDocument.getElementById("searchbar");
@@ -987,11 +981,6 @@ this.UITour = {
       return deferred.promise;
     }
 
-    if (aTargetName.startsWith(TARGET_SEARCHENGINE_PREFIX)) {
-      let engineID = aTargetName.slice(TARGET_SEARCHENGINE_PREFIX.length);
-      return this.getSearchEngineTarget(aWindow, engineID);
-    }
-
     let targetObject = this.targets.get(aTargetName);
     if (!targetObject) {
       log.warn("getTarget: The specified target name is not in the allowed set");
@@ -1331,18 +1320,6 @@ this.UITour = {
    */
   showHighlight: function(aChromeWindow, aTarget, aEffect = "none") {
     function showHighlightPanel() {
-      if (aTarget.targetName.startsWith(TARGET_SEARCHENGINE_PREFIX)) {
-        // This won't affect normal higlights done via the panel, so we need to
-        // manually hide those.
-        this.hideHighlight(aChromeWindow);
-        aTarget.node.setAttribute("_moz-menuactive", true);
-        return;
-      }
-
-      // Conversely, highlights for search engines are highlighted via CSS
-      // rather than a panel, so need to be manually removed.
-      this._hideSearchEngineHighlight(aChromeWindow);
-
       let highlighter = aChromeWindow.document.getElementById("UITourHighlight");
 
       let effect = aEffect;
@@ -1419,24 +1396,6 @@ this.UITour = {
     highlighter.removeAttribute("active");
 
     this._setAppMenuStateForAnnotation(aWindow, "highlight", false);
-    this._hideSearchEngineHighlight(aWindow);
-  },
-
-  _hideSearchEngineHighlight: function(aWindow) {
-    // We special case highlighting items in the search engines dropdown,
-    // so just blindly remove any highlight there.
-    let searchMenuBtn = null;
-    try {
-      searchMenuBtn = this.targets.get("searchProvider").query(aWindow.document);
-    } catch (e) { /* This is ok to fail. */ }
-    if (searchMenuBtn) {
-      let searchPopup = aWindow.document
-                               .getAnonymousElementByAttribute(searchMenuBtn,
-                                                               "anonid",
-                                                               "searchbar-popup");
-      for (let menuItem of searchPopup.children)
-        menuItem.removeAttribute("_moz-menuactive");
-    }
   },
 
   /**
@@ -1558,11 +1517,6 @@ this.UITour = {
       return;
     }
 
-    // Due to a platform limitation, we can't anchor a panel to an element in a
-    // <menupopup>. So we can't support showing info panels for search engines.
-    if (aAnchor.targetName.startsWith(TARGET_SEARCHENGINE_PREFIX))
-      return;
-
     this._setAppMenuStateForAnnotation(aChromeWindow, "info",
                                        this.targetIsInAppMenu(aAnchor),
                                        showInfoPanel.bind(this, this._correctAnchor(aAnchor.node)));
@@ -1670,10 +1624,6 @@ this.UITour = {
       });
       panel.addEventListener("popuphidden", this.onPanelHidden);
       panel.addEventListener("popuphiding", this.hideLoopPanelAnnotations);
-    } else if (aMenuName == "searchEngines") {
-      this.getTarget(aWindow, "searchProvider").then(target => {
-        openMenuButton(target.node);
-      }).catch(log.error);
     } else if (aMenuName == "pocket") {
       this.getTarget(aWindow, "pocket").then(Task.async(function* onPocketTarget(target) {
         let widgetGroupWrapper = CustomizableUI.getWidget(target.widgetName);
@@ -1735,9 +1685,6 @@ this.UITour = {
     } else if (aMenuName == "loop") {
       let panel = aWindow.document.getElementById("loop-notification-panel");
       panel.hidePopup();
-    } else if (aMenuName == "searchEngines") {
-      let menuBtn = this.targets.get("searchProvider").query(aWindow.document);
-      closeMenuButton(menuBtn);
     }
   },
 
@@ -1882,17 +1829,22 @@ this.UITour = {
           gettingStartedSeen: Services.prefs.getBoolPref("loop.gettingStarted.seen"),
         });
         break;
+      case "search":
       case "selectedSearchEngine":
         Services.search.init(rv => {
-          let engine;
+          let data;
           if (Components.isSuccessCode(rv)) {
-            engine = Services.search.defaultEngine;
+            let engines = Services.search.getVisibleEngines();
+            data = {
+              searchEngineIdentifier: Services.search.defaultEngine.identifier,
+              engines: [TARGET_SEARCHENGINE_PREFIX + engine.identifier
+                        for (engine of engines)
+                          if (engine.identifier)]
+            };
           } else {
-            engine = { identifier: "" };
+            data = {engines: [], searchEngineIdentifier: ""};
           }
-          this.sendPageCallback(aMessageManager, aCallbackID, {
-            searchEngineIdentifier: engine.identifier
-          });
+          this.sendPageCallback(aMessageManager, aCallbackID, data);
         });
         break;
       case "sync":
@@ -1950,10 +1902,6 @@ this.UITour = {
           targetNames.push(targetObject.targetName);
       }
 
-      targetNames = targetNames.concat(
-        yield this.getAvailableSearchEngineTargets(window)
-      );
-
       data = {
         targets: targetNames,
       };
@@ -2060,55 +2008,6 @@ this.UITour = {
     });
   },
 
-  getAvailableSearchEngineTargets(aWindow) {
-    return new Promise(resolve => {
-      this.getTarget(aWindow, "search").then(searchTarget => {
-        if (!searchTarget.node || this.targetIsInAppMenu(searchTarget))
-          return resolve([]);
-
-        Services.search.init(() => {
-          let engines = Services.search.getVisibleEngines();
-          resolve([TARGET_SEARCHENGINE_PREFIX + engine.identifier
-                   for (engine of engines)
-                   if (engine.identifier)]);
-        });
-      }).catch(() => resolve([]));
-    });
-  },
-
-  // We only allow matching based on a search engine's identifier - this gives
-  // us a non-changing ID and guarentees we only match against app-provided
-  // engines.
-  getSearchEngineTarget(aWindow, aIdentifier) {
-    return new Promise((resolve, reject) => {
-      Task.spawn(function*() {
-        let searchTarget = yield this.getTarget(aWindow, "search");
-        // We're not supporting having the searchbar in the app-menu, because
-        // popups within popups gets crazy. This restriction should be lifted
-        // once bug 988151 is implemented, as the page can then be responsible
-        // for opening each menu when appropriate.
-        if (!searchTarget.node || this.targetIsInAppMenu(searchTarget))
-          return reject("Search engine not available");
-
-        yield Services.search.init();
-
-        let searchPopup = searchTarget.node._popup;
-        for (let engineNode of searchPopup.children) {
-          let engine = engineNode.engine;
-          if (engine && engine.identifier == aIdentifier) {
-            return resolve({
-              targetName: TARGET_SEARCHENGINE_PREFIX + engine.identifier,
-              node: engineNode,
-            });
-          }
-        }
-        reject("Search engine not available");
-      }.bind(this)).catch(() => {
-        reject("Search engine not available");
-      });
-    });
-  },
-
   notify(eventName, params) {
     let winEnum = Services.wm.getEnumerator("navigator:browser");
     while (winEnum.hasMoreElements()) {
diff --git a/browser/components/uitour/test/browser_UITour.js b/browser/components/uitour/test/browser_UITour.js
index 8272beae6631..d0487a0c6784 100644
--- a/browser/components/uitour/test/browser_UITour.js
+++ b/browser/components/uitour/test/browser_UITour.js
@@ -216,56 +216,6 @@ var tests = [
     gContentAPI.showHighlight("urlbar");
     waitForElementToBeVisible(highlight, checkDefaultEffect, "Highlight should be shown after showHighlight()");
   },
-  function test_highlight_search_engine(done) {
-    let highlight = document.getElementById("UITourHighlight");
-    gContentAPI.showHighlight("urlbar");
-    waitForElementToBeVisible(highlight, () => {
-
-      let searchbar = document.getElementById("searchbar");
-      done();
-      return; // The oneoffui removes the menu that's being tested here.
-
-      gContentAPI.showMenu("searchEngines", function() {
-        isnot(searchbar, null, "Should have found searchbar");
-        let searchPopup = document.getAnonymousElementByAttribute(searchbar,
-                                                                   "anonid",
-                                                                   "searchbar-popup");
-        isnot(searchPopup, null, "Should have found search popup");
-
-        function getEngineNode(identifier) {
-          let engineNode = null;
-          for (let node of searchPopup.children) {
-            if (node.engine.identifier == identifier) {
-              engineNode = node;
-              break;
-            }
-          }
-          isnot(engineNode, null, "Should have found search engine node in popup");
-          return engineNode;
-        }
-        let googleEngineNode = getEngineNode("google");
-        let bingEngineNode = getEngineNode("bing");
-
-        gContentAPI.showHighlight("searchEngine-google");
-        waitForCondition(() => googleEngineNode.getAttribute("_moz-menuactive") == "true", function() {
-          is_element_hidden(highlight, "Highlight panel should be hidden by highlighting search engine");
-
-          gContentAPI.showHighlight("searchEngine-bing");
-          waitForCondition(() => bingEngineNode.getAttribute("_moz-menuactive") == "true", function() {
-            isnot(googleEngineNode.getAttribute("_moz-menuactive"), "true", "Previous engine should no longer be highlighted");
-
-            gContentAPI.hideHighlight();
-            waitForCondition(() => bingEngineNode.getAttribute("_moz-menuactive") != "true", function() {
-              gContentAPI.hideMenu("searchEngines");
-              waitForCondition(() => searchPopup.state == "closed", function() {
-                done();
-              }, "Search dropdown should close");
-            }, "Menu item should get attribute removed");
-          }, "Menu item should get attribute to make it look active");
-        });
-      });
-    });
-  },
   function test_highlight_effect_unsupported(done) {
     function checkUnsupportedEffect() {
       is(highlight.getAttribute("active"), "none", "No effect should be used when an unsupported effect is requested");
@@ -367,7 +317,7 @@ var tests = [
       });
     });
   },
-  function test_select_search_engine(done) {
+  function test_search(done) {
     Services.search.init(rv => {
       if (!Components.isSuccessCode(rv)) {
         ok(false, "search service init failed: " + rv);
@@ -375,9 +325,21 @@ var tests = [
         return;
       }
       let defaultEngine = Services.search.defaultEngine;
-      gContentAPI.getConfiguration("availableTargets", data => {
-        let searchEngines = data.targets.filter(t => t.startsWith("searchEngine-"));
-        let someOtherEngineID = searchEngines.filter(t => t != "searchEngine-" + defaultEngine.identifier)[0];
+      gContentAPI.getConfiguration("search", data => {
+        let visibleEngines = Services.search.getVisibleEngines();
+        let expectedEngines = ["searchEngine-" + engine.identifier
+                               for (engine of visibleEngines)
+                                 if (engine.identifier)];
+
+        let engines = data.engines;
+        ok(Array.isArray(engines), "data.engines should be an array");
+        is(engines.sort().toString(), expectedEngines.sort().toString(),
+           "Engines should be as expected");
+
+        is(data.searchEngineIdentifier, defaultEngine.identifier,
+           "the searchEngineIdentifier property should contain the defaultEngine's identifier");
+
+        let someOtherEngineID = data.engines.filter(t => t != "searchEngine-" + defaultEngine.identifier)[0];
         someOtherEngineID = someOtherEngineID.replace(/^searchEngine-/, "");
 
         let observe = function (subject, topic, verb) {
diff --git a/browser/components/uitour/test/browser_UITour_availableTargets.js b/browser/components/uitour/test/browser_UITour_availableTargets.js
index 1913a699d2f3..ff25acec44d6 100644
--- a/browser/components/uitour/test/browser_UITour_availableTargets.js
+++ b/browser/components/uitour/test/browser_UITour_availableTargets.js
@@ -34,13 +34,6 @@ function test() {
   UITourTest();
 }
 
-function searchEngineTargets() {
-  let engines = Services.search.getVisibleEngines();
-  return ["searchEngine-" + engine.identifier
-          for (engine of engines)
-          if (engine.identifier)];
-}
-
 var tests = [
   function test_availableTargets(done) {
     gContentAPI.getConfiguration("availableTargets", (data) => {
@@ -63,7 +56,6 @@ var tests = [
         "searchIcon",
         "trackingProtection",
         "urlbar",
-        ...searchEngineTargets(),
         ...(hasWebIDE ? ["webide"] : [])
       ]);
 
@@ -96,7 +88,6 @@ var tests = [
         "searchIcon",
         "trackingProtection",
         "urlbar",
-        ...searchEngineTargets(),
         ...(hasWebIDE ? ["webide"] : [])
       ]);
 
@@ -114,7 +105,7 @@ var tests = [
     // Make sure the callback still fires with the other available targets.
     CustomizableUI.removeWidgetFromArea("search-container");
     gContentAPI.getConfiguration("availableTargets", (data) => {
-      // Default minus "search" and "searchProvider" and "searchIcon"
+      // Default minus "search" and "searchIcon"
       ok_targets(data, [
         "accountStatus",
         "addons",

From aef3f9338962020a0d2ff45771797f75f1aa00bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Qu=C3=A8ze?= <florian@queze.net>
Date: Fri, 18 Sep 2015 10:43:01 +0200
Subject: [PATCH 09/19] Bug 1192769 - Clicking 'Change Search Settings' should
 close the search panel even if the search preferences are already the
 selected tab, r=Gijs.

---
 browser/components/search/content/search.xml | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/browser/components/search/content/search.xml b/browser/components/search/content/search.xml
index 8ee47044a836..552f422ac9ff 100644
--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -1046,7 +1046,7 @@
                        class="search-panel-one-offs"/>
       <xul:vbox anonid="add-engines"/>
       <xul:button anonid="search-settings"
-                  oncommand="BrowserUITelemetry.countSearchSettingsEvent('searchbar');openPreferences('paneSearch')"
+                  oncommand="showSettings();"
                   class="search-setting-button search-panel-header"
                   label="&changeSearchSettings.button;"/>
     </content>
@@ -1091,6 +1091,16 @@
                   .engine = currentEngine;
         ]]></body>
       </method>
+
+      <method name="showSettings">
+        <body><![CDATA[
+          BrowserUITelemetry.countSearchSettingsEvent("searchbar");
+          openPreferences("paneSearch");
+          // If the preference tab was already selected, the panel doesn't
+          // close itself automatically.
+          BrowserSearch.searchBar._textbox.closePopup();
+        ]]></body>
+      </method>
     </implementation>
     <handlers>
       <handler event="popuphidden"><![CDATA[

From cfe906be77c1d1279949706d16085648c0427f85 Mon Sep 17 00:00:00 2001
From: Ali Movahedi <ali_movahedi@aol.com>
Date: Tue, 8 Sep 2015 02:17:00 +0200
Subject: [PATCH 10/19] Bug 1184525 - Reset previous search results on
 markup-mutations to make sure we search again. r=pbrosset

---
 browser/devtools/inspector/selector-search.js | 12 +++
 browser/devtools/inspector/test/browser.ini   |  1 +
 .../test/browser_inspector_search-06.js       | 76 +++++++++++++++++++
 3 files changed, 89 insertions(+)
 create mode 100644 browser/devtools/inspector/test/browser_inspector_search-06.js

diff --git a/browser/devtools/inspector/selector-search.js b/browser/devtools/inspector/selector-search.js
index 4861d9092e2a..ffc7ad7f957e 100644
--- a/browser/devtools/inspector/selector-search.js
+++ b/browser/devtools/inspector/selector-search.js
@@ -46,6 +46,7 @@ function SelectorSearch(aInspector, aInputNode) {
   this._onHTMLSearch = this._onHTMLSearch.bind(this);
   this._onSearchKeypress = this._onSearchKeypress.bind(this);
   this._onListBoxKeypress = this._onListBoxKeypress.bind(this);
+  this._onMarkupMutation = this._onMarkupMutation.bind(this);
 
   // Options for the AutocompletePopup.
   let options = {
@@ -63,6 +64,7 @@ function SelectorSearch(aInspector, aInputNode) {
   // event listeners.
   this.searchBox.addEventListener("command", this._onHTMLSearch, true);
   this.searchBox.addEventListener("keypress", this._onSearchKeypress, true);
+  this.inspector.on("markupmutation", this._onMarkupMutation);
 
   // For testing, we need to be able to wait for the most recent node request
   // to finish.  Tests can watch this promise for that.
@@ -170,6 +172,7 @@ SelectorSearch.prototype = {
     // event listeners.
     this.searchBox.removeEventListener("command", this._onHTMLSearch, true);
     this.searchBox.removeEventListener("keypress", this._onSearchKeypress, true);
+    this.inspector.off("markupmutation", this._onMarkupMutation);
     this.searchPopup.destroy();
     this.searchPopup = null;
     this.searchBox = null;
@@ -423,6 +426,15 @@ SelectorSearch.prototype = {
     this.emit("processing-done");
   },
 
+  /**
+   * Reset previous search results on markup-mutations to make sure we search
+   * again after nodes have been added/removed/changed.
+   */
+  _onMarkupMutation: function() {
+    this._searchResults = null;
+    this._lastSearched = null;
+  },
+
   /**
    * Populates the suggestions list and show the suggestion popup.
    */
diff --git a/browser/devtools/inspector/test/browser.ini b/browser/devtools/inspector/test/browser.ini
index 230263c32cce..5a0585fc3bc3 100644
--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@@ -102,6 +102,7 @@ skip-if = e10s # Test synthesize scrolling events in content. Also, see bug 1035
 [browser_inspector_search-03.js]
 [browser_inspector_search-04.js]
 [browser_inspector_search-05.js]
+[browser_inspector_search-06.js]
 [browser_inspector_search-reserved.js]
 [browser_inspector_select-docshell.js]
 [browser_inspector_select-last-selected.js]
diff --git a/browser/devtools/inspector/test/browser_inspector_search-06.js b/browser/devtools/inspector/test/browser_inspector_search-06.js
new file mode 100644
index 000000000000..eb3fdb691f81
--- /dev/null
+++ b/browser/devtools/inspector/test/browser_inspector_search-06.js
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check that searching again for nodes after they are removed or added from the
+// DOM works correctly.
+
+const TEST_URL = TEST_URL_ROOT + "doc_inspector_search.html";
+
+add_task(function* () {
+  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
+
+  info("Searching for test node #d1");
+  yield focusSearchBoxUsingShortcut(inspector.panelWin);
+  yield synthesizeKeys(["#", "d", "1"], inspector);
+
+  assertHasResult(inspector, true);
+
+  info("Removing node #d1");
+  yield mutatePage(inspector, testActor,
+                   "document.getElementById(\"d1\").remove()");
+
+  info("Pressing return button to search again for node #d1.");
+  yield synthesizeKeys("VK_RETURN", inspector);
+
+  assertHasResult(inspector, false);
+
+  info("Emptying the field and searching for a node that doesn't exist: #d3");
+  let keys = ["VK_BACK_SPACE", "VK_BACK_SPACE", "VK_BACK_SPACE", "#", "d", "3"];
+  yield synthesizeKeys(keys, inspector);
+
+  assertHasResult(inspector, false);
+
+  info("Create the #d3 node in the page");
+  yield mutatePage(inspector, testActor,
+                   `document.getElementById("d2").insertAdjacentHTML(
+                    "afterend", "<div id=d3></div>")`);
+
+  info("Pressing return button to search again for node #d3.");
+  yield synthesizeKeys("VK_RETURN", inspector);
+
+  assertHasResult(inspector, true);
+
+  // Catch-all event for remaining server requests when searching for the new
+  // node.
+  yield inspector.once("inspector-updated");
+});
+
+function* synthesizeKeys(keys, inspector) {
+  if (typeof keys === "string") {
+    keys = [keys];
+  }
+
+  for (let key of keys) {
+    info("Synthesizing key " + key + " in the search box");
+    let eventHandled = once(inspector.searchBox, "keypress", true);
+    EventUtils.synthesizeKey(key, {}, inspector.panelWin);
+    yield eventHandled;
+    info("Waiting for the search query to complete");
+    yield inspector.searchSuggestions._lastQuery;
+  }
+}
+
+function assertHasResult(inspector, expectResult) {
+  is(inspector.searchBox.classList.contains("devtools-no-search-result"),
+     !expectResult,
+     "There are" + (expectResult ? "" : " no") + " search results");
+}
+
+function* mutatePage(inspector, testActor, expression) {
+  let onUpdated = inspector.once("inspector-updated");
+  yield testActor.eval(expression);
+  yield onUpdated;
+}

From d33049d56cb3e5d41c31b71cdb13a3e39eea7f06 Mon Sep 17 00:00:00 2001
From: George Sanchez <george.sanchez@gmail.com>
Date: Sat, 12 Sep 2015 21:34:00 +0200
Subject: [PATCH 11/19] Bug 1199712 - Prevent the animation panel from
 scrolling when space is pressed; r=pbro

---
 browser/themes/shared/devtools/animationinspector.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css
index be241981f96b..dfd1b3d98fcc 100644
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -152,6 +152,7 @@ body {
 .animation-timeline {
   height: 100%;
   overflow: hidden;
+  position: relative;
   /* The timeline gets its background-image from a canvas element created in
      /browser/devtools/animationinspector/utils.js drawGraphElementBackground
      thanks to document.mozSetImageElement("time-graduations", canvas)

From 863f6acc48e776e71cc5ff9bb7ff8ac1176021f6 Mon Sep 17 00:00:00 2001
From: Jennifer Fong <jfong@mozilla.com>
Date: Thu, 17 Sep 2015 13:01:00 +0200
Subject: [PATCH 12/19] Bug 1203806 - Hide "Open App" menu item. r=jryans

---
 browser/devtools/webide/content/webide.js  | 2 ++
 browser/devtools/webide/content/webide.xul | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/browser/devtools/webide/content/webide.js b/browser/devtools/webide/content/webide.js
index c03f96fafc1c..0c890f9231a8 100644
--- a/browser/devtools/webide/content/webide.js
+++ b/browser/devtools/webide/content/webide.js
@@ -85,6 +85,8 @@ var UI = {
       projectNode.setAttribute("hidden", "true");
       let runtimeNode = document.querySelector("#runtime-panel-button");
       runtimeNode.setAttribute("hidden", "true");
+      let openAppNode = document.querySelector("#menuitem-show_projectPanel");
+      openAppNode.setAttribute("hidden", "true");
     }
     runtimeList = new RuntimeList(window, window);
     if (runtimeList.sidebarsEnabled) {
diff --git a/browser/devtools/webide/content/webide.xul b/browser/devtools/webide/content/webide.xul
index 3d2027a45391..456a889fef67 100644
--- a/browser/devtools/webide/content/webide.xul
+++ b/browser/devtools/webide/content/webide.xul
@@ -67,7 +67,7 @@
         <menuitem command="cmd_newApp" accesskey="&projectMenu_newApp_accesskey;"/>
         <menuitem command="cmd_importPackagedApp" accesskey="&projectMenu_importPackagedApp_accesskey;"/>
         <menuitem command="cmd_importHostedApp" accesskey="&projectMenu_importHostedApp_accesskey;"/>
-        <menuitem command="cmd_showProjectPanel" key="key_showProjectPanel" label="&projectMenu_selectApp_label;" accesskey="&projectMenu_selectApp_accesskey;"/>
+        <menuitem id="menuitem-show_projectPanel" command="cmd_showProjectPanel" key="key_showProjectPanel" label="&projectMenu_selectApp_label;" accesskey="&projectMenu_selectApp_accesskey;"/>
         <menuseparator/>
         <menuitem command="cmd_play" key="key_play" label="&projectMenu_play_label;" accesskey="&projectMenu_play_accesskey;"/>
         <menuitem command="cmd_stop" accesskey="&projectMenu_stop_accesskey;"/>

From d536f8c7307fc2c986cf35d9fdca2bebd523ccbe Mon Sep 17 00:00:00 2001
From: Justin Inouye <inouju@gmail.com>
Date: Fri, 28 Aug 2015 01:31:00 +0200
Subject: [PATCH 13/19] Bug 1196387 - Remove unneeded "reading time" code and
 layouts. r=sebastian

---
 mobile/android/base/home/ReadingListRow.java  | 53 +++----------------
 .../layout/reading_list_item_row.xml          | 29 +++++++++-
 .../layout/reading_list_row_view.xml          | 45 ----------------
 3 files changed, 35 insertions(+), 92 deletions(-)
 delete mode 100644 mobile/android/base/resources/layout/reading_list_row_view.xml

diff --git a/mobile/android/base/home/ReadingListRow.java b/mobile/android/base/home/ReadingListRow.java
index a32739b112f3..f7df3f42461b 100644
--- a/mobile/android/base/home/ReadingListRow.java
+++ b/mobile/android/base/home/ReadingListRow.java
@@ -6,37 +6,21 @@
 package org.mozilla.gecko.home;
 
 import org.mozilla.gecko.R;
-import org.mozilla.gecko.Tab;
-import org.mozilla.gecko.Tabs;
 import org.mozilla.gecko.db.BrowserContract.ReadingListItems;
-import org.mozilla.gecko.home.TwoLinePageRow;
 import org.mozilla.gecko.util.StringUtils;
 
 import android.content.Context;
-import android.content.res.Resources;
 import android.database.Cursor;
 import android.text.TextUtils;
 import android.util.AttributeSet;
-import android.view.LayoutInflater;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
 public class ReadingListRow extends LinearLayout {
-
-    private final Resources resources;
-
-    private final TextView title;
-    private final TextView excerpt;
-    private final TextView readTime;
-    private final ImageView indicator;
-
-    // Average reading speed in words per minute.
-    private static final int AVERAGE_READING_SPEED = 250;
-
-    // Length of average word.
-    private static final float AVERAGE_WORD_LENGTH = 5.1f;
-
+    private TextView title;
+    private TextView excerpt;
+    private ImageView indicator;
 
     public ReadingListRow(Context context) {
         this(context, null);
@@ -44,14 +28,13 @@ public class ReadingListRow extends LinearLayout {
 
     public ReadingListRow(Context context, AttributeSet attrs) {
         super(context, attrs);
+    }
 
-        LayoutInflater.from(context).inflate(R.layout.reading_list_row_view, this);
-
-        resources = context.getResources();
-
+    @Override
+    protected void onFinishInflate() {
+        super.onFinishInflate();
         title = (TextView) findViewById(R.id.title);
         excerpt = (TextView) findViewById(R.id.excerpt);
-        readTime = (TextView) findViewById(R.id.read_time);
         indicator = (ImageView) findViewById(R.id.indicator);
     }
 
@@ -73,28 +56,6 @@ public class ReadingListRow extends LinearLayout {
         excerpt.setTextAppearance(getContext(), isUnread ? R.style.Widget_ReadingListRow_Title_Unread : R.style.Widget_ReadingListRow_Title_Read);
 
         indicator.setImageResource(isUnread ? R.drawable.reading_list_indicator_unread : R.drawable.reading_list_indicator_read);
-
-        /* Disabled until UX issues are fixed (see bug 1110461).
-        final int lengthIndex = cursor.getColumnIndexOrThrow(ReadingListItems.LENGTH);
-        final int minutes = getEstimatedReadTime(cursor.getInt(lengthIndex));
-        if (minutes <= 60) {
-            readTime.setText(resources.getString(R.string.reading_list_time_minutes, minutes));
-        } else {
-            readTime.setText(resources.getString(R.string.reading_list_time_over_an_hour));
-        }
-        */
     }
 
-    /**
-     * Calculates the estimated time to read an article based on its length.
-     *
-     * @param length of the article (in characters)
-     * @return estimated time to read the article (in minutes)
-     */
-    private static int getEstimatedReadTime(int length) {
-        final int minutes = (int) Math.ceil((length / AVERAGE_WORD_LENGTH) / AVERAGE_READING_SPEED);
-
-        // Minimum of one minute.
-        return Math.max(minutes, 1);
-    }
 }
diff --git a/mobile/android/base/resources/layout/reading_list_item_row.xml b/mobile/android/base/resources/layout/reading_list_item_row.xml
index d8793ada5b14..0b58a187431e 100644
--- a/mobile/android/base/resources/layout/reading_list_item_row.xml
+++ b/mobile/android/base/resources/layout/reading_list_item_row.xml
@@ -6,4 +6,31 @@
 <org.mozilla.gecko.home.ReadingListRow xmlns:android="http://schemas.android.com/apk/res/android"
                                        android:layout_width="match_parent"
                                        android:layout_height="@dimen/reading_list_row_height"
-                                       android:layout_gravity="center_vertical"/>
+                                       android:layout_gravity="center_vertical">
+
+    <ImageView android:id="@+id/indicator"
+               android:layout_width="64dp"
+               android:layout_height="match_parent"
+               android:scaleType="center" />
+
+    <LinearLayout android:layout_width="0dip"
+                  android:layout_height="match_parent"
+                  android:layout_weight="1"
+                  android:paddingRight="@dimen/reading_list_row_padding_right"
+                  android:orientation="vertical"
+                  android:gravity="center_vertical">
+
+        <TextView android:id="@+id/title"
+                  android:layout_width="match_parent"
+                  android:layout_height="wrap_content"
+                  android:paddingBottom="4dp"
+                  style="@style/Widget.ReadingListRow.Title" />
+
+        <TextView android:id="@+id/excerpt"
+                  android:layout_width="match_parent"
+                  android:layout_height="wrap_content"
+                  style="@style/Widget.ReadingListRow.Description" />
+
+    </LinearLayout>
+
+</org.mozilla.gecko.home.ReadingListRow>
diff --git a/mobile/android/base/resources/layout/reading_list_row_view.xml b/mobile/android/base/resources/layout/reading_list_row_view.xml
deleted file mode 100644
index a8ded1dfeef7..000000000000
--- a/mobile/android/base/resources/layout/reading_list_row_view.xml
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<merge xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <ImageView
-        android:id="@+id/indicator"
-        android:layout_width="64dp"
-        android:layout_height="match_parent"
-        android:scaleType="center" />
-
-    <LinearLayout
-        android:layout_width="0dip"
-        android:layout_height="match_parent"
-        android:layout_weight="1"
-        android:paddingRight="@dimen/reading_list_row_padding_right"
-        android:orientation="vertical"
-        android:gravity="center_vertical">
-
-        <TextView
-            android:id="@+id/title"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingBottom="4dp"
-            style="@style/Widget.ReadingListRow.Title" />
-
-        <TextView
-            android:id="@+id/excerpt"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            style="@style/Widget.ReadingListRow.Description" />
-
-    </LinearLayout>
-
-    <TextView
-        android:id="@+id/read_time"
-        android:layout_width="64dp"
-        android:layout_height="match_parent"
-        android:gravity="center"
-        android:visibility="gone"
-        style="@style/Widget.ReadingListRow.ReadTime" />
-
-</merge>

From 671c019482c76c5d3483b88271a6de85338838da Mon Sep 17 00:00:00 2001
From: Georg Fritzsche <georg.fritzsche@googlemail.com>
Date: Fri, 18 Sep 2015 13:17:16 +0700
Subject: [PATCH 14/19] Bug 1205833 - Don't log an error if we did not store
 any datareporting policy notify date yet. r=dexter

---
 .../telemetry/TelemetryReportingPolicy.jsm          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/toolkit/components/telemetry/TelemetryReportingPolicy.jsm b/toolkit/components/telemetry/TelemetryReportingPolicy.jsm
index 89a2c908c9fb..abdbdfcc6fa3 100644
--- a/toolkit/components/telemetry/TelemetryReportingPolicy.jsm
+++ b/toolkit/components/telemetry/TelemetryReportingPolicy.jsm
@@ -184,16 +184,17 @@ var TelemetryReportingPolicyImpl = {
    * @return {Object} A date object or null on errors.
    */
   get dataSubmissionPolicyNotifiedDate() {
-    if (!Preferences.has(PREF_ACCEPTED_POLICY_DATE)) {
+    let prefString = Preferences.get(PREF_ACCEPTED_POLICY_DATE, "0");
+    let valueInteger = parseInt(prefString, 10);
+
+    // Bail out if we didn't store any value yet.
+    if (valueInteger == 0) {
       this._log.info("get dataSubmissionPolicyNotifiedDate - No date stored yet.");
       return null;
     }
 
-    let prefString = Preferences.get(PREF_ACCEPTED_POLICY_DATE, 0);
-    let valueInteger = parseInt(prefString, 10);
-
-    // If nothing or an invalid value is saved in the prefs, bail out.
-    if (Number.isNaN(valueInteger) || valueInteger == 0) {
+    // If an invalid value is saved in the prefs, bail out too.
+    if (Number.isNaN(valueInteger)) {
       this._log.error("get dataSubmissionPolicyNotifiedDate - Invalid date stored.");
       return null;
     }

From 4b772c5883feb79db95427ecee46d109c138695a Mon Sep 17 00:00:00 2001
From: Panos Astithas <past@mozilla.com>
Date: Fri, 10 Jul 2015 19:14:29 +0300
Subject: [PATCH 15/19] Bug 1177085 - Add a preferences panel for changing the
 pre-loaded TP blocklist. r=jaws,francois

---
 browser/components/preferences/blocklists.js  | 189 ++++++++++++++++++
 browser/components/preferences/blocklists.xul |  56 ++++++
 .../preferences/in-content/privacy.js         |  17 ++
 .../preferences/in-content/privacy.xul        |   9 +-
 browser/components/preferences/jar.mn         |   2 +
 .../chrome/browser/preferences/blocklists.dtd |  14 ++
 .../preferences/preferences.properties        |  12 ++
 .../chrome/browser/preferences/privacy.dtd    |   2 +
 browser/locales/jar.mn                        |   1 +
 .../shared/incontentprefs/preferences.inc.css |  21 ++
 .../themes/shared/incontentprefs/search.css   |  14 --
 modules/libpref/init/all.js                   |   6 +-
 12 files changed, 327 insertions(+), 16 deletions(-)
 create mode 100644 browser/components/preferences/blocklists.js
 create mode 100644 browser/components/preferences/blocklists.xul
 create mode 100644 browser/locales/en-US/chrome/browser/preferences/blocklists.dtd

diff --git a/browser/components/preferences/blocklists.js b/browser/components/preferences/blocklists.js
new file mode 100644
index 000000000000..aeb7d4685513
--- /dev/null
+++ b/browser/components/preferences/blocklists.js
@@ -0,0 +1,189 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+Components.utils.import("resource://gre/modules/Services.jsm");
+const TEST_LIST = "test-track-simple";
+const TRACK_SUFFIX = "-track-digest256";
+const NAME_SUFFIX = ".name";
+const TRACKING_TABLE_PREF = "urlclassifier.trackingTable";
+
+let gBlocklistManager = {
+  _type: "",
+  _blockLists: [],
+  _brandShortName : null,
+  _bundle: null,
+  _tree: null,
+
+  _view: {
+    _rowCount: 0,
+    get rowCount() {
+      return this._rowCount;
+    },
+    getCellText: function (row, column) {
+      if (column.id == "listCol") {
+        return gBlocklistManager._blockLists[row].name;
+      }
+      return "";
+    },
+
+    isSeparator: function(index) { return false; },
+    isSorted: function() { return false; },
+    isContainer: function(index) { return false; },
+    setTree: function(tree) {},
+    getImageSrc: function(row, column) {},
+    getProgressMode: function(row, column) {},
+    getCellValue: function(row, column) {
+      if (column.id == "selectionCol")
+        return gBlocklistManager._blockLists[row].selected;
+      return undefined;
+    },
+    cycleHeader: function(column) {},
+    getRowProperties: function(row) { return ""; },
+    getColumnProperties: function(column) { return ""; },
+    getCellProperties: function(row, column) {
+      if (column.id == "selectionCol") {
+        return "checkmark";
+      }
+
+      return "";
+    }
+  },
+
+  onWindowKeyPress: function (event) {
+    if (event.keyCode == KeyEvent.DOM_VK_ESCAPE) {
+      window.close();
+    } else if (event.keyCode == KeyEvent.DOM_VK_RETURN) {
+      gBlocklistManager.onApplyChanges();
+    }
+  },
+
+  onLoad: function () {
+    this._bundle = document.getElementById("bundlePreferences");
+    let params = window.arguments[0];
+    this.init(params);
+  },
+
+  init: function (params) {
+    if (this._type) {
+      // reusing an open dialog, clear the old observer
+      this.uninit();
+    }
+
+    this._type = "tracking";
+    this._brandShortName = params.brandShortName;
+
+    let blocklistsText = document.getElementById("blocklistsText");
+    while (blocklistsText.hasChildNodes()) {
+      blocklistsText.removeChild(blocklistsText.firstChild);
+    }
+    blocklistsText.appendChild(document.createTextNode(params.introText));
+
+    document.title = params.windowTitle;
+
+    let treecols = document.getElementsByTagName("treecols")[0];
+    treecols.addEventListener("click", event => {
+      if (event.target.nodeName != "treecol" || event.button != 0) {
+        return;
+      }
+    });
+
+    this._loadBlockLists();
+  },
+
+  uninit: function () {},
+
+  onListSelected: function () {
+    for (let list of this._blockLists) {
+      list.selected = false;
+    }
+    this._blockLists[this._tree.currentIndex].selected = true;
+
+    this._updateTree();
+  },
+
+  onApplyChanges: function () {
+    let activeList = this._getActiveList();
+    let selected = null;
+    for (let list of this._blockLists) {
+      if (list.selected) {
+        selected = list;
+        break;
+      }
+    }
+
+    if (activeList !== selected.id) {
+      const Cc = Components.classes, Ci = Components.interfaces;
+      let msg = this._bundle.getFormattedString("blocklistChangeRequiresRestart",
+                                                [this._brandShortName]);
+      let title = this._bundle.getFormattedString("shouldRestartTitle",
+                                                  [this._brandShortName]);
+      let shouldProceed = Services.prompt.confirm(window, title, msg);
+      if (shouldProceed) {
+        let cancelQuit = Cc["@mozilla.org/supports-PRBool;1"]
+                           .createInstance(Ci.nsISupportsPRBool);
+        Services.obs.notifyObservers(cancelQuit, "quit-application-requested",
+                                     "restart");
+        shouldProceed = !cancelQuit.data;
+
+        if (shouldProceed) {
+          let trackingTable = TEST_LIST + "," + selected.id + TRACK_SUFFIX;
+          Services.prefs.setCharPref(TRACKING_TABLE_PREF, trackingTable);
+
+          Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit |
+                                Ci.nsIAppStartup.eRestart);
+        }
+      }
+
+      // Don't close the dialog in case we didn't quit.
+      return;
+    }
+    window.close();
+  },
+
+  _loadBlockLists: function () {
+    this._blockLists = [];
+
+    // Get the active block list.
+    let activeList = this._getActiveList();
+
+    // Load blocklists into a table.
+    let branch = Services.prefs.getBranch("browser.safebrowsing.provider.mozilla.lists.");
+    let itemArray = branch.getChildList("");
+    for (let itemName of itemArray) {
+      if (!itemName.endsWith(NAME_SUFFIX)) {
+        continue;
+      }
+      try {
+        let nameKey = branch.getCharPref(itemName);
+        let name = this._bundle.getString(nameKey);
+        let id = itemName.replace(NAME_SUFFIX, "");
+        let selected = activeList === id;
+        this._blockLists.push({ name, id, selected });
+      } catch (e) {
+        // Ignore bogus or missing list name.
+        continue;
+      }
+    }
+
+    this._updateTree();
+  },
+
+  _updateTree: function () {
+    this._tree = document.getElementById("blocklistsTree");
+    this._view._rowCount = this._blockLists.length;
+    this._tree.view = this._view;
+  },
+
+  _getActiveList: function () {
+    let activeList = Services.prefs.getCharPref(TRACKING_TABLE_PREF);
+    activeList = activeList.replace(TEST_LIST, "");
+    activeList = activeList.replace(",", "");
+    activeList = activeList.replace(TRACK_SUFFIX, "");
+    return activeList.trim();
+  }
+};
+
+function initWithParams(params) {
+  gBlocklistManager.init(params);
+}
diff --git a/browser/components/preferences/blocklists.xul b/browser/components/preferences/blocklists.xul
new file mode 100644
index 000000000000..523c2081081e
--- /dev/null
+++ b/browser/components/preferences/blocklists.xul
@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?>
+
+<!DOCTYPE dialog SYSTEM "chrome://browser/locale/preferences/blocklists.dtd" >
+
+<window id="BlocklistsDialog" class="windowDialog"
+        windowtype="Browser:Blocklists"
+        title="&window.title;"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        style="width: &window.width;;"
+        onload="gBlocklistManager.onLoad();"
+        onunload="gBlocklistManager.uninit();"
+        persist="screenX screenY width height"
+        onkeypress="gBlocklistManager.onWindowKeyPress(event);">
+
+  <script src="chrome://global/content/treeUtils.js"/>
+  <script src="chrome://browser/content/preferences/blocklists.js"/>
+
+  <stringbundle id="bundlePreferences"
+                src="chrome://browser/locale/preferences/preferences.properties"/>
+
+  <keyset>
+    <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
+  </keyset>
+
+  <vbox class="contentPane largeDialogContainer" flex="1">
+    <description id="blocklistsText" control="url"/>
+    <separator class="thin"/>
+    <tree id="blocklistsTree" flex="1" style="height: 18em;"
+          hidecolumnpicker="true"
+          onselect="gBlocklistManager.onListSelected();">
+      <treecols>
+        <treecol id="selectionCol" label="" flex="1" sortable="false"
+                 type="checkbox"/>
+        <treecol id="listCol" label="&treehead.list.label;" flex="80"
+                 sortable="false"/>
+      </treecols>
+      <treechildren/>
+    </tree>
+  </vbox>
+  <vbox>
+    <spacer flex="1"/>
+    <hbox class="actionButtons" align="right" flex="1">
+      <button oncommand="close();" icon="close"
+              label="&button.cancel.label;" accesskey="&button.cancel.accesskey;" />
+      <button id="btnApplyChanges" oncommand="gBlocklistManager.onApplyChanges();" icon="save"
+              label="&button.ok.label;" accesskey="&button.ok.accesskey;"/>
+    </hbox>
+  </vbox>
+</window>
diff --git a/browser/components/preferences/in-content/privacy.js b/browser/components/preferences/in-content/privacy.js
index 52faac075e1f..a10e1c7b2cd4 100644
--- a/browser/components/preferences/in-content/privacy.js
+++ b/browser/components/preferences/in-content/privacy.js
@@ -116,6 +116,8 @@ var gPrivacyPane = {
                      gPrivacyPane.showCookies);
     setEventListener("clearDataSettings", "command",
                      gPrivacyPane.showClearPrivateDataSettings);
+    setEventListener("changeBlockList", "command",
+                     gPrivacyPane.showBlockLists);
   },
 
   // HISTORY MODE
@@ -365,6 +367,21 @@ var gPrivacyPane = {
       this._shouldPromptForRestart = true;
   },
 
+  /**
+   * Displays the available block lists for tracking protection.
+   */
+  showBlockLists: function ()
+  {
+    var bundlePreferences = document.getElementById("bundlePreferences");
+    let brandName = document.getElementById("bundleBrand")
+                            .getString("brandShortName");
+    var params = { brandShortName: brandName,
+                   windowTitle: bundlePreferences.getString("blockliststitle"),
+                   introText: bundlePreferences.getString("blockliststext") };
+    gSubDialog.open("chrome://browser/content/preferences/blocklists.xul",
+                    null, params);
+  },
+
   // HISTORY
 
   /*
diff --git a/browser/components/preferences/in-content/privacy.xul b/browser/components/preferences/in-content/privacy.xul
index 8f5c85b5c896..e12bc86996b4 100644
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -27,6 +27,9 @@
   <preference id="pref.privacy.disable_button.view_cookies"
               name="pref.privacy.disable_button.view_cookies"
               type="bool"/>
+  <preference id="pref.privacy.disable_button.change_blocklist"
+              name="pref.privacy.disable_button.change_blocklist"
+              type="bool"/>
 
   <!-- Location Bar -->
   <preference id="browser.urlbar.autocomplete.enabled"
@@ -81,7 +84,7 @@
 </hbox>
 
 <!-- Tracking -->
-<groupbox id="trackingGroup" data-category="panePrivacy" hidden="true" align="start">
+<groupbox id="trackingGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&tracking.label;</label></caption>
   <vbox>
     <hbox align="center">
@@ -116,6 +119,10 @@
       <label id="trackingProtectionPBMLearnMore"
              class="text-link"
              value="&trackingProtectionPBMLearnMore.label;"/>
+      <spacer flex="1" />
+      <button id="changeBlockList"
+              label="&changeBlockList.label;" accesskey="&changeBlockList.accesskey;"
+              preference="pref.privacy.disable_button.change_blocklist"/>
     </hbox>
   </vbox>
 </groupbox>
diff --git a/browser/components/preferences/jar.mn b/browser/components/preferences/jar.mn
index 2a184e6849b6..28fac1e50f10 100644
--- a/browser/components/preferences/jar.mn
+++ b/browser/components/preferences/jar.mn
@@ -9,6 +9,8 @@ browser.jar:
     content/browser/preferences/aboutPermissions.xml
     content/browser/preferences/applicationManager.xul
 *   content/browser/preferences/applicationManager.js
+    content/browser/preferences/blocklists.xul
+    content/browser/preferences/blocklists.js
 *   content/browser/preferences/colors.xul
 *   content/browser/preferences/cookies.xul
 *   content/browser/preferences/cookies.js
diff --git a/browser/locales/en-US/chrome/browser/preferences/blocklists.dtd b/browser/locales/en-US/chrome/browser/preferences/blocklists.dtd
new file mode 100644
index 000000000000..837123ad3e83
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/preferences/blocklists.dtd
@@ -0,0 +1,14 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!ENTITY window.title                 "Block Lists">
+<!ENTITY window.width                 "50em">
+
+<!ENTITY treehead.list.label          "List">
+<!ENTITY windowClose.key              "w">
+
+<!ENTITY button.cancel.label          "Cancel">
+<!ENTITY button.cancel.accesskey      "C">
+<!ENTITY button.ok.label              "Save Changes">
+<!ENTITY button.ok.accesskey          "S">
diff --git a/browser/locales/en-US/chrome/browser/preferences/preferences.properties b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
index 3ad8d4683c2c..2d0be63f0c79 100644
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -28,6 +28,18 @@ popuppermissionstitle=Allowed Sites - Pop-ups
 invalidURI=Please enter a valid hostname
 invalidURITitle=Invalid Hostname Entered
 
+#### Block List Manager
+
+blockliststext=You can choose which list Firefox will use to block Web elements that may track your browsing activity.
+blockliststitle=Block Lists
+# LOCALIZATION NOTE (mozstdName, etc.): These labels appear in the tracking
+# protection block lists dialog. They are the names of the block lists.
+mozstdName=Disconnect.me basic protection (Recommended). Allows some trackers so websites function properly.
+mozfullName=Disconnect.me strict protection. Blocks known trackers. Some sites may not function properly.
+# LOCALIZATION NOTE (blocklistChangeRequiresRestart, restartTitle): %S = brandShortName
+blocklistChangeRequiresRestart=%S must restart to change block lists.
+shouldRestartTitle=Restart %S
+
 #### Master Password
 
 pw_change2empty_in_fips_mode=You are currently in FIPS mode. FIPS requires a non-empty Master Password.
diff --git a/browser/locales/en-US/chrome/browser/preferences/privacy.dtd b/browser/locales/en-US/chrome/browser/preferences/privacy.dtd
index abdd91f402ce..830dd46330e9 100644
--- a/browser/locales/en-US/chrome/browser/preferences/privacy.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/privacy.dtd
@@ -13,6 +13,8 @@
 <!ENTITY trackingProtectionPBM5.label         "Use Tracking Protection in Private Windows">
 <!ENTITY trackingProtectionPBM5.accesskey     "v">
 <!ENTITY trackingProtectionPBMLearnMore.label "Learn more">
+<!ENTITY changeBlockList.label          "Change Block List">
+<!ENTITY changeBlockList.accesskey      "C">
 
 <!ENTITY  history.label                 "History">
 
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index 8b11d395961f..15fe4c226281 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -122,6 +122,7 @@
     locale/browser/preferences/advanced.dtd           (%chrome/browser/preferences/advanced.dtd)
     locale/browser/preferences/applicationManager.dtd        (%chrome/browser/preferences/applicationManager.dtd)
     locale/browser/preferences/applicationManager.properties (%chrome/browser/preferences/applicationManager.properties)
+    locale/browser/preferences/blocklists.dtd         (%chrome/browser/preferences/blocklists.dtd)
     locale/browser/preferences/colors.dtd             (%chrome/browser/preferences/colors.dtd)
     locale/browser/preferences/cookies.dtd            (%chrome/browser/preferences/cookies.dtd)
     locale/browser/preferences/content.dtd            (%chrome/browser/preferences/content.dtd)
diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css
index 64e8501814c3..de70f654676e 100644
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -22,6 +22,27 @@ treecol {
   -moz-user-select: none;
 }
 
+#engineList treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
+  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  width: 21px;
+  height: 21px;
+}
+
+#engineList treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
+  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
+}
+
+#engineList treechildren::-moz-tree-row,
+#blocklistsTree treechildren::-moz-tree-row {
+  min-height: 36px;
+}
+
+#selectionCol {
+  min-width: 26px;
+}
+
 /* Category List */
 
 #categories {
diff --git a/browser/themes/shared/incontentprefs/search.css b/browser/themes/shared/incontentprefs/search.css
index a203a4d8a181..db9fd3ad448c 100644
--- a/browser/themes/shared/incontentprefs/search.css
+++ b/browser/themes/shared/incontentprefs/search.css
@@ -19,16 +19,6 @@
   margin: .5em 0;
 }
 
-#engineList treechildren::-moz-tree-image(engineShown, checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
-  width: 21px;
-  height: 21px;
-}
-
-#engineList treechildren::-moz-tree-image(engineShown, checked, selected) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
-}
-
 #engineList treechildren::-moz-tree-image(engineName) {
   -moz-margin-end: 10px;
   -moz-margin-start: 1px;
@@ -36,10 +26,6 @@
   height: 16px;
 }
 
-#engineList treechildren::-moz-tree-row {
-  min-height: 36px;
-}
-
 #engineList treechildren::-moz-tree-drop-feedback {
   background-color: Highlight;
   width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 5ec1cbb088a4..a036b50e67f6 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -4767,7 +4767,7 @@ pref("urlclassifier.malwareTable", "goog-malware-shavar,goog-unwanted-shavar,tes
 pref("urlclassifier.phishTable", "goog-phish-shavar,test-phish-simple");
 pref("urlclassifier.downloadBlockTable", "");
 pref("urlclassifier.downloadAllowTable", "");
-pref("urlclassifier.disallow_completions", "test-malware-simple,test-phish-simple,test-unwanted-simple,test-track-simple,test-trackwhite-simple,goog-downloadwhite-digest256,mozstd-track-digest256,mozstd-trackwhite-digest256");
+pref("urlclassifier.disallow_completions", "test-malware-simple,test-phish-simple,test-unwanted-simple,test-track-simple,test-trackwhite-simple,goog-downloadwhite-digest256,mozstd-track-digest256,mozstd-trackwhite-digest256,mozfull-track-digest256");
 
 // The table and update/gethash URLs for Safebrowsing phishing and malware
 // checks.
@@ -4777,6 +4777,10 @@ pref("urlclassifier.trackingWhitelistTable", "test-trackwhite-simple,mozstd-trac
 pref("browser.safebrowsing.provider.mozilla.lists", "mozstd-track-digest256,mozstd-trackwhite-digest256");
 pref("browser.safebrowsing.provider.mozilla.updateURL", "https://shavar.services.mozilla.com/downloads?client=SAFEBROWSING_ID&appver=%VERSION%&pver=2.2");
 pref("browser.safebrowsing.provider.mozilla.gethashURL", "https://shavar.services.mozilla.com/gethash?client=SAFEBROWSING_ID&appver=%VERSION%&pver=2.2");
+// Block lists for tracking protection. The name values will be used as the keys
+// to lookup the localized name in preferences.properties.
+pref("browser.safebrowsing.provider.mozilla.lists.mozstd.name", "mozstdName");
+pref("browser.safebrowsing.provider.mozilla.lists.mozfull.name", "mozfullName");
 
 // Turn off Spatial navigation by default.
 pref("snav.enabled", false);

From 50ca8bcc3d1ca4dfd3b0ca98fef197d38aff67e6 Mon Sep 17 00:00:00 2001
From: Mike de Boer <mdeboer@mozilla.com>
Date: Fri, 18 Sep 2015 13:20:59 +0200
Subject: [PATCH 16/19] Bug 1204577: remove invalid CSS properties from Loop/
 Hello source files. r=Standard8

---
 browser/base/content/test/general/browser_parsable_css.js   | 5 -----
 browser/components/loop/content/css/panel.css               | 1 -
 browser/components/loop/content/shared/css/conversation.css | 1 -
 3 files changed, 7 deletions(-)

diff --git a/browser/base/content/test/general/browser_parsable_css.js b/browser/base/content/test/general/browser_parsable_css.js
index 3954858f42f4..56c8947506f4 100644
--- a/browser/base/content/test/general/browser_parsable_css.js
+++ b/browser/base/content/test/general/browser_parsable_css.js
@@ -22,13 +22,8 @@ const kWhitelist = [
   // Loop standalone client CSS uses placeholder cross browser pseudo-element
   {sourceName: /loop\/.*\.css/i,
    errorMessage: /Unknown pseudo-class.*placeholder/i},
-  // Loop issues that crept in since this test was broken, see bug ...
-  {sourceName: /loop\/.*shared\/css\/conversation.css/i,
-   errorMessage: /Error in parsing value for 'display'/i},
   {sourceName: /loop\/.*shared\/css\/common.css/i,
    errorMessage: /Unknown property 'user-select'/i},
-  {sourceName: /loop\/.*css\/panel.css/i,
-   errorMessage: /Expected color but found 'none'/i},
   // Highlighter CSS uses chrome-only pseudo-class, see bug 985597.
   {sourceName: /highlighter\.css/i,
    errorMessage: /Unknown pseudo-class.*moz-native-anonymous/i},
diff --git a/browser/components/loop/content/css/panel.css b/browser/components/loop/content/css/panel.css
index e2b62fb1102a..fac7a48f8474 100644
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -1068,7 +1068,6 @@ html[dir="rtl"] .settings-menu .dropdown-menu {
   border: none;
   color: #fff;
   background-color: #00a9dc;
-  border-color: none;
   line-height: 43px;
   margin: 0 15px;
   padding: 0;
diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css
index 624a66626371..e26ae0a645dc 100644
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -1386,7 +1386,6 @@ html[dir="rtl"] .room-context-btn-close {
 
   .media-wrapper > .focus-stream > .local {
     position: absolute;
-    display:fixed;
     right: 0;
     left: auto;
     /* 30% is the height of the text chat. As we have a margin,

From c99e0fba8c687c952636cc51dee081b34b6b5bc9 Mon Sep 17 00:00:00 2001
From: Paolo Amadini <paolo.mozmail@amadzone.org>
Date: Thu, 17 Sep 2015 16:58:15 +0100
Subject: [PATCH 17/19] Bug 1205715 - Strings for Control Center when HTTP
 pages have login forms. r=ttaubert

---
 browser/locales/en-US/chrome/browser/browser.dtd | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index 9c8adb4aaf46..6691fd973416 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -706,6 +706,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY identity.connectionFile "This page is stored on your computer.">
 <!ENTITY identity.connectionVerified1 "You are securely connected to this site, run by:">
 <!ENTITY identity.connectionInternal "This is a secure &brandShortName; page.">
+<!ENTITY identity.insecureLoginForms "Your login could be compromised.">
 
 <!-- Strings for connection state warnings. -->
 <!ENTITY identity.activeBlocked "&brandShortName; has blocked parts of this page that are not secure.">
@@ -715,6 +716,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 
 <!-- Strings for connection state warnings in the subview. -->
 <!ENTITY identity.description.insecure "Your connection to this site is not private. Information you submit could be viewed by others (like passwords, messages, credit cards, etc.).">
+<!ENTITY identity.description.insecureLoginForms "The login information you enter on this page is not secure and could be compromised.">
 <!ENTITY identity.description.weakCipher "Your connection to this website uses weak encryption and is not private.">
 <!ENTITY identity.description.weakCipher2 "Other people can view your information or modify the website's behavior.">
 <!ENTITY identity.description.activeBlocked "&brandShortName; has blocked parts of this page that are not secure.">

From 82e16df980f1d761b0020b03cfedddb63d1f840d Mon Sep 17 00:00:00 2001
From: Patrick Brosset <pbrosset@mozilla.com>
Date: Fri, 18 Sep 2015 13:12:36 +0200
Subject: [PATCH 18/19] Bug 1156757 - Turn ON the animation inspector UI v3 by
 default and remove v2; r=past

--HG--
extra : commitid : CPhS9J1Uiud
extra : rebase_source : b97de661479f5718c55ace89fc330c5fa1e130fd
extra : histedit_source : 709cc4edcf93b6e69f2852c8488c6dbdb7358cf6
---
 browser/app/profile/firefox.js                |   2 -
 .../animation-controller.js                   |  41 +-
 .../animationinspector/animation-panel.js     | 485 +-----------------
 .../devtools/animationinspector/components.js | 262 ----------
 .../animationinspector/test/browser.ini       |  20 -
 ...controller_exposes_document_currentTime.js |   2 +-
 ...rowser_animation_empty_on_invalid_nodes.js |  32 +-
 ...mation_iterationCount_hidden_by_default.js |  34 --
 ...ser_animation_mutations_with_same_names.js |   2 +-
 .../test/browser_animation_panel_exists.js    |   8 -
 ...imation_participate_in_inspector_update.js |   3 -
 .../browser_animation_play_pause_button.js    |  32 --
 ...er_animation_playerFronts_are_refreshed.js |   8 +-
 ...tion_playerWidgets_appear_on_panel_init.js |   4 -
 ...animation_playerWidgets_compositor_icon.js |  24 -
 ...browser_animation_playerWidgets_destroy.js |  23 -
 ...tion_playerWidgets_disables_on_finished.js |  38 --
 ...erWidgets_dont_show_time_after_duration.js |  40 --
 ...tion_playerWidgets_have_control_buttons.js |  70 ---
 ...owser_animation_playerWidgets_meta_data.js |  54 --
 ...nimation_playerWidgets_scrubber_delayed.js |  24 -
 ...nimation_playerWidgets_scrubber_enabled.js |  39 --
 ..._animation_playerWidgets_scrubber_moves.js |  28 -
 ...imation_playerWidgets_state_after_pause.js |  33 --
 ...er_animation_playerWidgets_target_nodes.js |  25 +-
 ...ser_animation_rate_select_shows_presets.js |  49 --
 ...er_animation_refresh_on_added_animation.js |   3 -
 ..._animation_refresh_on_removed_animation.js |  24 -
 .../browser_animation_refresh_when_active.js  |   3 -
 ...me_nb_of_playerWidgets_and_playerFronts.js |  16 -
 ...on_setting_currentTime_works_and_pauses.js |  43 --
 ...er_animation_setting_playbackRate_works.js |  34 --
 ...er_animation_shows_player_on_valid_node.js |   9 +-
 ...owser_animation_target_highlight_select.js |   5 +-
 ...r_animation_timeline_displays_with_pref.js |  24 -
 .../test/browser_animation_timeline_header.js |   5 +-
 ...browser_animation_timeline_pause_button.js |   2 +-
 ...wser_animation_timeline_scrubber_exists.js |   4 +-
 ...ser_animation_timeline_scrubber_movable.js |   6 +-
 ...owser_animation_timeline_scrubber_moves.js |   5 +-
 .../browser_animation_timeline_shows_delay.js |   6 +-
 ...ser_animation_timeline_shows_iterations.js |   6 +-
 ...wser_animation_timeline_shows_time_info.js |   6 +-
 ...mation_timeline_takes_rate_into_account.js |   2 +-
 .../test/browser_animation_timeline_ui.js     |   4 +-
 ...ion_toggle_button_updates_playerWidgets.js |  38 --
 .../test/browser_animation_toolbar_exists.js  |  20 +-
 ...ation_ui_updates_when_animation_changes.js |  52 --
 ..._ui_updates_when_animation_data_changes.js |  52 +-
 ..._ui_updates_when_animation_rate_changes.js |  47 --
 ..._ui_updates_when_animation_time_changes.js |  52 --
 .../devtools/animationinspector/test/head.js  |  53 +-
 toolkit/devtools/server/actors/animation.js   |  75 +--
 .../devtools/server/tests/browser/browser.ini |   2 -
 .../browser/browser_animation_actors_05.js    |  64 ---
 .../browser/browser_animation_actors_07.js    |   7 +-
 .../browser/browser_animation_actors_09.js    |   5 +-
 .../browser/browser_animation_actors_10.js    |  24 +-
 .../browser/browser_animation_actors_12.js    |   2 +-
 .../browser/browser_animation_actors_13.js    |   2 +-
 .../browser/browser_animation_actors_14.js    |   2 +-
 .../browser/browser_animation_actors_16.js    |   4 +-
 62 files changed, 106 insertions(+), 1984 deletions(-)
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_iterationCount_hidden_by_default.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_play_pause_button.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_destroy.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_disables_on_finished.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_dont_show_time_after_duration.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_have_control_buttons.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_delayed.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_enabled.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_moves.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_playerWidgets_state_after_pause.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_rate_select_shows_presets.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_setting_currentTime_works_and_pauses.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_setting_playbackRate_works.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_timeline_displays_with_pref.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_toggle_button_updates_playerWidgets.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_changes.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_rate_changes.js
 delete mode 100644 browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_time_changes.js
 delete mode 100644 toolkit/devtools/server/tests/browser/browser_animation_actors_05.js

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index ccfbe2322dca..64c360db8b01 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1380,8 +1380,6 @@ pref("devtools.inspector.showUserAgentStyles", false);
 pref("devtools.inspector.showAllAnonymousContent", false);
 // Enable the MDN docs tooltip
 pref("devtools.inspector.mdnDocsTooltip.enabled", true);
-// Show the new animation inspector UI
-pref("devtools.inspector.animationInspectorV3", false);
 
 // DevTools default color unit
 pref("devtools.defaultColorUnit", "hex");
diff --git a/browser/devtools/animationinspector/animation-controller.js b/browser/devtools/animationinspector/animation-controller.js
index a56cae85d1c0..8650f59f7f13 100644
--- a/browser/devtools/animationinspector/animation-controller.js
+++ b/browser/devtools/animationinspector/animation-controller.js
@@ -23,7 +23,6 @@ loader.lazyRequireGetter(this, "AnimationsFront",
 
 const STRINGS_URI = "chrome://browser/locale/devtools/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
-const V3_UI_PREF = "devtools.inspector.animationInspectorV3";
 
 // Global toolbox/inspector, set when startup is called.
 var gToolbox, gInspector;
@@ -99,9 +98,6 @@ var getServerTraits = Task.async(function*(target) {
     traits[name] = yield target.actorHasMethod(actor, method);
   }
 
-  // Special pref-based UI trait.
-  traits.isNewUI = Services.prefs.getBoolPref(V3_UI_PREF);
-
   return traits;
 });
 
@@ -113,9 +109,6 @@ var getServerTraits = Task.async(function*(target) {
  *
  * AnimationPlayerFronts are available in AnimationsController.animationPlayers.
  *
- * Note also that all AnimationPlayerFronts handled by the controller are set to
- * auto-refresh (except when the sidebar panel is not visible).
- *
  * Usage example:
  *
  * AnimationsController.on(AnimationsController.PLAYERS_UPDATED_EVENT,
@@ -182,7 +175,7 @@ var AnimationsController = {
 
   startListeners: function() {
     // Re-create the list of players when a new node is selected, except if the
-    // sidebar isn't visible. And set the players to auto-refresh when needed.
+    // sidebar isn't visible.
     gInspector.selection.on("new-node-front", this.onNewNodeFront);
     gInspector.sidebar.on("select", this.onPanelVisibilityChange);
     gToolbox.on("select", this.onPanelVisibilityChange);
@@ -206,9 +199,6 @@ var AnimationsController = {
   onPanelVisibilityChange: Task.async(function*() {
     if (this.isPanelVisible()) {
       this.onNewNodeFront();
-      this.startAllAutoRefresh();
-    } else {
-      this.stopAllAutoRefresh();
     }
   }),
 
@@ -304,7 +294,6 @@ var AnimationsController = {
 
     this.animationPlayers = yield this.animationsFront
                                       .getAnimationPlayersForNode(nodeFront);
-    this.startAllAutoRefresh();
 
     // Start listening for animation mutations only after the first method call
     // otherwise events won't be sent.
@@ -320,15 +309,9 @@ var AnimationsController = {
     for (let {type, player} of changes) {
       if (type === "added") {
         this.animationPlayers.push(player);
-        if (!this.traits.isNewUI) {
-          player.startAutoRefresh();
-        }
       }
 
       if (type === "removed") {
-        if (!this.traits.isNewUI) {
-          player.stopAutoRefresh();
-        }
         yield player.release();
         let index = this.animationPlayers.indexOf(player);
         this.animationPlayers.splice(index, 1);
@@ -358,26 +341,6 @@ var AnimationsController = {
     return time;
   },
 
-  startAllAutoRefresh: function() {
-    if (this.traits.isNewUI) {
-      return;
-    }
-
-    for (let front of this.animationPlayers) {
-      front.startAutoRefresh();
-    }
-  },
-
-  stopAllAutoRefresh: function() {
-    if (this.traits.isNewUI) {
-      return;
-    }
-
-    for (let front of this.animationPlayers) {
-      front.stopAutoRefresh();
-    }
-  },
-
   destroyAnimationPlayers: Task.async(function*() {
     // Let the server know that we're not interested in receiving updates about
     // players for the current node. We're either being destroyed or a new node
@@ -385,7 +348,7 @@ var AnimationsController = {
     if (this.traits.hasMutationEvents) {
       yield this.animationsFront.stopAnimationPlayerUpdates();
     }
-    this.stopAllAutoRefresh();
+
     for (let front of this.animationPlayers) {
       yield front.release();
     }
diff --git a/browser/devtools/animationinspector/animation-panel.js b/browser/devtools/animationinspector/animation-panel.js
index 07bc35605662..774d42672e87 100644
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -8,13 +8,7 @@
 
 "use strict";
 
-const {createNode} = require("devtools/animationinspector/utils");
-const {
-  PlayerMetaDataHeader,
-  PlaybackRateSelector,
-  AnimationTargetNode,
-  AnimationsTimeline
-} = require("devtools/animationinspector/components");
+const {AnimationsTimeline} = require("devtools/animationinspector/components");
 
 /**
  * The main animations panel UI.
@@ -56,10 +50,8 @@ var AnimationsPanel = {
     let hUtils = gToolbox.highlighterUtils;
     this.togglePicker = hUtils.togglePicker.bind(hUtils);
 
-    if (AnimationsController.traits.isNewUI) {
-      this.animationsTimelineComponent = new AnimationsTimeline(gInspector);
-      this.animationsTimelineComponent.init(this.playersEl);
-    }
+    this.animationsTimelineComponent = new AnimationsTimeline(gInspector);
+    this.animationsTimelineComponent.init(this.playersEl);
 
     this.startListeners();
 
@@ -83,10 +75,9 @@ var AnimationsPanel = {
 
     this.stopListeners();
 
-    if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.destroy();
-      this.animationsTimelineComponent = null;
-    }
+    this.animationsTimelineComponent.destroy();
+    this.animationsTimelineComponent = null;
+
     yield this.destroyPlayerWidgets();
 
     this.playersEl = this.errorMessageEl = null;
@@ -108,10 +99,8 @@ var AnimationsPanel = {
     this.playTimelineButtonEl.addEventListener("click", this.playPauseTimeline);
     gToolbox.target.on("navigate", this.onTabNavigated);
 
-    if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.on("timeline-data-changed",
-        this.onTimelineDataChanged);
-    }
+    this.animationsTimelineComponent.on("timeline-data-changed",
+      this.onTimelineDataChanged);
   },
 
   stopListeners: function() {
@@ -126,18 +115,14 @@ var AnimationsPanel = {
     this.playTimelineButtonEl.removeEventListener("click", this.playPauseTimeline);
     gToolbox.target.off("navigate", this.onTabNavigated);
 
-    if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.off("timeline-data-changed",
-        this.onTimelineDataChanged);
-    }
+    this.animationsTimelineComponent.off("timeline-data-changed",
+      this.onTimelineDataChanged);
   },
 
   togglePlayers: function(isVisible) {
     if (isVisible) {
       document.body.removeAttribute("empty");
-      if (AnimationsController.traits.isNewUI) {
-        document.body.setAttribute("timeline", "true");
-      }
+      document.body.setAttribute("timeline", "true");
     } else {
       document.body.setAttribute("empty", "true");
       document.body.removeAttribute("timeline");
@@ -153,24 +138,7 @@ var AnimationsPanel = {
   },
 
   toggleAll: Task.async(function*() {
-    let btnClass = this.toggleAllButtonEl.classList;
-
-    if (!AnimationsController.traits.isNewUI) {
-      // Toggling all animations is async and it may be some time before each of
-      // the current players get their states updated, so toggle locally too, to
-      // avoid the timelines from jumping back and forth.
-      if (this.playerWidgets) {
-        let currentWidgetStateChange = [];
-        for (let widget of this.playerWidgets) {
-          currentWidgetStateChange.push(btnClass.contains("paused")
-            ? widget.play() : widget.pause());
-        }
-        yield promise.all(currentWidgetStateChange)
-                     .catch(error => console.error(error));
-      }
-    }
-
-    btnClass.toggle("paused");
+    this.toggleAllButtonEl.classList.toggle("paused");
     yield AnimationsController.toggleAll();
   }),
 
@@ -187,7 +155,7 @@ var AnimationsPanel = {
     // Now that the playState have been changed make sure the player (the
     // fronts) are up to date, and then refresh the UI.
     for (let player of AnimationsController.animationPlayers) {
-      yield player.refreshState(true);
+      yield player.refreshState();
     }
     yield this.refreshAnimations();
   }),
@@ -222,11 +190,9 @@ var AnimationsPanel = {
     yield this.destroyPlayerWidgets();
 
     // Re-render the timeline component.
-    if (this.animationsTimelineComponent) {
-      this.animationsTimelineComponent.render(
-        AnimationsController.animationPlayers,
-        AnimationsController.documentCurrentTime);
-    }
+    this.animationsTimelineComponent.render(
+      AnimationsController.animationPlayers,
+      AnimationsController.documentCurrentTime);
 
     // If there are no players to show, show the error message instead and
     // return.
@@ -237,21 +203,6 @@ var AnimationsPanel = {
       return;
     }
 
-    // Otherwise, create player widgets (only when isNewUI is false, the
-    // timeline has already been re-rendered).
-    if (!AnimationsController.traits.isNewUI) {
-      this.playerWidgets = [];
-      let initPromises = [];
-
-      for (let player of AnimationsController.animationPlayers) {
-        let widget = new PlayerWidget(player, this.playersEl);
-        initPromises.push(widget.initialize());
-        this.playerWidgets.push(widget);
-      }
-
-      yield initPromises;
-    }
-
     this.emit(this.UI_UPDATED_EVENT);
     done();
   }),
@@ -269,407 +220,3 @@ var AnimationsPanel = {
 };
 
 EventEmitter.decorate(AnimationsPanel);
-
-/**
- * An AnimationPlayer UI widget
- */
-function PlayerWidget(player, containerEl) {
-  EventEmitter.decorate(this);
-
-  this.player = player;
-  this.containerEl = containerEl;
-
-  this.onStateChanged = this.onStateChanged.bind(this);
-  this.onPlayPauseBtnClick = this.onPlayPauseBtnClick.bind(this);
-  this.onRewindBtnClick = this.onRewindBtnClick.bind(this);
-  this.onFastForwardBtnClick = this.onFastForwardBtnClick.bind(this);
-  this.onCurrentTimeChanged = this.onCurrentTimeChanged.bind(this);
-  this.onPlaybackRateChanged = this.onPlaybackRateChanged.bind(this);
-
-  this.metaDataComponent = new PlayerMetaDataHeader();
-  if (AnimationsController.traits.hasSetPlaybackRate) {
-    this.rateComponent = new PlaybackRateSelector();
-  }
-  if (AnimationsController.traits.hasTargetNode) {
-    this.targetNodeComponent = new AnimationTargetNode(gInspector);
-  }
-}
-
-PlayerWidget.prototype = {
-  initialize: Task.async(function*() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-
-    this.createMarkup();
-    this.startListeners();
-  }),
-
-  destroy: Task.async(function*() {
-    if (this.destroyed) {
-      return;
-    }
-    this.destroyed = true;
-
-    this.stopTimelineAnimation();
-    this.stopListeners();
-    this.metaDataComponent.destroy();
-    if (this.rateComponent) {
-      this.rateComponent.destroy();
-    }
-    if (this.targetNodeComponent) {
-      this.targetNodeComponent.destroy();
-    }
-
-    this.el.remove();
-    this.playPauseBtnEl = this.rewindBtnEl = this.fastForwardBtnEl = null;
-    this.currentTimeEl = this.timeDisplayEl = null;
-    this.containerEl = this.el = this.player = null;
-  }),
-
-  startListeners: function() {
-    this.player.on(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
-    this.playPauseBtnEl.addEventListener("click", this.onPlayPauseBtnClick);
-    if (AnimationsController.traits.hasSetCurrentTime) {
-      this.rewindBtnEl.addEventListener("click", this.onRewindBtnClick);
-      this.fastForwardBtnEl.addEventListener("click", this.onFastForwardBtnClick);
-      this.currentTimeEl.addEventListener("input", this.onCurrentTimeChanged);
-    }
-    if (this.rateComponent) {
-      this.rateComponent.on("rate-changed", this.onPlaybackRateChanged);
-    }
-  },
-
-  stopListeners: function() {
-    this.player.off(this.player.AUTO_REFRESH_EVENT, this.onStateChanged);
-    this.playPauseBtnEl.removeEventListener("click", this.onPlayPauseBtnClick);
-    if (AnimationsController.traits.hasSetCurrentTime) {
-      this.rewindBtnEl.removeEventListener("click", this.onRewindBtnClick);
-      this.fastForwardBtnEl.removeEventListener("click", this.onFastForwardBtnClick);
-      this.currentTimeEl.removeEventListener("input", this.onCurrentTimeChanged);
-    }
-    if (this.rateComponent) {
-      this.rateComponent.off("rate-changed", this.onPlaybackRateChanged);
-    }
-  },
-
-  createMarkup: function() {
-    let state = this.player.state;
-
-    this.el = createNode({
-      parent: this.containerEl,
-      attributes: {
-        "class": "player-widget " + state.playState
-      }
-    });
-
-    if (this.targetNodeComponent) {
-      this.targetNodeComponent.init(this.el);
-      this.targetNodeComponent.render(this.player);
-    }
-
-    this.metaDataComponent.init(this.el);
-    this.metaDataComponent.render(state);
-
-    // Timeline widget.
-    let timelineEl = createNode({
-      parent: this.el,
-      attributes: {
-        "class": "timeline"
-      }
-    });
-
-    // Playback control buttons container.
-    let playbackControlsEl = createNode({
-      parent: timelineEl,
-      attributes: {
-        "class": "playback-controls"
-      }
-    });
-
-    // Control buttons.
-    this.playPauseBtnEl = createNode({
-      parent: playbackControlsEl,
-      nodeType: "button",
-      attributes: {
-        "class": "toggle devtools-button"
-      }
-    });
-
-    if (AnimationsController.traits.hasSetCurrentTime) {
-      this.rewindBtnEl = createNode({
-        parent: playbackControlsEl,
-        nodeType: "button",
-        attributes: {
-          "class": "rw devtools-button"
-        }
-      });
-
-      this.fastForwardBtnEl = createNode({
-        parent: playbackControlsEl,
-        nodeType: "button",
-        attributes: {
-          "class": "ff devtools-button"
-        }
-      });
-    }
-
-    if (this.rateComponent) {
-      this.rateComponent.init(playbackControlsEl);
-      this.rateComponent.render(state);
-    }
-
-    // Sliders container.
-    let slidersContainerEl = createNode({
-      parent: timelineEl,
-      attributes: {
-        "class": "sliders-container",
-      }
-    });
-
-    let max = state.duration;
-    if (state.iterationCount) {
-      // If there's a finite nb of iterations.
-      max = state.iterationCount * state.duration;
-    }
-
-    // For now, keyframes aren't exposed by the actor. So the only range <input>
-    // displayed in the container is the currentTime. When keyframes are
-    // available, one input per keyframe can be added here.
-    this.currentTimeEl = createNode({
-      nodeType: "input",
-      parent: slidersContainerEl,
-      attributes: {
-        "type": "range",
-        "class": "current-time",
-        "min": "0",
-        "max": max,
-        "step": "10",
-        "value": "0"
-      }
-    });
-
-    if (!AnimationsController.traits.hasSetCurrentTime) {
-      this.currentTimeEl.setAttribute("disabled", "true");
-    }
-
-    // Time display
-    this.timeDisplayEl = createNode({
-      parent: timelineEl,
-      attributes: {
-        "class": "time-display"
-      }
-    });
-
-    // Show the initial time.
-    this.displayTime(state.currentTime);
-  },
-
-  /**
-   * Executed when the playPause button is clicked.
-   * Note that tests may want to call this callback directly rather than
-   * simulating a click on the button since it returns the promise returned by
-   * play and paused.
-   * @return {Promise}
-   */
-  onPlayPauseBtnClick: function() {
-    if (this.player.state.playState === "running") {
-      return this.pause();
-    }
-    return this.play();
-  },
-
-  onRewindBtnClick: function() {
-    this.setCurrentTime(0, true);
-  },
-
-  onFastForwardBtnClick: function() {
-    let state = this.player.state;
-
-    let time = state.duration;
-    if (state.iterationCount) {
-      time = state.iterationCount * state.duration;
-    }
-    this.setCurrentTime(time, true);
-  },
-
-  /**
-   * Executed when the current-time range input is changed.
-   */
-  onCurrentTimeChanged: function(e) {
-    let time = e.target.value;
-    this.setCurrentTime(parseFloat(time), true);
-  },
-
-  /**
-   * Executed when the playback rate dropdown value changes in the playbackrate
-   * component.
-   */
-  onPlaybackRateChanged: function(e, rate) {
-    this.setPlaybackRate(rate);
-  },
-
-  /**
-   * Whenever a player state update is received.
-   */
-  onStateChanged: function() {
-    let state = this.player.state;
-
-    this.updateWidgetState(state);
-    this.metaDataComponent.render(state);
-    if (this.rateComponent) {
-      this.rateComponent.render(state);
-    }
-
-    switch (state.playState) {
-      case "finished":
-        this.stopTimelineAnimation();
-        this.displayTime(this.player.state.currentTime);
-        break;
-      case "running":
-        this.startTimelineAnimation();
-        break;
-      case "paused":
-        this.stopTimelineAnimation();
-        this.displayTime(this.player.state.currentTime);
-        break;
-      case "idle":
-        this.stopTimelineAnimation();
-        this.displayTime(0);
-        break;
-    }
-  },
-
-  /**
-   * Set the current time of the animation.
-   * @param {Number} time.
-   * @param {Boolean} shouldPause Should the player be paused too.
-   * @return {Promise} Resolves when the current time has been set.
-   */
-  setCurrentTime: Task.async(function*(time, shouldPause) {
-    if (!AnimationsController.traits.hasSetCurrentTime) {
-      throw new Error("This server version doesn't support setting " +
-                      "animations' currentTime");
-    }
-
-    if (shouldPause) {
-      this.stopTimelineAnimation();
-      yield this.pause();
-    }
-
-    if (this.player.state.delay) {
-      time += this.player.state.delay;
-    }
-
-    // Set the time locally first so it feels instant, even if the request to
-    // actually set the time is async.
-    this.displayTime(time);
-
-    yield this.player.setCurrentTime(time);
-  }),
-
-  /**
-   * Set the playback rate of the animation.
-   * @param {Number} rate.
-   * @return {Promise} Resolves when the rate has been set.
-   */
-  setPlaybackRate: function(rate) {
-    if (!AnimationsController.traits.hasSetPlaybackRate) {
-      throw new Error("This server version doesn't support setting " +
-                      "animations' playbackRate");
-    }
-
-    return this.player.setPlaybackRate(rate);
-  },
-
-  /**
-   * Pause the animation player via this widget.
-   * @return {Promise} Resolves when the player is paused, the button is
-   * switched to the right state, and the timeline animation is stopped.
-   */
-  pause: function() {
-    // Switch to the right className on the element right away to avoid waiting
-    // for the next state update to change the playPause icon.
-    this.updateWidgetState({playState: "paused"});
-    this.stopTimelineAnimation();
-    return this.player.pause();
-  },
-
-  /**
-   * Play the animation player via this widget.
-   * @return {Promise} Resolves when the player is playing, the button is
-   * switched to the right state, and the timeline animation is started.
-   */
-  play: function() {
-    // Switch to the right className on the element right away to avoid waiting
-    // for the next state update to change the playPause icon.
-    this.updateWidgetState({playState: "running"});
-    this.startTimelineAnimation();
-    return this.player.play();
-  },
-
-  updateWidgetState: function({playState}) {
-    this.el.className = "player-widget " + playState;
-  },
-
-  /**
-   * Make the timeline progress smoothly, even though the currentTime is only
-   * updated at some intervals. This uses a local animation loop.
-   */
-  startTimelineAnimation: function() {
-    this.stopTimelineAnimation();
-
-    let state = this.player.state;
-
-    let start = performance.now();
-    let loop = () => {
-      this.rafID = requestAnimationFrame(loop);
-      let delta = (performance.now() - start) * state.playbackRate;
-      let now = state.currentTime + delta;
-      this.displayTime(now);
-    };
-
-    loop();
-  },
-
-  /**
-   * Display the time in the timeDisplayEl and in the currentTimeEl slider.
-   */
-  displayTime: function(time) {
-    let state = this.player.state;
-
-    // If the animation is delayed, don't start displaying the time until the
-    // delay has passed.
-    if (state.delay) {
-      time = Math.max(0, time - state.delay);
-    }
-
-    // For finite animations, make sure the displayed time does not go beyond
-    // the animation total duration (this may happen due to the local
-    // requestAnimationFrame loop).
-    if (state.iterationCount) {
-      time = Math.min(time, state.iterationCount * state.duration);
-    }
-
-    // Set the time label value.
-    this.timeDisplayEl.textContent = L10N.getFormatStr("player.timeLabel",
-      L10N.numberWithDecimals(time / 1000, 2));
-
-    // Set the timeline slider value.
-    if (!state.iterationCount && time !== state.duration) {
-      time = time % state.duration;
-    }
-    this.currentTimeEl.value = time;
-  },
-
-  /**
-   * Stop the animation loop that makes the timeline progress.
-   */
-  stopTimelineAnimation: function() {
-    if (this.rafID) {
-      cancelAnimationFrame(this.rafID);
-      this.rafID = null;
-    }
-  }
-};
diff --git a/browser/devtools/animationinspector/components.js b/browser/devtools/animationinspector/components.js
index d15fd4f84a40..9b93888eb612 100644
--- a/browser/devtools/animationinspector/components.js
+++ b/browser/devtools/animationinspector/components.js
@@ -35,268 +35,6 @@ const MILLIS_TIME_FORMAT_MAX_DURATION = 4000;
 // The minimum spacing between 2 time graduation headers in the timeline (px).
 const TIME_GRADUATION_MIN_SPACING = 40;
 
-/**
- * UI component responsible for displaying and updating the player meta-data:
- * name, duration, iterations, delay.
- * The parent UI component for this should drive its updates by calling
- * render(state) whenever it wants the component to update.
- */
-function PlayerMetaDataHeader() {
-  // Store the various state pieces we need to only refresh the UI when things
-  // change.
-  this.state = {};
-}
-
-exports.PlayerMetaDataHeader = PlayerMetaDataHeader;
-
-PlayerMetaDataHeader.prototype = {
-  init: function(containerEl) {
-    // The main title element.
-    this.el = createNode({
-      parent: containerEl,
-      attributes: {
-        "class": "animation-title"
-      }
-    });
-
-    // Animation name.
-    this.nameLabel = createNode({
-      parent: this.el,
-      nodeType: "span"
-    });
-
-    this.nameValue = createNode({
-      parent: this.el,
-      nodeType: "strong",
-      attributes: {
-        "style": "display:none;"
-      }
-    });
-
-    // Animation duration, delay and iteration container.
-    let metaData = createNode({
-      parent: this.el,
-      nodeType: "span",
-      attributes: {
-        "class": "meta-data"
-      }
-    });
-
-    // Animation is running on compositor
-    this.compositorIcon = createNode({
-      parent: metaData,
-      nodeType: "span",
-      attributes: {
-        "class": "compositor-icon",
-        "title": L10N.getStr("player.runningOnCompositorTooltip")
-      }
-    });
-
-    // Animation duration.
-    this.durationLabel = createNode({
-      parent: metaData,
-      nodeType: "span",
-      textContent: L10N.getStr("player.animationDurationLabel")
-    });
-
-    this.durationValue = createNode({
-      parent: metaData,
-      nodeType: "strong"
-    });
-
-    // Animation delay (hidden by default since there may not be a delay).
-    this.delayLabel = createNode({
-      parent: metaData,
-      nodeType: "span",
-      attributes: {
-        "style": "display:none;"
-      },
-      textContent: L10N.getStr("player.animationDelayLabel")
-    });
-
-    this.delayValue = createNode({
-      parent: metaData,
-      nodeType: "strong"
-    });
-
-    // Animation iteration count (also hidden by default since we don't display
-    // single iterations).
-    this.iterationLabel = createNode({
-      parent: metaData,
-      nodeType: "span",
-      attributes: {
-        "style": "display:none;"
-      },
-      textContent: L10N.getStr("player.animationIterationCountLabel")
-    });
-
-    this.iterationValue = createNode({
-      parent: metaData,
-      nodeType: "strong",
-      attributes: {
-        "style": "display:none;"
-      }
-    });
-  },
-
-  destroy: function() {
-    this.state = null;
-    this.el.remove();
-    this.el = null;
-    this.nameLabel = this.nameValue = null;
-    this.durationLabel = this.durationValue = null;
-    this.delayLabel = this.delayValue = null;
-    this.iterationLabel = this.iterationValue = null;
-    this.compositorIcon = null;
-  },
-
-  render: function(state) {
-    // Update the name if needed.
-    if (state.name !== this.state.name) {
-      if (state.name) {
-        // Animations (and transitions since bug 1122414) have names.
-        this.nameLabel.textContent = L10N.getStr("player.animationNameLabel");
-        this.nameValue.style.display = "inline";
-        this.nameValue.textContent = state.name;
-      } else {
-        // With older actors, Css transitions don't have names.
-        this.nameLabel.textContent = L10N.getStr("player.transitionNameLabel");
-        this.nameValue.style.display = "none";
-      }
-    }
-
-    // update the duration value if needed.
-    if (state.duration !== this.state.duration) {
-      this.durationValue.textContent = L10N.getFormatStr("player.timeLabel",
-        L10N.numberWithDecimals(state.duration / 1000, 2));
-    }
-
-    // Update the delay if needed.
-    if (state.delay !== this.state.delay) {
-      if (state.delay) {
-        this.delayLabel.style.display = "inline";
-        this.delayValue.style.display = "inline";
-        this.delayValue.textContent = L10N.getFormatStr("player.timeLabel",
-          L10N.numberWithDecimals(state.delay / 1000, 2));
-      } else {
-        // Hide the delay elements if there is no delay defined.
-        this.delayLabel.style.display = "none";
-        this.delayValue.style.display = "none";
-      }
-    }
-
-    // Update the iterationCount if needed.
-    if (state.iterationCount !== this.state.iterationCount) {
-      if (state.iterationCount !== 1) {
-        this.iterationLabel.style.display = "inline";
-        this.iterationValue.style.display = "inline";
-        let count = state.iterationCount ||
-                    L10N.getStr("player.infiniteIterationCount");
-        this.iterationValue.innerHTML = count;
-      } else {
-        // Hide the iteration elements if iteration is 1.
-        this.iterationLabel.style.display = "none";
-        this.iterationValue.style.display = "none";
-      }
-    }
-
-    // Show the Running on compositor icon if needed.
-    if (state.isRunningOnCompositor !== this.state.isRunningOnCompositor) {
-      if (state.isRunningOnCompositor) {
-        this.compositorIcon.style.display = "inline";
-      } else {
-        // Hide the compositor icon
-        this.compositorIcon.style.display = "none";
-      }
-    }
-
-    this.state = state;
-  }
-};
-
-/**
- * UI component responsible for displaying the playback rate drop-down in each
- * player widget, updating it when the state changes, and emitting events when
- * the user selects a new value.
- * The parent UI component for this should drive its updates by calling
- * render(state) whenever it wants the component to update.
- */
-function PlaybackRateSelector() {
-  this.currentRate = null;
-  this.onSelectionChanged = this.onSelectionChanged.bind(this);
-  EventEmitter.decorate(this);
-}
-
-exports.PlaybackRateSelector = PlaybackRateSelector;
-
-PlaybackRateSelector.prototype = {
-  PRESETS: [.1, .5, 1, 2, 5, 10],
-
-  init: function(containerEl) {
-    // This component is simple enough that we can re-create the markup every
-    // time it's rendered. So here we only store the parentEl.
-    this.parentEl = containerEl;
-  },
-
-  destroy: function() {
-    this.removeSelect();
-    this.parentEl = this.el = null;
-  },
-
-  removeSelect: function() {
-    if (this.el) {
-      this.el.removeEventListener("change", this.onSelectionChanged);
-      this.el.remove();
-    }
-  },
-
-  /**
-   * Get the ordered list of presets, including the current playbackRate if
-   * different from the existing presets.
-   */
-  getCurrentPresets: function({playbackRate}) {
-    return [...new Set([...this.PRESETS, playbackRate])].sort((a, b) => a > b);
-  },
-
-  render: function(state) {
-    if (state.playbackRate === this.currentRate) {
-      return;
-    }
-
-    this.removeSelect();
-
-    this.el = createNode({
-      parent: this.parentEl,
-      nodeType: "select",
-      attributes: {
-        "class": "rate devtools-button"
-      }
-    });
-
-    for (let preset of this.getCurrentPresets(state)) {
-      let option = createNode({
-        parent: this.el,
-        nodeType: "option",
-        attributes: {
-          value: preset,
-        },
-        textContent: L10N.getFormatStr("player.playbackRateLabel", preset)
-      });
-      if (preset === state.playbackRate) {
-        option.setAttribute("selected", "");
-      }
-    }
-
-    this.el.addEventListener("change", this.onSelectionChanged);
-
-    this.currentRate = state.playbackRate;
-  },
-
-  onSelectionChanged: function() {
-    this.emit("rate-changed", parseFloat(this.el.value));
-  }
-};
-
 /**
  * UI component responsible for displaying a preview of the target dom node of
  * a given animation.
diff --git a/browser/devtools/animationinspector/test/browser.ini b/browser/devtools/animationinspector/test/browser.ini
index 67d80a0678f4..d1c10273180a 100644
--- a/browser/devtools/animationinspector/test/browser.ini
+++ b/browser/devtools/animationinspector/test/browser.ini
@@ -11,34 +11,18 @@ support-files =
 
 [browser_animation_controller_exposes_document_currentTime.js]
 [browser_animation_empty_on_invalid_nodes.js]
-[browser_animation_iterationCount_hidden_by_default.js]
 [browser_animation_mutations_with_same_names.js]
 [browser_animation_panel_exists.js]
 [browser_animation_participate_in_inspector_update.js]
-[browser_animation_play_pause_button.js]
 [browser_animation_playerFronts_are_refreshed.js]
 [browser_animation_playerWidgets_appear_on_panel_init.js]
-[browser_animation_playerWidgets_compositor_icon.js]
-[browser_animation_playerWidgets_destroy.js]
-[browser_animation_playerWidgets_disables_on_finished.js]
-[browser_animation_playerWidgets_dont_show_time_after_duration.js]
-[browser_animation_playerWidgets_have_control_buttons.js]
-[browser_animation_playerWidgets_meta_data.js]
-[browser_animation_playerWidgets_scrubber_delayed.js]
-[browser_animation_playerWidgets_scrubber_enabled.js]
-[browser_animation_playerWidgets_scrubber_moves.js]
-[browser_animation_playerWidgets_state_after_pause.js]
 [browser_animation_playerWidgets_target_nodes.js]
-[browser_animation_rate_select_shows_presets.js]
 [browser_animation_refresh_on_added_animation.js]
 [browser_animation_refresh_on_removed_animation.js]
 [browser_animation_refresh_when_active.js]
 [browser_animation_same_nb_of_playerWidgets_and_playerFronts.js]
-[browser_animation_setting_currentTime_works_and_pauses.js]
-[browser_animation_setting_playbackRate_works.js]
 [browser_animation_shows_player_on_valid_node.js]
 [browser_animation_target_highlight_select.js]
-[browser_animation_timeline_displays_with_pref.js]
 [browser_animation_timeline_header.js]
 [browser_animation_timeline_pause_button.js]
 [browser_animation_timeline_scrubber_exists.js]
@@ -51,9 +35,5 @@ support-files =
 [browser_animation_timeline_ui.js]
 [browser_animation_toggle_button_resets_on_navigate.js]
 [browser_animation_toggle_button_toggles_animations.js]
-[browser_animation_toggle_button_updates_playerWidgets.js]
 [browser_animation_toolbar_exists.js]
-[browser_animation_ui_updates_when_animation_changes.js]
 [browser_animation_ui_updates_when_animation_data_changes.js]
-[browser_animation_ui_updates_when_animation_rate_changes.js]
-[browser_animation_ui_updates_when_animation_time_changes.js]
diff --git a/browser/devtools/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js b/browser/devtools/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
index 508850b78cb4..7ac066d5ab45 100644
--- a/browser/devtools/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
+++ b/browser/devtools/animationinspector/test/browser_animation_controller_exposes_document_currentTime.js
@@ -9,7 +9,7 @@
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {panel, controller} = yield openAnimationInspectorNewUI();
+  let {panel, controller} = yield openAnimationInspector();
 
   ok(controller.documentCurrentTime, "The documentCurrentTime getter exists");
   checkDocumentTimeIsCorrect(controller);
diff --git a/browser/devtools/animationinspector/test/browser_animation_empty_on_invalid_nodes.js b/browser/devtools/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
index 2b486ba49bf1..3bd3925815e5 100644
--- a/browser/devtools/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
+++ b/browser/devtools/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
@@ -11,27 +11,19 @@ add_task(function*() {
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testEmptyPanel(inspector, panel);
-
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI());
-  yield testEmptyPanel(inspector, panel, true);
 });
 
-function* testEmptyPanel(inspector, panel, isNewUI=false) {
+function* testEmptyPanel(inspector, panel) {
   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 onUpdated;
 
-  if (isNewUI) {
-    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");
-  } else {
-    ok(!panel.playerWidgets || !panel.playerWidgets.length,
-       "No player widgets displayed for a still node");
-  }
+  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");
 
   info("Select the comment text node and check that the panel is empty");
   let commentNode = yield inspector.walker.previousSibling(stillNode);
@@ -39,13 +31,7 @@ function* testEmptyPanel(inspector, panel, isNewUI=false) {
   yield selectNode(commentNode, inspector);
   yield onUpdated;
 
-  if (isNewUI) {
-    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");
-  } else {
-    ok(!panel.playerWidgets || !panel.playerWidgets.length,
-       "No player widgets displayed for a text node");
-  }
-}
+  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");}
diff --git a/browser/devtools/animationinspector/test/browser_animation_iterationCount_hidden_by_default.js b/browser/devtools/animationinspector/test/browser_animation_iterationCount_hidden_by_default.js
deleted file mode 100644
index a9d44634d98b..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_iterationCount_hidden_by_default.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Check that iteration count is only shown in the UI when it's different than 1
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Selecting a node with an animation that doesn't repeat");
-  yield selectNode(".long", inspector);
-  let widget = panel.playerWidgets[0];
-
-  ok(isNodeVisible(widget.metaDataComponent.durationValue),
-    "The duration value is shown");
-  ok(!isNodeVisible(widget.metaDataComponent.delayValue),
-    "The delay value is hidden");
-  ok(!isNodeVisible(widget.metaDataComponent.iterationValue),
-    "The iteration count is hidden");
-
-  info("Selecting a node with an animation that repeats several times");
-  yield selectNode(".delayed", inspector);
-  widget = panel.playerWidgets[0];
-
-  ok(isNodeVisible(widget.metaDataComponent.durationValue),
-    "The duration value is shown");
-  ok(isNodeVisible(widget.metaDataComponent.delayValue),
-    "The delay value is shown");
-  ok(isNodeVisible(widget.metaDataComponent.iterationValue),
-    "The iteration count is shown");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_mutations_with_same_names.js b/browser/devtools/animationinspector/test/browser_animation_mutations_with_same_names.js
index 77e82aa5a3cd..2d062c27b76d 100644
--- a/browser/devtools/animationinspector/test/browser_animation_mutations_with_same_names.js
+++ b/browser/devtools/animationinspector/test/browser_animation_mutations_with_same_names.js
@@ -11,7 +11,7 @@
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_negative_animation.html");
-  let {controller, panel} = yield openAnimationInspectorNewUI();
+  let {controller, panel} = yield openAnimationInspector();
 
   info("Wait until all animations have been added " +
        "(they're added with setTimeout)");
diff --git a/browser/devtools/animationinspector/test/browser_animation_panel_exists.js b/browser/devtools/animationinspector/test/browser_animation_panel_exists.js
index 925e3988d1f9..d218a0539610 100644
--- a/browser/devtools/animationinspector/test/browser_animation_panel_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_panel_exists.js
@@ -13,14 +13,6 @@ add_task(function*() {
   ok(controller, "The animation controller exists");
   ok(controller.animationsFront, "The animation controller has been initialized");
 
-  ok(panel, "The animation panel exists");
-  ok(panel.playersEl, "The animation panel has been initialized");
-
-  ({panel, controller} = yield closeAnimationInspectorAndRestartWithNewUI());
-
-  ok(controller, "The animation controller exists");
-  ok(controller.animationsFront, "The animation controller has been initialized");
-
   ok(panel, "The animation panel exists");
   ok(panel.playersEl, "The animation panel has been initialized");
   ok(panel.animationsTimelineComponent, "The animation panel has been initialized");
diff --git a/browser/devtools/animationinspector/test/browser_animation_participate_in_inspector_update.js b/browser/devtools/animationinspector/test/browser_animation_participate_in_inspector_update.js
index 3297f88125ee..f87660e4fed4 100644
--- a/browser/devtools/animationinspector/test/browser_animation_participate_in_inspector_update.js
+++ b/browser/devtools/animationinspector/test/browser_animation_participate_in_inspector_update.js
@@ -13,9 +13,6 @@ add_task(function*() {
 
   let ui = yield openAnimationInspector();
   yield testEventsOrder(ui);
-
-  ui = yield closeAnimationInspectorAndRestartWithNewUI();
-  yield testEventsOrder(ui);
 });
 
 function* testEventsOrder({inspector, panel, controller}) {
diff --git a/browser/devtools/animationinspector/test/browser_animation_play_pause_button.js b/browser/devtools/animationinspector/test/browser_animation_play_pause_button.js
deleted file mode 100644
index c9ce2d48252c..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_play_pause_button.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Check that the play/pause button actually plays and pauses the player.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel, controller} = yield openAnimationInspector();
-
-  info("Selecting an animated node");
-  yield selectNode(".animated", inspector);
-
-  let player = controller.animationPlayers[0];
-  let widget = panel.playerWidgets[0];
-
-  info("Click the pause button");
-  yield togglePlayPauseButton(widget);
-
-  is(player.state.playState, "paused", "The AnimationPlayerFront is paused");
-  ok(widget.el.classList.contains("paused"), "The button's state has changed");
-  ok(!widget.rafID, "The smooth timeline animation has been stopped");
-
-  info("Click on the play button");
-  yield togglePlayPauseButton(widget);
-
-  is(player.state.playState, "running", "The AnimationPlayerFront is running");
-  ok(widget.el.classList.contains("running"), "The button's state has changed");
-  ok(widget.rafID, "The smooth timeline animation has been started");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerFronts_are_refreshed.js b/browser/devtools/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
index efc467471d6c..cf9b8f79e529 100644
--- a/browser/devtools/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
+++ b/browser/devtools/animationinspector/test/browser_animation_playerFronts_are_refreshed.js
@@ -19,17 +19,12 @@ add_task(function*() {
 
   is(controller.animationPlayers.length, 1,
     "One AnimationPlayerFront has been created");
-  ok(controller.animationPlayers[0].autoRefreshTimer,
-    "The AnimationPlayerFront has been set to auto-refresh");
 
   info("Selecting a node with mutliple animations");
   yield selectNode(".multi", inspector);
 
   is(controller.animationPlayers.length, 2,
     "2 AnimationPlayerFronts have been created");
-  ok(controller.animationPlayers[0].autoRefreshTimer &&
-     controller.animationPlayers[1].autoRefreshTimer,
-    "The AnimationPlayerFronts have been set to auto-refresh");
 
   // Hold on to one of the AnimationPlayerFront objects and mock its release
   // method to test that it is released correctly and that its auto-refresh is
@@ -49,7 +44,6 @@ add_task(function*() {
 
   info("Checking the destroyed AnimationPlayerFront object");
   ok(releaseCalled, "The AnimationPlayerFront has been released");
-  ok(!retainedFront.autoRefreshTimer,
-    "The released AnimationPlayerFront's auto-refresh mode has been turned off");
+
   yield oldRelease.call(retainedFront);
 });
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
index e56656b30a56..d8cb8a910d55 100644
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
+++ b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_appear_on_panel_init.js
@@ -11,10 +11,6 @@ add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_body_animation.html");
 
   let {panel} = yield openAnimationInspector();
-  is(panel.playerWidgets.length, 1,
-    "One animation player is displayed after init");
-
-  ({panel} = yield closeAnimationInspectorAndRestartWithNewUI());
   is(panel.animationsTimelineComponent.animations.length, 1,
     "One animation is handled by the timeline after init");
   is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 1,
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js
deleted file mode 100644
index 77de03bc2934..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that player widgets show the right player meta-data for the
-// isRunningOnCompositor property.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
-
-  let compositorEl = panel.playerWidgets[0]
-                     .el.querySelector(".compositor-icon");
-
-  ok(compositorEl, "The compositor-icon element exists");
-  ok(isNodeVisible(compositorEl),
-     "The compositor icon is visible, since the animation is running on " +
-     "compositor thread");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_destroy.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_destroy.js
deleted file mode 100644
index 443b691fcdce..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_destroy.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that player widgets are destroyed correctly when needed.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select an animated node");
-  yield selectNode(".multi", inspector);
-
-  info("Hold on to one of the player widget instances to test it after destroy");
-  let widget = panel.playerWidgets[0];
-
-  info("Select another node to get the previous widgets destroyed");
-  yield selectNode(".animated", inspector);
-
-  ok(widget.destroyed, "The widget's destroyed flag is true");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_disables_on_finished.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_disables_on_finished.js
deleted file mode 100644
index 8a31cc3f9e51..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_disables_on_finished.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that when animations end, the corresponding player widgets are disabled.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel, controller} = yield openAnimationInspector();
-
-  info("Select the test node");
-  yield selectNode(".still", inspector);
-
-  info("Apply 2 finite animations to the test node and wait for the widgets to appear");
-  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield executeInContent("devtools:test:setAttribute", {
-    selector: ".still",
-    attributeName: "class",
-    attributeValue: "ball still multi-finite"
-  });
-  yield onUiUpdated;
-
-  is(controller.animationPlayers.length, 2, "2 animation players exist");
-
-  info("Wait for both animations to end");
-
-  let promises = controller.animationPlayers.map(front => {
-    return waitForPlayState(front, "finished");
-  });
-
-  yield promise.all(promises);
-
-  for (let widgetEl of panel.playersEl.querySelectorAll(".player-widget")) {
-    ok(widgetEl.classList.contains("finished"), "The player widget has the right class");
-  }
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_dont_show_time_after_duration.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_dont_show_time_after_duration.js
deleted file mode 100644
index 01137cc0cf55..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_dont_show_time_after_duration.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that after the animation has ended, the current time label and timeline
-// slider don't show values bigger than the animation duration (which would
-// happen if the local requestAnimationFrame loop didn't stop correctly).
-
-var L10N = new ViewHelpers.L10N();
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select the test node");
-  yield selectNode(".still", inspector);
-
-  info("Start an animation on the test node and wait for the widget to appear");
-  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
-  yield executeInContent("devtools:test:setAttribute", {
-    selector: ".still",
-    attributeName: "class",
-    attributeValue: "ball still short"
-  });
-  yield onUiUpdated;
-
-  info("Wait until the animation ends");
-  let widget = panel.playerWidgets[0];
-  let front = widget.player;
-
-  yield waitForPlayState(front, "finished");
-
-  is(widget.currentTimeEl.value, front.state.duration,
-    "The timeline slider has the right value");
-  is(widget.timeDisplayEl.textContent,
-    L10N.numberWithDecimals(front.state.duration / 1000, 2) + "s",
-    "The timeline slider has the right value");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_have_control_buttons.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_have_control_buttons.js
deleted file mode 100644
index 8f932fc848ad..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_have_control_buttons.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that playerWidgets have control buttons: play/pause, rewind, fast-forward.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {controller, inspector, panel} = yield openAnimationInspector();
-
-  info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
-
-  let widget = panel.playerWidgets[0];
-  let container = widget.el.querySelector(".playback-controls");
-
-  ok(container, "The control buttons container exists");
-  is(container.querySelectorAll("button").length, 3,
-    "The container contains 3 buttons");
-  ok(container.children[0].classList.contains("toggle"),
-    "The first button is the play/pause button");
-  ok(container.children[1].classList.contains("rw"),
-    "The second button is the rewind button");
-  ok(container.children[2].classList.contains("ff"),
-    "The third button is the fast-forward button");
-  ok(container.querySelector("select"),
-    "The container contains the playback rate select");
-
-  info("Faking an older server version by setting " +
-    "AnimationsController.traits.hasSetCurrentTime to false");
-
-  // Selecting <div.still> to make sure no widgets are displayed in the panel.
-  yield selectNode(".still", inspector);
-  controller.traits.hasSetCurrentTime = false;
-
-  info("Selecting the animated node again");
-  yield selectNode(".animated", inspector);
-
-  widget = panel.playerWidgets[0];
-  container = widget.el.querySelector(".playback-controls");
-
-  ok(container, "The control buttons container still exists");
-  is(container.querySelectorAll("button").length, 1,
-    "The container only contains 1 button");
-  ok(container.children[0].classList.contains("toggle"),
-    "The first button is the play/pause button");
-
-  yield selectNode(".still", inspector);
-  controller.traits.hasSetCurrentTime = true;
-
-  info("Faking an older server version by setting " +
-    "AnimationsController.traits.hasSetPlaybackRate to false");
-
-  controller.traits.hasSetPlaybackRate = false;
-
-  info("Selecting the animated node again");
-  yield selectNode(".animated", inspector);
-
-  widget = panel.playerWidgets[0];
-  container = widget.el.querySelector(".playback-controls");
-
-  ok(container, "The control buttons container still exists");
-  ok(!container.querySelector("select"),
-    "The playback rate select does not exist");
-
-  yield selectNode(".still", inspector);
-  controller.traits.hasSetPlaybackRate = true;
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js
deleted file mode 100644
index 2d8e805db07b..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_meta_data.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that player widgets show the right player meta-data (name, duration,
-// iteration count, delay).
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
-
-  let titleEl = panel.playerWidgets[0].el.querySelector(".animation-title");
-  ok(titleEl,
-    "The player widget has a title element, where meta-data should be displayed");
-
-  let nameEl = titleEl.querySelector("strong");
-  ok(nameEl, "The first <strong> tag was retrieved, it should contain the name");
-  is(nameEl.textContent, "simple-animation", "The animation name is correct");
-
-  let metaDataEl = titleEl.querySelector(".meta-data");
-  ok(metaDataEl, "The meta-data element exists");
-
-  let metaDataEls = metaDataEl.querySelectorAll("strong");
-  is(metaDataEls.length, 3, "3 meta-data elements were found");
-  is(metaDataEls[0].textContent, "2s",
-    "The first meta-data is the duration, and is correct");
-  ok(!isNodeVisible(metaDataEls[1]),
-    "The second meta-data is hidden, since there's no delay on the animation");
-
-  info("Select the node with the delayed animation");
-  yield selectNode(".delayed", inspector);
-
-  titleEl = panel.playerWidgets[0].el.querySelector(".animation-title");
-  nameEl = titleEl.querySelector("strong");
-  is(nameEl.textContent, "simple-animation", "The animation name is correct");
-
-  metaDataEls = titleEl.querySelectorAll(".meta-data strong");
-  is(metaDataEls.length, 3,
-    "3 meta-data elements were found for the delayed animation");
-  is(metaDataEls[0].textContent, "3s",
-    "The first meta-data is the duration, and is correct");
-  ok(isNodeVisible(metaDataEls[0]), "The duration is shown");
-  is(metaDataEls[1].textContent, "60s",
-    "The second meta-data is the delay, and is correct");
-  ok(isNodeVisible(metaDataEls[1]), "The delay is shown");
-  is(metaDataEls[2].textContent, "10",
-    "The third meta-data is the iteration count, and is correct");
-  ok(isNodeVisible(metaDataEls[2]), "The iteration count is shown");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_delayed.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_delayed.js
deleted file mode 100644
index 5795c1b8e7fa..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_delayed.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the currentTime timeline doesn't move if the animation is currently
-// waiting for an animation-delay.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select the delayed animation node");
-  yield selectNode(".delayed", inspector);
-
-  let widget = panel.playerWidgets[0];
-
-  let timeline = widget.currentTimeEl;
-  is(timeline.value, 0, "The timeline is at 0 since the animation hasn't started");
-
-  let timeLabel = widget.timeDisplayEl;
-  is(timeLabel.textContent, "0s", "The current time is 0");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_enabled.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_enabled.js
deleted file mode 100644
index bb7774acf1ba..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_enabled.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the currentTime timeline widget is enabled and that the associated
-// player front supports setting the current time.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {controller, inspector, panel} = yield openAnimationInspector();
-
-  info("Select the animated node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget's timeline element");
-  let widget = panel.playerWidgets[0];
-  let timeline = widget.currentTimeEl;
-
-  ok(!timeline.hasAttribute("disabled"), "The timeline input[range] is enabled");
-  ok(widget.setCurrentTime, "The widget has the setCurrentTime method");
-  ok(widget.player.setCurrentTime,
-     "The associated player front has the setCurrentTime method");
-
-  info("Faking an older server version by setting " +
-       "AnimationsController.traits.hasSetCurrentTime to false");
-
-  yield selectNode("body", inspector);
-  controller.traits.hasSetCurrentTime = false;
-
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget's timeline element");
-  widget = panel.playerWidgets[0];
-  timeline = widget.currentTimeEl;
-
-  ok(timeline.hasAttribute("disabled"), "The timeline input[range] is disabled");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_moves.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_moves.js
deleted file mode 100644
index dcccd2550630..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_scrubber_moves.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the currentTime timeline widget actually progresses with the
-// animation itself.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select the animated node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget's timeline element and its current position");
-  let widget = panel.playerWidgets[0];
-  let timeline = widget.currentTimeEl;
-
-  yield onceNextPlayerRefresh(widget.player);
-  ok(widget.rafID, "The widget is updating the timeline with a rAF loop");
-
-  info("Pause the animation");
-  yield togglePlayPauseButton(widget);
-
-  ok(!widget.rafID, "The rAF loop has been stopped after the animation was paused");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_state_after_pause.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_state_after_pause.js
deleted file mode 100644
index 15607e66284e..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_state_after_pause.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that once an animation is paused and its widget is refreshed, the right
-// initial time is displayed.
-
-var L10N = new ViewHelpers.L10N();
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Selecting the test node");
-  yield selectNode(".animated", inspector);
-
-  info("Pausing the animation by using the widget");
-  let widget = panel.playerWidgets[0];
-  yield widget.pause();
-
-  info("Selecting another node and then the same node again to refresh the widget");
-  yield selectNode(".still", inspector);
-  yield selectNode(".animated", inspector);
-
-  widget = panel.playerWidgets[0];
-  ok(widget.el.classList.contains("paused"), "The widget is still in paused mode");
-  is(widget.timeDisplayEl.textContent,
-    L10N.numberWithDecimals(widget.player.state.currentTime / 1000, 2) + "s",
-    "The initial time has been set to the player's");
-});
-
diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_target_nodes.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
index 1610ba8ca30c..bec2e93009c3 100644
--- a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
+++ b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_target_nodes.js
@@ -13,29 +13,6 @@ add_task(function*() {
   info("Select the simple animated node");
   yield selectNode(".animated", inspector);
 
-  let widget = panel.playerWidgets[0];
-
-  // Make sure to wait for the target-retrieved event if the nodeFront hasn't
-  // yet been retrieved by the TargetNodeComponent.
-  if (!widget.targetNodeComponent.nodeFront) {
-    yield widget.targetNodeComponent.once("target-retrieved");
-  }
-
-  let targetEl = widget.el.querySelector(".animation-target");
-  ok(targetEl, "The player widget has a target element");
-  is(targetEl.textContent, "<divid=\"\"class=\"ball animated\">",
-    "The target element's content is correct");
-
-  let selectorEl = targetEl.querySelector(".node-selector");
-  ok(selectorEl,
-    "The icon to select the target element in the inspector exists");
-
-  info("Test again with the new timeline UI");
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI());
-
-  info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
-
   let targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
   // Make sure to wait for the target-retrieved event if the nodeFront hasn't
   // yet been retrieved by the TargetNodeComponent.
@@ -46,7 +23,7 @@ add_task(function*() {
   is(targetNodeComponent.el.textContent, "div#.ball.animated",
     "The target element's content is correct");
 
-  selectorEl = targetNodeComponent.el.querySelector(".node-selector");
+  let selectorEl = targetNodeComponent.el.querySelector(".node-selector");
   ok(selectorEl,
     "The icon to select the target element in the inspector exists");
 });
diff --git a/browser/devtools/animationinspector/test/browser_animation_rate_select_shows_presets.js b/browser/devtools/animationinspector/test/browser_animation_rate_select_shows_presets.js
deleted file mode 100644
index d8af2c0f5972..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_rate_select_shows_presets.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the playbackRate select element contains a list of presets and
-// and that if the animation has a current rate that is not part of this list,
-// it is added.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Selecting the test node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the playback rate UI component");
-  let widget = panel.playerWidgets[0];
-  let rateComponent = widget.rateComponent;
-
-  let options = rateComponent.el.querySelectorAll("option");
-  is(options.length, rateComponent.PRESETS.length,
-    "The playback rate select contains the right number of options");
-
-  for (let i = 0; i < rateComponent.PRESETS.length; i ++) {
-    is(options[i].value, rateComponent.PRESETS[i] + "",
-      "The playback rate option " + i + " has the right preset value " +
-      rateComponent.PRESETS[i]);
-  }
-
-  info("Set a custom rate (not part of the presets) via the DOM");
-  let onRateChanged = waitForStateCondition(widget.player, state => {
-    return state.playbackRate === 3.6
-  });
-  yield executeInContent("Test:SetAnimationPlayerPlaybackRate", {
-    selector: ".animated",
-    animationIndex: 0,
-    playbackRate: 3.6
-  });
-  yield onRateChanged;
-
-  options = rateComponent.el.querySelectorAll("option");
-  is(options.length, rateComponent.PRESETS.length + 1,
-    "The playback rate select contains the right number of options (presets + 1)");
-
-  ok([...options].find(option => option.value === "3.6"),
-    "The custom rate is part of the select");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_refresh_on_added_animation.js b/browser/devtools/animationinspector/test/browser_animation_refresh_on_added_animation.js
index fd94b98e4049..ee3265d172c1 100644
--- a/browser/devtools/animationinspector/test/browser_animation_refresh_on_added_animation.js
+++ b/browser/devtools/animationinspector/test/browser_animation_refresh_on_added_animation.js
@@ -11,9 +11,6 @@ add_task(function*() {
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testRefreshOnNewAnimation(inspector, panel);
-
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI());
-  yield testRefreshOnNewAnimation(inspector, panel);
 });
 
 function* testRefreshOnNewAnimation(inspector, panel) {
diff --git a/browser/devtools/animationinspector/test/browser_animation_refresh_on_removed_animation.js b/browser/devtools/animationinspector/test/browser_animation_refresh_on_removed_animation.js
index e8416c9b7ca4..4582f4044c11 100644
--- a/browser/devtools/animationinspector/test/browser_animation_refresh_on_removed_animation.js
+++ b/browser/devtools/animationinspector/test/browser_animation_refresh_on_removed_animation.js
@@ -11,11 +11,6 @@ add_task(function*() {
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testRefreshOnRemove(inspector, panel);
-  yield testAddedAnimationWorks(inspector, panel);
-
-  info("Reload and test again with the new UI");
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI(true));
-  yield testRefreshOnRemove(inspector, panel, true);
 });
 
 function* testRefreshOnRemove(inspector, panel) {
@@ -51,22 +46,3 @@ function* testRefreshOnRemove(inspector, panel) {
 
   assertAnimationsDisplayed(panel, 1);
 }
-
-function* testAddedAnimationWorks(inspector, panel) {
-  info("Now wait until the animation finishes");
-  let widget = panel.playerWidgets[0];
-  yield waitForPlayState(widget.player, "finished");
-
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 1,
-    "There is still a player widget in the panel after the animation finished");
-
-  info("Checking that the animation's currentTime can still be set");
-  info("Click at the center of the slider input");
-
-  let onPaused = waitForPlayState(widget.player, "paused");
-  let input = widget.currentTimeEl;
-  let win = input.ownerDocument.defaultView;
-  EventUtils.synthesizeMouseAtCenter(input, {type: "mousedown"}, win);
-  yield onPaused;
-  ok(widget.el.classList.contains("paused"), "The widget is in paused mode");
-}
diff --git a/browser/devtools/animationinspector/test/browser_animation_refresh_when_active.js b/browser/devtools/animationinspector/test/browser_animation_refresh_when_active.js
index aaf983db4e71..6ef11468b0a7 100644
--- a/browser/devtools/animationinspector/test/browser_animation_refresh_when_active.js
+++ b/browser/devtools/animationinspector/test/browser_animation_refresh_when_active.js
@@ -11,9 +11,6 @@ add_task(function*() {
 
   let {inspector, panel} = yield openAnimationInspector();
   yield testRefresh(inspector, panel);
-
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI());
-  yield testRefresh(inspector, panel);
 });
 
 function* testRefresh(inspector, panel) {
diff --git a/browser/devtools/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js b/browser/devtools/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
index a309c8a9de46..b47e39773d7f 100644
--- a/browser/devtools/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
+++ b/browser/devtools/animationinspector/test/browser_animation_same_nb_of_playerWidgets_and_playerFronts.js
@@ -10,22 +10,6 @@
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel, controller} = yield openAnimationInspector();
-
-  info("Selecting the test animated node");
-  yield selectNode(".multi", inspector);
-
-  is(controller.animationPlayers.length, panel.playerWidgets.length,
-    "As many playerWidgets were created as there are playerFronts");
-
-  for (let widget of panel.playerWidgets) {
-    ok(widget.initialized, "The player widget is initialized");
-    is(widget.el.parentNode, panel.playersEl,
-      "The player widget has been appended to the panel");
-  }
-
-  info("Test again with the new UI, making sure the same number of " +
-       "animation timelines is created");
-  ({inspector, panel, controller} = yield closeAnimationInspectorAndRestartWithNewUI());
   let timeline = panel.animationsTimelineComponent;
 
   info("Selecting the test animated node again");
diff --git a/browser/devtools/animationinspector/test/browser_animation_setting_currentTime_works_and_pauses.js b/browser/devtools/animationinspector/test/browser_animation_setting_currentTime_works_and_pauses.js
deleted file mode 100644
index e43d5d78a01f..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_setting_currentTime_works_and_pauses.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that setting an animation's current time by clicking in the input[range]
-// or rewind or fast-forward buttons pauses the animation and sets it to the
-// right time.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {toolbox, inspector, panel} = yield openAnimationInspector();
-
-  info("Select an animated node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget for this node");
-  let widget = panel.playerWidgets[0];
-  let input = widget.currentTimeEl;
-  let rwBtn = widget.rewindBtnEl;
-  let ffBtn = widget.fastForwardBtnEl;
-  let win = input.ownerDocument.defaultView;
-
-  info("Click at the center of the input")
-  EventUtils.synthesizeMouseAtCenter(input, {type: "mousedown"}, win);
-
-  yield checkPausedAt(widget, 1000);
-
-  info("Resume the player and wait for an auto-refresh event");
-  yield widget.player.play();
-  yield onceNextPlayerRefresh(widget.player);
-
-  info("Click on the rewind button");
-  EventUtils.sendMouseEvent({type: "click"}, rwBtn, win);
-
-  yield checkPausedAt(widget, 0);
-
-  info("Click on the fast-forward button");
-  EventUtils.sendMouseEvent({type: "click"}, ffBtn, win);
-
-  yield checkPausedAt(widget, 2000);
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_setting_playbackRate_works.js b/browser/devtools/animationinspector/test/browser_animation_setting_playbackRate_works.js
deleted file mode 100644
index 910fafb39ad2..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_setting_playbackRate_works.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that setting an animation's playback rate by selecting a rate in the
-// presets drop-down sets the rate accordingly.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {toolbox, inspector, panel} = yield openAnimationInspector();
-
-  info("Select an animated node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget for this node");
-  let widget = panel.playerWidgets[0];
-  let select = widget.rateComponent.el;
-  let win = select.ownerDocument.defaultView;
-
-  info("Click on the rate drop-down");
-  EventUtils.synthesizeMouseAtCenter(select, {type: "mousedown"}, win);
-
-  info("Click on a rate option");
-  let option = select.options[select.options.length - 1];
-  EventUtils.synthesizeMouseAtCenter(option, {type: "mouseup"}, win);
-  let selectedRate = parseFloat(option.value);
-
-  info("Check that the rate was changed on the player at the next update");
-  yield waitForStateCondition(widget.player, ({playbackRate}) => playbackRate === selectedRate);
-  is(widget.player.state.playbackRate, selectedRate,
-    "The rate was changed successfully");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_shows_player_on_valid_node.js b/browser/devtools/animationinspector/test/browser_animation_shows_player_on_valid_node.js
index f30492dbac75..5a6b25507cb9 100644
--- a/browser/devtools/animationinspector/test/browser_animation_shows_player_on_valid_node.js
+++ b/browser/devtools/animationinspector/test/browser_animation_shows_player_on_valid_node.js
@@ -9,18 +9,11 @@
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-
   let {inspector, panel} = yield openAnimationInspector();
-  yield testShowsAnimations(inspector, panel);
 
-  ({inspector, panel} = yield closeAnimationInspectorAndRestartWithNewUI());
-  yield testShowsAnimations(inspector, panel);
-});
-
-function* testShowsAnimations(inspector, panel) {
   info("Select node .animated and check that the panel is not empty");
   let node = yield getNodeFront(".animated", inspector);
   yield selectNode(node, inspector);
 
   assertAnimationsDisplayed(panel, 1);
-}
+});
diff --git a/browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js b/browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js
index eb77b3c67a31..8292da055abe 100644
--- a/browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js
+++ b/browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js
@@ -12,12 +12,9 @@ add_task(function*() {
 
   let ui = yield openAnimationInspector();
   yield testTargetNode(ui);
-
-  ui = yield closeAnimationInspectorAndRestartWithNewUI();
-  yield testTargetNode(ui, true);
 });
 
-function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
+function* testTargetNode({toolbox, inspector, panel}) {
   info("Select the simple animated node");
 
   let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_displays_with_pref.js b/browser/devtools/animationinspector/test/browser_animation_timeline_displays_with_pref.js
deleted file mode 100644
index 673e8e7a4e22..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_displays_with_pref.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Check that the timeline-based UI is displayed instead of the playerwidget-
-// based UI when the "devtools.inspector.animationInspectorV3" is set.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspectorNewUI();
-
-  info("Selecting the test node");
-  yield selectNode(".animated", inspector);
-
-  let timeline = panel.animationsTimelineComponent;
-
-  ok(timeline, "The timeline components was created");
-  is(timeline.rootWrapperEl.parentNode, panel.playersEl,
-    "The timeline component was appended in the DOM");
-  is(panel.playersEl.querySelectorAll(".player-widget").length, 0,
-    "There are no playerWidgets in the DOM");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_header.js b/browser/devtools/animationinspector/test/browser_animation_timeline_header.js
index 8277440b2777..c97954599d8e 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_header.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_header.js
@@ -4,8 +4,7 @@
 
 "use strict";
 
-// Check that the timeline-based UI shows correct time graduations in the
-// header.
+// Check that the timeline shows correct time graduations in the header.
 
 const {findOptimalTimeInterval} = require("devtools/animationinspector/utils");
 const {TimeScale} = require("devtools/animationinspector/components");
@@ -14,7 +13,7 @@ const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let headerEl = timeline.timeHeaderEl;
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js b/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js
index d951c86fab74..470d56c3afb0 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_pause_button.js
@@ -12,7 +12,7 @@
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
 
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
   let btn = panel.playTimelineButtonEl;
 
   ok(btn, "The play/pause button exists");
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_exists.js b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_exists.js
index e53572ffd2a1..e63f953a3af3 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_exists.js
@@ -4,11 +4,11 @@
 
 "use strict";
 
-// Check that the timeline-based UI does have a scrubber element.
+// Check that the timeline does have a scrubber element.
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let scrubberEl = timeline.scrubberEl;
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
index d04863e2cc6c..be4b044ab8f9 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_movable.js
@@ -4,15 +4,15 @@
 
 "use strict";
 
-// Check that the scrubber in the timeline-based UI can be moved by clicking &
-// dragging in the header area.
+// 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.
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
 
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let win = timeline.win;
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_moves.js b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_moves.js
index 86dd08e52365..c66fee6eed27 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_moves.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_scrubber_moves.js
@@ -4,15 +4,14 @@
 
 "use strict";
 
-// Check that the scrubber in the timeline-based UI moves when animations are
-// playing.
+// 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");
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let scrubberEl = timeline.scrubberEl;
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_delay.js b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_delay.js
index e12cd9c36a1d..b15c68499001 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_delay.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_delay.js
@@ -4,14 +4,14 @@
 
 "use strict";
 
-// Check that animation delay is visualized in the timeline-based UI when the
-// animation is delayed.
+// 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");
-  let {inspector, panel} = yield openAnimationInspectorNewUI();
+  let {inspector, panel} = yield openAnimationInspector();
 
   info("Selecting a delayed animated node");
   yield selectNode(".delayed", inspector);
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_iterations.js b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_iterations.js
index 0b47bb808dda..2ef5a8e60486 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_iterations.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_iterations.js
@@ -4,12 +4,12 @@
 
 "use strict";
 
-// Check that the timeline-based UI is displays as many iteration elements as
-// there are iterations in an animation.
+// 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");
-  let {inspector, panel} = yield openAnimationInspectorNewUI();
+  let {inspector, panel} = yield openAnimationInspector();
 
   info("Selecting the test node");
   yield selectNode(".delayed", inspector);
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_time_info.js b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_time_info.js
index a34a46745079..ec8dc4d57c19 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_shows_time_info.js
@@ -4,12 +4,12 @@
 
 "use strict";
 
-// Check that the timeline-based UI displays animations' duration, delay and
-// iteration counts in tooltips.
+// 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");
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   info("Getting the animation element from the panel");
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js b/browser/devtools/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
index ebde3af7f814..e87aa3810f52 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_takes_rate_into_account.js
@@ -14,7 +14,7 @@
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_modify_playbackRate.html");
 
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
 
diff --git a/browser/devtools/animationinspector/test/browser_animation_timeline_ui.js b/browser/devtools/animationinspector/test/browser_animation_timeline_ui.js
index fb3be2e5a69c..dc62524d7ff3 100644
--- a/browser/devtools/animationinspector/test/browser_animation_timeline_ui.js
+++ b/browser/devtools/animationinspector/test/browser_animation_timeline_ui.js
@@ -4,11 +4,11 @@
 
 "use strict";
 
-// Check that the timeline-based UI contains the right elements.
+// Check that the timeline contains the right elements.
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {panel} = yield openAnimationInspectorNewUI();
+  let {panel} = yield openAnimationInspector();
 
   let timeline = panel.animationsTimelineComponent;
   let el = timeline.rootWrapperEl;
diff --git a/browser/devtools/animationinspector/test/browser_animation_toggle_button_updates_playerWidgets.js b/browser/devtools/animationinspector/test/browser_animation_toggle_button_updates_playerWidgets.js
deleted file mode 100644
index 36675d070ef3..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_toggle_button_updates_playerWidgets.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that pressing the main toggle button also updates the displayed
-// player widgets.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Select an animated node");
-  yield selectNode(".animated", inspector);
-  let widget = panel.playerWidgets[0];
-  let player = widget.player;
-
-  info("Listen to animation state changes and click the toggle button to " +
-    "pause all animations");
-  let onPaused = waitForPlayState(player, "paused");
-  yield panel.toggleAll();
-  yield onPaused;
-
-  info("Checking the selected node's animation player widget's state");
-  is(player.state.playState, "paused", "The player front's state is paused");
-  ok(widget.el.classList.contains("paused"), "The widget's UI is in paused state");
-
-  info("Listen to animation state changes and click the toggle button to " +
-    "play all animations");
-  let onRunning = waitForPlayState(player, "running");
-  yield panel.toggleAll();
-  yield onRunning;
-
-  info("Checking the selected node's animation player widget's state again");
-  is(player.state.playState, "running", "The player front's state is running");
-  ok(widget.el.classList.contains("running"), "The widget's UI is in running state");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
index fe1389e42e0a..c2ddff879b2d 100644
--- a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
@@ -6,30 +6,14 @@
 
 // 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 with the new UI, that toolbar gets replaced by the timeline
-// toolbar when there are animations to be displayed.
+// 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");
   let {inspector, window} = yield openAnimationInspector();
   let doc = window.document;
-
   let toolbar = doc.querySelector("#global-toolbar");
-  ok(toolbar, "The panel contains the toolbar element");
-  ok(toolbar.querySelector("#toggle-all"),
-     "The toolbar contains the toggle button");
-  ok(isNodeVisible(toolbar), "The toolbar is visible");
-
-  info("Select an animated node");
-  yield selectNode(".animated", inspector);
-
-  toolbar = doc.querySelector("#global-toolbar");
-  ok(toolbar, "The panel still contains the toolbar element");
-  ok(isNodeVisible(toolbar), "The toolbar is still visible");
-
-  ({inspector, window} = yield closeAnimationInspectorAndRestartWithNewUI());
-  doc = window.document;
-  toolbar = doc.querySelector("#global-toolbar");
 
   ok(toolbar, "The panel contains the toolbar element with the new UI");
   ok(!isNodeVisible(toolbar),
diff --git a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_changes.js b/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_changes.js
deleted file mode 100644
index b5d213f4f5e0..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_changes.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Verify that if the animation object changes in content, then the widget
-// reflects that change.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {panel, inspector} = yield openAnimationInspector();
-
-  info("Select the test node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget");
-  let widget = panel.playerWidgets[0];
-  let player = widget.player;
-
-  info("Wait for paused playState");
-  let onPaused = waitForPlayState(player, "paused");
-
-  info("Pause the animation via the content DOM");
-  yield executeInContent("Test:ToggleAnimationPlayer", {
-    selector: ".animated",
-    animationIndex: 0,
-    pause: true
-  });
-
-  yield onPaused;
-
-  is(player.state.playState, "paused", "The AnimationPlayerFront is paused");
-  ok(widget.el.classList.contains("paused"), "The button's state has changed");
-  ok(!widget.rafID, "The smooth timeline animation has been stopped");
-
-  info("Wait for running playState");
-  let onRunning = waitForPlayState(player, "running");
-
-  info("Play the animation via the content DOM");
-  yield executeInContent("Test:ToggleAnimationPlayer", {
-    selector: ".animated",
-    animationIndex: 0,
-    pause: false
-  });
-
-  yield onRunning;
-
-  is(player.state.playState, "running", "The AnimationPlayerFront is running");
-  ok(widget.el.classList.contains("running"), "The button's state has changed");
-  ok(widget.rafID, "The smooth timeline animation has been started");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js b/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
index d2b2b9f2c3be..bba47af81741 100644
--- a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
+++ b/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_data_changes.js
@@ -12,47 +12,33 @@ add_task(function*() {
 
   let ui = yield openAnimationInspector();
   yield testDataUpdates(ui);
-
-  info("Close the toolbox, reload the tab, and try again with the new UI");
-  ui = yield closeAnimationInspectorAndRestartWithNewUI(true);
-  yield testDataUpdates(ui, true);
 });
 
-function* testDataUpdates({panel, controller, inspector}, isNewUI=false) {
+function* testDataUpdates({panel, controller, inspector}) {
   info("Select the test node");
   yield selectNode(".animated", inspector);
 
   let animation = controller.animationPlayers[0];
-  yield setStyle(animation, panel, "animationDuration", "5.5s", isNewUI);
-  yield setStyle(animation, panel, "animationIterationCount", "300", isNewUI);
-  yield setStyle(animation, panel, "animationDelay", "45s", isNewUI);
+  yield setStyle(animation, panel, "animationDuration", "5.5s");
+  yield setStyle(animation, panel, "animationIterationCount", "300");
+  yield setStyle(animation, panel, "animationDelay", "45s");
 
-  if (isNewUI) {
-    let animationsEl = panel.animationsTimelineComponent.animationsEl;
-    let timeBlockEl = animationsEl.querySelector(".time-block");
+  let animationsEl = panel.animationsTimelineComponent.animationsEl;
+  let timeBlockEl = animationsEl.querySelector(".time-block");
 
-    // 45s delay + (300 * 5.5)s duration
-    let expectedTotalDuration = 1695 * 1000;
-    let timeRatio = expectedTotalDuration / timeBlockEl.offsetWidth;
+  // 45s delay + (300 * 5.5)s duration
+  let expectedTotalDuration = 1695 * 1000;
+  let timeRatio = expectedTotalDuration / timeBlockEl.offsetWidth;
 
-    // XXX: the nb and size of each iteration cannot be tested easily (displayed
-    // using a linear-gradient background and capped at 2px wide). They should
-    // be tested in bug 1173761.
-    let delayWidth = parseFloat(timeBlockEl.querySelector(".delay").style.width);
-    is(Math.round(delayWidth * timeRatio), 45 * 1000,
-      "The timeline has the right delay");
-  } else {
-    let widget = panel.playerWidgets[0];
-    is(widget.metaDataComponent.durationValue.textContent, "5.50s",
-      "The widget shows the new duration");
-    is(widget.metaDataComponent.iterationValue.textContent, "300",
-      "The widget shows the new iteration count");
-    is(widget.metaDataComponent.delayValue.textContent, "45s",
-      "The widget shows the new delay");
-  }
+  // XXX: the nb and size of each iteration cannot be tested easily (displayed
+  // using a linear-gradient background and capped at 2px wide). They should
+  // be tested in bug 1173761.
+  let delayWidth = parseFloat(timeBlockEl.querySelector(".delay").style.width);
+  is(Math.round(delayWidth * timeRatio), 45 * 1000,
+    "The timeline has the right delay");
 }
 
-function* setStyle(animation, panel, name, value, isNewUI=false) {
+function* setStyle(animation, panel, name, value) {
   info("Change the animation style via the content DOM. Setting " +
     name + " to " + value);
 
@@ -67,10 +53,4 @@ function* setStyle(animation, panel, name, value, isNewUI=false) {
   // 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);
-
-  // If this is the playerWidget-based UI, wait for the auto-refresh event too
-  // to make sure the UI has updated.
-  if (!isNewUI) {
-    yield once(animation, animation.AUTO_REFRESH_EVENT);
-  }
 }
diff --git a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_rate_changes.js b/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_rate_changes.js
deleted file mode 100644
index 13cd2ff39585..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_rate_changes.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that setting an animation's playbackRate via the WebAnimations API (from
-// content), actually changes the rate in the corresponding widget too.
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Selecting the test node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget");
-  let widget = panel.playerWidgets[0];
-
-  info("Change the animation's playbackRate via the content DOM");
-  let onRateChanged = waitForStateCondition(widget.player, state => {
-    return state.playbackRate === 2;
-  }, "playbackRate === 2");
-  yield executeInContent("Test:SetAnimationPlayerPlaybackRate", {
-    selector: ".animated",
-    animationIndex: 0,
-    playbackRate: 2
-  });
-  yield onRateChanged;
-
-  is(widget.rateComponent.el.value, "2",
-    "The playbackRate select value was changed");
-
-  info("Change the animation's playbackRate again via the content DOM");
-  onRateChanged = waitForStateCondition(widget.player, state => {
-    return state.playbackRate === 0.3;
-  }, "playbackRate === 0.3");
-  yield executeInContent("Test:SetAnimationPlayerPlaybackRate", {
-    selector: ".animated",
-    animationIndex: 0,
-    playbackRate: 0.3
-  });
-  yield onRateChanged;
-
-  is(widget.rateComponent.el.value, "0.3",
-    "The playbackRate select value was changed again");
-});
diff --git a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_time_changes.js b/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_time_changes.js
deleted file mode 100644
index 546c571d6a5d..000000000000
--- a/browser/devtools/animationinspector/test/browser_animation_ui_updates_when_animation_time_changes.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that setting an animation's currentTime via the WebAnimations API (from
-// content), actually changes the time in the corresponding widget too.
-
-var L10N = new ViewHelpers.L10N();
-
-add_task(function*() {
-  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
-  let {inspector, panel} = yield openAnimationInspector();
-
-  info("Selecting the test node");
-  yield selectNode(".animated", inspector);
-
-  info("Get the player widget");
-  let widget = panel.playerWidgets[0];
-
-  info("Pause the player so we can compare times easily");
-  yield executeInContent("Test:ToggleAnimationPlayer", {
-    selector: ".animated",
-    animationIndex: 0,
-    pause: true
-  });
-  yield onceNextPlayerRefresh(widget.player);
-
-  ok(widget.el.classList.contains("paused"), "The widget is in pause mode");
-
-  info("Change the animation's currentTime via the content DOM");
-  yield executeInContent("Test:SetAnimationPlayerCurrentTime", {
-    selector: ".animated",
-    animationIndex: 0,
-    currentTime: 0
-  });
-  yield onceNextPlayerRefresh(widget.player);
-
-  is(widget.currentTimeEl.value, 0, "The currentTime slider's value was changed");
-
-  info("Change the animation's currentTime again via the content DOM");
-  yield executeInContent("Test:SetAnimationPlayerCurrentTime", {
-    selector: ".animated",
-    animationIndex: 0,
-    currentTime: 300
-  });
-  yield onceNextPlayerRefresh(widget.player);
-
-  is(widget.currentTimeEl.value, 300,
-    "The currentTime slider's value was changed again");
-});
diff --git a/browser/devtools/animationinspector/test/head.js b/browser/devtools/animationinspector/test/head.js
index af37ed3d5208..4e53b1986376 100644
--- a/browser/devtools/animationinspector/test/head.js
+++ b/browser/devtools/animationinspector/test/head.js
@@ -83,13 +83,6 @@ function addTab(url) {
   return def.promise;
 }
 
-/**
- * Switch ON the new UI pref.
- */
-function enableNewUI() {
-  Services.prefs.setBoolPref(NEW_UI_PREF, true);
-}
-
 /**
  * Reload the current tab location.
  */
@@ -147,15 +140,9 @@ var selectNode = Task.async(function*(data, inspector, reason="test") {
  * @param {String} msg An optional string to be used as the assertion message.
  */
 function assertAnimationsDisplayed(panel, nbAnimations, msg="") {
-  let isNewUI = Services.prefs.getBoolPref(NEW_UI_PREF);
   msg = msg || `There are ${nbAnimations} animations in the panel`;
-  if (isNewUI) {
-    is(panel.animationsTimelineComponent.animationsEl.childNodes.length,
-       nbAnimations, msg);
-  } else {
-    is(panel.playersEl.querySelectorAll(".player-widget").length,
-       nbAnimations, msg);
-  }
+  is(panel.animationsTimelineComponent.animationsEl.childNodes.length,
+     nbAnimations, msg);
 }
 
 /**
@@ -229,16 +216,6 @@ var openAnimationInspector = Task.async(function*() {
   };
 });
 
-/**
- * Turn on the new timeline-based UI pref ON, and then open the toolbox, with
- * the inspector tool visible and the animationinspector sidebar selected.
- * @return a promise that resolves when the inspector is ready.
- */
-function openAnimationInspectorNewUI() {
-  enableNewUI();
-  return openAnimationInspector();
-}
-
 /**
  * Close the toolbox.
  * @return a promise that resolves when the toolbox has closed.
@@ -248,24 +225,6 @@ var closeAnimationInspector = Task.async(function*() {
   yield gDevTools.closeToolbox(target);
 });
 
-/**
- * During the time period we migrate from the playerWidgets-based UI to the new
- * AnimationTimeline UI, we'll want to run certain tests against both UI.
- * This closes the toolbox, switch the new UI pref ON, and opens the toolbox
- * again, with the animation inspector panel selected.
- * @param {Boolean} reload Optionally reload the page after the toolbox was
- * closed and before it is opened again.
- * @return a promise that resolves when the animation inspector is ready.
- */
-var closeAnimationInspectorAndRestartWithNewUI = Task.async(function*(reload) {
-  info("Close the toolbox and test again with the new UI");
-  yield closeAnimationInspector();
-  if (reload) {
-    yield reloadTab();
-  }
-  return yield openAnimationInspectorNewUI();
-});
-
 /**
  * Wait for the toolbox frame to receive focus after it loads
  * @param {Toolbox} toolbox
@@ -481,13 +440,7 @@ function isNodeVisible(node) {
  * @return {Array} all AnimationTargetNode instances
  */
 var waitForAllAnimationTargets = Task.async(function*(panel) {
-  let targets = [];
-  if (panel.animationsTimelineComponent) {
-    targets = targets.concat(panel.animationsTimelineComponent.targetNodes);
-  }
-  if (panel.playerWidgets) {
-    targets = targets.concat(panel.playerWidgets.map(w => w.targetNodeComponent));
-  }
+  let targets = panel.animationsTimelineComponent.targetNodes;
   yield promise.all(targets.map(t => {
     if (!t.nodeFront) {
       return t.once("target-retrieved");
diff --git a/toolkit/devtools/server/actors/animation.js b/toolkit/devtools/server/actors/animation.js
index a7057b7dc8e8..5ac698f4cb00 100644
--- a/toolkit/devtools/server/actors/animation.js
+++ b/toolkit/devtools/server/actors/animation.js
@@ -28,7 +28,6 @@
 const {Cu} = require("chrome");
 const promise = require("promise");
 const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
-const {setInterval, clearInterval} = require("sdk/timers");
 const protocol = require("devtools/server/protocol");
 const {ActorClass, Actor, FrontClass, Front,
        Arg, method, RetVal, types} = protocol;
@@ -36,10 +35,6 @@ const {ActorClass, Actor, FrontClass, Front,
 const {NodeActor} = require("devtools/server/actors/inspector");
 const events = require("sdk/event/core");
 
-// How long (in ms) should we wait before polling again the state of an
-// animationPlayer.
-const PLAYER_DEFAULT_AUTO_REFRESH_TIMEOUT = 500;
-
 // Types of animations.
 const ANIMATION_TYPES = {
   CSS_ANIMATION: "cssanimation",
@@ -423,8 +418,6 @@ var AnimationPlayerActor = ActorClass({
 });
 
 var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
-  AUTO_REFRESH_EVENT: "updated-state",
-
   initialize: function(conn, form, detail, ctx) {
     Front.prototype.initialize.call(this, conn, form, detail, ctx);
 
@@ -441,7 +434,6 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
   },
 
   destroy: function() {
-    this.stopAutoRefresh();
     Front.prototype.destroy.call(this);
   },
 
@@ -475,75 +467,14 @@ var AnimationPlayerFront = FrontClass(AnimationPlayerActor, {
     this.state = state;
   }),
 
-  // About auto-refresh:
-  //
-  // The AnimationPlayerFront is capable of automatically refreshing its state
-  // by calling the getCurrentState method at regular intervals. This allows
-  // consumers to update their knowledge of the player's currentTime, playState,
-  // ... dynamically.
-  //
-  // Calling startAutoRefresh will start the automatic refreshing of the state,
-  // and calling stopAutoRefresh will stop it.
-  // Once the automatic refresh has been started, the AnimationPlayerFront emits
-  // "updated-state" events everytime the state changes.
-  //
-  // Note that given the time-related nature of animations, the actual state
-  // changes a lot more often than "updated-state" events are emitted. This is
-  // to avoid making many protocol requests.
-
   /**
-   * Start auto-refreshing this player's state.
-   * @param {Number} interval Optional auto-refresh timer interval to override
-   * the default value.
+   * Refresh the current state of this animation on the client from information
+   * found on the server. Doesn't return anything, just stores the new state.
    */
-  startAutoRefresh: function(interval=PLAYER_DEFAULT_AUTO_REFRESH_TIMEOUT) {
-    if (this.autoRefreshTimer) {
-      return;
-    }
-
-    this.autoRefreshTimer = setInterval(() => {
-      // Save the refresh promise for tests. The tests need to detect when the
-      // last request completes or they might finish too early.
-      // Storing the latest Promise is enough to know that there is no pending
-      // requests left as p.js guarantees the last request will get the reply
-      // last.
-      this.pendingRefreshStatePromise = this.refreshState();
-      this.pendingRefreshStatePromise.then(() => {
-        this.pendingRefreshStatePromise = null;
-      });
-    }, interval);
-  },
-
-  /**
-   * Stop auto-refreshing this player's state.
-   */
-  stopAutoRefresh: function() {
-    if (!this.autoRefreshTimer) {
-      return;
-    }
-
-    clearInterval(this.autoRefreshTimer);
-    this.autoRefreshTimer = null;
-  },
-
-  /**
-   * Called automatically when auto-refresh is on. Doesn't return anything, but
-   * emits the "updated-state" event.
-   * @param {Boolean} forceRefresh This function is normally called by the
-   * auto-refresh loop. If you need to call it but are not using this mechanism,
-   * then set this to true.
-   */
-  refreshState: Task.async(function*(forceRefresh) {
+  refreshState: Task.async(function*() {
     let data = yield this.getCurrentState();
-
-    // By the time the new state is received, auto-refresh might be stopped.
-    if (!this.autoRefreshTimer && !forceRefresh) {
-      return;
-    }
-
     if (this.currentStateHasChanged) {
       this.state = data;
-      events.emit(this, this.AUTO_REFRESH_EVENT, this.state);
     }
   }),
 
diff --git a/toolkit/devtools/server/tests/browser/browser.ini b/toolkit/devtools/server/tests/browser/browser.ini
index 931bd7d601f8..7e81f0915fb7 100644
--- a/toolkit/devtools/server/tests/browser/browser.ini
+++ b/toolkit/devtools/server/tests/browser/browser.ini
@@ -26,8 +26,6 @@ support-files =
 [browser_animation_actors_03.js]
 [browser_animation_actors_04.js]
 skip-if = e10s # Bug 1183605 - toolkit/devtools/server/tests/browser/ tests are still disabled in E10S
-[browser_animation_actors_05.js]
-skip-if = e10s # Bug 1183605 - toolkit/devtools/server/tests/browser/ tests are still disabled in E10S
 [browser_animation_actors_06.js]
 [browser_animation_actors_07.js]
 [browser_animation_actors_08.js]
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_05.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_05.js
deleted file mode 100644
index 515b4b9adf4c..000000000000
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_05.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/* 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/ */
-
-"use strict";
-
-// Check that AnimationPlayers can auto-refresh their states.
-
-const {AnimationsFront} = require("devtools/server/actors/animation");
-const {InspectorFront} = require("devtools/server/actors/inspector");
-
-add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
-
-  initDebuggerServer();
-  let client = new DebuggerClient(DebuggerServer.connectPipe());
-  let form = yield connectDebuggerClient(client);
-  let inspector = InspectorFront(client, form);
-  let walker = yield inspector.getWalker();
-  let front = AnimationsFront(client, form);
-
-  let node = yield walker.querySelector(walker.rootNode, ".simple-animation");
-  let [player] = yield front.getAnimationPlayersForNode(node);
-
-  ok(player.startAutoRefresh, "The startAutoRefresh function is available");
-  ok(player.stopAutoRefresh, "The stopAutoRefresh function is available");
-  ok(player.state, "The current state is stored on the player");
-
-  info("Subscribe to the refresh event, start the auto-refresh and wait for " +
-    "a few events to be received");
-
-  player.startAutoRefresh();
-
-  let onAllEventsReceived = new Promise(resolve => {
-    let expected = 5;
-    let previousState = player.initialState;
-    let onNewState = state => {
-      ok(state.currentTime !== previousState.currentTime,
-        "The time has changed since the last update");
-      expected --;
-      previousState = state;
-      if (expected === 0) {
-        player.off(player.AUTO_REFRESH_EVENT, onNewState);
-
-        info("Stop the auto-refresh");
-        player.stopAutoRefresh();
-
-        if (player.pendingRefreshStatePromise) {
-          // A new request was fired before we had chance to stop it. Wait for
-          // it to complete.
-          player.pendingRefreshStatePromise.then(resolve);
-        } else {
-          resolve();
-        }
-      }
-    };
-    player.on(player.AUTO_REFRESH_EVENT, onNewState);
-  });
-
-  yield onAllEventsReceived;
-
-  yield closeDebuggerClient(client);
-  gBrowser.removeCurrentTab();
-});
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_07.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_07.js
index cdbaa52ed679..95f01c4a3f1e 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_07.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_07.js
@@ -11,7 +11,7 @@ const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
@@ -37,10 +37,11 @@ function* playerHasCompleteStateAtAllTimes(walker, front) {
   // Get the state over and over again and check that the object returned
   // contains all keys.
   // Normally, only the currentTime will have changed in between 2 calls.
-  for (let i = 0; i < 10; i ++) {
+  for (let i = 0; i < 10; i++) {
     let state = yield player.getCurrentState();
     keys.forEach(key => {
-      ok(typeof state[key] !== "undefined", "The state retrieved has key " + key);
+      ok(typeof state[key] !== "undefined",
+         "The state retrieved has key " + key);
     });
   }
 }
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_09.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_09.js
index 1b6950d0b4eb..be85cac06ccf 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_09.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_09.js
@@ -14,7 +14,7 @@ const URL = MAIN_DOMAIN + "animation.html";
 
 add_task(function*() {
   info("Creating a test document with 2 iframes containing animated nodes");
-  let doc = yield addTab("data:text/html;charset=utf-8," +
+  yield addTab("data:text/html;charset=utf-8," +
                          "<iframe id='i1' src='" + URL + "'></iframe>" +
                          "<iframe id='i2' src='" + URL + "'></iframe>");
 
@@ -48,7 +48,8 @@ function* checkState(front, nodeFront, playState) {
   let [player] = yield front.getAnimationPlayersForNode(nodeFront);
   yield player.ready;
   let state = yield player.getCurrentState();
-  is(state.playState, playState, "The playState of the test node is " + playState);
+  is(state.playState, playState,
+     "The playState of the test node is " + playState);
 }
 
 function* getNodeInFrame(walker, frameSelector, nodeSelector) {
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_10.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_10.js
index 1d56b32cc975..e9395e2497e6 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_10.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_10.js
@@ -14,7 +14,7 @@ const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
@@ -31,8 +31,8 @@ add_task(function*() {
     {attributeName: "class", newValue: "multiple-animations-2"}
   ]);
 
-  info("Get the list of players, by the time this executes, the first, short, " +
-    "animation should have ended.");
+  info("Get the list of players, by the time this executes, the first, " +
+       "short, animation should have ended.");
   let players = yield front.getAnimationPlayersForNode(node);
   if (players.length === 3) {
     info("The short animation hasn't ended yet, wait for a bit.");
@@ -45,13 +45,19 @@ add_task(function*() {
 
   is(players.length, 2, "2 animations remain on the node");
 
-  is(players[0].state.duration, 1000, "The duration of the first animation is correct");
-  is(players[0].state.delay, 2000, "The delay of the first animation is correct");
-  is(players[0].state.iterationCount, null, "The iterationCount of the first animation is correct");
+  is(players[0].state.duration, 1000,
+     "The duration of the first animation is correct");
+  is(players[0].state.delay, 2000,
+     "The delay of the first animation is correct");
+  is(players[0].state.iterationCount, null,
+     "The iterationCount of the first animation is correct");
 
-  is(players[1].state.duration, 3000, "The duration of the second animation is correct");
-  is(players[1].state.delay, 1000, "The delay of the second animation is correct");
-  is(players[1].state.iterationCount, 100, "The iterationCount of the second animation is correct");
+  is(players[1].state.duration, 3000,
+     "The duration of the second animation is correct");
+  is(players[1].state.delay, 1000,
+     "The delay of the second animation is correct");
+  is(players[1].state.iterationCount, 100,
+     "The iterationCount of the second animation is correct");
 
   yield closeDebuggerClient(client);
   gBrowser.removeCurrentTab();
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_12.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_12.js
index 79a5137f0710..51ca3b251c62 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_12.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_12.js
@@ -10,7 +10,7 @@ const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_13.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_13.js
index 43d30f85c899..afc64c76fefc 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_13.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_13.js
@@ -11,7 +11,7 @@ const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_14.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_14.js
index 5155306d9384..735c5481460e 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_14.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_14.js
@@ -13,7 +13,7 @@ const {AnimationsFront} = require("devtools/server/actors/animation");
 const {InspectorFront} = require("devtools/server/actors/inspector");
 
 add_task(function*() {
-  let doc = yield addTab(MAIN_DOMAIN + "animation.html");
+  yield addTab(MAIN_DOMAIN + "animation.html");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());
diff --git a/toolkit/devtools/server/tests/browser/browser_animation_actors_16.js b/toolkit/devtools/server/tests/browser/browser_animation_actors_16.js
index c0cf90ab8fb9..81a0159c51ca 100644
--- a/toolkit/devtools/server/tests/browser/browser_animation_actors_16.js
+++ b/toolkit/devtools/server/tests/browser/browser_animation_actors_16.js
@@ -14,8 +14,8 @@ const URL = MAIN_DOMAIN + "animation.html";
 
 add_task(function*() {
   info("Creating a test document with 2 iframes containing animated nodes");
-  let doc = yield addTab("data:text/html;charset=utf-8," +
-                         "<iframe id='iframe' src='" + URL + "'></iframe>");
+  yield addTab("data:text/html;charset=utf-8," +
+               "<iframe id='iframe' src='" + URL + "'></iframe>");
 
   initDebuggerServer();
   let client = new DebuggerClient(DebuggerServer.connectPipe());

From 343faa19a9103c5dc3c3df06013708a4a487182e Mon Sep 17 00:00:00 2001
From: Panos Astithas <past@mozilla.com>
Date: Fri, 18 Sep 2015 17:37:01 +0300
Subject: [PATCH 19/19] Bug 1206102 - Make the TP list names more flexible from
 a l10n standpoint. r=paolo f=flod

---
 browser/components/preferences/blocklists.js  | 43 +++++++++++++------
 .../preferences/preferences.properties        | 16 +++++--
 modules/libpref/init/all.js                   |  2 +
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/browser/components/preferences/blocklists.js b/browser/components/preferences/blocklists.js
index aeb7d4685513..19159c1e4876 100644
--- a/browser/components/preferences/blocklists.js
+++ b/browser/components/preferences/blocklists.js
@@ -5,8 +5,8 @@
 Components.utils.import("resource://gre/modules/Services.jsm");
 const TEST_LIST = "test-track-simple";
 const TRACK_SUFFIX = "-track-digest256";
-const NAME_SUFFIX = ".name";
 const TRACKING_TABLE_PREF = "urlclassifier.trackingTable";
+const LISTS_PREF_BRANCH = "browser.safebrowsing.provider.mozilla.lists.";
 
 let gBlocklistManager = {
   _type: "",
@@ -22,7 +22,11 @@ let gBlocklistManager = {
     },
     getCellText: function (row, column) {
       if (column.id == "listCol") {
-        return gBlocklistManager._blockLists[row].name;
+        let list = gBlocklistManager._blockLists[row];
+        let desc = list.description ? list.description : "";
+        let text = gBlocklistManager._bundle.getFormattedString("mozNameTemplate",
+                                                                [list.name, desc]);
+        return text;
       }
       return "";
     },
@@ -144,22 +148,12 @@ let gBlocklistManager = {
   _loadBlockLists: function () {
     this._blockLists = [];
 
-    // Get the active block list.
-    let activeList = this._getActiveList();
-
     // Load blocklists into a table.
-    let branch = Services.prefs.getBranch("browser.safebrowsing.provider.mozilla.lists.");
+    let branch = Services.prefs.getBranch(LISTS_PREF_BRANCH);
     let itemArray = branch.getChildList("");
     for (let itemName of itemArray) {
-      if (!itemName.endsWith(NAME_SUFFIX)) {
-        continue;
-      }
       try {
-        let nameKey = branch.getCharPref(itemName);
-        let name = this._bundle.getString(nameKey);
-        let id = itemName.replace(NAME_SUFFIX, "");
-        let selected = activeList === id;
-        this._blockLists.push({ name, id, selected });
+        this._createOrUpdateBlockList(itemName);
       } catch (e) {
         // Ignore bogus or missing list name.
         continue;
@@ -169,6 +163,27 @@ let gBlocklistManager = {
     this._updateTree();
   },
 
+  _createOrUpdateBlockList: function (itemName) {
+    let branch = Services.prefs.getBranch(LISTS_PREF_BRANCH);
+    let key = branch.getCharPref(itemName);
+    let value = this._bundle.getString(key);
+
+    let suffix = itemName.slice(itemName.lastIndexOf("."));
+    let id = itemName.replace(suffix, "");
+    let list = this._blockLists.find(el => el.id === id);
+    if (!list) {
+      list = { id };
+      this._blockLists.push(list);
+    }
+    list.selected = this._getActiveList() === id;
+
+    // Get the property name from the suffix (e.g. ".name" -> "name").
+    let prop = suffix.slice(1);
+    list[prop] = value;
+
+    return list;
+  },
+
   _updateTree: function () {
     this._tree = document.getElementById("blocklistsTree");
     this._view._rowCount = this._blockLists.length;
diff --git a/browser/locales/en-US/chrome/browser/preferences/preferences.properties b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
index 2d0be63f0c79..2ccf05da47a5 100644
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -32,10 +32,20 @@ invalidURITitle=Invalid Hostname Entered
 
 blockliststext=You can choose which list Firefox will use to block Web elements that may track your browsing activity.
 blockliststitle=Block Lists
+# LOCALIZATION NOTE (mozNameTemplate): This template constructs the name of the
+# block list in the block lists dialog. It combines the list name and
+# description.
+#   e.g. mozNameTemplate : "Standard (Recommended). This list does a pretty good job."
+#   %1$S = list name (fooName), %2$S = list descriptive text (fooDesc)
+mozNameTemplate=%1$S %2$S
 # LOCALIZATION NOTE (mozstdName, etc.): These labels appear in the tracking
-# protection block lists dialog. They are the names of the block lists.
-mozstdName=Disconnect.me basic protection (Recommended). Allows some trackers so websites function properly.
-mozfullName=Disconnect.me strict protection. Blocks known trackers. Some sites may not function properly.
+# protection block lists dialog, mozNameTemplate is used to create the final
+# string. Note that in the future these two strings (name, desc) could be
+# displayed on two different lines.
+mozstdName=Disconnect.me basic protection (Recommended).
+mozstdDesc=Allows some trackers so websites function properly.
+mozfullName=Disconnect.me strict protection.
+mozfullDesc=Blocks known trackers. Some sites may not function properly.
 # LOCALIZATION NOTE (blocklistChangeRequiresRestart, restartTitle): %S = brandShortName
 blocklistChangeRequiresRestart=%S must restart to change block lists.
 shouldRestartTitle=Restart %S
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index a036b50e67f6..5fb3554c2777 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -4780,7 +4780,9 @@ pref("browser.safebrowsing.provider.mozilla.gethashURL", "https://shavar.service
 // Block lists for tracking protection. The name values will be used as the keys
 // to lookup the localized name in preferences.properties.
 pref("browser.safebrowsing.provider.mozilla.lists.mozstd.name", "mozstdName");
+pref("browser.safebrowsing.provider.mozilla.lists.mozstd.description", "mozstdDesc");
 pref("browser.safebrowsing.provider.mozilla.lists.mozfull.name", "mozfullName");
+pref("browser.safebrowsing.provider.mozilla.lists.mozfull.description", "mozfullDesc");
 
 // Turn off Spatial navigation by default.
 pref("snav.enabled", false);
