Backed out 3 changesets (bug 1743347, bug 1591025) for causing mochitest failures on browser_metrics_debugger.js. CLOSED TREE
authorcriss <ccozmuta@mozilla.com>
Thu, 02 Dec 2021 08:53:06 +0200
changeset 600884 c6b7e343048bd01cfd8f5df563795debcd558fdf
parent 600883 48c568e6d4d4497f7886264efb3fe93346f4341f
child 600885 17dcb13e5c10be8341ca1f28d8a37ed8bf85dae1
push id154030
push userccozmuta@mozilla.com
push dateThu, 02 Dec 2021 06:53:44 +0000
treeherderautoland@c6b7e343048b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1743347, 1591025
milestone96.0a1
backs out48c568e6d4d4497f7886264efb3fe93346f4341f
cf7717dfbd7c1d296d009f27cc53e5e424640fe3
fd097d484cfb14cf282bd4f0d35c736f51030e1d
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
Backed out 3 changesets (bug 1743347, bug 1591025) for causing mochitest failures on browser_metrics_debugger.js. CLOSED TREE Backed out changeset 48c568e6d4d4 (bug 1591025) Backed out changeset cf7717dfbd7c (bug 1743347) Backed out changeset fd097d484cfb (bug 1743347)
devtools/client/debugger/images/resume.svg
devtools/client/debugger/images/stepOver.svg
devtools/client/debugger/panel.js
devtools/client/debugger/src/components/App.js
devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
devtools/client/debugger/src/components/shared/AccessibleImage.css
devtools/client/debugger/src/components/test/WhyPaused.spec.js
devtools/client/debugger/src/components/test/__snapshots__/WhyPaused.spec.js.snap
devtools/client/debugger/src/main.js
devtools/client/debugger/src/utils/bootstrap.js
devtools/client/debugger/src/utils/pause/why.js
devtools/client/debugger/test/mochitest/browser_dbg-breaking.js
devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js
devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
devtools/client/debugger/test/mochitest/browser_dbg-pause-exceptions.js
devtools/client/debugger/test/mochitest/browser_dbg-stepping.js
devtools/client/debugger/test/mochitest/browser_dbg-watchpoints.js
devtools/client/debugger/test/mochitest/browser_dbg-xhr-breakpoints.js
devtools/client/debugger/test/mochitest/examples/doc-dom-mutation.html
devtools/client/debugger/test/mochitest/examples/dom-mutation.js
devtools/client/jar.mn
devtools/client/locales/en-US/debugger.properties
devtools/server/actors/highlighters.css
devtools/server/actors/highlighters/paused-debugger.js
devtools/shared/constants.js
devtools/shared/images/resume.svg
devtools/shared/images/stepOver.svg
devtools/shared/jar.mn
devtools/shared/locales/en-US/debugger-paused-reasons.ftl
devtools/shared/locales/jar.mn
python/l10n/fluent_migrations/bug_1743347_devtools_debugger_whyPaused.py
rename from devtools/shared/images/resume.svg
rename to devtools/client/debugger/images/resume.svg
rename from devtools/shared/images/stepOver.svg
rename to devtools/client/debugger/images/stepOver.svg
--- a/devtools/client/debugger/panel.js
+++ b/devtools/client/debugger/panel.js
@@ -1,16 +1,13 @@
 /* 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/>. */
 
 const { MultiLocalizationHelper } = require("devtools/shared/l10n");
