Bug 1579768 - Debugger paused overlay is too obtrusive and cant be disabled. r=davidwalsh

Differential Revision: https://phabricator.services.mozilla.com/D46494

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/utils/prefs.js

@@ -139,7 +139,7 @@ export const features = new PrefsHelper("devtools.debugger.features", {
   eventListenersBreakpoints: ["Bool", "event-listeners-breakpoints"],
   domMutationBreakpoints: ["Bool", "dom-mutation-breakpoints"],
   logPoints: ["Bool", "log-points"],
-  showOverlayStepButtons: ["Bool", "overlay-step-buttons"],
+  showOverlay: ["Bool", "overlay"],
   inlinePreview: ["Bool", "inline-preview"],
   watchpoints: ["Bool", "watchpoints"],
 });

devtools/client/framework/toolbox.js

@@ -591,8 +591,8 @@ Toolbox.prototype = {
       ignoreCaughtExceptions: Services.prefs.getBoolPref(
         "devtools.debugger.ignore-caught-exceptions"
       ),
-      showOverlayStepButtons: Services.prefs.getBoolPref(
-        "devtools.debugger.features.overlay-step-buttons"
+      shouldShowOverlay: Services.prefs.getBoolPref(
+        "devtools.debugger.features.overlay"
       ),
       skipBreakpoints: Services.prefs.getBoolPref(
         "devtools.debugger.skip-pausing"

devtools/client/preferences/debugger.js

@@ -83,6 +83,6 @@ pref("devtools.debugger.features.original-blackbox", true);
 pref("devtools.debugger.features.event-listeners-breakpoints", true);
 pref("devtools.debugger.features.dom-mutation-breakpoints", true);
 pref("devtools.debugger.features.log-points", true);
-pref("devtools.debugger.features.overlay-step-buttons", true);
+pref("devtools.debugger.features.overlay", true);
 pref("devtools.debugger.features.inline-preview", true);
 pref("devtools.debugger.features.watchpoints", false);

devtools/server/actors/highlighters/paused-debugger.js

@@ -22,7 +22,6 @@ const L10N = new LocalizationHelper(STRINGS_URI);
  */
 function PausedDebuggerOverlay(highlighterEnv, options = {}) {
   this.env = highlighterEnv;
-  this.showOverlayStepButtons = options.showOverlayStepButtons;
   this.resume = options.resume;
   this.stepOver = options.stepOver;
 
@@ -78,54 +77,52 @@ PausedDebuggerOverlay.prototype = {
       prefix,
     });
 
-    if (this.showOverlayStepButtons) {
-      createNode(window, {
-        parent: toolbar,
-        attributes: {
-          id: "divider",
-          class: "divider",
-        },
-        prefix,
-      });
+    createNode(window, {
+      parent: toolbar,
+      attributes: {
+        id: "divider",
+        class: "divider",
+      },
+      prefix,
+    });
 
-      const stepWrapper = createNode(window, {
-        parent: toolbar,
-        attributes: {
-          id: "step-button-wrapper",
-          class: "step-button-wrapper",
-        },
-        prefix,
-      });
+    const stepWrapper = createNode(window, {
+      parent: toolbar,
+      attributes: {
+        id: "step-button-wrapper",
+        class: "step-button-wrapper",
+      },
+      prefix,
+    });
 
-      createNode(window, {
-        nodeType: "button",
-        parent: stepWrapper,
-        attributes: {
-          id: "step-button",
-          class: "step-button",
-        },
-        prefix,
-      });
+    createNode(window, {
+      nodeType: "button",
+      parent: stepWrapper,
+      attributes: {
+        id: "step-button",
+        class: "step-button",
+      },
+      prefix,
+    });
 
-      const resumeWrapper = createNode(window, {
-        parent: toolbar,
-        attributes: {
-          id: "resume-button-wrapper",
-          class: "resume-button-wrapper",
-        },
-        prefix,
-      });
+    const resumeWrapper = createNode(window, {
+      parent: toolbar,
+      attributes: {
+        id: "resume-button-wrapper",
+        class: "resume-button-wrapper",
+      },
+      prefix,
+    });
 
-      createNode(window, {
-        nodeType: "button",
-        parent: resumeWrapper,
-        attributes: {
-          id: "resume-button",
-          class: "resume-button",
-        },
-        prefix,
-      });
-    }
+    createNode(window, {
+      nodeType: "button",
+      parent: resumeWrapper,
+      attributes: {
+        id: "resume-button",
+        class: "resume-button",
+      },
+      prefix,
+    });
 
     return container;
   },

devtools/server/actors/thread.js

@@ -426,7 +426,6 @@ const ThreadActor = ActorClassWithSpec(threadSpec, {
     const env = new HighlighterEnvironment();
     env.initFromTargetActor(this._parent);
     const highlighter = new PausedDebuggerOverlay(env, {
-      showOverlayStepButtons: this._options.showOverlayStepButtons,
       resume: () => this.onResume({ resumeLimit: null }),
       stepOver: () => this.onResume({ resumeLimit: { type: "next" } }),
     });
@@ -436,6 +435,7 @@ const ThreadActor = ActorClassWithSpec(threadSpec, {
 
   showOverlay() {
     if (
+      this._options.shouldShowOverlay &&
       this.isPaused() &&
       this._parent.on &&
       this._parent.window.document &&