Bug 1722462 - [devtools] Wait for dom-complete in waitForViewportLoad. r=ochameau

Depends on D121059

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

devtools/client/responsive/test/browser/browser_device_change.js

@@ -39,9 +39,9 @@ addRDMTask(
     testViewportDeviceMenuLabel(ui, "Responsive");
 
     // Test device with custom properties
-    let reloaded = waitForViewportLoad(ui);
+    let { onPageLoaded } = await waitForViewportLoad(ui);
     await selectDevice(ui, "Fake Phone RDM Test");
-    await reloaded;
+    await onPageLoaded;
     await waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
     info("Should have device UA now that device is applied");
     await testUserAgent(ui, testDevice.userAgent);
@@ -50,7 +50,7 @@ addRDMTask(
 
     // Test resetting device when resizing viewport
     const deviceRemoved = once(ui, "device-association-removed");
-    reloaded = waitForViewportLoad(ui);
+    ({ onPageLoaded } = await waitForViewportLoad(ui));
 
     await testViewportResize(
       ui,
@@ -59,7 +59,7 @@ addRDMTask(
       [0, -10]
     );
 
-    await Promise.all([deviceRemoved, reloaded]);
+    await Promise.all([deviceRemoved, onPageLoaded]);
     info("Should have default UA after resizing viewport");
     await testUserAgent(ui, DEFAULT_UA);
     await testDevicePixelRatio(ui, DEFAULT_DPPX);
@@ -99,17 +99,17 @@ addRDMTask(
     );
 
     // Select device with custom UA
-    let reloaded = waitForViewportLoad(ui);
+    let { onPageLoaded } = await waitForViewportLoad(ui);
     await selectDevice(ui, "Fake Phone RDM Test");
-    await reloaded;
+    await onPageLoaded;
     await waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
     info("Should have device UA now that device is applied");
     await testUserAgent(ui, testDevice.userAgent);
 
     // Browser will reload to clear the UA on RDM close
-    reloaded = waitForViewportLoad(ui);
+    ({ onPageLoaded } = await waitForViewportLoad(ui));
     await closeRDM(tab);
-    await reloaded;
+    await onPageLoaded;
 
     // Ensure UA is reset to default after closing RDM
     info("Should have default UA after closing RDM");

devtools/client/responsive/test/browser/browser_device_state_restore.js

@@ -48,9 +48,9 @@ addRDMTask(
     await testTouchEventsOverride(ui, false);
 
     info("Select a device");
-    const reloaded = waitForViewportLoad(ui);
+    const { onPageLoaded } = await waitForViewportLoad(ui);
     await selectDevice(ui, TEST_DEVICE.name);
-    await reloaded;
+    await onPageLoaded;
     await waitForViewportResizeTo(ui, TEST_DEVICE.width, TEST_DEVICE.height);
 
     info("Checking the RDM device state.");
@@ -84,7 +84,7 @@ addRDMTask(
         state.devices.listState == Types.loadableState.LOADED
     );
     await waitForViewportResizeTo(ui, TEST_DEVICE.width, TEST_DEVICE.height);
-    await waitForViewportLoad(ui);
+    await (await waitForViewportLoad(ui)).onPageLoaded;
 
     info("Checking the restored RDM state.");
     testViewportDeviceMenuLabel(ui, TEST_DEVICE.name);
@@ -121,7 +121,7 @@ addRDMTask(
         state.devices.listState == Types.loadableState.LOADED
     );
     await waitForViewportResizeTo(ui, TEST_DEVICE.height, TEST_DEVICE.width);
-    await waitForViewportLoad(ui);
+    await (await waitForViewportLoad(ui)).onPageLoaded;
 
     info("Checking the restored RDM state.");
     testViewportDeviceMenuLabel(ui, TEST_DEVICE.name);

devtools/client/responsive/test/browser/browser_max_touchpoints.js

@@ -38,9 +38,15 @@ addRDMTask(TEST_COM_URL, async function({ ui, browser, tab }) {
     "navigator.maxTouchPoints should be 0 after turning off touch simulation"
   );
 
-  info("Check maxTouchPoints override persists after reload");
+  info("Enabling touch simulation again");
   await toggleTouchSimulation(ui);
+  is(
+    await getMaxTouchPoints(browser),
+    1,
+    "navigator.maxTouchPoints should be 1 after enabling touch simulation again"
+  );
 
+  info("Check maxTouchPoints override persists after reload");
   await reloadViewport(ui);
 
   is(
@@ -53,39 +59,13 @@ addRDMTask(TEST_COM_URL, async function({ ui, browser, tab }) {
     "Check that maxTouchPoints persist after navigating to a page that forces the creation of a new browsing context"
   );
   const previousBrowsingContextId = browser.browsingContext.id;
-  let onPageReloaded = BrowserTestUtils.browserLoaded(
-    browser,
-    true,
-    loadedUrl => loadedUrl.includes(URL_ROOT_ORG_SSL)
-  );
-
-  // `closeRDM`, which is used later, check that the responsiveFront isn't destroyed
-  // to reset the state of the document. It might happen that the rest of the test
-  // happens so fast that the RDM ui doesn't have the time to update its responsiveFront
-  // instance (it's done onTargetAvailable), and so the one it will check is the "old" one,
-  // which is likely to be destroyed, causing the destroy method to not be fully executed
-  // as expected. In order to prevent such thing, we do wait until a new instance is
-  // put on the ui.
-  let targets = 0;
-  const expectedTargets = isFissionEnabled() ? 2 : 1;
-  const onAvailableTargetProcessed = new Promise(resolve => {
-    const off = ui.commands.targetCommand.on(
-      "processed-available-target",
-      () => {
-        targets++;
-        if (targets == expectedTargets) {
-          resolve();
-          off();
-        }
-      }
-    );
-  });
 
+  const { onPageLoaded } = await waitForViewportLoad(ui);
   BrowserTestUtils.loadURI(
     browser,
     URL_ROOT_ORG_SSL + TEST_DOCUMENT + "?crossOriginIsolated=true"
   );
-  await Promise.all([onPageReloaded, onAvailableTargetProcessed]);
+  await onPageLoaded;
 
   isnot(
     browser.browsingContext.id,
@@ -101,7 +81,7 @@ addRDMTask(TEST_COM_URL, async function({ ui, browser, tab }) {
 
   info("Check that the value is reset when closing RDM");
   // Closing RDM trigers a reload
-  onPageReloaded = BrowserTestUtils.browserLoaded(browser, true);
+  const onPageReloaded = BrowserTestUtils.browserLoaded(browser, true);
   await closeRDM(tab);
   await onPageReloaded;
 

devtools/client/responsive/test/browser/browser_orientationchange_event.js

@@ -96,13 +96,12 @@ addRDMTask(TEST_COM_URL, async function({ ui }) {
   );
   const browser = ui.getViewportBrowser();
   const previousBrowsingContextId = browser.browsingContext.id;
-  const onPageReloaded = BrowserTestUtils.browserLoaded(browser, true);
-  const onViewportLoad = waitForViewportLoad(ui);
+  const { onPageLoaded } = await waitForViewportLoad(ui);
   BrowserTestUtils.loadURI(
     browser,
     URL_ROOT_ORG_SSL + TEST_DOCUMENT + "?crossOriginIsolated=true"
   );
-  await Promise.all([onPageReloaded, onViewportLoad]);
+  await onPageLoaded;
 
   isnot(
     browser.browsingContext.id,

devtools/client/responsive/test/browser/head.js

@@ -578,12 +578,24 @@ async function waitForPageShow(browser) {
   return waitForTick();
 }
 
-function waitForViewportLoad(ui) {
-  return BrowserTestUtils.waitForContentEvent(
+/**
+ * Returns a Promise which resolves with an object holding a `onPageLoaded` property, which
+ * is a promise that resolves when the page is fully loaded.
+ *
+ * @param {ResponsiveUI} ui
+ * @returns Promise<{ onPageLoaded: Promise }>
+ */
+async function waitForViewportLoad(ui) {
+  const onLoad = BrowserTestUtils.waitForContentEvent(
     ui.getViewportBrowser(),
     "load",
     true
   );
+  const {
+    onDomCompleteResource,
+  } = await waitForNextTopLevelDomCompleteResource(ui.commands);
+
+  return { onPageLoaded: Promise.all([onLoad, onDomCompleteResource]) };
 }
 
 function waitForViewportScroll(ui) {
@@ -604,20 +616,9 @@ async function load(browser, url) {
  * Reload and wait for the viewport to be loaded and for the page to be fully parsed.
  */
 async function reloadViewport(ui) {
-  const onReload = waitForViewportLoad(ui);
-  const {
-    onResource: onDomComplete,
-  } = await ui.commands.resourceCommand.waitForNextResource(
-    ui.commands.resourceCommand.TYPES.DOCUMENT_EVENT,
-    {
-      ignoreExistingResources: true,
-      predicate: resource =>
-        resource.targetFront.isTopLevel && resource.name === "dom-complete",
-    }
-  );
+  const { onPageLoaded } = await waitForViewportLoad(ui);
   ui.getViewportBrowser().reload();
-  await onDomComplete;
-  await onReload;
+  await onPageLoaded;
 }
 
 function back(browser) {
@@ -688,9 +689,9 @@ async function toggleTouchSimulation(ui) {
   const { document } = ui.toolWindow;
   const touchButton = document.getElementById("touch-simulation-button");
   const changed = once(ui, "touch-simulation-changed");
-  const loaded = waitForViewportLoad(ui);
+  const { onPageLoaded } = await waitForViewportLoad(ui);
   touchButton.click();
-  await Promise.all([changed, loaded]);
+  await Promise.all([changed, onPageLoaded]);
 }
 
 async function testUserAgent(ui, expected) {
@@ -743,9 +744,9 @@ async function changeUserAgentInput(ui, value) {
     state => state.ui.userAgent === value
   );
   const changed = once(ui, "user-agent-changed");
-  const loaded = waitForViewportLoad(ui);
+  const { onPageLoaded } = await waitForViewportLoad(ui);
   Simulate.keyUp(userAgentInput, { keyCode: KeyCodes.DOM_VK_RETURN });
-  await Promise.all([changed, loaded, userAgentChanged]);
+  await Promise.all([changed, onPageLoaded, userAgentChanged]);
 }
 
 /**