Bug 1503703 - Style progress overlay. r=bhackett
authorJason Laster <jlaster@mozilla.com>
Wed, 31 Oct 2018 17:30:18 -0400
changeset 443964 bb810bff5427a3356a8200de53a46177926e1262
parent 443963 03f53b24739d33faa6e345bc1781a9a2578edb25
child 443965 3a81ecf22e6fe82dc808fb986e559e9222134386
push id34977
push userdvarga@mozilla.com
push dateThu, 01 Nov 2018 22:29:07 +0000
treeherdermozilla-central@2dd516cee24f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbhackett
bugs1503703
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1503703 - Style progress overlay. r=bhackett Differential Revision: https://phabricator.services.mozilla.com/D10425
devtools/server/actors/replay/graphics.js
modules/libpref/init/all.js
--- 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", "");