Bug 1438979 - Fix browser_webconsole_network_messages_expand.js intermittent; r=Honza.

This is an attempt to fix the intermittent on this test.
It looks like we were setting the listeners on some events
after the request message was received, which might have
made us missed some events.
We take this bug as an opportunity to do some cleanup
on the test.

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

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

devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js

@@ -8,17 +8,10 @@ const TEST_PATH = "https://example.com/browser/devtools/client/webconsole/" +
                   "test/mochitest/";
 const TEST_URI = TEST_PATH + TEST_FILE;
 
-const NET_PREF = "devtools.webconsole.filter.net";
-const XHR_PREF = "devtools.webconsole.filter.netxhr";
-
 requestLongerTimeout(2);
 
-Services.prefs.setBoolPref(NET_PREF, false);
+pushPref("devtools.webconsole.filter.net", false);
-Services.prefs.setBoolPref(XHR_PREF, true);
+pushPref("devtools.webconsole.filter.netxhr", true);
-registerCleanupFunction(() => {
-  Services.prefs.clearUserPref(NET_PREF);
-  Services.prefs.clearUserPref(XHR_PREF);
-});
 
 const tabs = [{
   id: "headers",
@@ -55,6 +48,7 @@ const tabs = [{
  */
 add_task(async function task() {
   const hud = await openNewTabAndConsole(TEST_URI);
+
   const currentTab = gBrowser.selectedTab;
   const target = await TargetFactory.forTab(currentTab);
 
@@ -79,29 +73,27 @@ async function openRequestAfterUpdates(target, hud) {
   const toolbox = gDevTools.getToolbox(target);
 
   const xhrUrl = TEST_PATH + "sjs_slow-response-test-server.sjs";
-  const message = waitForMessage(hud, xhrUrl);
+  const onMessage = waitForMessage(hud, xhrUrl);
+  const onRequestUpdates = waitForRequestUpdates(hud);
+  const onPayloadReady = waitForPayloadReady(hud);
 
   // Fire an XHR POST request.
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.wrappedJSObject.testXhrPostSlowResponse();
   });
 
-  const { node: messageNode } = await message;
+  const { node: messageNode } = await onMessage;
+  ok(messageNode, "Network message found.");
 
-  info("Network message found.");
+  await onRequestUpdates;
-
-  await waitForRequestUpdates(toolbox);
-
-  const payload = waitForPayloadReady(toolbox);
 
   // Expand network log
-  const urlNode = messageNode.querySelector(".url");
+  await expandXhrMessage(messageNode);
-  urlNode.click();
 
   const toggleButtonNode = messageNode.querySelector(".sidebar-toggle");
   ok(!toggleButtonNode, "Sidebar toggle button shouldn't be shown");
 
-  await payload;
+  await onPayloadReady;
   await testNetworkMessage(toolbox, messageNode);
 }
 
@@ -111,27 +103,23 @@ async function openRequestBeforeUpdates(target, hud, tab) {
   hud.ui.clearOutput(true);
 
   const xhrUrl = TEST_PATH + "sjs_slow-response-test-server.sjs";
-  const message = waitForMessage(hud, xhrUrl);
+  const onMessage = waitForMessage(hud, xhrUrl);
+  const onRequestUpdates = waitForRequestUpdates(hud);
+  const onPayloadReady = waitForPayloadReady(hud);
 
   // Fire an XHR POST request.
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.wrappedJSObject.testXhrPostSlowResponse();
   });
-
+  const { node: messageNode } = await onMessage;
-  const { node: messageNode } = await message;
+  ok(messageNode, "Network message found.");
-
-  info("Network message found.");
-
-  const updates = waitForRequestUpdates(toolbox);
-  const payload = waitForPayloadReady(toolbox);
 
   // Set the default panel.
   const state = hud.ui.consoleOutput.getStore().getState();
   state.ui.networkMessageActiveTabId = tab.id;
 
   // Expand network log
-  const urlNode = messageNode.querySelector(".url");
+  await expandXhrMessage(messageNode);
-  urlNode.click();
 
   // Except the security tab. It isn't available till the
   // "securityInfo" packet type is received, so doesn't
@@ -147,8 +135,8 @@ async function openRequestBeforeUpdates(target, hud, tab) {
   }
 
   // Wait till all updates and payload are received.
-  await updates;
+  await onRequestUpdates;
-  await payload;
+  await onPayloadReady;
 
   // Test content of the default tab.
   await tab.testContent(messageNode);
@@ -191,9 +179,7 @@ async function testHeaders(messageNode) {
 
   // Select Headers tab and check the content.
   headersTab.click();
-  await waitUntil(() => {
+  await waitFor(() => messageNode.querySelector("#headers-panel .headers-overview"));
-    return !!messageNode.querySelector("#headers-panel .headers-overview");
-  });
 }
 
 // Cookies
@@ -209,9 +195,7 @@ async function testCookies(messageNode) {
 
   // Select tab and check the content.
   cookiesTab.click();
-  await waitUntil(() => {
+  await waitFor(() => messageNode.querySelector("#cookies-panel .treeValueCell"));
-    return !!messageNode.querySelector("#cookies-panel .treeValueCell");
-  });
 }
 
 // Params
@@ -271,10 +255,8 @@ async function testTimings(messageNode) {
 
   // Select Timings tab and check the content.
   timingsTab.click();
-  await waitUntil(() => {
+  await waitFor(() =>
-    return !!messageNode.querySelector(
+    messageNode.querySelector("#timings-panel .timings-container .timings-label"));
-      "#timings-panel .timings-container .timings-label");
-  });
   const timingsContent = messageNode.querySelector(
     "#timings-panel .timings-container .timings-label");
   ok(timingsContent, "Timings content is available");
@@ -294,9 +276,7 @@ async function testStackTrace(messageNode) {
 
   // Select Timings tab and check the content.
   stackTraceTab.click();
-  await waitUntil(() => {
+  await waitFor(() => messageNode.querySelector("#stack-trace-panel .frame-link"));
-    return !!messageNode.querySelector("#stack-trace-panel .frame-link");
-  });
 }
 
 // Security
@@ -312,21 +292,13 @@ async function testSecurity(messageNode) {
 
   // Select Timings tab and check the content.
   securityTab.click();
-  await waitUntil(() => {
+  await waitFor(() => messageNode.querySelector("#security-panel .treeTable .treeRow"));
-    return !!messageNode.querySelector("#security-panel .treeTable .treeRow");
-  });
 }
 
 // Waiting helpers
 
-async function waitForPayloadReady(toolbox) {
+async function waitForPayloadReady(hud) {
-  const {ui} = toolbox.getCurrentPanel().hud;
+  return hud.ui.once("network-request-payload-ready");
-  return new Promise(resolve => {
-    ui.jsterm.hud.on("network-request-payload-ready", () => {
-      info("network-request-payload-ready received");
-      resolve();
-    });
-  });
 }
 
 async function waitForSourceEditor(panel) {
@@ -335,14 +307,14 @@ async function waitForSourceEditor(panel) {
   });
 }
 
-async function waitForRequestUpdates(toolbox) {
+async function waitForRequestUpdates(hud) {
-  const {ui} = toolbox.getCurrentPanel().hud;
+  return hud.ui.once("network-message-updated");
-  return new Promise(resolve => {
+}
-    ui.jsterm.hud.on("network-message-updated", () => {
+
-      info("network-message-updated received");
+function expandXhrMessage(node) {
-      resolve();
+  info("Click on XHR message and wait for the network detail panel to be displayed");
-    });
+  node.querySelector(".url").click();
-  });
+  return waitFor(() => node.querySelector(".network-info"));
 }
 
 /**