Bug 1541355 - Don't display DevTools internal frames in Netmonitor stacktrace. r=Honza.

Before sending back the stacktrace, we remove all the
devtools internal frames using removeFramesAboveDebuggerEval.
A test (that was failing without the fix) is added to ensure
this works as expected.
The test revealed some issues in webconsole-connection-proxy
(mostly trying to access webConsoleUI while closing the toolbox),
which we fix in the patch as well.

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

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

devtools/client/shared/components/StackTrace.js

@@ -48,6 +48,10 @@ class StackTrace extends Component {
       sourceMapService,
     } = this.props;
 
+    if (!stacktrace) {
+      return null;
+    }
+
     const frames = [];
     stacktrace.forEach((s, i) => {
       if (s.asyncCause) {

devtools/client/webconsole/test/mochitest/browser.ini

@@ -342,6 +342,7 @@ skip-if = true  # Bug 1438979
 [browser_webconsole_network_message_ctrl_click.js]
 [browser_webconsole_network_messages_openinnet.js]
 [browser_webconsole_network_messages_resend_request.js]
+[browser_webconsole_network_messages_stacktrace_console_initiated_request.js]
 [browser_webconsole_network_messages_status_code.js]
 [browser_webconsole_network_requests_from_chrome.js]
 [browser_webconsole_network_reset_filter.js]

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

@@ -0,0 +1,48 @@
+
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_FILE = "test-network-request.html";
+const TEST_PATH = "https://example.com/browser/devtools/client/webconsole/" +
+                  "test/mochitest/";
+const TEST_URI = TEST_PATH + TEST_FILE;
+
+pushPref("devtools.webconsole.filter.netxhr", true);
+
+add_task(async function task() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  const xhrUrl = TEST_PATH + "sjs_slow-response-test-server.sjs";
+
+  info("Fire an XHR POST request from the console.");
+  const { node: messageNode } = await executeAndWaitForMessage(hud, `
+    xhrConsole = () => testXhrPostSlowResponse();
+    xhrConsole();
+  `, xhrUrl);
+
+  ok(messageNode, "Network message found.");
+
+  info("Expand the network message");
+  await expandXhrMessage(messageNode);
+  const stackTraceTab = messageNode.querySelector("#stack-trace-tab");
+  ok(stackTraceTab, "StackTrace tab is available");
+
+  stackTraceTab.click();
+  const selector = "#stack-trace-panel .frame-link";
+  await waitFor(() => messageNode.querySelector(selector));
+  const frames = [...messageNode.querySelectorAll(selector)];
+
+  is(frames.length, 4, "There's the expected frames");
+  const functionNames = frames.map(f =>
+    f.querySelector(".frame-link-function-display-name").textContent);
+  is(functionNames.join("|"), "makeXhr|testXhrPostSlowResponse|xhrConsole|<anonymous>",
+    "The stacktrace does not have devtools' internal frames");
+});
+
+function expandXhrMessage(node) {
+  info("Click on XHR message and wait for the network detail panel to be displayed");
+  node.querySelector(".url").click();
+  return waitFor(() => node.querySelector("#stack-trace-tab"));
+}

devtools/client/webconsole/webconsole-connection-proxy.js

@@ -219,10 +219,19 @@ WebConsoleConnectionProxy.prototype = {
    * Dispatch a message event on the new frontend and emit an event for tests.
    */
   dispatchMessageUpdate: function(networkInfo, response) {
+    // Some message might try to update while we are closing the toolbox.
+    if (!this.webConsoleUI) {
+      return;
+    }
     this.webConsoleUI.wrapper.dispatchMessageUpdate(networkInfo, response);
   },
 
   dispatchRequestUpdate: function(id, data) {
+    // Some request might try to update while we are closing the toolbox.
+    if (!this.webConsoleUI) {
+      return;
+    }
+
     this.webConsoleUI.wrapper.dispatchRequestUpdate(id, data);
   },
 

devtools/server/actors/network-monitor/stack-trace-collector.js

@@ -15,6 +15,8 @@ loader.lazyRequireGetter(this, "ChannelEventSinkFactory",
 loader.lazyRequireGetter(this, "matchRequest",
                          "devtools/server/actors/network-monitor/network-observer",
                          true);
+loader.lazyRequireGetter(this, "WebConsoleUtils",
+                         "devtools/server/actors/webconsole/utils", true);
 
 function StackTraceCollector(filters, netmonitors) {
   this.filters = filters;
@@ -156,7 +158,7 @@ StackTraceCollector.prototype = {
   getStackTrace(channelId) {
     const trace = this.stacktracesById.get(channelId);
     this.stacktracesById.delete(channelId);
-    return trace;
+    return WebConsoleUtils.removeFramesAboveDebuggerEval(trace);
   },
 
   onGetStack(msg) {