From 55cc0e3f5cd9a3ebffa107b91eb2c9623f609170 Mon Sep 17 00:00:00 2001
From: Flavio De Stefano <flaviod@spotify.com>
Date: Wed, 5 May 2021 14:57:35 +0200
Subject: [PATCH] Adding support for multiple-entities in one request

---
 src/devtools/panel.js   | 22 ++++++++++++++++++----
 src/devtools/panel.scss | 17 +++++++++++++++++
 src/eventPage.js        | 25 +++++++++++++++++--------
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/devtools/panel.js b/src/devtools/panel.js
index c134831..bda346d 100644
--- a/src/devtools/panel.js
+++ b/src/devtools/panel.js
@@ -562,10 +562,14 @@ window.Omnibug = (() => {
      *
      * @param requestId
      */
-    function updateRedirectedEntries(requestId) {
+    function updateRedirectedEntries(requestId, multipleEntriesPerRequest) {
         let redirectedEntries = d.querySelectorAll(`.request[data-request-id="${requestId}"]`);
         redirectedEntries.forEach((entry) => {
-            entry.classList.add("redirected");
+            if (multipleEntriesPerRequest) {
+                entry.classList.add("multipled");
+            } else {
+                entry.classList.add("redirected");
+            }
         });
     }
 
@@ -630,7 +634,7 @@ window.Omnibug = (() => {
             body = createElement("div");
 
         // Update any redirected entries
-        updateRedirectedEntries(request.request.id);
+        updateRedirectedEntries(request.request.id, request.multipleEntriesPerRequest);
 
         // Setup parent details element
         if (settings.alwaysExpand) {
@@ -654,6 +658,16 @@ window.Omnibug = (() => {
                 },
                 "children": [colTitleRedirectIcon]
             }),
+            colTitleMultipleIcon = createElement("i", {
+                "classes": ["fas", "fa-table"]
+            }),
+            colTitleMultiple = createElement("small", {
+                "classes": ["multiple", "multiple-icon"],
+                "attributes": {
+                    "title": "This entry was part of a single request."
+                },
+                "children": [colTitleMultipleIcon]
+            }),
             colAccount = createElement("div", {
                 "classes": ["column", "col-3", "col-lg-4", "col-md-4", "col-sm-5"]
             }),
@@ -680,7 +694,7 @@ window.Omnibug = (() => {
 
         let colTitleWrapper = createElement("div", {
             "classes": ["column", "col-3", "col-lg-4", "col-md-4", "col-sm-5"],
-            "children": [requestTypeEl, colTitleSpan, colTitleRedirect],
+            "children": [requestTypeEl, colTitleSpan, colTitleRedirect, colTitleMultiple],
             "attributes": {
                 "title": `${request.provider.name} ${requestTypeValue.value}`
             }
diff --git a/src/devtools/panel.scss b/src/devtools/panel.scss
index 9f3165a..d152d8e 100644
--- a/src/devtools/panel.scss
+++ b/src/devtools/panel.scss
@@ -157,6 +157,9 @@ nav.navbar {
 .request:not(.redirected) .redirect {
   display: none;
 }
+.request:not(.multipled) .multiple {
+  display: none;
+}
 .request.redirected {
   .redirect-icon {
     margin-left: .5em;
@@ -171,6 +174,20 @@ nav.navbar {
     color: $warning-color;
   }
 }
+.request.multipled {
+  .multiple-icon {
+    margin-left: .5em;
+    color: $gray-color;
+  }
+  .request-note {
+    margin-top: 0.4rem;
+  }
+}
+.request.redirected:hover {
+  .redirect-icon {
+    color: $warning-color;
+  }
+}
 .request-details {
   > summary {
     font-weight: 600;
diff --git a/src/eventPage.js b/src/eventPage.js
index 68a84b1..d7cb9d9 100644
--- a/src/eventPage.js
+++ b/src/eventPage.js
@@ -99,14 +99,23 @@
                 }
             }
 
-            // Parse the URL and join our request info to the parsed data
-            data = Object.assign(
-                data,
-                OmnibugProvider.parseUrl(data.request.url, data.request.postData)
-            );
-
-            console.log("Matched URL, sending data to devtools", data);
-            tabs[details.tabId].port.postMessage(data);
+            let providerDataArray = OmnibugProvider.parseUrl(data.request.url, data.request.postData);
+            if (!Array.isArray(providerDataArray)) {
+                providerDataArray = [providerDataArray];
+            } else {
+                data.multipleEntriesPerRequest = true;
+            }
+
+            providerDataArray.forEach(providerData => {
+                // Parse the URL and join our request info to the parsed data
+                let finalData = Object.assign(
+                    data,
+                    providerData
+                );
+                console.log("Matched URL, sending data to devtools", finalData);
+                tabs[details.tabId].port.postMessage(finalData);
+            });
+
         },
         { urls: ["<all_urls>"] },
         ["requestBody"]