Bug 1745411 - [devtools] - Allows user to clear the content of the New Custom Request Panel. r=bomsy

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

devtools/client/locales/en-US/netmonitor.properties

@@ -1476,6 +1476,10 @@ netmonitor.custom.send=Send
 # on the button which cancels and closes the custom request form
 netmonitor.custom.cancel=Cancel
 
+# LOCALIZATION NOTE (netmonitor.custom.clear): This is the label displayed
+# on the button which clears the content of the new custom request panel
+netmonitor.custom.clear=Clear
+
 # LOCALIZATION NOTE (netmonitor.backButton): This is the label displayed
 # on the button which exists the performance statistics view
 netmonitor.backButton=Back

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

@@ -77,7 +77,9 @@
 
 .network-monitor .http-custom-request .http-custom-request-button-container {
   display: flex;
+  justify-content: end;
   flex-wrap: wrap-reverse;
+  justify-content: end;
   gap: 8px;
   margin-block: 16px 12px;
   margin-inline: 16px;
@@ -113,7 +115,7 @@
   background-color: var(--blue-70);
 }
 
-.network-monitor .http-custom-request #http-custom-request-close-button {
+.network-monitor .http-custom-request #http-custom-request-clear-button {
   margin-inline-end: 4px;
 }
 
@@ -132,7 +134,7 @@
 }
 
 :root.theme-dark .network-monitor .tabpanel-summary-container.http-custom-method-and-url {
-  border: 1px solid var(--grey-50);
+  border-bottom: 1px solid var(--grey-60);
 }
 
 :root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-method-value,
@@ -141,19 +143,19 @@
 }
 
 :root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value {
-  border-inline-start: 1px solid var(--grey-50);
+  border-inline-start: 1px solid var(--grey-60);
 }
 
-:root.theme-dark .network-monitor #http-custom-request-close-button {
+:root.theme-dark .network-monitor #http-custom-request-clear-button {
   background-color: var(--toolbarbutton-background);
   border: 1px solid var(--theme-splitter-color);
 }
 
-:root.theme-dark .network-monitor #http-custom-request-close-button:hover:active {
+:root.theme-dark .network-monitor #http-custom-request-clear-button:hover:active {
   background-color: var(--theme-selection-background-hover);
 }
 
-:root.theme-dark .network-monitor #http-custom-request-close-button:focus {
+:root.theme-dark .network-monitor #http-custom-request-clear-button:focus {
   background-color: var(--theme-selection-focus-background);
 }
 
@@ -175,7 +177,7 @@
 
 /* Light theme */
 :root.theme-light .network-monitor .tabpanel-summary-container.http-custom-method-and-url {
-  border: 1px solid var(--grey-30);
+  border-bottom: 1px solid var(--grey-30);
 }
 
 :root.theme-light .network-monitor .http-custom-method-and-url .http-custom-method-value {
@@ -191,16 +193,16 @@
   border-bottom: 1px solid var(--grey-25);
 }
 
-:root.theme-light .network-monitor #http-custom-request-close-button {
-  background-color: var(--grey-20);
+:root.theme-light .network-monitor #http-custom-request-clear-button {
+  background-color: var(--grey-25);
   border: var(--theme-splitter-color);
 }
 
-:root.theme-light .network-monitor #http-custom-request-close-button:hover:active {
+:root.theme-light .network-monitor #http-custom-request-clear-button:hover:active {
   background-color: var(--theme-selection-background-hover);
 }
 
-:root.theme-light .network-monitor #http-custom-request-close-button:focus {
+:root.theme-light .network-monitor #http-custom-request-clear-button:focus {
   outline: 2px solid var(--blue-50);
   outline-offset: -2px;
   box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);

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

@@ -29,6 +29,7 @@ const CUSTOM_NEW_REQUEST_URL_LABEL = L10N.getStr(
 const CUSTOM_POSTDATA = L10N.getStr("netmonitor.custom.postData");
 const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.query");
 const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
+const CUSTOM_CLEAR = L10N.getStr("netmonitor.custom.clear");
 
 /*
  * HTTP Custom request panel component
@@ -63,6 +64,7 @@ class HTTPCustomRequestPanel extends Component {
 
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleHeadersChange = this.handleHeadersChange.bind(this);
+    this.handleClear = this.handleClear.bind(this);
   }
 
   /**
@@ -109,6 +111,18 @@ class HTTPCustomRequestPanel extends Component {
     });
   }
 
+  handleClear() {
+    this.setState({
+      method: "",
+      url: "",
+      headers: {
+        customHeadersValue: "",
+        headers: [],
+      },
+      requestPostData: "",
+    });
+  }
+
   render() {
     const { sendCustomRequest } = this.props;
     const { method, requestPostData, url, headers } = this.state;
@@ -137,20 +151,6 @@ class HTTPCustomRequestPanel extends Component {
       { className: "http-custom-request-panel" },
       div(
         { className: "http-custom-request-panel-content" },
-        div(
-          { className: "tabpanel-summary-container http-custom-request" },
-          div(
-            { className: "http-custom-request-button-container" },
-            button(
-              {
-                className: "devtools-button",
-                id: "http-custom-request-send-button",
-                onClick: () => sendCustomRequest(this.state),
-              },
-              CUSTOM_SEND
-            )
-          )
-        ),
         div(
           {
             className: "tabpanel-summary-container http-custom-method-and-url",
@@ -182,6 +182,7 @@ class HTTPCustomRequestPanel extends Component {
             name: "url",
             placeholder: CUSTOM_NEW_REQUEST_URL_LABEL,
             onChange: this.handleInputChange,
+            onBlur: this.handleInputChange,
             value: url,
           })
         ),
@@ -253,6 +254,29 @@ class HTTPCustomRequestPanel extends Component {
             value: requestPostData,
             wrap: "off",
           })
+        ),
+        div(
+          { className: "tabpanel-summary-container http-custom-request" },
+          div(
+            { className: "http-custom-request-button-container" },
+            button(
+              {
+                className: "devtools-button",
+                id: "http-custom-request-clear-button",
+                onClick: this.handleClear,
+              },
+              CUSTOM_CLEAR
+            ),
+            button(
+              {
+                className: "devtools-button",
+                id: "http-custom-request-send-button",
+                disabled: !this.state.url,
+                onClick: () => sendCustomRequest(this.state),
+              },
+              CUSTOM_SEND
+            )
+          )
         )
       )
     );