Bug 1761190 - [devtools] Make DAMP console test compatible with virtualization patch. r=ochameau,perftest-reviewers,sparky.

console.compicated is modified so we only display error messages, which it's less
likely new ones will be displayed, unlike warning messages. We're also waiting
for the stacktrace of errors to be displayed to have more stable data.

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

testing/talos/talos/tests/devtools/addon/content/pages/custom/console/index.html

@@ -22,19 +22,10 @@
   // Create the iframe URL from the current URL to preserve the parameters.
   const searchParamsEncoded = document.location.search;
   const searchParams = new URLSearchParams(searchParamsEncoded);
-  const domains = searchParams.get("domains");
-
-  // We append a number of iframes equal to the number of domains.
-  // The first iframe has a domain with the same site as the damp top frame (http://damp.top.com).
-  // Second and subsequent iframes switch to a different-site URL (eg http://damp.iframeN.com).
-  for (let d = 0; d < domains; d++) {
-    const domain = d ? `damp.iframe${d}.com` : `damp.top.com`;
-    const iframeSrc = `http://${domain}/tests/devtools/addon/content/pages/custom/console/iframe.html${searchParamsEncoded}`;
-
+  const iframeSrc = `http://damp.iframe.com/tests/devtools/addon/content/pages/custom/console/iframe.html${searchParamsEncoded}`;
   const iframe = document.createElement("iframe");
   iframe.setAttribute("src", iframeSrc);
   document.body.appendChild(iframe);
-  }
 </script>
 </body>
 </html>

testing/talos/talos/tests/devtools/addon/content/tests/webconsole/bulklog.js

