--- a/devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
+++ b/devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
@@ -25,24 +25,26 @@ class ProfilerDialog extends PureCompone
     };
   }
 
   hide() {
     this.props.dispatch(Actions.hideProfilerDialog());
   }
 
   render() {
+    const { clientWrapper } = this.props.runtimeDetails;
+
     return dom.div(
       {
-        className: "profiler-dialog__mask",
+        className: "profiler-dialog__mask js-profiler-dialog-mask",
         onClick: () => this.hide(),
       },
       dom.article(
         {
-          className: "profiler-dialog__inner",
+          className: "profiler-dialog__inner js-profiler-dialog",
           onClick: e => e.stopPropagation(),
         },
         dom.header(
           {
             className: "profiler-dialog__header",
           },
           Localized(
             {
@@ -52,31 +54,30 @@ class ProfilerDialog extends PureCompone
               {
                 className: "profiler-dialog__header__title",
               },
               "Performance Profiler",
             )
           ),
           dom.button(
             {
-              className: "ghost-button",
+              className: "ghost-button js-profiler-dialog-close",
               onClick: () => this.hide(),
             },
             dom.img(
               {
                 src: "chrome://devtools/skin/images/close.svg",
               }
             )
           )
         ),
         dom.iframe({
           className: "profiler-dialog__frame",
-          src: "chrome://devtools/content/performance-new/index.xhtml",
+          src: clientWrapper.getPerformancePanelUrl(),
           onLoad: (e) => {
-            const { clientWrapper } = this.props.runtimeDetails;
             clientWrapper.loadPerformanceProfiler(e.target.contentWindow);
           },
         })
       )
     );
   }
 }
 

--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -84,17 +84,17 @@ class RuntimePage extends PureComponent 
         {},
         Localized(
           {
             id: "about-debugging-runtime-profile-button",
             key: "profile-runtime-button",
           },
           dom.button(
             {
-              className: "default-button",
+              className: "default-button js-profile-runtime-button",
               onClick: () => this.onProfilerButtonClick(),
             },
             "Profile Runtime"
           ),
         ),
       ),
     ];
   }

--- a/devtools/client/aboutdebugging-new/src/modules/client-wrapper.js
+++ b/devtools/client/aboutdebugging-new/src/modules/client-wrapper.js
@@ -150,16 +150,21 @@ class ClientWrapper {
   async close() {
     return this.client.close();
   }
 
   isClosed() {
     return this.client._closed;
   }
 
+  // This method will be mocked to return a dummy URL during mochitests
+  getPerformancePanelUrl() {
+    return "chrome://devtools/content/performance-new/index.xhtml";
+  }
+
   async loadPerformanceProfiler(win) {
     const preferenceFront = await this.getFront("preference");
     const perfFront = await this.getFront("perf");
     const perfActorVersion = this.client.mainRoot.traits.perfActorVersion;
     win.gInit(perfFront, preferenceFront, perfActorVersion);
   }
 }
 

--- a/devtools/client/aboutdebugging-new/test/browser/browser.ini
+++ b/devtools/client/aboutdebugging-new/test/browser/browser.ini
@@ -54,18 +54,19 @@ skip-if = (os == 'linux' && bits == 32) 
 [browser_aboutdebugging_devtoolstoolbox_contextmenu_markupview.js]
 [browser_aboutdebugging_devtoolstoolbox_menubar.js]
 [browser_aboutdebugging_devtoolstoolbox_reload.js]
 [browser_aboutdebugging_devtoolstoolbox_shortcuts.js]
 skip-if = (os == "win" && ccov) # Bug 1521349
 [browser_aboutdebugging_devtoolstoolbox_tooltip_markupview.js]
 [browser_aboutdebugging_navigate.js]
 [browser_aboutdebugging_persist_connection.js]
+[browser_aboutdebugging_profiler_dialog.js]
 [browser_aboutdebugging_routes.js]
