Bug 1747494 - [devtools] Should display only one request per URL for images from the cache r=ochameau

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

devtools/client/netmonitor/test/browser_net_image_cache.js

@@ -21,7 +21,7 @@ add_task(async function() {
   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
   store.dispatch(Actions.batchEnable(false));
 
-  const waitForEvents = waitForNetworkEvents(monitor, 4, {
+  const waitForEvents = waitForNetworkEvents(monitor, 2, {
     expectedEventTimings: 0,
     expectedPayloadReady: 1,
   });
@@ -37,7 +37,12 @@ add_task(async function() {
   await waitForEvents;
 
   const requests = document.querySelectorAll(".request-list-item");
-  is(requests.length, 4, "There should be 4 requests");
+
+  // Though there are 3 test-image.png images on the page, only 1 request
+  // representing the images from the cache should be shown. Therefore we
+  // expect 2 requests all together (1 for html_image-cache.html and 1 for
+  // test-image.png)
+  is(requests.length, 2, "There should be 2 requests");
 
   const requestData = {
     uri: HTTPS_EXAMPLE_URL + "test-image.png",

devtools/server/actors/resources/network-events-content.js

@@ -107,6 +107,15 @@ class NetworkEventContentWatcher {
       return;
     }
 
+    // Only one network request should be created per URI for images from the cache
+    const hasNetworkEventForURI = Array.from(this._networkEvents.values()).find(
+      networkEvent => networkEvent.url === channel.URI.spec
+    );
+
+    if (hasNetworkEventForURI) {
+      return;
+    }
+
     this.onNetworkEventAvailable(channel, {
       networkEventOptions: { fromCache: true },
       resourceOverrides: {
@@ -142,6 +151,7 @@ class NetworkEventContentWatcher {
     this._networkEvents.set(resource.resourceId, {
       resourceId: resource.resourceId,
       resourceType: resource.resourceType,
+      url: resource.url,
       types: [],
       resourceUpdates: {},
     });