Bug 1561227 Part 5: Define a helper function for setting RDM zoom and use it in existing tests. r=botond

This helper function awaits the new custom event sent by the RDM pane
frame script when zooming is done, then waits for the reflow to be
complete also. After this is done, resolution and window and content
sizes all have their correct, final values.

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

--HG--
extra : moz-landing-system : lando

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

@@ -12,14 +12,6 @@ const WIDTH = 375;
 const HEIGHT = 450;
 const ZOOM_LEVELS = [0.3, 0.5, 0.9, 1, 1.5, 2, 2.4];
 
-function promiseContentReflow(ui) {
-  return ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
-    return new Promise(resolve => {
-      content.window.requestAnimationFrame(resolve);
-    });
-  });
-}
-
 add_task(async function() {
   const tab = await addTab(TEST_URL);
   const browser = tab.linkedBrowser;
@@ -30,17 +22,7 @@ add_task(async function() {
   info("Ensure outer size values are unchanged at different zoom levels.");
   for (let i = 0; i < ZOOM_LEVELS.length; i++) {
     info(`Setting zoom level to ${ZOOM_LEVELS[i]}`);
-    ZoomManager.setZoomForBrowser(browser, ZOOM_LEVELS[i]);
-
-    // We need to ensure that the RDM pane has had time to both change size and
-    // change the zoom level. This is currently not an atomic operation. The event
-    // timing is this:
-    // 1) Pane changes size, content reflows.
-    // 2) Pane changes zoom, content reflows.
-    // So to wait for the post-zoom reflow to be complete, we have two wait on TWO
-    // reflows.
-    await promiseContentReflow(ui);
-    await promiseContentReflow(ui);
+    await promiseRDMZoom(ui, browser, ZOOM_LEVELS[i]);
 
     await checkWindowOuterSize(ui, ZOOM_LEVELS[i]);
     await checkWindowScreenSize(ui, ZOOM_LEVELS[i]);

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

@@ -749,3 +749,34 @@ async function testViewportZoomWidthAndHeight(
     }
   }
 }
+
+function promiseContentReflow(ui) {
+  return ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
+    return new Promise(resolve => {
+      content.window.requestAnimationFrame(resolve);
+    });
+  });
+}
+
+// This function returns a promise that will be resolved when the
+// RDM zoom has been set and the content has finished rescaling
+// to the new size.
+function promiseRDMZoom(ui, browser, zoom) {
+  return new Promise(resolve => {
+    const currentZoom = ZoomManager.getZoomForBrowser(browser);
+    if (currentZoom == zoom) {
+      resolve();
+      return;
+    }
+
+    ZoomManager.setZoomForBrowser(browser, zoom);
+
+    // Await the zoom complete event, then reflow.
+    BrowserTestUtils.waitForContentEvent(
+      ui.getViewportBrowser(),
+      "ZoomComplete"
+    )
+      .then(promiseContentReflow(ui))
+      .then(resolve);
+  });
+}