tor-browser

browser_aboutdebugging_profiler_dialog.js (6969B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

Services.scriptloader.loadSubScript(
 "chrome://mochitests/content/browser/devtools/client/performance-new/test/browser/helpers.js",
 this
);

registerCleanupFunction(() => {
 const { revertRecordingSettings } = ChromeUtils.importESModule(
   "resource://devtools/shared/performance-new/prefs-presets.sys.mjs"
 );
 revertRecordingSettings();
});

const RUNTIME_ID = "1337id";
const DEVICE_NAME = "Fancy Phone";
const RUNTIME_NAME = "Lorem ipsum";

/**
* Test opening and closing the profiler dialog.
*/
add_task(async function test_opening_profiler_dialog() {
 const { disconnect, mocks } = await connectToLocalFirefox({
   runtimeId: RUNTIME_ID,
   runtimeName: RUNTIME_NAME,
   deviceName: DEVICE_NAME,
 });
 const { document, tab, window } = await openAboutDebugging();

 mocks.emitUSBUpdate();
 await connectToRuntime(DEVICE_NAME, document);
 await waitForRuntimePage(RUNTIME_NAME, document);

 info("Open the profiler dialog");
 await openProfilerDialogWithRealClient(document);
 assertDialogVisible(document);

 info("Click on the close button and wait until the dialog disappears");
 const closeDialogButton = document.querySelector(".qa-profiler-dialog-close");
 closeDialogButton.click();
 await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
 assertDialogHidden(document);

 info("Open the profiler dialog again");
 await openProfilerDialogWithRealClient(document);
 assertDialogVisible(document);

 info("Click on the mask element and wait until the dialog disappears");
 const mask = document.querySelector(".qa-profiler-dialog-mask");
 EventUtils.synthesizeMouse(mask, 5, 5, {}, window);
 await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
 assertDialogHidden(document);

 info("Open the profiler dialog again");
 await openProfilerDialogWithRealClient(document);
 assertDialogVisible(document);

 info("Navigate to this-firefox and wait until the dialog disappears");
 document.location.hash = "#/runtime/this-firefox";
 await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
 assertDialogHidden(document);

 info("Select the remote runtime again, check the dialog is still hidden");
 await selectRuntime(DEVICE_NAME, RUNTIME_NAME, document);
 assertDialogHidden(document);

 await disconnect(document);
 await removeTab(tab);
});

add_task(async function test_set_profiler_settings() {
 const { disconnect, mocks } = await connectToLocalFirefox({
   runtimeId: RUNTIME_ID,
   runtimeName: RUNTIME_NAME,
   deviceName: DEVICE_NAME,
 });
 const { document, tab } = await openAboutDebugging();

 mocks.emitUSBUpdate();
 await connectToRuntime(DEVICE_NAME, document);
 await waitForRuntimePage(RUNTIME_NAME, document);

 info("Open the profiler dialog");
 await openProfilerDialogWithRealClient(document);
 assertDialogVisible(document);

 const profilerSettingsDocument = await openProfilerSettings(document);
 const radioButtonForCustomPreset = await getNearestInputFromText(
   profilerSettingsDocument,
   "Custom"
 );
 ok(
   radioButtonForCustomPreset.checked,
   "The radio button for the preset 'custom' is checked."
 );

 info("Change the preset to Graphics.");
 const radioButtonForGraphicsPreset = await getNearestInputFromText(
   profilerSettingsDocument,
   "Graphics"
 );
 radioButtonForGraphicsPreset.click();

 const profilerDocument = await saveSettingsAndGoBack(document);
 const perfPresetsSelect = await getNearestInputFromText(
   profilerDocument,
   "Settings"
 );
 is(
   perfPresetsSelect.value,
   "graphics",
   "The preset has been changed in the devtools panel UI as well."
 );

 await disconnect(document);
 await removeTab(tab);
});

function assertDialogVisible(doc) {
 ok(doc.querySelector(".qa-profiler-dialog"), "Dialog is displayed");
 ok(doc.querySelector(".qa-profiler-dialog-mask"), "Dialog mask is displayed");
}

function assertDialogHidden(doc) {
 ok(!doc.querySelector(".qa-profiler-dialog"), "Dialog is removed");
 ok(!doc.querySelector(".qa-profiler-dialog-mask"), "Dialog mask is removed");
}

/**
* Retrieve the iframe containing the profiler UIs.
* Be careful as it's completely replaced when switching UIs.
*/
function getProfilerIframe(doc) {
 return doc.querySelector(".profiler-dialog__frame");
}

/**
* This waits for the full render of the UI inside the profiler iframe, and
* returns the content document object.
*/
async function waitForProfilerUiRendering(doc, selector) {
 // The iframe is replaced completely, so we need to retrieve a new reference
 // each time.
 const profilerIframe = getProfilerIframe(doc);
 // Wait for the settings to render.
 await TestUtils.waitForCondition(
   () =>
     profilerIframe.contentDocument &&
     profilerIframe.contentDocument.querySelector(selector)
 );

 return profilerIframe.contentDocument;
}

/**
* Open the performance profiler dialog with a real client.
*/
async function openProfilerDialogWithRealClient(doc) {
 info("Click on the Profile Runtime button");
 const profileButton = doc.querySelector(".qa-profile-runtime-button");
 profileButton.click();

 info("Wait for the rendering of the profiler UI");
 const contentDocument = await waitForProfilerUiRendering(
   doc,
   ".perf-presets"
 );
 await getActiveButtonFromText(contentDocument, "Start recording");
 info("The profiler UI is rendered!");
 return contentDocument;
}

/**
* Open the performance profiler settings. This assumes the profiler dialog is
* already open by the previous function openProfilerDialog.
*/
async function openProfilerSettings(doc) {
 const profilerDocument = getProfilerIframe(doc).contentDocument;

 // Select the custom preset.
 const perfPresetsSelect = await getNearestInputFromText(
   profilerDocument,
   "Settings"
 );
 setReactFriendlyInputValue(perfPresetsSelect, "custom");

 // Click on "Edit Settings".
 const editSettingsLink = await getElementFromDocumentByText(
   profilerDocument,
   "Edit Settings"
 );
 editSettingsLink.click();

 info("Wait for the rendering of the profiler settings UI");
 const contentDocument = await waitForProfilerUiRendering(
   doc,
   ".perf-aboutprofiling-remote"
 );
 info("The profiler settings UI is rendered!");
 return contentDocument;
}

async function saveSettingsAndGoBack(doc) {
 const profilerDocument = getProfilerIframe(doc).contentDocument;

 const saveSettingsAndGoBackButton = await getActiveButtonFromText(
   profilerDocument,
   "Save settings"
 );
 saveSettingsAndGoBackButton.click();

 info("Wait for the rendering of the profiler UI");
 const contentDocument = await waitForProfilerUiRendering(
   doc,
   ".perf-presets"
 );
 await getActiveButtonFromText(contentDocument, "Start recording");
 info("The profiler UI is rendered!");
 return contentDocument;
}