1 files changed, 63 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_resize_performance.js b/devtools/client/styleeditor/test/browser_styleeditor_resize_performance.js
new file mode 100644
index 0000000000..28026b7390
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_resize_performance.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This is a performance test designed to check we are not redrawing the UI too many times
+ * after resizing the window, when the styleeditor displays mediaqueries which are source
+ * mapped.
+ * See Bug 1453044 for more details.
+ */
+
+const TESTCASE_URI = TEST_BASE_HTTP + "many-media-rules-sourcemaps/index.html";
+
+// Maximum delay allowed between two at-rules-list-changed events.
+const EVENTS_DELAY = 2000;
+
+// The window resize will still trigger several resize events which will lead to several
+// UI updates. Arbitrary maximum number of events allowed to be fired for a single resize.
+// This used to be > 100 events for this test case.
+const MAX_EVENTS = 10;
+
+add_task(async function () {
+  const { toolbox, ui } = await openStyleEditorForURL(TESTCASE_URI);
+
+  const win = toolbox.win.parent;
+  const originalWidth = win.outerWidth;
+  const originalHeight = win.outerHeight;
+
+  // Ensure the window is above 500px wide for @media (min-width: 500px)
+  if (originalWidth < 500) {
+    info("Window is too small for the test, resize it to > 800px width");
+    const onMediaListChanged = waitForManyEvents(ui, EVENTS_DELAY);
+    await resizeWindow(800, ui, win);
+    info("Wait for at-rules-list-changed events to settle");
+    await onMediaListChanged;
+  }
+
+  info(
+    "Resize the window to stop matching media queries, and trigger the UI updates"
+  );
+  const onMediaListChanged = waitForManyEvents(ui, win, EVENTS_DELAY);
+  await resizeWindow(400, ui, win);
+  const eventsCount = await onMediaListChanged;
+
+  Assert.less(
+    eventsCount,
+    MAX_EVENTS,
+    `Too many events fired (expected less than ${MAX_EVENTS}, got ${eventsCount})`
+  );
+
+  win.resizeTo(originalWidth, originalHeight);
+});
+
+/**
+ * Resize the window to the provided width.
+ */
+async function resizeWindow(width, ui, win) {
+  const onResize = once(win, "resize");
+  win.resizeTo(width, win.outerHeight);
+  info("Wait for window resize event");
+  await onResize;
+}