Bug 1779972 - [devtools] Remove duplicated and unused ids in the Edit and Resend panel r=nchevobbe

Depends on D152008

Spotted a few HTML ids which were used in loops or shared components, and ended up duplicated

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

devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css

@@ -107,7 +107,7 @@
   overflow: auto;
 }
 
-#http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) {
+.http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) {
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -118,13 +118,13 @@
   padding-inline-end: 0;
 }
 
-#http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-name {
+.http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-name {
   width: 25%;
   align-self: stretch;
   min-width: min-content;
 }
 
-#http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-value {
+.http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-value {
   width: 75%;
   align-self: stretch;
 }
@@ -235,14 +235,14 @@
 
 :root.theme-dark .network-monitor .http-custom-method-and-url :is(.http-custom-method-value, .http-custom-url-value),
 :root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input,
-:root.theme-dark #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name,
-:root.theme-dark #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value {
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value {
   background-color: var(--grey-85);
   color: white;
 }
 
 :root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value,
-:root.theme-dark #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) #http-custom-input-value {
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) #http-custom-input-value {
   border-inline-start: 1px solid var(--grey-60);
 }
 
@@ -257,18 +257,18 @@
   width: calc(100% - 5px);
 }
 
-:root.theme-dark #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
   outline: 2px solid var(--blue-50);
   margin-inline-end: 1px;
 }
 
-:root.theme-dark #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
   outline: 2px solid var(--blue-50);
   width: calc(100% - 20px);
 }
 
-:root.theme-dark #http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value,
-:root.theme-dark #http-custom-query #http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+:root.theme-dark .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value,
+:root.theme-dark #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
   margin-inline-end: 1px;
 }
 
@@ -327,18 +327,18 @@
   width: calc(100% - 5px);
 }
 
-:root.theme-light #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
   outline: 2px solid var(--blue-50);
   margin-inline-end: 1px;
 }
 
-:root.theme-light #http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
   outline: 2px solid var(--blue-50);
   width: calc(100% - 20px);
 }
 
-:root.theme-light #http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value:focus,
-:root.theme-light #http-custom-query #http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+:root.theme-light .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value:focus,
+:root.theme-light #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
   margin-inline-end: 3px;
 }
 

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

@@ -74,18 +74,16 @@ class InputMap extends Component {
     return div(
       {
         ref: this.listRef,
-        id: "http-custom-input-and-map-form",
+        className: "http-custom-input-and-map-form",
       },
       list.map((item, index) => {
         return div(
           {
             className: "tabpanel-summary-container http-custom-input",
-            id: "http-custom-name-and-value",
             key: index,
           },
           input({
             className: "tabpanel-summary-input-checkbox",
-            id: "http-custom-input-checkbox",
             name: `checked-${index}`,
             type: "checkbox",
             onChange: event => {
@@ -153,7 +151,6 @@ class InputMap extends Component {
           },
           input({
             className: "tabpanel-summary-input-checkbox",
-            id: "http-custom-input-checkbox",
             onChange: () => {},
             checked: true,
             type: "checkbox",

devtools/client/netmonitor/test/browser_net_new_request_panel_persisted_content.js

@@ -68,7 +68,7 @@ add_task(async function() {
 
   const newHeaderValue = Array.from(
     document.querySelectorAll(
-      "#http-custom-headers #http-custom-name-and-value .http-custom-input-value"
+      "#http-custom-headers .http-custom-input .http-custom-input-value"
     )
   ).pop();
   newHeaderValue.focus();

devtools/client/netmonitor/test/browser_net_new_request_panel_send_request.js

@@ -107,7 +107,7 @@ add_task(async function() {
 
   const newHeaderValue = Array.from(
     document.querySelectorAll(
-      "#http-custom-headers #http-custom-name-and-value .http-custom-input-value"
+      "#http-custom-headers .http-custom-input .http-custom-input-value"
     )
   ).pop();
   newHeaderValue.focus();

devtools/client/netmonitor/test/browser_net_new_request_panel_sync_url_params.js

@@ -106,7 +106,7 @@ add_task(async function() {
 
   const newParameterValue = Array.from(
     document.querySelectorAll(
-      "#http-custom-query #http-custom-name-and-value .http-custom-input-value"
+      "#http-custom-query .http-custom-input .http-custom-input-value"
     )
   ).pop();
   newParameterValue.focus();
@@ -171,10 +171,10 @@ function assertQueryScenario(
 
   // Check if the parameter name and value are what we expect
   const parameterNames = document.querySelectorAll(
-    "#http-custom-query #http-custom-input-and-map-form .http-custom-input-name"
+    "#http-custom-query .http-custom-input-and-map-form .http-custom-input-name"
   );
   const parameterValues = document.querySelectorAll(
-    "#http-custom-query #http-custom-input-and-map-form .http-custom-input-value"
+    "#http-custom-query .http-custom-input-and-map-form .http-custom-input-value"
   );
 
   for (let i = 0; i < expectedParameters.length; i++) {