@@ -52,9 +52,17 @@ module.exports = async function() {
 
   const allMessagesreceived = waitForConsoleOutputChildListChange(
     hud,
-    consoleOutput =>
-      consoleOutput.querySelectorAll(".message").length >= TOTAL_MESSAGES &&
-      consoleOutput.textContent.includes("damp " + TOTAL_MESSAGES)
+    consoleOutput => {
+      const messages = Array.from(
+        consoleOutput.querySelectorAll(".message-body")
+      );
+      return (
+        messages.find(message => message.textContent.includes("damp 1")) &&
+        messages.find(message =>
+          message.textContent.includes("damp " + TOTAL_MESSAGES)
+        )
+      );
+    }
   );
 
   // Kick off the logging

testing/talos/talos/tests/devtools/addon/content/tests/webconsole/complicated.js

@@ -8,7 +8,6 @@ const Services = require("Services");
 const {
   openToolboxAndLog,
   closeToolboxAndLog,
-  isFissionEnabled,
   testSetup,
   testTeardown,
   COMPLICATED_URL,
@@ -16,56 +15,46 @@ const {
 const {
   reloadConsoleAndLog,
 } = require("damp-test/tests/webconsole/webconsole-helpers");
-const { AppConstants } = require("resource://gre/modules/AppConstants.jsm");
 
+// The virtualized list render all the messages that fit in the console output, and 20 more,
+// so all the expected messages here should be rendered.
 const EXPECTED_MESSAGES = [
-  {
-    text: `This page uses the non standard property “zoom”`,
-    count: isFissionEnabled() ? 1 : 2,
-    visibleWhenFissionEnabled: true,
-  },
-  {
-    text: `Layout was forced before the page was fully loaded.`,
-    visibleWhenFissionEnabled: true,
-  },
-  {
-    text: `Some cookies are misusing the “SameSite“ attribute, so it won’t work as expected`,
-    visibleWhenFissionEnabled: true,
-    nightlyOnly: true,
-  },
-  {
-    text: `Uncaught DOMException: XMLHttpRequest.send: XMLHttpRequest state must be OPENED.`,
-    visibleWhenFissionEnabled: true,
-  },
   {
     text: `Uncaught SyntaxError: missing ) after argument list`,
     count: 2,
-    visibleWhenFissionEnabled: false,
   },
   {
     text: `Uncaught ReferenceError: Bootloaddisableder is not defined`,
     count: 4,
-    visibleWhenFissionEnabled: false,
+    stacktrace: true,
   },
-].filter(
-  ({ visibleWhenFissionEnabled, nightlyOnly }) =>
-    (!isFissionEnabled() || visibleWhenFissionEnabled) &&
-    (!nightlyOnly || AppConstants.NIGHTLY_BUILD)
-);
+  {
+    text: `Uncaught DOMException: XMLHttpRequest.send: XMLHttpRequest state must be OPENED`,
+  },
+];
 
 module.exports = async function() {
-  // Disable overlay scrollbars to display the message "Layout was forced before the page was fully loaded"
-  // consistently. See Bug 1684963.
-  Services.prefs.setIntPref("ui.useOverlayScrollbars", 0);
-
   await testSetup(COMPLICATED_URL);
 
+  // Disabling all filters but Errors, as they are more likely to be stable (unlike
+  // warning messages which can be added more frequently as the platform evolves)
+  const filtersToDisable = [
+    "devtools.webconsole.filter.warn",
+    "devtools.webconsole.filter.info",
+    "devtools.webconsole.filter.log",
+    "devtools.webconsole.filter.debug",
+  ];
+  for (const filter of filtersToDisable) {
+    Services.prefs.setBoolPref(filter, false);
+  }
+
   let toolbox = await openToolboxAndLog("complicated.webconsole", "webconsole");
   await reloadConsoleAndLog("complicated", toolbox, EXPECTED_MESSAGES);
   await closeToolboxAndLog("complicated.webconsole", toolbox);
 
-  // Restore (most likely delete) the overlay scrollbars preference.
-  Services.prefs.clearUserPref("ui.useOverlayScrollbars");
+  for (const filter of filtersToDisable) {
+    Services.prefs.clearUserPref(filter);
+  }
 
   await testTeardown();
 };

testing/talos/talos/tests/devtools/addon/content/tests/webconsole/custom.js

@@ -18,24 +18,24 @@ const {
 const TEST_URL = PAGES_BASE_URL + "custom/console/index.html";
 
 module.exports = async function() {
-  // This is the number of iframes created in the test. Each iframe will create
-  // a number of console messages equal to the sum of the numbers below. The
-  // first iframe will use the same domain as the parent document. The remaining
-  // iframes will use unique domains.
-  const domains = 2;
-
   // These numbers controls the number of console api calls we do in the test
-  const sync = 250,
+  const sync = 500,
     stream = 250,
-    batch = 250,
+    batch = 500,
     simple = 5000;
 
-  const params = `?domains=${domains}&sync=${sync}&stream=${stream}&batch=${batch}&simple=${simple}`;
+  const params = `?sync=${sync}&stream=${stream}&batch=${batch}&simple=${simple}`;
   const url = TEST_URL + params;
   await testSetup(url, { disableCache: true });
 
   const toolbox = await openToolboxAndLog("custom.webconsole", "webconsole");
-  await reloadConsoleAndLog("custom", toolbox, sync + stream + batch + simple);
+  // With virtualization, we won't have all the messages rendered in the DOM, so we only
+  // wait for the last message to be displayed ("simple log 4999").
+  await reloadConsoleAndLog("custom", toolbox, [
+    {
+      text: "simple log " + (simple - 1),
+    },
+  ]);
   await closeToolboxAndLog("custom.webconsole", toolbox);
 
   await testTeardown();

testing/talos/talos/tests/devtools/addon/content/tests/webconsole/typing.js

@@ -18,7 +18,7 @@ const LOGS_NUMBER = 500;
 
 module.exports = async function() {
   const input = "abcdefghijklmnopqrst";
-  await testSetup(`data:text/html,<meta charset=utf8><script>
+  await testSetup(`data:text/html,<!DOCTYPE html><meta charset=utf8><script>
     for (let i = 0; i < ${LOGS_NUMBER}; i++) {
       const key = "item" + i;
       console.log(i, key, [i], {key});
@@ -33,9 +33,17 @@ module.exports = async function() {
   const { jsterm } = hud;
 
   // Wait for all the logs to be displayed.
-  await waitFor(
-    () => hud.ui.outputNode.querySelectorAll(".message").length >= LOGS_NUMBER
+  await waitFor(() => {
+    const messages = Array.from(
+      hud.ui.outputNode.querySelectorAll(".message-body")
     );
+    return (
+      messages.find(message => message.textContent.includes(`item0`)) &&
+      messages.find(message =>
+        message.textContent.includes(`item${LOGS_NUMBER - 1}`)
+      )
+    );
+  });
 
   jsterm.focus();
 

testing/talos/talos/tests/devtools/addon/content/tests/webconsole/webconsole-helpers.js

@@ -15,6 +15,7 @@ const { reloadPageAndLog } = require("damp-test/tests/head");
  *          - {String} text: A string that should be in the message.
  *          - {Number} count: If > 1, indicate how many messages with this text should be
  *                            in the output.
+ *          - {Boolean} stacktrace: If true, wait for a stacktrace element to be rendered.
  */
 exports.reloadConsoleAndLog = async function(label, toolbox, expectedMessages) {
   const onReload = async function() {
@@ -36,11 +37,14 @@ exports.reloadConsoleAndLog = async function(label, toolbox, expectedMessages) {
       const messages = Array.from(consoleOutputEl.querySelectorAll(".message"));
       const missing = new Map(expected.map(e => [e.text, e.count || 1]));
 
-      for (const { text, count = 1 } of expected) {
+      for (const { text, count = 1, stacktrace } of expected) {
         let found = 0;
         for (const message of messages) {
           const messageText = message.querySelector(".message-body").innerText;
-          if (messageText.includes(text)) {
+          if (
+            messageText.includes(text) &&
+            (!stacktrace || message.querySelector(".frames .frame"))
+          ) {
             const repeat = message
               .querySelector(".message-repeats")
               ?.innerText?.trim();
@@ -97,7 +101,7 @@ async function waitForConsoleOutputChildListChange(hud, predicate) {
         resolve();
       }
     });
-    observer.observe(webConsoleOutputEl, { childList: true });
+    observer.observe(webConsoleOutputEl, { childList: true, subtree: true });
   });
 }
 exports.waitForConsoleOutputChildListChange = waitForConsoleOutputChildListChange;