1 files changed, 13 insertions, 4 deletions
diff --git a/devtools/client/debugger/src/utils/sources-tree/getURL.js b/devtools/client/debugger/src/utils/sources-tree/getURL.js
index c01fce5f23..5c9e7db6e5 100644
--- a/devtools/client/debugger/src/utils/sources-tree/getURL.js
+++ b/devtools/client/debugger/src/utils/sources-tree/getURL.js
@@ -56,6 +56,9 @@ const def = {
  *        This is augmented with custom properties like:
  *        - `group`, which is mostly the host of the source's URL.
  *          This is used to sort sources in the Source tree.
+ *        - `filename` which may not be quite matching the URL.
+ *           When files are loaded from "/", they won't have a real name,
+ *           but instead this will report "(index)".
  *        - `fileExtension`, lowercased file extension of the source
  *          (if any extension is available)
  *        - `path` and `pathname` have some special behavior.
@@ -66,8 +69,14 @@ export function getDisplayURL(url, extensionName = null) {
     return def;
   }
 
-  const { pathname, search, protocol, host } = parse(url);
-  const filename = getUnicodeUrlPath(getFilenameFromPath(pathname));
+  let { pathname, search, protocol, host } = parse(url);
+
+  // Decode encoded characters early so that all other code rely on decoded strings
+  pathname = getUnicodeUrlPath(pathname);
+  search = getUnicodeUrlPath(search);
+  host = getUnicodeHostname(host);
+
+  const filename = getFilenameFromPath(pathname);
 
   switch (protocol) {
     case "javascript:":
@@ -121,7 +130,7 @@ export function getDisplayURL(url, extensionName = null) {
         search,
         filename,
         fileExtension: getFileExtension("/"),
-        group: url,
+        group: getUnicodeUrlPath(url),
       };
 
     case "data:":
@@ -165,7 +174,7 @@ export function getDisplayURL(url, extensionName = null) {
         search,
         filename,
         fileExtension: getFileExtension(pathname),
-        group: getUnicodeHostname(host),
+        group: host,
       };
   }