Bug 1456972 - Add recording settings tests for perf recording panel; r=nchevobbe draft
authorGreg Tatum <gtatum@mozilla.com>
Wed, 25 Apr 2018 17:13:35 -0500
changeset 795080 1c6c1670f6a07e1f21be3e5bd484ae8e98405b99
parent 794866 c96b4323d7b8149d7737723e1a4937447cb46c18
push id109857
push usergtatum@mozilla.com
push dateTue, 15 May 2018 00:33:29 +0000
reviewersnchevobbe
bugs1456972
milestone62.0a1
Bug 1456972 - Add recording settings tests for perf recording panel; r=nchevobbe MozReview-Commit-ID: CwSTtMpdyel
devtools/client/performance-new/components/Settings.js
devtools/client/performance-new/test/chrome/chrome.ini
devtools/client/performance-new/test/chrome/head.js
devtools/client/performance-new/test/chrome/test_perf-settings-entries.html
devtools/client/performance-new/test/chrome/test_perf-settings-features.html
devtools/client/performance-new/test/chrome/test_perf-settings-interval.html
devtools/client/performance-new/test/chrome/test_perf-settings-threads.html
devtools/client/performance-new/test/chrome/test_perf-state-01.html
devtools/client/performance-new/test/chrome/test_perf-state-02.html
devtools/client/performance-new/test/chrome/test_perf-state-03.html
devtools/client/performance-new/test/chrome/test_perf-state-04.html
--- a/devtools/client/performance-new/components/Settings.js
+++ b/devtools/client/performance-new/components/Settings.js
@@ -16,61 +16,72 @@ const selectors = require("devtools/clie
 const PROFILE_ENTRY_SIZE = 9;
 
 const NOTCHES = Array(22).fill("discrete-level-notch");
 
 const threadColumns = [
   [
     {
       name: "GeckoMain",
+      id: "gecko-main",
       title: "The main processes for both the parent process, and content processes"
     },
     {
       name: "Compositor",
+      id: "compositor",
       title: "Composites together different painted elements on the page."
     },
     {
       name: "DOM Worker",
+      id: "dom-worker",
       title: "This handle both web workers and service workers"
     },
     {
       name: "Renderer",
+      id: "renderer",
       title: "When WebRender is enabled, the thread that executes OpenGL calls"
     },
   ],
   [
     {
       name: "RenderBackend",
+      id: "render-backend",
       title: "The WebRender RenderBackend thread"
     },
     {
       name: "PaintWorker",
+      id: "paint-worker",
       title: "When off-main-thread painting is enabled, the thread on which " +
         "painting happens"
     },
     {
       name: "StyleThread",
+      id: "style-thread",
       title: "Style computation is split into multiple threads"
     },
     {
       name: "Socket Thread",
+      id: "socket-thread",
       title: "The thread where networking code runs any blocking socket calls"
     },
   ],
   [
     {
       name: "StreamTrans",
+      id: "stream-trans",
       title: "TODO"
     },
     {
       name: "ImgDecoder",
+      id: "img-decoder",
       title: "Image decoding threads"
     },
     {
       name: "DNS Resolver",
+      id: "dns-resolver",
       title: "DNS resolution happens on this thread"
     },
   ]
 ];
 
 const featureCheckboxes = [
   {
     name: "Native Stacks",
@@ -222,38 +233,45 @@ class Settings extends PureComponent {
     this.setState({ temporaryThreadText: null });
     this.props.changeThreads(_threadTextToList(event.target.value));
   }
 
   _renderThreadsColumns(threadDisplay, index) {
     const { threads } = this.props;
     return div(
       { className: "perf-settings-thread-column", key: index },
-      threadDisplay.map(({name, title}) => label(
+      threadDisplay.map(({name, title, id}) => label(
         {
           className: "perf-settings-checkbox-label",
           key: name,
           title
         },
         input({
           className: "perf-settings-checkbox",
+          id: `perf-settings-thread-checkbox-${id}`,
           type: "checkbox",
           value: name,
           checked: threads.includes(name),
           onChange: this._handleThreadCheckboxChange
         }),
         name
       ))
     );
   }
 
   _renderThreads() {
     return details(
       { className: "perf-settings-details" },
-      summary({ className: "perf-settings-summary" }, "Threads:"),
+      summary(
+        {
+          className: "perf-settings-summary",
+          id: "perf-settings-threads-summary"
+        },
+        "Threads:"
+      ),
       // Contain the overflow of the slide down animation with the first div.
       div(
         { className: "perf-settings-details-contents" },
         // Provide a second <div> element for the contents of the slide down animation.
         div(
           { className: "perf-settings-details-contents-slider" },
           div(
             { className: "perf-settings-thread-columns" },
@@ -267,16 +285,17 @@ class Settings extends PureComponent {
                 title: "These thread names are a comma separated list that is used to " +
                   "enable profiling of the threads in the profiler. The name needs to " +
                   "be only a partial match of the thread name to be included. It " +
                   "is whitespace sensitive."
               },
               div({}, "Add custom threads by name:"),
               input({
                 className: "perf-settings-text-input",
+                id: "perf-settings-thread-text",
                 type: "text",
                 value: this.state.temporaryThreadText === null
                   ? this.props.threads
                   : this.state.temporaryThreadText,
                 onBlur: this._handleThreadTextCleanup,
                 onFocus: this._setThreadTextFromInput,
                 onChange: this._setThreadTextFromInput,
               })
@@ -285,28 +304,35 @@ class Settings extends PureComponent {
         )
       )
     );
   }
 
   _renderFeatures() {
     return details(
       { className: "perf-settings-details" },
-      summary({ className: "perf-settings-summary" }, "Features:"),
+      summary(
+        {
+          className: "perf-settings-summary",
+          id: "perf-settings-features-summary"
+        },
+        "Features:"
+      ),
       div(
         { className: "perf-settings-details-contents" },
         div(
           { className: "perf-settings-details-contents-slider" },
           featureCheckboxes.map(({name, value, title, recommended}) => label(
             {
               className: "perf-settings-checkbox-label perf-settings-feature-label",
               key: value,
             },
             input({
               className: "perf-settings-checkbox",
+              id: `perf-settings-feature-checkbox-${value}`,
               type: "checkbox",
               value,
               checked: this.props.features.includes(value),
               onChange: this._handleFeaturesCheckboxChange
             }),
             div({ className: "perf-settings-feature-name" }, name),
             div(
               { className: "perf-settings-feature-title" },
--- a/devtools/client/performance-new/test/chrome/chrome.ini
+++ b/devtools/client/performance-new/test/chrome/chrome.ini
@@ -1,8 +1,12 @@
 [DEFAULT]
 support-files =
   head.js
 
+[test_perf-settings-entries.html]
+[test_perf-settings-features.html]
+[test_perf-settings-interval.html]
+[test_perf-settings-threads.html]
 [test_perf-state-01.html]
 [test_perf-state-02.html]
 [test_perf-state-03.html]
 [test_perf-state-04.html]
--- a/devtools/client/performance-new/test/chrome/head.js
+++ b/devtools/client/performance-new/test/chrome/head.js
@@ -38,24 +38,25 @@ function addPerfTest(asyncTest) {
       SimpleTest.finish();
     }
   };
 }
 
 /**
  * The Gecko Profiler is a rather heavy-handed component that uses a lot of resources.
  * In order to get around that, and have quick component tests we provide a mock of
- * the performance front. It also has a method called flushAsyncQueue() that will
+ * the performance front. It also has a method called _flushAsyncQueue() that will
  * flush any queued async calls to deterministically run our tests.
  */
 class MockPerfFront extends EventEmitter {
   constructor() {
     super();
     this._isActive = false;
     this._asyncQueue = [];
+    this._startProfilerCalls = [];
 
     // Tests can update these two values directly as needed.
     this.mockIsSupported = true;
     this.mockIsLocked = false;
 
     // Wrap all async methods in a flushable queue, so that tests can control
     // when the responses come back.
     this.isActive = this._wrapInAsyncQueue(this.isActive);
@@ -78,25 +79,30 @@ class MockPerfFront extends EventEmitter
       return new Promise(resolve => {
         this._asyncQueue.push(() => {
           resolve(fn.apply(this, args));
         });
       });
     };
   }
 
-  flushAsyncQueue() {
+  /**
+   * This method is in the mock only, and it serves to flush out any pending async calls
+   * so that tests can properly wait on asynchronous behavior.
+   */
+  _flushAsyncQueue() {
     const pending = this._asyncQueue;
     this._asyncQueue = [];
     pending.forEach(fn => fn());
     // Ensure this is async.
     return new Promise(resolve => setTimeout(resolve, 0));
   }
 
-  startProfiler() {
+  startProfiler(settings) {
+    this._startProfilerCalls.push(settings);
     this._isActive = true;
     this.emit("profiler-started");
   }
 
   getProfileAndStopProfiler() {
     this._isActive = false;
     this.emit("profiler-stopped");
     // Return a fake profile.
@@ -126,63 +132,97 @@ const mockKeys = Object.getOwnPropertyNa
 Object.getOwnPropertyNames(perfDescription.methods).forEach(methodName => {
   if (!mockKeys.includes(methodName)) {
     throw new Error(`The MockPerfFront is missing the method "${methodName}" from the ` +
                     "actor's spec. It should be added to the mock.");
   }
 });
 
 /**
+ * Set a React-friendly input value. Doing this the normal way doesn't work.
+ *
+ * See: https://github.com/facebook/react/issues/10135#issuecomment-314441175
+ */
+function setReactFriendlyInputValue(element, value) {
+  const valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
+  const prototype = Object.getPrototypeOf(element);
+  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value").set;
+
+  if (valueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    valueSetter.call(element, value);
+  }
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+/**
  * This is a helper function to correctly mount the Perf component, and provide
  * mocks where needed.
  */
 function createPerfComponent() {
   const Perf = require("devtools/client/performance-new/components/Perf");
   const React = require("devtools/client/shared/vendor/react");
   const ReactDOM = require("devtools/client/shared/vendor/react-dom");
   const ReactRedux = require("devtools/client/shared/vendor/react-redux");
   const createStore = require("devtools/client/shared/redux/create-store")();
   const reducers = require("devtools/client/performance-new/store/reducers");
   const actions = require("devtools/client/performance-new/store/actions");
   const selectors = require("devtools/client/performance-new/store/selectors");
 
-  const perfFront = new MockPerfFront();
+  const perfFrontMock = new MockPerfFront();
   const toolboxMock = {};
   const store = createStore(reducers);
   const container = document.querySelector("#container");
   const receiveProfileCalls = [];
+  const recordingPreferencesCalls = [];
 
   function receiveProfileMock(profile) {
     receiveProfileCalls.push(profile);
   }
 
-  const mountComponent = () => {
+  function recordingPreferencesMock(settings) {
+    recordingPreferencesCalls.push(settings);
+  }
+
+  function mountComponent() {
     store.dispatch(actions.initializeStore({
       toolbox: toolboxMock,
-      perfFront,
+      perfFront: perfFrontMock,
       receiveProfile: receiveProfileMock,
       recordingSettingsFromPreferences: selectors.getRecordingSettings(store.getState()),
-      setRecordingPreferences: () => {}
+      setRecordingPreferences: recordingPreferencesMock
     }));
 
     return ReactDOM.render(
       React.createElement(
         ReactRedux.Provider,
         { store },
         React.createElement(Perf)
       ),
       container
     );
-  };
+  }
+
+  /**
+   * The perf front is initially queried for the status of the profiler, flush
+   * those requests to have a fully initializated component.
+   */
+  async function mountAndInitializeComponent() {
+    mountComponent();
+    await perfFrontMock._flushAsyncQueue();
+  }
 
   // Provide a list of common values that may be needed during testing.
   return {
     receiveProfileCalls,
-    perfFront,
+    recordingPreferencesCalls,
+    perfFrontMock,
     mountComponent,
+    mountAndInitializeComponent,
     selectors,
     store,
     container,
     getState: store.getState,
     dispatch: store.dispatch,
     // Provide a common shortcut for this selector.
     getRecordingState: () => selectors.getRecordingState(store.getState())
   };
new file mode 100644
--- /dev/null
+++ b/devtools/client/performance-new/test/chrome/test_perf-settings-entries.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<!-- 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/. -->
+<head>
+  <meta charset="utf-8">
+  <title>Perf component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+  <div id="container"></div>
+
+  <pre id="test">
+    <script src="head.js" type="application/javascript"></script>
+    <script type="application/javascript">
+      "use strict";
+
+      /**
+       * Test that the entries setting can be changed.
+       */
+      addPerfTest(async () => {
+        const {
+          perfFrontMock,
+          mountAndInitializeComponent,
+          selectors,
+          getState,
+          recordingPreferencesCalls
+        } = createPerfComponent();
+
+        await mountAndInitializeComponent();
+
+        is(selectors.getEntries(getState()), 10000000,
+          "The entries starts out with the default");
+        is(recordingPreferencesCalls.length, 0,
+          "No calls have been made to set preferences");
+
+        const inputValue = 75;
+        const scaledValue = 20000000;
+        const input = document.querySelector("#perf-range-entries");
+        setReactFriendlyInputValue(input, inputValue);
+
+        is(selectors.getEntries(getState()), scaledValue,
+          "The entries was changed according to a logarithmic scale.");
+        is(recordingPreferencesCalls[0].entries, scaledValue,
+          "The preference was recorded.");
+
+        // Start the profiler by clicking the start button, and flushing the async
+        // calls out to the mock perf front.
+        document.querySelector("button").click();
+        await perfFrontMock._flushAsyncQueue();
+
+        is(perfFrontMock._startProfilerCalls.length, 1,
+          "Start profiler was called once");
+        is(perfFrontMock._startProfilerCalls[0].entries, scaledValue,
+          "Start profiler was called with the correct entries");
+      });
+    </script>
+  </pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/devtools/client/performance-new/test/chrome/test_perf-settings-features.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<!-- 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/. -->
+<head>
+  <meta charset="utf-8">
+  <title>Perf component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+  <div id="container"></div>
+
+  <pre id="test">
+    <script src="head.js" type="application/javascript"></script>
+    <script type="application/javascript">
+      "use strict";
+
+      /**
+       * Test that the features setting can be changed.
+       */
+      addPerfTest(async () => {
+        const {
+          perfFrontMock,
+          mountAndInitializeComponent,
+          selectors,
+          getState,
+          recordingPreferencesCalls
+        } = createPerfComponent();
+
+        await mountAndInitializeComponent();
+
+        // Open up the features summary.
+        document.querySelector("#perf-settings-features-summary").click();
+
+        is(selectors.getFeatures(getState()).join(","), "js,stackwalk",
+          "The features starts out with the default");
+        is(recordingPreferencesCalls.length, 0,
+          "No calls have been made to set preferences");
+
+        // Click the "features checkbox.
+        document.querySelector("#perf-settings-feature-checkbox-js").click();
+
+        is(selectors.getFeatures(getState()).join(","), "stackwalk",
+          "The feature has been removed.");
+        is(recordingPreferencesCalls.length, 1,
+          "The preferences have been updated.");
+        is(recordingPreferencesCalls[0].features.join(","), "stackwalk",
+          "The preferences have been updated.");
+
+        // Enable a feature
+        document.querySelector("#perf-settings-feature-checkbox-leaf").click();
+        is(selectors.getFeatures(getState()).join(","), "leaf,stackwalk",
+          "Another feature was added");
+
+        // Start the profiler by clicking the start button, and flushing the async
+        // calls out to the mock perf front.
+        document.querySelector("button").click();
+        await perfFrontMock._flushAsyncQueue();
+
+        is(perfFrontMock._startProfilerCalls.length, 1,
+          "Start profiler was called once");
+        is(perfFrontMock._startProfilerCalls[0].features.join(","), "leaf,stackwalk",
+          "Start profiler was called with the correct features");
+      });
+    </script>
+  </pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/devtools/client/performance-new/test/chrome/test_perf-settings-interval.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<!-- 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/. -->
+<head>
+  <meta charset="utf-8">
+  <title>Perf component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+  <div id="container"></div>
+
+  <pre id="test">
+    <script src="head.js" type="application/javascript"></script>
+    <script type="application/javascript">
+      "use strict";
+
+      /**
+       * Test that the profiler can set the interval settings.
+       */
+      addPerfTest(async () => {
+        const {
+          perfFrontMock,
+          mountAndInitializeComponent,
+          selectors,
+          getState,
+          recordingPreferencesCalls
+        } = createPerfComponent();
+
+        await mountAndInitializeComponent();
+
+        is(selectors.getInterval(getState()), 1,
+          "The interval starts out as 1");
+        is(recordingPreferencesCalls.length, 0,
+          "No calls have been made");
+
+        const inputValue = 75;
+        const scaledValue = 10;
+        const input = document.querySelector("#perf-range-interval");
+        setReactFriendlyInputValue(input, inputValue);
+
+        is(selectors.getInterval(getState()), scaledValue,
+          "The interval was changed according to a logarithmic scale.");
+        is(recordingPreferencesCalls[0].interval, scaledValue,
+          "The preference was recorded.");
+
+        // Start the profiler by clicking the start button, and flushing the async
+        // calls out to the mock perf front.
+        document.querySelector("button").click();
+        await perfFrontMock._flushAsyncQueue();
+
+        is(perfFrontMock._startProfilerCalls.length, 1,
+          "Start profiler was called once");
+        is(perfFrontMock._startProfilerCalls[0].interval, scaledValue,
+          "Start profiler was called with the correct interval");
+      });
+    </script>
+  </pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/devtools/client/performance-new/test/chrome/test_perf-settings-threads.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+<!-- 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/. -->
+<head>
+  <meta charset="utf-8">
+  <title>Perf component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+  <div id="container"></div>
+
+  <pre id="test">
+    <script src="head.js" type="application/javascript"></script>
+    <script type="application/javascript">
+      "use strict";
+
+      /**
+       * Test that the threads setting can be changed.
+       */
+      addPerfTest(async () => {
+        const {
+          perfFrontMock,
+          mountAndInitializeComponent,
+          selectors,
+          getState,
+          recordingPreferencesCalls
+        } = createPerfComponent();
+
+        await mountAndInitializeComponent();
+
+        // Open up the threads summary.
+        document.querySelector("#perf-settings-threads-summary").click();
+
+        const threadTextEl = document.querySelector("#perf-settings-thread-text");
+        is(selectors.getThreads(getState()).join(","), "GeckoMain,Compositor",
+          "The threads starts out with the default");
+        is(threadTextEl.value, "GeckoMain,Compositor",
+          "The threads starts out with the default in the thread text input");
+        is(recordingPreferencesCalls.length, 0,
+          "No calls have been made to set preferences");
+
+        // Click the Compositor checkbox.
+        document.querySelector("#perf-settings-thread-checkbox-compositor").click();
+
+        is(selectors.getThreads(getState()).join(","), "GeckoMain",
+          "The threads have been updated");
+        is(threadTextEl.value, "GeckoMain",
+          "The threads have been updated in the thread text input");
+        is(recordingPreferencesCalls.length, 1,
+          "The preferences have been updated.");
+        is(recordingPreferencesCalls[0].threads.join(","), "GeckoMain",
+          "The preferences have been updated.");
+
+        // Enable a thread
+        document.querySelector("#perf-settings-thread-checkbox-dom-worker").click();
+        is(selectors.getThreads(getState()).join(","), "GeckoMain,DOM Worker",
+          "Another thread was added");
+        is(threadTextEl.value, "GeckoMain,DOM Worker",
+          "Another thread was in the thread text input");
+
+        // See the initial state of the checkbox
+        const styleThreadCheckbox = document.querySelector(
+          "#perf-settings-thread-checkbox-style-thread");
+        ok(!styleThreadCheckbox.checked,
+          "The style thread is not checked.");
+
+        // Set the input box directly
+        setReactFriendlyInputValue(threadTextEl, "GeckoMain,DOM Worker,StyleThread");
+        threadTextEl.dispatchEvent(new Event("blur", { bubbles: true }));
+
+        ok(styleThreadCheckbox.checked,
+          "The style thread is now checked.");
+        is(selectors.getThreads(getState()).join(","), "GeckoMain,DOM Worker,StyleThread",
+          "Another thread was added");
+        is(threadTextEl.value, "GeckoMain,DOM Worker,StyleThread",
+          "Another thread was in the thread text input");
+
+        // Start the profiler by clicking the start button, and flushing the async
+        // calls out to the mock perf front.
+        document.querySelector("button").click();
+        await perfFrontMock._flushAsyncQueue();
+
+        is(perfFrontMock._startProfilerCalls.length, 1,
+          "Start profiler was called once");
+        is(perfFrontMock._startProfilerCalls[0].threads.join(","),
+          "GeckoMain,DOM Worker,StyleThread",
+          "Start profiler was called with the correct threads");
+      });
+    </script>
+  </pre>
+</body>
+</html>
--- a/devtools/client/performance-new/test/chrome/test_perf-state-01.html
+++ b/devtools/client/performance-new/test/chrome/test_perf-state-01.html
@@ -18,51 +18,51 @@
       "use strict";
 
       /**
        * Test the normal workflow of starting and stopping the profiler through the
        * Perf component.
        */
       addPerfTest(async () => {
         const {
-          perfFront,
+          perfFrontMock,
           getRecordingState,
           receiveProfileCalls,
           mountComponent,
           container
         } = createPerfComponent();
 
         mountComponent();
 
         is(getRecordingState(), "not-yet-known",
           "The component at first is in an unknown state.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "available-to-record",
           "After talking to the actor, we're ready to record.");
 
         const button = container.querySelector("button");
         ok(button, "Selected the button to click.");
         button.click();
         is(getRecordingState(), "request-to-start-recording",
           "Sent in a request to start recording.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "recording",
           "The actor has started its recording");
 
         button.click();
         is(getRecordingState(),
           "request-to-get-profile-and-stop-profiler",
           "We have requested to stop the profiler.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "available-to-record",
           "The profiler is available to record again.");
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(receiveProfileCalls.length, 1,
            "The receiveProfile function was called once");
         is(typeof receiveProfileCalls[0], "object", "Got a profile");
       });
     </script>
   </pre>
 </body>
 </html>
--- a/devtools/client/performance-new/test/chrome/test_perf-state-02.html
+++ b/devtools/client/performance-new/test/chrome/test_perf-state-02.html
@@ -17,43 +17,43 @@
     <script type="application/javascript">
       "use strict";
 
       /**
        * Test the perf component when the profiler is already started.
        */
       addPerfTest(async () => {
         const {
-          perfFront,
+          perfFrontMock,
           getRecordingState,
           mountComponent,
           container
         } = createPerfComponent();
 
         ok(true, "Start the profiler before initiliazing the component, to simulate" +
                  "the profiler being controlled by another tool.");
 
-        perfFront.startProfiler();
-        await perfFront.flushAsyncQueue();
+        perfFrontMock.startProfiler();
+        await perfFrontMock._flushAsyncQueue();
 
         mountComponent();
 
         is(getRecordingState(), "not-yet-known",
           "The component at first is in an unknown state.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "other-is-recording",
           "The profiler is not available to record.");
 
         const button = container.querySelector("button");
         ok(button, "Selected a button on the component");
         button.click();
         is(getRecordingState(), "request-to-stop-profiler",
           "We can request to stop the profiler.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "available-to-record",
           "The profiler is now available to record.");
       });
     </script>
   </pre>
 </body>
 </html>
--- a/devtools/client/performance-new/test/chrome/test_perf-state-03.html
+++ b/devtools/client/performance-new/test/chrome/test_perf-state-03.html
@@ -17,46 +17,46 @@
     <script type="application/javascript">
       "use strict";
 
       /**
        * Test the perf component for when the profiler is already started.
        */
       addPerfTest(async () => {
         const {
-          perfFront,
+          perfFrontMock,
           getRecordingState,
           mountComponent,
           getState,
           selectors
         } = createPerfComponent();
 
         mountComponent();
 
         is(getRecordingState(), "not-yet-known",
           "The component at first is in an unknown state.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "available-to-record",
           "After talking to the actor, we're ready to record.");
 
         document.querySelector("button").click();
         is(getRecordingState(), "request-to-start-recording",
           "Sent in a request to start recording.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "recording",
           "The actor has started its recording");
 
         ok(true, "Simulate a third party stopping the profiler.");
         ok(!selectors.getRecordingUnexpectedlyStopped(getState()),
           "The profiler has not unexpectedly stopped.");
 
-        perfFront.stopProfilerAndDiscardProfile();
-        await perfFront.flushAsyncQueue();
+        perfFrontMock.stopProfilerAndDiscardProfile();
+        await perfFrontMock._flushAsyncQueue();
 
         ok(selectors.getRecordingUnexpectedlyStopped(getState()),
           "The profiler unexpectedly stopped.");
         is(getRecordingState(), "available-to-record",
           "However, the profiler is available to record again.");
       });
     </script>
   </pre>
--- a/devtools/client/performance-new/test/chrome/test_perf-state-04.html
+++ b/devtools/client/performance-new/test/chrome/test_perf-state-04.html
@@ -17,46 +17,46 @@
     <script type="application/javascript">
       "use strict";
 
       /**
        * Test that the profiler gets disabled during private browsing.
        */
       addPerfTest(async () => {
         const {
-          perfFront,
+          perfFrontMock,
           getRecordingState,
           mountComponent,
         } = createPerfComponent();
 
-        perfFront.mockIsLocked = true;
+        perfFrontMock.mockIsLocked = true;
 
         mountComponent();
 
         is(getRecordingState(), "not-yet-known",
           "The component at first is in an unknown state.");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "locked-by-private-browsing",
           "After talking to the actor, it's locked for private browsing.");
 
-        perfFront.mockIsLocked = false;
-        perfFront.emit("profile-unlocked-from-private-browsing");
+        perfFrontMock.mockIsLocked = false;
+        perfFrontMock.emit("profile-unlocked-from-private-browsing");
 
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "available-to-record",
           "After the profiler is unlocked, it's available to record.");
 
         document.querySelector("button").click();
-        await perfFront.flushAsyncQueue();
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "recording",
           "The actor has started its recording");
 
-        perfFront.mockIsLocked = true;
-        perfFront.emit("profile-locked-by-private-browsing");
-        await perfFront.flushAsyncQueue();
+        perfFrontMock.mockIsLocked = true;
+        perfFrontMock.emit("profile-locked-by-private-browsing");
+        await perfFrontMock._flushAsyncQueue();
         is(getRecordingState(), "locked-by-private-browsing",
           "The recording stops when going into private browsing mode.");
       });
     </script>
   </pre>
 </body>
 </html>