Bug 1747805 - [devtools] Fix NETWORK_EVENT's innerWindowID and clear requests of iframe when they get destroyed. r=nchevobbe

This also fixes the targetFront attribute for NETWORK_EVENT resources of iframes.

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

devtools/server/actors/network-monitor/utils/network-utils.js

@@ -106,8 +106,8 @@ exports.getChannelBrowsingContextID = function(channel) {
  * @returns {number}
  */
 exports.getChannelInnerWindowId = function(channel) {
-  if (channel.loadInfo.innerWindowId) {
-    return channel.loadInfo.innerWindowId;
+  if (channel.loadInfo.innerWindowID) {
+    return channel.loadInfo.innerWindowID;
   }
   // At least WebSocket channel aren't having a browsingContextID set on their loadInfo
   // We fallback on top frame element, which works, but will be wrong for WebSocket

devtools/shared/commands/resource/tests/browser_resources_network_events.js

@@ -135,6 +135,68 @@ add_task(async function testCanceledRequest() {
   );
 });
 
+add_task(async function testIframeRequest() {
+  info(`Tests for NETWORK_EVENT resources with an iframe`);
+
+  // Do a XHR request that we cancel against a slow loading page
+  const iframeRequestUrl =
+    "https://example.org/document-builder.sjs?html=iframe-request";
+  const iframeHtml = `iframe<script>fetch("${iframeRequestUrl}")</script>`;
+  const iframeUrl =
+    "https://example.org/document-builder.sjs?html=" +
+    encodeURIComponent(iframeHtml);
+  const html = `top-document<iframe src="${iframeUrl}"></iframe>`;
+  const pageUrl =
+    "https://example.org/document-builder.sjs?html=" + encodeURIComponent(html);
+
+  const expectedAvailable = [
+    {
+      url: pageUrl,
+      method: "GET",
+      isNavigationRequest: true,
+      // The top level navigation request relates to the previous top level target.
+      // Unfortunately, it is hard to test because it is racy.
+      // The target front might be destroyed and `targetFront.url` will be null.
+      // Or not just yet and be equal to "about:blank".
+    },
+    {
+      url: iframeUrl,
+      method: "GET",
+      isNavigationRequest: false,
+      targetFrontUrl: pageUrl,
+    },
+    {
+      url: iframeRequestUrl,
+      method: "GET",
+      isNavigationRequest: false,
+      targetFrontUrl: iframeUrl,
+    },
+  ];
+  const expectedUpdated = [
+    {
+      url: pageUrl,
+      method: "GET",
+      isNavigationRequest: true,
+    },
+    {
+      url: iframeUrl,
+      method: "GET",
+      isNavigationRequest: false,
+    },
+    {
+      url: iframeRequestUrl,
+      method: "GET",
+      isNavigationRequest: false,
+    },
+  ];
+
+  await assertNetworkResourcesOnPage(
+    pageUrl,
+    expectedAvailable,
+    expectedUpdated
+  );
+});
+
 async function assertNetworkResourcesOnPage(
   url,
   expectedAvailable,
@@ -214,7 +276,25 @@ function assertResources(actual, expected) {
     ResourceCommand.TYPES.NETWORK_EVENT,
     "The resource type is correct"
   );
+  is(
+    typeof actual.innerWindowId,
+    "number",
+    "All requests have an innerWindowId attribute"
+  );
+  ok(
+    actual.targetFront.isTargetFront,
+    "All requests have a targetFront attribute"
+  );
+
   for (const name in expected) {
-    is(actual[name], expected[name], `The '${name}' attribute is correct`);
+    if (name == "targetFrontUrl") {
+      is(
+        actual.targetFront.url,
+        expected[name],
+        "The request matches the right target front"
+      );
+    } else {
+      is(actual[name], expected[name], `The '${name}' attribute is correct`);
+    }
   }
 }