-const {
-  FluentL10n,
-} = require("devtools/client/shared/fluent-l10n/fluent-l10n");
 
 loader.lazyRequireGetter(
   this,
   "openContentLink",
   "devtools/client/shared/link",
   true
 );
 loader.lazyRequireGetter(
@@ -43,34 +40,28 @@ async function getNodeFront(gripOrFront,
   const inspectorFront = await toolbox.target.getFront("inspector");
   return inspectorFront.getNodeFrontFromNodeGrip(gripOrFront);
 }
 
 class DebuggerPanel {
   constructor(iframeWindow, toolbox, commands) {
     this.panelWin = iframeWindow;
     this.panelWin.L10N = L10N;
-
     this.toolbox = toolbox;
     this.commands = commands;
   }
 
   async open() {
-    // whypaused-* strings are in devtools/shared as they're used in the PausedDebuggerOverlay as well
-    const fluentL10n = new FluentL10n();
-    await fluentL10n.init(["devtools/shared/debugger-paused-reasons.ftl"]);
-
     const {
       actions,
       store,
       selectors,
       client,
     } = await this.panelWin.Debugger.bootstrap({
       commands: this.commands,
-      fluentBundles: fluentL10n.getBundles(),
       resourceCommand: this.toolbox.resourceCommand,
       workers: {
         sourceMaps: this.toolbox.sourceMapService,
         evaluationsParser: this.toolbox.parserService,
       },
       panel: this,
     });
 
--- a/devtools/client/debugger/src/components/App.js
+++ b/devtools/client/debugger/src/components/App.js
@@ -57,17 +57,16 @@ class App extends Component {
       shortcutsModalEnabled: false,
       startPanelSize: 0,
       endPanelSize: 0,
     };
   }
 
   getChildContext() {
     return {
-      fluentBundles: this.props.fluentBundles,
       toolboxDoc: this.props.toolboxDoc,
       shortcuts,
       l10n: L10N,
     };
   }
 
   componentDidMount() {
     horizontalLayoutBreakpoint.addListener(this.onLayoutChange);
@@ -296,17 +295,16 @@ class App extends Component {
     );
   }
 }
 
 App.childContextTypes = {
   toolboxDoc: PropTypes.object,
   shortcuts: PropTypes.object,
   l10n: PropTypes.object,
-  fluentBundles: PropTypes.array,
 };
 
 const mapStateToProps = state => ({
   selectedSource: getSelectedSource(state),
   startPanelCollapsed: getPaneCollapse(state, "start"),
   endPanelCollapsed: getPaneCollapse(state, "end"),
   activeSearch: getActiveSearch(state),
   quickOpenEnabled: getQuickOpenEnabled(state),
--- a/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
@@ -1,19 +1,13 @@
 /* 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/>. */
 
-const {
-  LocalizationProvider,
-  Localized,
-} = require("devtools/client/shared/vendor/fluent-react");
-
 import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
 import { connect } from "../../utils/connect";
 import AccessibleImage from "../shared/AccessibleImage";
 import actions from "../../actions";
 
 import Reps from "devtools/client/shared/components/reps/index";
 const {
   REPS: { Rep },
   MODE,
@@ -99,23 +93,19 @@ class WhyPaused extends PureComponent {
 
       return (
         <div>
           <div className="message">{why.message}</div>
           <div className="mutationNode">
             {ancestorRep}
             {ancestorGrip ? (
               <span className="why-paused-ancestor">
-                <Localized
-                  id={
-                    action === "remove"
-                      ? "whypaused-mutation-breakpoint-removed"
-                      : "whypaused-mutation-breakpoint-added"
-                  }
-                ></Localized>
+                {action === "remove"
+                  ? L10N.getStr("whyPaused.mutationBreakpointRemoved")
+                  : L10N.getStr("whyPaused.mutationBreakpointAdded")}
                 {targetRep}
               </span>
             ) : (
               targetRep
             )}
           </div>
         </div>
       );
@@ -125,46 +115,38 @@ class WhyPaused extends PureComponent {
       return <div className="message">{message}</div>;
     }
 
     return null;
   }
 
   render() {
     const { endPanelCollapsed, why } = this.props;
-    const { fluentBundles } = this.context;
     const reason = getPauseReason(why);
 
     if (!why || !reason || endPanelCollapsed) {
       return <div className={this.state.hideWhyPaused} />;
     }
+
     return (
-      // We're rendering the LocalizationProvider component from here and not in an upper
-      // component because it does set a new context, overriding the context that we set
-      // in the first place in <App>, which breaks some components.
-      // This should be fixed in Bug 1743155.
-      <LocalizationProvider bundles={fluentBundles || []}>
-        <div className="pane why-paused">
-          <div>
-            <div className="info icon">
-              <AccessibleImage className="info" />
-            </div>
-            <div className="pause reason">
-              <Localized id={reason}></Localized>
-              {this.renderMessage(why)}
-            </div>
+      <div className="pane why-paused">
+        <div>
+          <div className="info icon">
+            <AccessibleImage className="info" />
+          </div>
+          <div className="pause reason">
+            {L10N.getStr(reason)}
+            {this.renderMessage(why)}
           </div>
         </div>
-      </LocalizationProvider>
+      </div>
     );
   }
 }
 
-WhyPaused.contextTypes = { fluentBundles: PropTypes.array };
-
 const mapStateToProps = state => ({
   endPanelCollapsed: getPaneCollapse(state, "end"),
   why: getWhy(state, getCurrentThread(state)),
 });
 
 export default connect(mapStateToProps, {
   openElementInInspector: actions.openElementInInspectorCommand,
   highlightDomElement: actions.highlightDomElement,
--- a/devtools/client/debugger/src/components/shared/AccessibleImage.css
+++ b/devtools/client/debugger/src/components/shared/AccessibleImage.css
@@ -150,17 +150,17 @@ html[dir="rtl"] .img.more-tabs {
   mask-image: url(chrome://devtools/content/debugger/images/reload.svg);
 }
 
 .img.regex-match {
   mask-image: url(chrome://devtools/content/debugger/images/regex-match.svg);
 }
 
 .img.resume {
-  mask-image: url(chrome://devtools/content/shared/images/resume.svg);
+  mask-image: url(chrome://devtools/content/debugger/images/resume.svg);
 }
 
 .img.search {
   mask-image: url(chrome://devtools/content/debugger/images/search.svg);
 }
 
 .img.shortcuts {
   mask-image: url(chrome://devtools/content/debugger/images/help.svg);
@@ -174,17 +174,17 @@ html[dir="rtl"] .img.more-tabs {
   mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg);
 }
 
 .img.stepOut {
   mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg);
 }
 
 .img.stepOver {
-  mask-image: url(chrome://devtools/content/shared/images/stepOver.svg);
+  mask-image: url(chrome://devtools/content/debugger/images/stepOver.svg);
 }
 
 .img.tab {
   mask-image: url(chrome://devtools/content/debugger/images/tab.svg);
 }
 
 .img.whole-word-match {
   mask-image: url(chrome://devtools/content/debugger/images/whole-word-match.svg);
--- a/devtools/client/debugger/src/components/test/WhyPaused.spec.js
+++ b/devtools/client/debugger/src/components/test/WhyPaused.spec.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import React from "react";
 import { shallow } from "enzyme";
 import WhyPaused from "../SecondaryPanes/WhyPaused.js";
 
 function render(why, delay) {
   const props = { why, delay };
+
   const component = shallow(<WhyPaused.WrappedComponent {...props} />);
 
   return { component, props };
 }
 
 describe("WhyPaused", () => {
   it("should pause reason with message", () => {
     const why = {
--- a/devtools/client/debugger/src/components/test/__snapshots__/WhyPaused.spec.js.snap
+++ b/devtools/client/debugger/src/components/test/__snapshots__/WhyPaused.spec.js.snap
@@ -1,103 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WhyPaused should pause reason with message 1`] = `
-<LocalizationProvider
-  bundles={Array []}
+<div
+  className="pane why-paused"
 >
-  <div
-    className="pane why-paused"
-  >
-    <div>
+  <div>
+    <div
+      className="info icon"
+    >
+      <AccessibleImage
+        className="info"
+      />
+    </div>
+    <div
+      className="pause reason"
+    >
+      Paused on breakpoint
       <div
-        className="info icon"
+        className="message"
       >
-        <AccessibleImage
-          className="info"
-        />
-      </div>
-      <div
-        className="pause reason"
-      >
-        <Localized
-          id="whypaused-breakpoint"
-        />
-        <div
-          className="message"
-        >
-          bla is hit
-        </div>
+        bla is hit
       </div>
     </div>
   </div>
-</LocalizationProvider>
+</div>
 `;
 
 exports[`WhyPaused should show an empty div when there is no pause reason 1`] = `
 <div
   className=""
 />
 `;
 
 exports[`WhyPaused should show pause reason with exception details 1`] = `
-<LocalizationProvider
-  bundles={Array []}
+<div
+  className="pane why-paused"
 >
-  <div
-    className="pane why-paused"
-  >
-    <div>
+  <div>
+    <div
+      className="info icon"
+    >
+      <AccessibleImage
+        className="info"
+      />
+    </div>
+    <div
+      className="pause reason"
+    >
+      Paused on exception
       <div
-        className="info icon"
+        className="message warning"
       >
-        <AccessibleImage
-          className="info"
-        />
-      </div>
-      <div
-        className="pause reason"
-      >
-        <Localized
-          id="whypaused-exception"
-        />
-        <div
-          className="message warning"
-        >
-          ReferenceError: o is not defined
-        </div>
+        ReferenceError: o is not defined
       </div>
     </div>
   </div>
-</LocalizationProvider>
+</div>
 `;
 
 exports[`WhyPaused should show pause reason with exception string 1`] = `
-<LocalizationProvider
-  bundles={Array []}
+<div
+  className="pane why-paused"
 >
-  <div
-    className="pane why-paused"
-  >
-    <div>
+  <div>
+    <div
+      className="info icon"
+    >
+      <AccessibleImage
+        className="info"
+      />
+    </div>
+    <div
+      className="pause reason"
+    >
+      Paused on exception
       <div
-        className="info icon"
+        className="message warning"
       >
-        <AccessibleImage
-          className="info"
-        />
-      </div>
-      <div
-        className="pause reason"
-      >
-        <Localized
-          id="whypaused-exception"
-        />
-        <div
-          className="message warning"
-        >
-          Not Available
-        </div>
+        Not Available
       </div>
     </div>
   </div>
-</LocalizationProvider>
+</div>
 `;
--- a/devtools/client/debugger/src/main.js
+++ b/devtools/client/debugger/src/main.js
@@ -67,17 +67,16 @@ async function loadInitialState() {
     breakpoints,
     eventListenerBreakpoints,
     sources,
   };
 }
 
 export async function bootstrap({
   commands,
-  fluentBundles,
   resourceCommand,
   workers: panelWorkers,
   panel,
 }) {
   verifyPrefSchema();
 
   const initialState = await loadInitialState();
   const workers = bootstrapWorkers(panelWorkers);
@@ -104,20 +103,17 @@ export async function bootstrap({
     store,
     actions,
     selectors,
     workers,
     targetCommand: commands.targetCommand,
     client: firefox.clientCommands,
   });
 
-  bootstrapApp(store, panel.getToolboxStore(), {
-    fluentBundles,
-    toolboxDoc: panel.panelWin.parent.document,
-  });
+  bootstrapApp(store, panel);
   await connected;
   return { store, actions, selectors, client: firefox.clientCommands };
 }
 
 export async function destroy() {
   firefox.onDisconnect();
   unmountRoot();
   teardownWorkers();
--- a/devtools/client/debugger/src/utils/bootstrap.js
+++ b/devtools/client/debugger/src/utils/bootstrap.js
@@ -59,39 +59,32 @@ export function bootstrapWorkers(panelWo
 }
 
 export function teardownWorkers() {
   prettyPrint.stop();
   parser.stop();
   search.stop();
 }
 
-/**
- * Create and mount the root App component.
- *
- * @param {ReduxStore} store
- * @param {ReduxStore} toolboxStore
- * @param {Object} appComponentAttributes
- * @param {Array} appComponentAttributes.fluentBundles
- * @param {Document} appComponentAttributes.toolboxDoc
- */
-export function bootstrapApp(store, toolboxStore, appComponentAttributes = {}) {
+export function bootstrapApp(store, panel) {
   const mount = getMountElement();
   if (!mount) {
     return;
   }
 
+  const toolboxDoc = panel.panelWin.parent.document;
+
   ReactDOM.render(
     React.createElement(
       Provider,
       { store },
       React.createElement(
         ToolboxProvider,
-        { store: toolboxStore },
-        React.createElement(App, appComponentAttributes)
+        { store: panel.getToolboxStore() },
+        React.createElement(App, { toolboxDoc })
       )
     ),
     mount
   );
 }
 
 function getMountElement() {
   return document.querySelector("#mount");
--- a/devtools/client/debugger/src/utils/pause/why.js
+++ b/devtools/client/debugger/src/utils/pause/why.js
@@ -1,25 +1,49 @@
 /* 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/>. */
 
-import { DEBUGGER_PAUSED_REASONS_L10N_MAPPING } from "devtools/shared/constants";
+// Map protocol pause "why" reason to a valid L10N key
+// These are the known unhandled reasons:
+// "breakpointConditionThrown", "clientEvaluated"
+// "interrupted", "attached"
+const reasons = {
+  debuggerStatement: "whyPaused.debuggerStatement",
+  breakpoint: "whyPaused.breakpoint",
+  exception: "whyPaused.exception",
+  resumeLimit: "whyPaused.resumeLimit",
+  breakpointConditionThrown: "whyPaused.breakpointConditionThrown",
+  eventBreakpoint: "whyPaused.eventBreakpoint",
+  getWatchpoint: "whyPaused.getWatchpoint",
+  setWatchpoint: "whyPaused.setWatchpoint",
+  mutationBreakpoint: "whyPaused.mutationBreakpoint",
+  interrupted: "whyPaused.interrupted",
+
+  // V8
+  DOM: "whyPaused.breakpoint",
+  EventListener: "whyPaused.pauseOnDOMEvents",
+  XHR: "whyPaused.XHR",
+  promiseRejection: "whyPaused.promiseRejection",
+  assert: "whyPaused.assert",
+  debugCommand: "whyPaused.debugCommand",
+  other: "whyPaused.other",
+};
 
 export function getPauseReason(why) {
   if (!why) {
     return null;
   }
 
   const reasonType = why.type;
-  if (!DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reasonType]) {
+  if (!reasons[reasonType]) {
     console.log("Please file an issue: reasonType=", reasonType);
   }
 
-  return DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reasonType];
+  return reasons[reasonType];
 }
 
 export function isException(why) {
   return why?.type === "exception";
 }
 
 export function isInterrupted(why) {
   return why?.type === "interrupted";
--- a/devtools/client/debugger/test/mochitest/browser_dbg-breaking.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-breaking.js
@@ -18,33 +18,23 @@ add_task(async function() {
   await addBreakpoint(dbg, "scripts.html", 21);
 
   reload(dbg);
 
   await waitForDispatch(dbg.store, "NAVIGATE");
   await waitForSelectedSource(dbg, "doc-scripts.html");
   await waitForPaused(dbg);
 
-  let whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, "Paused on breakpoint");
-
   assertPausedLocation(dbg);
   await resume(dbg);
 
   info("Create an eval script that pauses itself.");
   invokeInTab("doEval");
   await waitForPaused(dbg);
 
-  whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, "Paused on debugger statement");
-
   await resume(dbg);
   const source = getSelectedSource();
   ok(!source.url, "It is an eval source");
 
   await addBreakpoint(dbg, source, 5);
   invokeInTab("evaledFunc");
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
--- a/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-dom-mutation-breakpoints.js
@@ -16,16 +16,17 @@ const DMB_TEST_URL =
   "https://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-dom-mutation.html";
 
 async function enableMutationBreakpoints() {
   await pushPref("devtools.debugger.features.dom-mutation-breakpoints", true);
   await pushPref("devtools.markup.mutationBreakpoints.enabled", true);
   await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true);
 }
 
+
 add_task(async function() {
   // Enable features
   await enableMutationBreakpoints();
   info("Switches over to the inspector pane");
 
   const { inspector, toolbox } = await openInspectorForURL(DMB_TEST_URL);
 
   info("Selecting the body node");
@@ -62,61 +63,30 @@ add_task(async function() {
   checkbox.click();
   await waitFor(() => checkbox.checked);
 
   info("Changing attribute to trigger debugger pause");
   SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
     content.document.querySelector("#attribute").click();
   });
   await waitForPaused(dbg);
-  let whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(
-    whyPaused,
-    `Paused on DOM mutation\nDOM Mutation: 'attributeModified'\nbody`
-  );
-
   await resume(dbg);
 
   info("Changing style to trigger debugger pause");
   SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
     content.document.querySelector("#style-attribute").click();
   });
   await waitForPaused(dbg);
   await resume(dbg);
 
-  info("Adding element in subtree to trigger debugger pause");
+  info("Changing subtree to trigger debugger pause");
   SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
-    content.document.querySelector("#add-in-subtree").click();
+    content.document.querySelector("#subtree").click();
   });
   await waitForPaused(dbg);
-  whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(
-    whyPaused,
-    `Paused on DOM mutation\nDOM Mutation: 'subtreeModified'\nbodyAdded:div`
-  );
-
-  await resume(dbg);
-
-  info("Removing element in subtree to trigger debugger pause");
-  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
-    content.document.querySelector("#remove-in-subtree").click();
-  });
-  await waitForPaused(dbg);
-  whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(
-    whyPaused,
-    `Paused on DOM mutation\nDOM Mutation: 'subtreeModified'\nbodyRemoved:div`
-  );
-
   await resume(dbg);
 
   info("Blackboxing the source prevents debugger pause");
   await waitForSource(dbg, "dom-mutation.original.js");
 
   const source = findSource(dbg, "dom-mutation.original.js");
 
   await selectSource(dbg, source);
@@ -132,9 +102,10 @@ add_task(async function() {
 
   await selectSource(dbg, source);
   await clickElement(dbg, "blackbox");
   await waitForDispatch(dbg.store, "BLACKBOX");
 
   info("Removing breakpoints works");
   dbg.win.document.querySelector(".dom-mutation-list .close-btn").click();
   await waitForAllElements(dbg, "domMutationItem", 1, true);
+
 });
--- a/devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
@@ -23,22 +23,16 @@ add_task(async function() {
     "timer.timeout.set",
     "timer.timeout.fire",
     "script.source.firstStatement",
   ]);
 
   invokeInTab("clickHandler");
   await waitForPaused(dbg);
   assertPauseLocation(dbg, 12);
-
-  const whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, `Paused on event breakpoint\nDOM 'click' event`);
-
   await resume(dbg);
 
   invokeInTab("xhrHandler");
   await waitForPaused(dbg);
   assertPauseLocation(dbg, 20);
   await resume(dbg);
 
   invokeInTab("timerHandler");
@@ -91,16 +85,12 @@ function assertPauseLocation(dbg, line, 
   is(location.sourceId, source.id, `correct sourceId`);
   is(location.line, line, `correct line`);
 
   assertPausedLocation(dbg);
 }
 
 async function invokeOnElement(selector, action) {
   await SpecialPowers.focus(gBrowser.selectedBrowser);
-  await SpecialPowers.spawn(
-    gBrowser.selectedBrowser,
-    [selector, action],
-    (_selector, _action) => {
-      content.document.querySelector(_selector)[_action]();
-    }
-  );
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [selector, action], (_selector, _action) => {
+    content.document.querySelector(_selector)[_action]();
+  });
 }
--- a/devtools/client/debugger/test/mochitest/browser_dbg-pause-exceptions.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-pause-exceptions.js
@@ -17,22 +17,16 @@ add_task(async function() {
   await uncaughtException();
   ok(!isPaused(dbg));
 
   log("2. Test pausing on an uncaught exception");
   await togglePauseOnExceptions(dbg, true, true);
   uncaughtException();
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
-
-  const whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, `Paused on exception\nunreachable`);
-
   await resume(dbg);
 
   log("2.b Test throwing the same uncaught exception pauses again");
   await togglePauseOnExceptions(dbg, true, true);
   uncaughtException();
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
   await resume(dbg);
--- a/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-stepping.js
@@ -6,22 +6,16 @@
 requestLongerTimeout(5);
 
 add_task(async function test() {
   const dbg = await initDebugger("big-sourcemap.html", "big-sourcemap");
   invokeInTab("hitDebugStatement");
   await waitForPaused(dbg, "bundle.js");
 
   await stepIn(dbg);
-
-  const whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, `Paused while stepping`);
-
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
--- a/devtools/client/debugger/test/mochitest/browser_dbg-watchpoints.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-watchpoints.js
@@ -28,20 +28,16 @@ add_task(async function() {
   await addedWatchpoint;
   popup.hidePopup();
 
   await resume(dbg);
   await waitForPaused(dbg);
   await waitForState(dbg, () => dbg.selectors.getSelectedInlinePreviews());
   assertPausedAtSourceAndLine(dbg, sourceId, 17);
   is(await getScopeValue(dbg, 5), "3");
-  const whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, `Paused on property get\nobj.b`);
 
   info("Resume and wait to pause at the access to b in the first `obj.b;`");
   await resume(dbg);
   await waitForPaused(dbg);
   assertPausedAtSourceAndLine(dbg, sourceId, 19);
 
   info("Remove the get watchpoint on b");
   const removedWatchpoint1 = waitForDispatch(dbg.store, "REMOVE_WATCHPOINT");
--- a/devtools/client/debugger/test/mochitest/browser_dbg-xhr-breakpoints.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-xhr-breakpoints.js
@@ -7,39 +7,33 @@ add_task(async function() {
 
   const dbg = await initDebugger("doc-xhr.html", "fetch.js");
 
   await addXHRBreakpoint(dbg, "doc", "GET");
 
   await SpecialPowers.spawn(
     gBrowser.selectedBrowser,
     [EXAMPLE_REMOTE_URL + "doc-early-xhr.html"],
-    remoteUrl => {
+    (remoteUrl) => {
       const firstIframe = content.document.createElement("iframe");
       content.document.body.append(firstIframe);
       firstIframe.src = remoteUrl;
     }
   );
 
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
-
-  const whyPaused = await waitFor(
-    () => dbg.win.document.querySelector(".why-paused")?.innerText
-  );
-  is(whyPaused, `Paused on XMLHttpRequest`);
-
   await resume(dbg);
 
   await dbg.actions.removeXHRBreakpoint(0);
 
   await SpecialPowers.spawn(
     gBrowser.selectedBrowser,
     [EXAMPLE_REMOTE_URL + "doc-early-xhr.html"],
-    remoteUrl => {
+    (remoteUrl) => {
       const secondIframe = content.document.createElement("iframe");
       content.document.body.append(secondIframe);
       secondIframe.src = remoteUrl;
     }
   );
 
   // Wait for some time, in order to wait for it to be paused
   // in case we regress
@@ -59,16 +53,17 @@ add_task(async function() {
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
   await resume(dbg);
 
   await dbg.actions.removeXHRBreakpoint(0);
   await invokeInTab("main", "doc-xhr.html");
   assertNotPaused(dbg);
 
+
   info("Test that we do not pause on different method type");
   await addXHRBreakpoint(dbg, "doc", "POST");
   await invokeInTab("main", "doc-xhr.html");
   assertNotPaused(dbg);
 });
 
 // Tests the "pause on any URL" checkbox works properly
 add_task(async function() {
@@ -157,19 +152,17 @@ async function removeXHRBreakpoint(dbg, 
     closeButtons[index].click();
   }
 
   await waitForDispatch(dbg.store, "REMOVE_XHR_BREAKPOINT");
 }
 
 function getXHRBreakpointsElements(dbg) {
   return [
-    ...dbg.win.document.querySelectorAll(
-      ".xhr-breakpoints-pane .xhr-container"
-    ),
+    ...dbg.win.document.querySelectorAll(".xhr-breakpoints-pane .xhr-container")
   ];
 }
 
 function getXHRBreakpointLabels(elements) {
   return elements.map(element => element.title);
 }
 
 function getXHRBreakpointCheckbox(dbg) {
--- a/devtools/client/debugger/test/mochitest/examples/doc-dom-mutation.html
+++ b/devtools/client/debugger/test/mochitest/examples/doc-dom-mutation.html
@@ -6,14 +6,13 @@
   <head>
     <meta charset="utf-8"/>
     <title>Debugger test page</title>
   </head>
 
   <body>
     <button title="Hello" id="attribute" onclick="changeAttribute()">Click me!</button>
     <button id="style-attribute" onclick="changeStyleAttribute()">Click me!</button>
-    <button id="add-in-subtree" onclick="addDivToBody()">add div to body</button>
-    <button id="remove-in-subtree" onclick="removeDivInBody()">remove div in body</button>
+    <button id="subtree" onclick="changeSubtree()">Click me!</button>
     <button id="blackbox" onclick="changeAttribute();&#xA;debugger;&#xA;//# sourceURL=click.js">Click me!</button>
     <script src="dom-mutation.js"></script>
   </body>
 </html>
--- a/devtools/client/debugger/test/mochitest/examples/dom-mutation.js
+++ b/devtools/client/debugger/test/mochitest/examples/dom-mutation.js
@@ -2,17 +2,12 @@ function changeAttribute() {
   const title = document.body.title === "Goodbye" ? "Hello" : "Goodbye";
   document.body.setAttribute("title", title);
 }
 
 function changeStyleAttribute() {
   document.body.style.color = "blue";
 }
 
-function addDivToBody() {
+function changeSubtree() {
   document.body.appendChild(document.createElement("div"));
 }
-
-function removeDivInBody() {
-  document.body.querySelector("div").remove();
-}
-
 //# sourceMappingURL=dom-mutation.js.map
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -186,42 +186,42 @@ devtools.jar:
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-chevron.svg (themes/images/command-chevron.svg)
     skin/images/rules-view-light-mode-simulation.svg (themes/images/rules-view-light-mode-simulation.svg)
     skin/images/rules-view-dark-mode-simulation.svg (themes/images/rules-view-dark-mode-simulation.svg)
     skin/images/rules-view-print-simulation.svg (themes/images/rules-view-print-simulation.svg)
     skin/markup.css (themes/markup.css)
 
-    # Inspector
+    # Inspector 
     content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
     content/inspector/components/InspectorTabPanel.css (inspector/components/InspectorTabPanel.css)
     content/styleeditor/index.xhtml (styleeditor/index.xhtml)
     content/inspector/index.xhtml (inspector/index.xhtml)
     content/responsive/toolbar.xhtml (responsive/toolbar.xhtml)
     content/responsive/index.css (responsive/index.css)
     content/responsive/responsive-browser.css (responsive/responsive-browser.css)
     content/responsive/images/grippers.svg (responsive/images/grippers.svg)
     content/responsive/images/rotate-viewport.svg (responsive/images/rotate-viewport.svg)
     content/responsive/images/touch-events.svg (responsive/images/touch-events.svg)
 
     # Storage
     content/storage/index.xhtml (storage/index.xhtml)
 
-    # Source Editor
+    # Source Editor 
     content/shared/sourceeditor/codemirror/addon/dialog/dialog.css (shared/sourceeditor/codemirror/addon/dialog/dialog.css)
     content/shared/sourceeditor/codemirror/keymap/emacs.js (shared/sourceeditor/codemirror/keymap/emacs.js)
     content/shared/sourceeditor/codemirror/keymap/vim.js (shared/sourceeditor/codemirror/keymap/vim.js)
     content/shared/sourceeditor/codemirror/keymap/sublime.js (shared/sourceeditor/codemirror/keymap/sublime.js)
     content/shared/sourceeditor/codemirror/codemirror.bundle.js (shared/sourceeditor/codemirror/codemirror.bundle.js)
     content/shared/sourceeditor/codemirror/lib/codemirror.css (shared/sourceeditor/codemirror/lib/codemirror.css)
     content/shared/sourceeditor/codemirror/mozilla.css (shared/sourceeditor/codemirror/mozilla.css)
     content/shared/sourceeditor/codemirror/cmiframe.html (shared/sourceeditor/codemirror/cmiframe.html)
 
-    # Debugger
+    # Debugger 
     content/debugger/index.html (debugger/index.html)
     content/debugger/dist/vendors.css (debugger/dist/vendors.css)
     content/debugger/images/arrow-down.svg (debugger/images/arrow-down.svg)
     content/debugger/images/arrow-up.svg (debugger/images/arrow-up.svg)
     content/debugger/images/arrow.svg (debugger/images/arrow.svg)
     content/debugger/images/blackBox.svg (debugger/images/blackBox.svg)
     content/debugger/images/breadcrumbs-divider.svg (debugger/images/breadcrumbs-divider.svg)
     content/debugger/images/breakpoint.svg (debugger/images/breakpoint.svg)
@@ -242,19 +242,21 @@ devtools.jar:
     content/debugger/images/next.svg (debugger/images/next.svg)
     content/debugger/images/pane-collapse.svg (debugger/images/pane-collapse.svg)
     content/debugger/images/pane-expand.svg (debugger/images/pane-expand.svg)
     content/debugger/images/pause.svg (debugger/images/pause.svg)
     content/debugger/images/plus.svg (debugger/images/plus.svg)
     content/debugger/images/prettyPrint.svg (debugger/images/prettyPrint.svg)
     content/debugger/images/regex-match.svg (debugger/images/regex-match.svg)
     content/debugger/images/reload.svg (debugger/images/reload.svg)
+    content/debugger/images/resume.svg (debugger/images/resume.svg)
     content/debugger/images/search.svg (debugger/images/search.svg)
     content/debugger/images/stepIn.svg (debugger/images/stepIn.svg)
     content/debugger/images/stepOut.svg (debugger/images/stepOut.svg)
+    content/debugger/images/stepOver.svg (debugger/images/stepOver.svg)
     content/debugger/images/tab.svg (debugger/images/tab.svg)
     content/debugger/images/webconsole-logpoint.svg (debugger/images/webconsole-logpoint.svg)
     content/debugger/images/whole-word-match.svg (debugger/images/whole-word-match.svg)
     content/debugger/images/window.svg (debugger/images/window.svg)
     content/debugger/images/worker.svg (debugger/images/worker.svg)
     content/debugger/images/sources/aframe.svg (debugger/images/sources/aframe.svg)
     content/debugger/images/sources/angular.svg (debugger/images/sources/angular.svg)
     content/debugger/images/sources/babel.svg (debugger/images/sources/babel.svg)
@@ -397,17 +399,17 @@ devtools.jar:
     content/aboutdebugging/src/components/debugtarget/TemporaryExtensionInstallSection.css (aboutdebugging/src/components/debugtarget/TemporaryExtensionInstallSection.css)
     content/aboutdebugging/src/components/shared/IconLabel.css (aboutdebugging/src/components/shared/IconLabel.css)
     content/aboutdebugging/src/components/shared/Message.css (aboutdebugging/src/components/shared/Message.css)
     content/aboutdebugging/src/components/sidebar/Sidebar.css (aboutdebugging/src/components/sidebar/Sidebar.css)
     content/aboutdebugging/src/components/sidebar/SidebarFixedItem.css (aboutdebugging/src/components/sidebar/SidebarFixedItem.css)
     content/aboutdebugging/src/components/sidebar/SidebarItem.css (aboutdebugging/src/components/sidebar/SidebarItem.css)
     content/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css (aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css)
 
-    # Webconsole
+    # Webconsole 
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole/editor.svg (themes/images/webconsole/editor.svg)
     skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
     skin/images/webconsole/navigation.svg (themes/images/webconsole/navigation.svg)
     skin/images/webconsole/reverse-search.svg (themes/images/webconsole/reverse-search.svg)
     skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)
     skin/images/webconsole/run.svg (themes/images/webconsole/run.svg)
     content/webconsole/index.html (webconsole/index.html)
--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@@ -823,16 +823,101 @@ symbolSearch.searchModifier.regex=Regex
 symbolSearch.searchModifier.caseSensitive=Case sensitive
 
 # LOCALIZATION NOTE(symbolSearch.searchModifier.wholeWord): A search option
 # when searching text in a file
 symbolSearch.searchModifier.wholeWord=Whole word
 
 experimental=This is an experimental feature
 
+# LOCALIZATION NOTE (whyPaused.debuggerStatement): The text that is displayed
+# in a info block explaining how the debugger is currently paused due to a `debugger`
+# statement in the code
+whyPaused.debuggerStatement=Paused on debugger statement
+
+# LOCALIZATION NOTE (whyPaused.breakpoint): The text that is displayed
+# in a info block explaining how the debugger is currently paused on a breakpoint
+whyPaused.breakpoint=Paused on breakpoint
+
+# LOCALIZATION NOTE (whyPaused.eventBreakpoint): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an event
+# breakpoint.
+whyPaused.eventBreakpoint=Paused on event breakpoint
+
+# LOCALIZATION NOTE (whyPaused.exception): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an exception
+whyPaused.exception=Paused on exception
+
+# LOCALIZATION NOTE (whyPaused.mutationBreakpoint): The text that is displayed
+# in a info block explaining how the debugger is currently paused on a
+# DOM mutation breakpoint
+whyPaused.mutationBreakpoint=Paused on DOM mutation
+
+# LOCALIZATION NOTE (whyPaused.mutationBreakpointAdded): The text that
+# is displayed to describe an added node which triggers a subtree modification
+whyPaused.mutationBreakpointAdded=Added:
+
+# LOCALIZATION NOTE (whyPaused.mutationBreakpointRemoved): The text that
+# is displayed to describe a removed node which triggers a subtree modification
+whyPaused.mutationBreakpointRemoved=Removed:
+
+# LOCALIZATION NOTE (whyPaused.interrupted): The text that is displayed
+# in a info block explaining how the debugger is currently paused at
+# a JS execution
+whyPaused.interrupted=Paused at Execution
+
+# LOCALIZATION NOTE (whyPaused.resumeLimit): The text that is displayed
+# in a info block explaining how the debugger is currently paused while stepping
+# in or out of the stack
+whyPaused.resumeLimit=Paused while stepping
+
+# LOCALIZATION NOTE (whyPaused.pauseOnDOMEvents): The text that is displayed
+# in a info block explaining how the debugger is currently paused on a
+# dom event
+whyPaused.pauseOnDOMEvents=Paused on event listener
+
+# LOCALIZATION NOTE (whyPaused.breakpointConditionThrown): The text that is displayed
+# in an info block when evaluating a conditional breakpoint throws an error
+whyPaused.breakpointConditionThrown=Error with conditional breakpoint
+
+# LOCALIZATION NOTE (whyPaused.XHR): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an
+# xml http request
+whyPaused.XHR=Paused on XMLHttpRequest
+
+# LOCALIZATION NOTE (whyPaused.promiseRejection): The text that is displayed
+# in a info block explaining how the debugger is currently paused on a
+# promise rejection
+whyPaused.promiseRejection=Paused on promise rejection
+
+# LOCALIZATION NOTE (whyPaused.getWatchpoint): The text that is displayed
+# in a info block explaining how the debugger is currently paused at a
+# watchpoint on an object property
+whyPaused.getWatchpoint=Paused on property get
+
+# LOCALIZATION NOTE (whyPaused.setWatchpoint): The text that is displayed
+# in an info block explaining how the debugger is currently paused at a
+# watchpoint on an object property
+whyPaused.setWatchpoint=Paused on property set
+
+# LOCALIZATION NOTE (whyPaused.assert): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an
+# assert
+whyPaused.assert=Paused on assertion
+
+# LOCALIZATION NOTE (whyPaused.debugCommand): The text that is displayed
+# in a info block explaining how the debugger is currently paused on a
+# debugger statement
+whyPaused.debugCommand=Paused on debugged function
+
+# LOCALIZATION NOTE (whyPaused.other): The text that is displayed
+# in a info block explaining how the debugger is currently paused on an event
+# listener breakpoint set
+whyPaused.other=Debugger paused
+
 # LOCALIZATION NOTE (ctrl): The text that is used for documenting
 # keyboard shortcuts that use the control key
 ctrl=Ctrl
 
 # LOCALIZATION NOTE (anonymousFunction): this string is used to display
 # JavaScript functions that have no given name - they are said to be
 # anonymous.
 anonymousFunction=<anonymous>
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -670,18 +670,17 @@
 }
 
 :-moz-native-anonymous .paused-dbg-root[overlay] {
   background-color: var(--overlay-background);
   pointer-events: auto;
 }
 
 :-moz-native-anonymous .paused-dbg-toolbar {
-  /* Show the toolbar at the top, but not too high to prevent it overlaping OS toolbar on Android */
-  margin-top: 30px;
+  margin-top: 15px;
   display: inline-flex;
   user-select: none;
 
   color: var(--text-color);
   border-radius: 2px;
   box-shadow: var(--toolbar-box-shadow);
   background-color: var(--toolbar-background);
   border: 1px solid var(--toolbar-border);
@@ -723,24 +722,24 @@
 :-moz-native-anonymous .paused-dbg-resume-button-wrapper {
   margin-left: 2px;
   margin-right: 2px;
 }
 
 :-moz-native-anonymous button.paused-dbg-step-button {
   margin-left: 6px;
   margin-right: 6px;
-  mask-image: url(chrome://devtools/content/shared/images/stepOver.svg);
+  mask-image: url(chrome://devtools/content/debugger/images/stepOver.svg);
   padding: 0;
 }
 
 :-moz-native-anonymous button.paused-dbg-resume-button {
   margin-right: 6px;
   margin-right: 6px;
-  mask-image: url(chrome://devtools/content/shared/images/resume.svg);
+  mask-image: url(chrome://devtools/content/debugger/images/resume.svg);
   padding: 0;
 }
 
 :-moz-native-anonymous .paused-dbg-step-button-wrapper.hover,
 :-moz-native-anonymous .paused-dbg-resume-button-wrapper.hover {
   background-color: var(--toolbar-border);
   border-radius: 2px;
 }
--- a/devtools/server/actors/highlighters/paused-debugger.js
+++ b/devtools/server/actors/highlighters/paused-debugger.js
@@ -3,30 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const {
   CanvasFrameAnonymousContentHelper,
 } = require("devtools/server/actors/highlighters/utils/markup");
 
-loader.lazyGetter(this, "PausedReasonsBundle", () => {
-  return new Localization(
-    ["devtools/shared/debugger-paused-reasons.ftl"],
-    true
-  );
+loader.lazyGetter(this, "L10N", () => {
+  const { LocalizationHelper } = require("devtools/shared/l10n");
+  const STRINGS_URI = "devtools/client/locales/debugger.properties";
+  return new LocalizationHelper(STRINGS_URI);
 });
 
-loader.lazyRequireGetter(
-  this,
-  "DEBUGGER_PAUSED_REASONS_L10N_MAPPING",
-  "devtools/shared/constants",
-  true
-);
-
 /**
  * The PausedDebuggerOverlay is a class that displays a semi-transparent mask on top of
  * the whole page and a toolbar at the top of the page.
  * This is used to signal to users that script execution is current paused.
  * The toolbar is used to display the reason for the pause in script execution as well as
  * buttons to resume or step through the program.
  */
 function PausedDebuggerOverlay(highlighterEnv, options = {}) {
@@ -209,33 +201,40 @@ PausedDebuggerOverlay.prototype = {
     return this.markup.getElement(this.ID_CLASS_PREFIX + id);
   },
 
   show(reason) {
     if (this.env.isXUL || !reason) {
       return false;
     }
 
+    try {
+      reason = L10N.getStr(`whyPaused.${reason}`);
+    } catch (e) {
+      // This is a temporary workaround (See Bug 1591025).
+      // This actors relies on a client side properties file. This file will not
+      // be available when debugging Firefox for Android / Gecko View.
+      // The highlighter also shows buttons that use client only images and are
+      // therefore invisible when remote debugging a mobile Firefox.
+      return false;
+    }
+
     // Only track mouse movement when the the overlay is shown
     // Prevents mouse tracking when the user isn't paused
     const { pageListenerTarget } = this.env;
     pageListenerTarget.addEventListener("mousemove", this);
 
     // Show the highlighter's root element.
     const root = this.getElement("root");
     root.removeAttribute("hidden");
     root.setAttribute("overlay", "true");
 
     // Set the text to appear in the toolbar.
     const toolbar = this.getElement("toolbar");
-    this.getElement("reason").setTextContent(
-      PausedReasonsBundle.formatValueSync(
-        DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reason]
-      )
-    );
+    this.getElement("reason").setTextContent(reason);
     toolbar.removeAttribute("hidden");
 
     // When the debugger pauses execution in a page, events will not be delivered
     // to any handlers added to elements on that page. So here we use the
     // document's setSuppressedEventListener interface to still be able to act on mouse
     // events (they'll be handled by the `handleEvent` method)
     this.env.window.document.setSuppressedEventListener(this);
     return true;
@@ -246,14 +245,11 @@ PausedDebuggerOverlay.prototype = {
       return;
     }
 
     const { pageListenerTarget } = this.env;
     pageListenerTarget.removeEventListener("mousemove", this);
 
     // Hide the overlay.
     this.getElement("root").setAttribute("hidden", "true");
-    // Remove the hover state
-    this.getElement("step-button-wrapper").classList.remove("hover");
-    this.getElement("resume-button-wrapper").classList.remove("hover");
   },
 };
 exports.PausedDebuggerOverlay = PausedDebuggerOverlay;
--- a/devtools/shared/constants.js
+++ b/devtools/shared/constants.js
@@ -118,49 +118,21 @@ const COMPATIBILITY_ISSUE_TYPE = {
 const ELEMENT_STYLE = 100;
 
 /* WebConsole Panel ========================================================= */
 
 const MESSAGE_CATEGORY = {
   CSS_PARSER: "CSS Parser",
 };
 
-/* Debugger ============================================================= */
-
-// Map protocol pause "why" reason to a valid L10N key (in devtools/shared/locales/en-US/debugger-paused-reasons.ftl)
-const DEBUGGER_PAUSED_REASONS_L10N_MAPPING = {
-  debuggerStatement: "whypaused-debugger-statement",
-  breakpoint: "whypaused-breakpoint",
-  exception: "whypaused-exception",
-  resumeLimit: "whypaused-resume-limit",
-  breakpointConditionThrown: "whypaused-breakpoint-condition-thrown",
-  eventBreakpoint: "whypaused-event-breakpoint",
-  getWatchpoint: "whypaused-get-watchpoint",
-  setWatchpoint: "whypaused-set-watchpoint",
-  mutationBreakpoint: "whypaused-mutation-breakpoint",
-  interrupted: "whypaused-interrupted",
-
-  // V8
-  DOM: "whypaused-breakpoint",
-  EventListener: "whypaused-pause-on-dom-events",
-  XHR: "whypaused-xhr",
-  promiseRejection: "whypaused-promise-rejection",
-  assert: "whypaused-assert",
-  debugCommand: "whypaused-debug-command",
-  other: "whypaused-other",
-};
-
-/* Exports ============================================================= */
-
 module.exports = {
   accessibility: {
     AUDIT_TYPE,
     ISSUE_TYPE,
     SCORES,
     SIMULATION_TYPE,
   },
   COMPATIBILITY_ISSUE_TYPE,
-  DEBUGGER_PAUSED_REASONS_L10N_MAPPING,
   MESSAGE_CATEGORY,
   style: {
     ELEMENT_STYLE,
   },
 };
--- a/devtools/shared/jar.mn
+++ b/devtools/shared/jar.mn
@@ -1,20 +1,15 @@
 # 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/.
 
 devtools.jar:
 %   content devtools %content/
     content/shared/webextension-fallback.html (webextension-fallback.html)
-# Those images are in devtools/shared (and not in devtools/client/debugger/images like
-# the other debugger images) because they are used in both the debugger UI and in the
-# PausedDebuggerOverlay (which is in devtools/server).
-    content/shared/images/resume.svg (images/resume.svg)
-    content/shared/images/stepOver.svg (images/stepOver.svg)
 %   resource devtools %modules/devtools/
 %   resource devtools-client-jsonview resource://devtools/client/jsonview/ contentaccessible=yes
 %   resource devtools-client-shared resource://devtools/client/shared/ contentaccessible=yes
 %   content devtools-jsonview-styles %modules/devtools/client/jsonview/css/ contentaccessible=yes
 # The typical approach would be to list all the resource files in this manifest
 # for installation.  Instead of doing this, use the DevToolsModules syntax via
 # moz.build files to do the installation so that we can enforce correct paths
 # based on source tree location.
deleted file mode 100644
--- a/devtools/shared/locales/en-US/debugger-paused-reasons.ftl
+++ /dev/null
@@ -1,85 +0,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/.
-
-### These strings are used inside the Debugger which is available from the Web
-### Developer sub-menu -> 'Debugger', as well as in the "Paused Debugger
-### Overlay" that is displayed in the content page when it pauses.
-
-### The correct localization of this file might be to keep it in
-### English, or another language commonly spoken among web developers.
-### You want to make that choice consistent across the developer tools.
-### A good criteria is the language in which you'd find the best
-### documentation on web development on the web.
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused due to a `debugger` statement in the code
-whypaused-debugger-statement = Paused on debugger statement
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on a breakpoint
-whypaused-breakpoint = Paused on breakpoint
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on an event breakpoint.
-whypaused-event-breakpoint = Paused on event breakpoint
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on an exception
-whypaused-exception = Paused on exception
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on a DOM mutation breakpoint
-whypaused-mutation-breakpoint = Paused on DOM mutation
-
-# The text that is displayed to describe an added node which triggers a subtree
-# modification
-whypaused-mutation-breakpoint-added = Added:
-
-# The text that is displayed to describe a removed node which triggers a subtree
-# modification
-whypaused-mutation-breakpoint-removed = Removed:
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused at a JS execution
-whypaused-interrupted = Paused at Execution
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused while stepping in or out of the stack
-whypaused-resume-limit = Paused while stepping
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on a dom event
-whypaused-pause-on-dom-events = Paused on event listener
-
-# The text that is displayed in an info block when evaluating a conditional
-# breakpoint throws an error
-whypaused-breakpoint-condition-thrown = Error with conditional breakpoint
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on an xml http request
-whypaused-xhr = Paused on XMLHttpRequest
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on a promise rejection
-whypaused-promise-rejection = Paused on promise rejection
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused at a watchpoint on an object property
-whypaused-get-watchpoint = Paused on property get
-
-# The text that is displayed in an info block explaining how the debugger is
-# currently paused at a watchpoint on an object property
-whypaused-set-watchpoint = Paused on property set
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on an assert
-whypaused-assert = Paused on assertion
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on a debugger statement
-whypaused-debug-command = Paused on debugged function
-
-# The text that is displayed in a info block explaining how the debugger is
-# currently paused on an event listener breakpoint set
-whypaused-other = Debugger paused
--- a/devtools/shared/locales/jar.mn
+++ b/devtools/shared/locales/jar.mn
@@ -1,11 +1,8 @@
 #filter substitution
 # 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/.
 
-[localization] @AB_CD@.jar:
-    devtools/shared (%*.ftl)
-
 @AB_CD@.jar:
 %   locale devtools-shared @AB_CD@ %locale/@AB_CD@/devtools/shared/
     locale/@AB_CD@/devtools/shared/ (%*)
deleted file mode 100644
--- a/python/l10n/fluent_migrations/bug_1743347_devtools_debugger_whyPaused.py
+++ /dev/null
@@ -1,92 +0,0 @@
-# coding=utf8
-
-# Any copyright is dedicated to the Public Domain.
-# http://creativecommons.org/publicdomain/zero/1.0/
-
-import fluent.syntax.ast as FTL
-from fluent.migrate.transforms import COPY
-
-
-def migrate(ctx):
-    """Bug 1743347 - Move whyPaused.* strings to Fluent, part {index}."""
-
-    source = "devtools/client/debugger.properties"
-    target = "devtools/shared/debugger-paused-reasons.ftl"
-    ctx.add_transforms(
-        target,
-        target,
-        [
-            FTL.Message(
-                id=FTL.Identifier("whypaused-debugger-statement"),
-                value=COPY(source, "whyPaused.debuggerStatement"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-breakpoint"),
-                value=COPY(source, "whyPaused.breakpoint"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-event-breakpoint"),
-                value=COPY(source, "whyPaused.eventBreakpoint"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-exception"),
-                value=COPY(source, "whyPaused.exception"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-mutation-breakpoint"),
-                value=COPY(source, "whyPaused.mutationBreakpoint"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-mutation-breakpoint-added"),
-                value=COPY(source, "whyPaused.mutationBreakpointAdded"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-mutation-breakpoint-removed"),
-                value=COPY(source, "whyPaused.mutationBreakpointRemoved"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-interrupted"),
-                value=COPY(source, "whyPaused.interrupted"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-resume-limit"),
-                value=COPY(source, "whyPaused.resumeLimit"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-pause-on-dom-events"),
-                value=COPY(source, "whyPaused.pauseOnDOMEvents"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-breakpoint-condition-thrown"),
-                value=COPY(source, "whyPaused.breakpointConditionThrown"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-xhr"),
-                value=COPY(source, "whyPaused.XHR"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-promise-rejection"),
-                value=COPY(source, "whyPaused.promiseRejection"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-get-watchpoint"),
-                value=COPY(source, "whyPaused.getWatchpoint"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-set-watchpoint"),
-                value=COPY(source, "whyPaused.setWatchpoint"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-assert"),
-                value=COPY(source, "whyPaused.assert"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-debug-command"),
-                value=COPY(source, "whyPaused.debugCommand"),
-            ),
-            FTL.Message(
-                id=FTL.Identifier("whypaused-other"),
-                value=COPY(source, "whyPaused.other"),
-            ),
-        ],
-    )