--- a/devtools/server/actors/replay/graphics.js
+++ b/devtools/server/actors/replay/graphics.js
@@ -20,91 +20,50 @@ const CC = Components.Constructor;
 const sandbox = Cu.Sandbox(CC("@mozilla.org/systemprincipal;1", "nsIPrincipal")());
 Cu.evalInSandbox(
   "Components.utils.import('resource://gre/modules/jsdebugger.jsm');" +
   "addDebuggerToGlobal(this);",
   sandbox
 );
 const RecordReplayControl = sandbox.RecordReplayControl;
 
-// State for dragging the overlay.
-let dragx, dragy;
-
 // Windows in the middleman process are initially set up as about:blank pages.
 // This method fills them in with a canvas filling the tab, and an overlay that
 // can be displayed over that canvas.
 function setupContents(window) {
   // The middlemanOverlay element is shown when the active child is replaying.
-  const overlay = window.middlemanOverlay = window.document.createElement("div");
+  const overlay = (window.middlemanOverlay = window.document.createElement("div"));
   overlay.style.position = "absolute";
-  overlay.style.border = "medium solid #000000";
-  overlay.style.backgroundColor = "#BBCCCC";
-
-  // The middlemanPosition element is contained in the overlay and shows the
-  // current position in the recording.
-  const position = window.middlemanPosition = window.document.createElement("div");
-  position.innerText = "";
-  position.style.textAlign = "center";
-  position.style.padding = "5px 5px 0px 5px";
-  overlay.appendChild(position);
+  overlay.style.visibility = "hidden";
+  overlay.style.backgroundColor = "#F9F9FA";
+  overlay.style.width = "100%";
+  overlay.style.height = "29px";
+  overlay.style.left = "0px";
+  overlay.style.bottom = "0px";
+  overlay.style["border-top"] = "1px solid #DCE1E4";
 
   // The middlemanProgressBar element is contained in the overlay and shows any
   // progress made on the current operation.
-  const progressBar =
-    window.middlemanProgressBar = window.document.createElement("canvas");
-  progressBar.width = 100;
-  progressBar.height = 5;
-  progressBar.getContext("2d").fillStyle = "white";
-  progressBar.getContext("2d").fillRect(0, 0, 100, 5);
-  progressBar.style.padding = "5px 5px 5px 5px";
-
+  const progressBar = window.document.createElement("div");
+  progressBar.style.position = "relative";
+  progressBar.style.width = "calc(100% - 20px)";
+  progressBar.style.height = "6px";
+  progressBar.style.background = "#DCDCDC";
+  progressBar.style.margin = "11px 10px";
   overlay.appendChild(progressBar);
-  window.document.body.prepend(overlay);
-
-  overlay.onmousedown = window.middlemanMouseDown = function(e) {
-    e.preventDefault();
-    dragx = e.clientX;
-    dragy = e.clientY;
-    window.document.onmouseup = window.middlemanMouseUp;
-    window.document.onmousemove = window.middlemanMouseMove;
-  };
 
-  window.middlemanMouseMove = function(e) {
-    // Compute the new position of the overlay per the current drag operation.
-    // Don't allow the overlay to be dragged outside the window.
-    e.preventDefault();
-    const canvas = window.middlemanCanvas;
-    let diffx = e.clientX - dragx;
-    let diffy = e.clientY - dragy;
-    const newTop = () => overlay.offsetTop + diffy;
-    if (newTop() < 0) {
-      diffy -= newTop();
-    }
-    const maxTop = canvas.height / window.devicePixelRatio;
-    if (newTop() + overlay.offsetHeight >= maxTop) {
-      diffy -= newTop() + overlay.offsetHeight - maxTop;
-    }
-    overlay.style.top = newTop() + "px";
-    const newLeft = () => overlay.offsetLeft + diffx;
-    if (newLeft() < 0) {
-      diffx -= newLeft();
-    }
-    const maxLeft = canvas.width / window.devicePixelRatio;
-    if (newLeft() + overlay.offsetWidth >= maxLeft) {
-      diffx -= newLeft() + overlay.offsetWidth - maxLeft;
-    }
-    overlay.style.left = (overlay.offsetLeft + diffx) + "px";
-    dragx += diffx;
-    dragy += diffy;
-  };
+  const progress = (window.middlemanProgress = window.document.createElement("div"));
+  progress.style.position = "absolute";
+  progress.style.width = "0";
+  progress.style.height = "100%";
+  progress.style.background = "#B7B6B6";
 
-  window.middlemanMouseUp = function(e) {
-    window.document.onmouseup = null;
-    window.document.onmousemove = null;
-  };
+  progressBar.appendChild(progress);
+
+  window.document.body.prepend(overlay);
 
   // The middlemanCanvas element fills the tab's contents.
   const canvas = window.middlemanCanvas = window.document.createElement("canvas");
   canvas.style.position = "absolute";
   window.document.body.style.margin = "0px";
   window.document.body.prepend(canvas);
 }
 
@@ -169,24 +128,27 @@ function UpdateCanvas(buffer, width, hei
       updateWindowCanvas(window, buffer, width, height, hadFailure);
     }
   } catch (e) {
     dump("Middleman Graphics UpdateCanvas Exception: " + e + "\n");
   }
 }
 
 function updateWindowOverlay(window) {
-  const overlay = getOverlay(window);
+  if (!Services.prefs.getBoolPref("devtools.recordreplay.timeline.enabled")) {
+    return;
+  }
 
-  const position = RecordReplayControl.recordingPosition();
+  const overlay = getOverlay(window);
+  const position = RecordReplayControl.recordingPosition() || 1;
   if (position === undefined) {
     overlay.style.visibility = "hidden";
   } else {
     overlay.style.visibility = "visible";
-    window.middlemanPosition.innerText = (Math.round(position * 10000) / 100) + "%";
+    window.middlemanProgress.style.width = (Math.round(position * 10000) / 100) + "%";
   }
 }
 
 // Entry point for when we need to update the overlay's contents or visibility.
 // eslint-disable-next-line no-unused-vars
 function UpdateOverlay() {
   try {
     // Paint to all windows we can find. Hopefully there is only one.

--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -1092,16 +1092,17 @@ pref("toolkit.dump.emit", false);
 
 // Enable recording/replaying executions.
 #if defined(XP_MACOSX) && defined(NIGHTLY_BUILD)
 pref("devtools.recordreplay.enabled", true);
 pref("devtools.recordreplay.enableRewinding", true);
 #endif
 
 pref("devtools.recordreplay.mvp.enabled", false);
+pref("devtools.recordreplay.timeline.enabled", false);
 
 // view source
 pref("view_source.syntax_highlight", true);
 pref("view_source.wrap_long_lines", false);
 pref("view_source.editor.path", "");
 // allows to add further arguments to the editor; use the %LINE% placeholder
 // for jumping to a specific line (e.g. "/line:%LINE%" or "--goto %LINE%")
 pref("view_source.editor.args", "");