Bug 1962993 - [devtools] Use URLSearchParams to build URL in HTTPCustomRequestPanel#onUpdateQueryParams. r=devtools-reviewers,bomsy

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

devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js

@@ -22,6 +22,7 @@ const {
   getClickedRequest,
 } = require("resource://devtools/client/netmonitor/src/selectors/index.js");
 const {
+  getUrl,
   getUrlQuery,
   parseQueryString,
 } = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
@@ -269,22 +270,18 @@ class HTTPCustomRequestPanel extends Component {
 
   onUpdateQueryParams() {
     const { urlQueryParams, url } = this.state;
-    let queryString = "";
+
+    const urlObj = getUrl(url);
+    urlObj.search = "";
+
     for (const { name, value, checked } of urlQueryParams) {
       if (checked) {
-        queryString += `${encodeURIComponent(name)}=${encodeURIComponent(
+        urlObj.searchParams.set(name, value);
-          value
-        )}&`;
       }
     }
 
-    let finalURL = url.split("?")[0];
-
-    if (queryString.length) {
-      finalURL += `?${queryString.substring(0, queryString.length - 1)}`;
-    }
     this.setState({
-      url: finalURL,
+      url: urlObj.toString(),
     });
   }
 

devtools/client/netmonitor/src/utils/request-utils.js

@@ -820,6 +820,7 @@ module.exports = {
   getResponseHeader,
   getResponseTime,
   getStartTime,
+  getUrl,
   getUrlBaseName,
   getUrlDetails,
   getUrlHost,

devtools/client/netmonitor/test/browser_net_new_request_panel_persisted_content.js

@@ -138,7 +138,7 @@ async function runTests(tab, monitor, document, isPrivate = false) {
 
     is(
       customUrl.value,
-      "https://www.example.com?My-param=",
+      "https://www.example.com/?My-param=",
       "The url should still be there after the user close the panel and re-opened"
     );