-[browser_aboutdebugging_runtime_connection-prompt.js]
+[browser_aboutdebugging_runtime_remote_runtime_buttons.js]
 [browser_aboutdebugging_runtime_usbclient_closed.js]
 [browser_aboutdebugging_select_network_runtime.js]
 [browser_aboutdebugging_select_page_with_serviceworker.js]
 [browser_aboutdebugging_serviceworker_fetch_flag.js]
 [browser_aboutdebugging_serviceworker_multie10s.js]
 [browser_aboutdebugging_serviceworker_not_compatible.js]
 [browser_aboutdebugging_serviceworker_push.js]
 [browser_aboutdebugging_serviceworker_pushservice_url.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_profiler_dialog.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from helper-mocks.js */
+Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-mocks.js", this);
+
+/**
+ * Test opening and closing the profiler dialog.
+ */
+add_task(async function() {
+  // enable USB devices mocks
+  const mocks = new Mocks();
+  const usbClient = mocks.createUSBRuntime("1337id", {
+    deviceName: "Fancy Phone",
+    name: "Lorem ipsum",
+  });
+
+  const { document, tab, window } = await openAboutDebugging();
+
+  mocks.emitUSBUpdate();
+  await connectToRuntime("Fancy Phone", document);
+  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+
+  info("Open the profiler dialog");
+  await openProfilerDialog(usbClient, document);
+  assertDialogVisible(document);
+
+  info("Click on the close button and wait until the dialog disappears");
+  const closeDialogButton = document.querySelector(".js-profiler-dialog-close");
+  closeDialogButton.click();
+  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  assertDialogHidden(document);
+
+  info("Open the profiler dialog again");
+  await openProfilerDialog(usbClient, document);
+  assertDialogVisible(document);
+
+  info("Click on the mask element and wait until the dialog disappears");
+  const mask = document.querySelector(".js-profiler-dialog-mask");
+  EventUtils.synthesizeMouse(mask, 5, 5, {}, window);
+  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  assertDialogHidden(document);
+
+  info("Open the profiler dialog again");
+  await openProfilerDialog(usbClient, document);
+  assertDialogVisible(document);
+
+  info("Navigate to this-firefox and wait until the dialog disappears");
+  document.location.hash = "#/runtime/this-firefox";
+  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  assertDialogHidden(document);
+
+  info("Select the remote runtime again, check the dialog is still hidden");
+  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+  assertDialogHidden(document);
+
+  await removeTab(tab);
+});
+
+function assertDialogVisible(doc) {
+  ok(doc.querySelector(".js-profiler-dialog"), "Dialog is displayed");
+  ok(doc.querySelector(".js-profiler-dialog-mask"), "Dialog mask is displayed");
+}
+
+function assertDialogHidden(doc) {
+  ok(!document.querySelector(".js-profiler-dialog"), "Dialog is removed");
+  ok(!document.querySelector(".js-profiler-dialog-mask"), "Dialog mask is removed");
+}
+
+function openProfilerDialog(client, doc) {
+  const onProfilerLoaded = new Promise(r => {
+    client.loadPerformanceProfiler = r;
+  });
+
+  info("Click on the Profile Runtime button");
+  const profileButton = doc.querySelector(".js-profile-runtime-button");
+  profileButton.click();
+
+  info("Wait for the loadPerformanceProfiler callback to be executed on client-wrapper");
+  return onProfilerLoaded;
+}

rename from devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_connection-prompt.js
rename to devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_connection-prompt.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
@@ -3,34 +3,37 @@
 
 "use strict";
 
 /* import-globals-from helper-mocks.js */
 Services.scriptloader.loadSubScript(
   CHROME_URL_ROOT + "helper-mocks.js", this);
 
 /**
- * Test that remote runtimes show the connection prompt,
- * but it's hidden in 'This Firefox'
+ * Test that remote runtimes show action buttons that are hidden for 'This Firefox'.
  */
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
   mocks.createUSBRuntime("1337id", {
     deviceName: "Fancy Phone",
     name: "Lorem ipsum",
   });
 
   const { document, tab } = await openAboutDebugging();
 
   info("Checking This Firefox");
   ok(!document.querySelector(".js-connection-prompt-toggle-button"),
     "This Firefox does not contain the connection prompt button");
+  ok(!document.querySelector(".js-profile-runtime-button"),
+    "This Firefox does not contain the profile runtime button");
 
   info("Checking a USB runtime");
   mocks.emitUSBUpdate();
   await connectToRuntime("Fancy Phone", document);
   await selectRuntime("Fancy Phone", "Lorem ipsum", document);
   ok(!!document.querySelector(".js-connection-prompt-toggle-button"),
     "Runtime contains the connection prompt button");
+  ok(!!document.querySelector(".js-profile-runtime-button"),
+    "Remote runtime contains the profile runtime button");
 
   await removeTab(tab);
 });

--- a/devtools/client/aboutdebugging-new/test/browser/mocks/helper-client-wrapper-mock.js
+++ b/devtools/client/aboutdebugging-new/test/browser/mocks/helper-client-wrapper-mock.js
@@ -82,16 +82,18 @@ function createClientMock() {
     // no-op
     getFront: () => {},
     // no-op
     onFront: () => {},
     // stores the preference locally (doesn't update about:config)
     setPreference: function(prefName, value) {
       this._preferences[prefName] = value;
     },
+    getPerformancePanelUrl: () => "data:text/html;charset=UTF-8,fake_profiler_page",
+    loadPerformanceProfiler: () => {},
   };
 }
 
 // Create a ClientWrapper mock that can be used to replace the this-firefox runtime.
 function createThisFirefoxClientMock() {
   const mockThisFirefoxDescription = {
     name: "Firefox",
     channel: "nightly",